"use client";

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

import {
  EARLY_PROGRESS_COLOR,
  IN_PROGRESS_COLOR,
} from "../../plenary-data";

import { ChartExportMenuButton } from "./chart-export-menu-button";
import { PlenaryChartCard } from "./plenary-chart-card";
import { PlenaryDonutChart } from "./plenary-donut-chart";
import { PlenaryLegend } from "./plenary-legend";

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

export function ImplementationStatusCard() {
  const theme = useTheme();

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

  return (
    <PlenaryChartCard>
      <Box
        sx={{
          display: "flex",
          alignItems: "flex-start",
          justifyContent: "space-between",
          gap: 2,
        }}
      >
        <Box
          sx={{
            flex: 1,
            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>

        <ChartExportMenuButton />
      </Box>

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

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

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