"use client";

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

import { WorkingGroupChartCard } from "@/features/pswg/working-group/components/charts/working-group-chart-card";
import { WorkingGroupLegend } from "@/features/pswg/working-group/components/charts/working-group-legend";
import { WorkingGroupStackedBarRow } from "@/features/pswg/working-group/components/charts/working-group-stacked-bar-row";
import { ExportIconButton } from "@/features/pswg/working-group/components/charts/export-icon-button";
import {
  IN_PROGRESS_COLOR,
  NOT_ADDRESSED_COLOR,
  SOLVED_COLOR,
  workingGroupRows,
} from "@/features/pswg/working-group/working-group-data";

const fadeUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

export function WorkingGroupStatusCard() {
  return (
    <WorkingGroupChartCard title="Working Group" action={<ExportIconButton />}>
      <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
        {workingGroupRows.map((row, index) => (
          <Box
            key={row.label}
            sx={{
              opacity: 0,
              animation: `${fadeUp} 0.35s ease forwards`,
              animationDelay: `${index * 0.045}s`,
            }}
          >
            <WorkingGroupStackedBarRow
              label={row.label}
              segments={[
                { value: row.solved, color: SOLVED_COLOR, label: row.solved },
                {
                  value: row.inProgress,
                  color: IN_PROGRESS_COLOR,
                  label: row.inProgress,
                },
                {
                  value: row.notAddressed,
                  color: NOT_ADDRESSED_COLOR,
                  label: row.notAddressed,
                },
              ]}
              labelWidth={190}
              rowHeight={14}
              labelFontSize={10}
            />
          </Box>
        ))}
      </Box>

      <WorkingGroupLegend
        items={[
          { label: "Solved", color: SOLVED_COLOR },
          { label: "In Progress", color: IN_PROGRESS_COLOR },
          { label: "Not Addressed", color: NOT_ADDRESSED_COLOR },
        ]}
      />
    </WorkingGroupChartCard>
  );
}