"use client";

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

import { DashboardCard } from "@/features/ministry/dashboard/components/charts/dashboard-card";
import { DashboardDonutChart } from "@/features/ministry/dashboard/components/charts/dashboard-donut-chart";
import { DashboardLegend } from "@/features/ministry/dashboard/components/charts/dashboard-legend";
import { ExportIconButton } from "@/features/ministry/dashboard/components/charts/export-icon-button";
import {
  EARLY_PROGRESS_COLOR,
  IN_PROGRESS_COLOR,
  MID_PROGRESS_COLOR,
} from "@/features/pswg/plenary/plenary-data";

// The Figma design shows two donuts side by side in one card: the overall
// solved/in-progress split, and a breakdown of the in-progress issues into
// mid/early progress. The shared dashboard kit only has a single-donut card,
// so this composes the shared DashboardCard/DashboardDonutChart/
// DashboardLegend pieces into the two-donut layout instead of duplicating
// them into a brand new bespoke card.
export function OverallImplementationCard() {
  const theme = useTheme();

  const implementationData = [
    {
      label: "Solved",
      value: 166,
      color: theme.palette.success.main,
      labelText: "92.73%",
    },
    {
      label: "In Progress",
      value: 13,
      color: IN_PROGRESS_COLOR,
      labelText: "7.27%",
    },
  ];

  const progressBreakdownData = [
    {
      label: "Mid Progress",
      value: 12,
      color: MID_PROGRESS_COLOR,
      labelText: "92.3%",
    },
    {
      label: "Early Progress",
      value: 1,
      color: EARLY_PROGRESS_COLOR,
      labelText: "7.7%",
    },
  ];

  return (
    <DashboardCard action={<ExportIconButton />}>
      <Box
        sx={{
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          gap: 1.5,
        }}
      >
        <Typography
          sx={{
            flex: 1,
            color: theme.palette.text.secondary,
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          Overall Implementation Status
        </Typography>

        <Typography
          sx={{
            flex: 1,
            color: theme.palette.text.secondary,
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          In Progress Status
        </Typography>
      </Box>

      <Box
        sx={{
          mt: 1,
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          alignItems: "stretch",
          gap: 1.5,
        }}
      >
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <DashboardDonutChart
            centerLabel="Total Issues"
            centerValue="179"
            data={implementationData}
            height={250}
          />
        </Box>

        <Box sx={{ flex: 1, minWidth: 0 }}>
          <DashboardDonutChart
            centerLabel="In Progress"
            centerValue="13"
            data={progressBreakdownData}
            height={250}
          />
        </Box>
      </Box>

      <DashboardLegend
        items={[
          { label: "Solved", color: theme.palette.success.main },
          { label: "In Progress", color: IN_PROGRESS_COLOR },
          { label: "Mid Progress", color: MID_PROGRESS_COLOR },
          { label: "Early Progress", color: EARLY_PROGRESS_COLOR },
        ]}
      />
    </DashboardCard>
  );
}