"use client";

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

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

import {
  FileCheckIcon,
  FileIcon,
  FileInprogressIcon,
  FileNotAddressedIcon,
} from "@/components/ui/icon";
import {
  StatsCards,
  type StatsCardItem,
} from "@/components/ui/stats-cards";
import { useWgIssueSummary } from "@/features/pswg/working-group-issues/hook/use-working-group-issues";
import { wgIssuesStatsCards } from "@/features/pswg/working-group-issues/wg-issues-data";
import {
  translateWgIssuesText,
  type WgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

type StatsCardIconComponent = ComponentType<SvgIconProps>;

const STATS_CARD_ICONS: Partial<Record<string, StatsCardIconComponent>> = {
  "Total Issues": FileIcon,
  Solved: FileCheckIcon,
  "In Progress": FileInprogressIcon,
  "Not Addressed": FileNotAddressedIcon,
};

const SUMMARY_VALUE_BY_LABEL: Record<
  string,
  (summary: {
    totalIssues: number;
    solved: number;
    inProgress: number;
    notAddressed: number;
  }) => string
> = {
  "Total Issues": (summary) => String(summary.totalIssues),
  Solved: (summary) => `${summary.solved}/${summary.totalIssues}`,
  "In Progress": (summary) => `${summary.inProgress}/${summary.totalIssues}`,
  "Not Addressed": (summary) =>
    `${summary.notAddressed}/${summary.totalIssues}`,
};

type WgIssuesStatsCardsProps = {
  language: WgIssuesLanguage;
};

export function WgIssuesStatsCards({ language }: WgIssuesStatsCardsProps) {
  const { data: summary } = useWgIssueSummary();

  const cards = useMemo<StatsCardItem[]>(() => {
    return wgIssuesStatsCards.map((card) => {
      const Icon = STATS_CARD_ICONS[card.label];
      const getValue = SUMMARY_VALUE_BY_LABEL[card.label];

      return {
        id: card.label,
        label: translateWgIssuesText(language, card.label),
        value: summary && getValue ? getValue(summary) : "-",
        backgroundColor: card.backgroundColor,
        borderColor: card.borderColor,
        icon: Icon ? <Icon sx={{ fontSize: 24 }} /> : undefined,
      };
    });
  }, [language, summary]);

  return <StatsCards cards={cards} sx={{ mt: 2.75 }} />;
}