"use client";

import type { ComponentType } 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";

export type DraftDashboardSummaryValues = {
  totalIssues: number;
  solved: number;
  inProgress: number;
  notAddressed: number;
  totalPrimaryAgencies: number;
  totalMinistries: number;
};

type StatsCardIconComponent = ComponentType<SvgIconProps>;

// Card titles, so the page can pass them in its own language.
export type DraftDashboardSummaryLabels = {
  totalIssues: string;
  solved: string;
  inProgress: string;
  notAddressed: string;
  totalPrimaryAgencies: string;
};

const defaultLabels: DraftDashboardSummaryLabels = {
  totalIssues: "Total Issues",
  solved: "Solved",
  inProgress: "In Progress",
  notAddressed: "Not Addressed",
  totalPrimaryAgencies: "Total Primary Agencies",
};

type DraftDashboardSummaryCardsProps = {
  summary: DraftDashboardSummaryValues;
  // Writes the card numbers in the page's own digits.
  formatNumber?: (value: number) => string;
  labels?: DraftDashboardSummaryLabels;
};

export function DraftDashboardSummaryCards({
  summary,
  labels = defaultLabels,
  formatNumber = String,
}: DraftDashboardSummaryCardsProps) {
  const cardConfig: {
    id: string;
    label: string;
    value: string;
    backgroundColor: string;
    borderColor: string;
    Icon: StatsCardIconComponent;
  }[] = [
    {
      id: "totalIssues",
      label: labels.totalIssues,
      value: formatNumber(summary.totalIssues),
      backgroundColor: "#ddedfb",
      borderColor: "#b6dbf6",
      Icon: FileIcon,
    },
    {
      id: "solved",
      label: labels.solved,
      value: `${formatNumber(summary.solved)}/${formatNumber(summary.totalIssues)}`,
      backgroundColor: "#ecfdf3",
      borderColor: "#d1fadf",
      Icon: FileCheckIcon,
    },
    {
      id: "inProgress",
      label: labels.inProgress,
      value: `${formatNumber(summary.inProgress)}/${formatNumber(summary.totalIssues)}`,
      backgroundColor: "#fffaeb",
      borderColor: "#fef0c7",
      Icon: FileInprogressIcon,
    },
    {
      id: "notAddressed",
      label: labels.notAddressed,
      value: `${formatNumber(summary.notAddressed)}/${formatNumber(summary.totalIssues)}`,
      backgroundColor: "#fef3f2",
      borderColor: "#fee4e2",
      Icon: FileNotAddressedIcon,
    },
    {
      id: "totalPrimaryAgencies",
      label: labels.totalPrimaryAgencies,
      value: `${formatNumber(summary.totalPrimaryAgencies)}/${formatNumber(summary.totalMinistries)}`,
      backgroundColor: "#e9eaeb",
      borderColor: "#d5d7da",
      Icon: File2Icon,
    },
  ];

  const cards: StatsCardItem[] = cardConfig.map(
    ({ id, label, value, backgroundColor, borderColor, Icon }) => ({
      id,
      label,
      value,
      backgroundColor,
      borderColor,
      icon: <Icon sx={{ fontSize: 24 }} />,
    }),
  );

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