"use client";

import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";

import {
  alpha,
  useTheme,
} from "@mui/material/styles";

import {
  useAppLanguage,
} from "@/components/providers/app-language-provider";

import {
  evaluationFormText,
  getEvaluationFormFontClass,
  normalizeEvaluationFormLanguage,
} from "../evaluation-form-i18n";

import type {
  EvaluationSummary,
} from "../types/evaluation-form.types";

import {
  CheckIcon,
  ClockIcon,
  DocumentIcon,
  EyeIcon,
} from "./evaluation-icons";

type Props = {
  summary:
    EvaluationSummary;
};

export function EvaluationSummaryCards({
  summary,
}: Props) {
  const theme =
    useTheme();

  const {
    language,
  } =
    useAppLanguage();

  const lang =
    normalizeEvaluationFormLanguage(
      language,
    );

  const text =
    evaluationFormText[
      lang
    ];

  const fontClass =
    getEvaluationFormFontClass(
      lang,
    );

  const cards = [
    {
      key:
        "totalSubmissions" as const,

      title:
        text.totalSubmissions,

      subtitle:
        text.totalSubmissionsSubtitle,

      icon:
        DocumentIcon,

      color:
        theme.palette.primary.main,
    },

    {
      key:
        "pendingReview" as const,

      title:
        text.pendingReview,

      subtitle:
        text.pendingReviewSubtitle,

      icon:
        ClockIcon,

      color:
        theme.palette.warning.main,
    },

    {
      key:
        "reviewed" as const,

      title:
        text.reviewed,

      subtitle:
        text.reviewedSubtitle,

      icon:
        EyeIcon,

      color:
        theme.palette.info.main,
    },

    {
      key:
        "completed" as const,

      title:
        text.completed,

      subtitle:
        text.completedSubtitle,

      icon:
        CheckIcon,

      color:
        theme.palette.success.main,
    },
  ];

  return (
    <Box
      className={
        fontClass
      }
      sx={{
        display:
          "grid",

        gridTemplateColumns: {
          xs:
            "1fr",

          sm:
            "repeat(2, minmax(0, 1fr))",

          lg:
            "repeat(4, minmax(0, 1fr))",
        },

        gap:
          1.25,
      }}
    >
      {cards.map(
        (card) => {
          const Icon =
            card.icon;

          return (
            <Paper
              key={
                card.key
              }
              variant="outlined"
              sx={{
                minHeight:
                  108,

                px:
                  1.6,

                py:
                  1.4,

                display:
                  "flex",

                alignItems:
                  "center",

                gap:
                  1.4,

                borderRadius:
                  2,

                bgcolor:
                  "background.paper",

                borderColor:
                  "divider",

                boxShadow:
                  "none",
              }}
            >
              <Box
                sx={{
                  width:
                    52,

                  height:
                    52,

                  flexShrink:
                    0,

                  display:
                    "grid",

                  placeItems:
                    "center",

                  borderRadius:
                    2,

                  color:
                    card.color,

                  bgcolor:
                    alpha(
                      card.color,
                      theme.palette.mode ===
                        "dark"
                        ? 0.16
                        : 0.08,
                    ),

                  border:
                    `1px solid ${alpha(
                      card.color,
                      0.25,
                    )}`,
                }}
              >
                <Icon
                  size={
                    23
                  }
                />
              </Box>

              <Box
                sx={{
                  minWidth:
                    0,
                }}
              >
                <Box
                  sx={{
                    color:
                      "text.primary",

                    fontSize:
                      13,

                    fontWeight:
                      700,

                    lineHeight:
                      1.5,
                  }}
                >
                  {
                    card.title
                  }
                </Box>

                <Box
                  sx={{
                    mt:
                      0.1,

                    color:
                      "text.primary",

                    fontSize:
                      27,

                    fontWeight:
                      800,

                    lineHeight:
                      1,
                  }}
                >
                  {
                    summary[
                      card.key
                    ]
                  }
                </Box>

                <Box
                  sx={{
                    mt:
                      0.5,

                    color:
                      "text.secondary",

                    fontSize:
                      10.5,

                    lineHeight:
                      1.5,
                  }}
                >
                  {
                    card.subtitle
                  }
                </Box>
              </Box>
            </Paper>
          );
        },
      )}
    </Box>
  );
}