"use client";

import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import EditNoteRoundedIcon from "@mui/icons-material/EditNoteRounded";
import FileDownloadDoneRoundedIcon from "@mui/icons-material/FileDownloadDoneRounded";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";

import {
  Box,
  Paper,
  Stack,
  Typography,
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";

import { useAppLanguage } from "@/components/providers/app-language-provider";
import {
  ministryRgcDecisionText,
  normalizeMinistryRgcDecisionLanguage,
} from "../ministry-rgc-decision-i18n";

type Tone =
  | "blue"
  | "green"
  | "orange"
  | "red"
  | "gray";

const toneStyles = {
  blue: {
    border: "#B6DBF6",
    background: "#DDEFFC",
    icon: "#1687E0",
  },
  green: {
    border: "#C4EFD3",
    background: "#EAFBF1",
    icon: "#16A34A",
  },
  orange: {
    border: "#F7DEA2",
    background: "#FFF7E6",
    icon: "#F59E0B",
  },
  red: {
    border: "#F5D0D0",
    background: "#FFF0F0",
    icon: "#EF4444",
  },
  gray: {
    border: "#D6D9DE",
    background: "#E9EAEC",
    icon: "#667085",
  },
} satisfies Record<
  Tone,
  {
    border: string;
    background: string;
    icon: string;
  }
>;

function SummaryCard({
  label,
  value,
  tone,
  icon,
}: {
  label: string;
  value: string;
  tone: Tone;
  icon: React.ReactNode;
}) {
  const theme = useTheme();
  const styles = toneStyles[tone];
  const isDark =
    theme.palette.mode === "dark";

  return (
    <Paper
      elevation={0}
      sx={{
        width: "100%",
        height: 96,
        px: "22px",
        display: "flex",
        alignItems: "center",
        borderRadius: "8px",
        border: `1px solid ${
          isDark
            ? alpha(styles.border, 0.4)
            : styles.border
        }`,
        bgcolor: isDark
          ? alpha(styles.icon, 0.08)
          : styles.background,
      }}
    >
      <Stack
        direction="row"
        sx={{
          width: "100%",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 1.5,
        }}
      >
        <Box sx={{ minWidth: 0 }}>
          <Typography
            sx={{
              color: theme.palette.text.secondary,
              fontSize: 12,
              fontWeight: 500,
              lineHeight: "18px",
              whiteSpace: "nowrap",
            }}
          >
            {label}
          </Typography>

          <Typography
            sx={{
              mt: 0.5,
              color: theme.palette.text.primary,
              fontSize: 22,
              fontWeight: 800,
              lineHeight: "28px",
              whiteSpace: "nowrap",
            }}
          >
            {value}
          </Typography>
        </Box>

        <Box
          sx={{
            width: 42,
            height: 42,
            display: "grid",
            placeItems: "center",
            flexShrink: 0,
            borderRadius: "8px",
            bgcolor:
              theme.palette.background.paper,
            color: styles.icon,
            border: `1px solid ${styles.border}`,

            "& svg": {
              fontSize: 22,
            },
          }}
        >
          {icon}
        </Box>
      </Stack>
    </Paper>
  );
}

export function MinistryRgcDecisionSummary({
  total,
  solved,
  inProgress,
  notAddressed,
  primaryAgencies,
}: {
  total: number;
  solved: number;
  inProgress: number;
  notAddressed: number;
  primaryAgencies: number;
}) {
  const { language } = useAppLanguage();
  const currentLanguage = normalizeMinistryRgcDecisionLanguage(language);
  const text = ministryRgcDecisionText[currentLanguage];

  return (
    <Box
      sx={{
        width: "100%",
        mb: 2.2,
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: "1fr 1fr",
          lg: "repeat(5, minmax(0, 1fr))",
        },
        gap: 1.25,
      }}
    >
      <SummaryCard
        label={text.totalIssues}
        value={String(total)}
        tone="blue"
        icon={<ContentCopyRoundedIcon />}
      />

      <SummaryCard
        label={text.solved}
        value={`${solved}/${total}`}
        tone="green"
        icon={<FileDownloadDoneRoundedIcon />}
      />

      <SummaryCard
        label={text.inProgress}
        value={`${inProgress}/${total}`}
        tone="orange"
        icon={<EditNoteRoundedIcon />}
      />

      <SummaryCard
        label={text.notAddressed}
        value={`${notAddressed}/${total}`}
        tone="red"
        icon={<DescriptionOutlinedIcon />}
      />

      <SummaryCard
        label={text.totalPrimaryAgencies}
        value={String(primaryAgencies)}
        tone="gray"
        icon={<InsertDriveFileOutlinedIcon />}
      />
    </Box>
  );
}

export default MinistryRgcDecisionSummary;