"use client";

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

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

import {
  FileCheckIcon,
  FileNotAddressedIcon,
  ministryIcon,
  privateSectorIcon,
  stakeholdersIcon,
} from "@/components/ui/icon";
import { StatsCards, type StatsCardItem } from "@/components/ui/stats-cards";
import type { StakeholderDashboardSummary } from "@/features/stakeholder/stakeholder-data";

type StakeholderSummaryCardsProps = {
  summary: StakeholderDashboardSummary;
};

type StakeholderSummaryCardKey =
  | "totalStakeholders"
  | "activeStakeholders"
  | "inactiveStakeholders"
  | "ministry"
  | "privateSector";

type StatsCardIconComponent = ComponentType<SvgIconProps>;

const STAKEHOLDER_SUMMARY_CARD_CONFIG: {
  id: StakeholderSummaryCardKey;
  label: string;
  backgroundColor: string;
  borderColor: string;
  Icon: StatsCardIconComponent;
  iconColor?: string;
}[] = [
  {
    id: "totalStakeholders",
    label: "Total Stakeholders",
    backgroundColor: "#ddedfb",
    borderColor: "#b6dbf6",
    Icon: stakeholdersIcon,
    iconColor: "#1a64a8",
  },
  {
    id: "activeStakeholders",
    label: "Active",
    backgroundColor: "#ecfdf3",
    borderColor: "#d1fadf",
    Icon: FileCheckIcon,
  },
  {
    id: "inactiveStakeholders",
    label: "Inactive",
    backgroundColor: "#fef3f2",
    borderColor: "#fee4e2",
    Icon: FileNotAddressedIcon,
  },
  {
    id: "ministry",
    label: "Ministry",
    backgroundColor: "#eff8ff",
    borderColor: "#b2ddff",
    Icon: ministryIcon,
    iconColor: "#175cd3",
  },
  {
    id: "privateSector",
    label: "Private Sector",
    backgroundColor: "#f9f5ff",
    borderColor: "#e9d7fe",
    Icon: privateSectorIcon,
    iconColor: "#6941c6",
  },
];

function getTypeCount(
  summary: StakeholderDashboardSummary,
  typeName: string,
) {
  const normalizedName = typeName.toUpperCase().replace(/\s+/g, "_");

  return (
    summary.stakeholderTypes.find(
      (type) =>
        type.name.toUpperCase().replace(/\s+/g, "_") === normalizedName,
    )?.stakeholderCount ?? 0
  );
}

export function StakeholderSummaryCards({
  summary,
}: StakeholderSummaryCardsProps) {
  const cards = useMemo<StatsCardItem[]>(() => {
    const totalStakeholders = summary.totalStakeholders;

    const values: Record<StakeholderSummaryCardKey, string> = {
      totalStakeholders: String(totalStakeholders),
      activeStakeholders: `${summary.activeStakeholders}/${totalStakeholders}`,
      inactiveStakeholders: `${summary.inactiveStakeholders}/${totalStakeholders}`,
      ministry: String(getTypeCount(summary, "Ministry")),
      privateSector: String(getTypeCount(summary, "Private Sector")),
    };

    return STAKEHOLDER_SUMMARY_CARD_CONFIG.map(
      ({ id, label, backgroundColor, borderColor, Icon, iconColor }) => ({
        id,
        label,
        value: values[id],
        backgroundColor,
        borderColor,
        icon: (
          <Icon
            sx={{
              fontSize: 24,
              ...(iconColor ? { color: iconColor } : {}),
            }}
          />
        ),
      }),
    );
  }, [summary]);

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