"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import type { ChartExportFormat } from "@/components/ui/chart-export-menu-button";
import { DashboardCard } from "@/features/ministry/dashboard/components/charts/dashboard-card";
import { ExportIconButton } from "@/features/ministry/dashboard/components/charts/export-icon-button";
import { DashboardDonutChart } from "@/features/ministry/dashboard/components/charts/dashboard-donut-chart";
import {
  overallStatusCounts,
  overallStatusData,
  type DonutChartItem,
  type StatusCountItem,
} from "@/features/ministry/dashboard/dashboard-data";

type OverallStatusCardProps = {
  // Donut slices. Defaults to the design mock so screens that render this
  // card without props (e.g. the ministry dashboard) keep working.
  data?: DonutChartItem[];
  // Legend rows shown to the right of the donut.
  counts?: StatusCountItem[];
  // Big number in the middle of the donut.
  centerValue?: string | number;
  // Called when the user picks CSV / XLSX / Image from the save icon.
  // Optional: screens that do not pass it keep today's do-nothing icon.
  onExport?: (format: ChartExportFormat) => void;
};

export function OverallStatusCard({
  data = overallStatusData,
  counts = overallStatusCounts,
  centerValue = "20",
  onExport,
}: OverallStatusCardProps) {
  const theme = useTheme();

  return (
    <DashboardCard
      title="Overall Implementation Status"
      action={<ExportIconButton onExport={onExport} />}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          alignItems: "center",
          justifyContent: "space-between",
          gap: 2.5,
        }}
      >
        <Box sx={{ width: { xs: "100%", sm: 280 } }}>
          <DashboardDonutChart
            centerLabel="Total Issues"
            centerValue={centerValue}
            data={data}
            height={220}
          />
        </Box>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 1.25, minWidth: 0 }}>
          {counts.map((item) => (
            <Box key={item.label} sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
              <Box
                sx={{
                  width: 10,
                  height: 10,
                  borderRadius: "50%",
                  bgcolor: item.color,
                  flexShrink: 0,
                }}
              />

              <Typography
                sx={{
                  minWidth: 100,
                  color: theme.palette.text.secondary,
                  fontSize: 12,
                }}
              >
                {item.label}
              </Typography>

              <Typography
                sx={{
                  color: theme.palette.text.primary,
                  fontSize: 13,
                  fontWeight: 700,
                }}
              >
                ({item.count})
              </Typography>
            </Box>
          ))}
        </Box>
      </Box>
    </DashboardCard>
  );
}