"use client";

import type { ComponentType } from "react";
import { useMemo } from "react";

import type { SvgIconProps } from "@mui/material/SvgIcon";

import {
  File2Icon,
  FileCheckIcon,
  FileIcon,
  FileInprogressIcon,
  FileNotAddressedIcon,
} from "@/components/ui/icon";
import { StatsCards, type StatsCardItem } from "@/components/ui/stats-cards";

import type { CdcIssueMatrixSummary } from "./cdc-issue-matrix-data";
import {
  cdcIssueMatrixText,
  type IssueMatrixLanguage,
} from "./cdc-issue-matrix-i18n";

type CdcIssueMatrixStatusCardsProps = {
  language: IssueMatrixLanguage;
  summary: CdcIssueMatrixSummary;
};

type CdcIssueMatrixStatusCardKey =
  | "totalIssues"
  | "solved"
  | "inProgress"
  | "notAddressed"
  | "totalPrimaryAgencies";

type StatsCardIconComponent = ComponentType<SvgIconProps>;

const CDC_ISSUE_MATRIX_STATUS_CARD_CONFIG: {
  id: CdcIssueMatrixStatusCardKey;
  backgroundColor: string;
  borderColor: string;
  Icon: StatsCardIconComponent;
}[] = [
  {
    id: "totalIssues",
    backgroundColor: "#ddedfb",
    borderColor: "#b6dbf6",
    Icon: FileIcon,
  },
  {
    id: "solved",
    backgroundColor: "#ecfdf3",
    borderColor: "#d1fadf",
    Icon: FileCheckIcon,
  },
  {
    id: "inProgress",
    backgroundColor: "#fffaeb",
    borderColor: "#fef0c7",
    Icon: FileInprogressIcon,
  },
  {
    id: "notAddressed",
    backgroundColor: "#fef3f2",
    borderColor: "#fee4e2",
    Icon: FileNotAddressedIcon,
  },
  {
    id: "totalPrimaryAgencies",
    backgroundColor: "#e9eaeb",
    borderColor: "#d5d7da",
    Icon: File2Icon,
  },
];

export function CdcIssueMatrixStatusCards({
  language,
  summary,
}: CdcIssueMatrixStatusCardsProps) {
  const text = cdcIssueMatrixText[language] ?? cdcIssueMatrixText.en;
  const totalIssues = summary.totalIssues;

  const cards = useMemo<StatsCardItem[]>(() => {
    const values: Record<CdcIssueMatrixStatusCardKey, string> = {
      totalIssues: String(totalIssues),
      solved: `${summary.solved}/${totalIssues}`,
      inProgress: `${summary.inProgress}/${totalIssues}`,
      notAddressed: `${summary.notAddressed}/${totalIssues}`,
      totalPrimaryAgencies: String(summary.totalPrimaryAgencies),
    };

    const labels: Record<CdcIssueMatrixStatusCardKey, string> = {
      totalIssues: text.totalIssues,
      solved: text.solved,
      inProgress: text.inProgress,
      notAddressed: text.notAddressed,
      totalPrimaryAgencies: text.totalPrimaryAgencies,
    };

    return CDC_ISSUE_MATRIX_STATUS_CARD_CONFIG.map(
      ({ id, backgroundColor, borderColor, Icon }) => ({
        id,
        label: labels[id],
        value: values[id],
        backgroundColor,
        borderColor,
        icon: <Icon sx={{ fontSize: 24 }} />,
      }),
    );
  }, [
    summary.inProgress,
    summary.notAddressed,
    summary.solved,
    summary.totalPrimaryAgencies,
    text,
    totalIssues,
  ]);

  return (
    <StatsCards
      cards={cards}
      sx={{
        gridTemplateColumns: {
          xs: "1fr",
          sm: "repeat(2, minmax(0, 1fr))",
          lg: "repeat(4, minmax(0, 1fr)) minmax(240px, 1.3fr)",
        },
      }}
    />
  );
}