"use client";

import { useState } from "react";

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

import { PlenaryPageContainer } from "@/features/pswg/plenary/components/plenary-page-container";
import { PlenaryFilters } from "@/features/pswg/plenary/components/plenary-filters";
import { PlenaryHeader } from "@/features/pswg/plenary/components/plenary-header";
import { PlenarySummaryCards } from "@/features/pswg/plenary/components/plenary-summary-cards";
import { OverallImplementationCard } from "@/features/pswg/plenary/components/charts/overall-implementation-card";
import {
  agencyRows,
  defaultPlenaryFilters,
  measureCategoryRows,
  workingGroupRows,
  type PlenaryFiltersValue,
} from "@/features/pswg/plenary/plenary-data";
import { AgencyStatusCard } from "@/features/ministry/dashboard/components/charts/agency-status-card";
import { CategoryIssuesCard } from "@/features/ministry/dashboard/components/charts/category-issues-card";
import { WorkingGroupStatusCard } from "@/features/ministry/dashboard/components/charts/dashboard-status-card";

// The measure-category chart only shows one bar per category (no
// solved/in-progress split), so we collapse each row down to a single total.
const categoryIssueRows = measureCategoryRows.map((row) => ({
  label: row.label,
  value: row.solved + row.inProgress + row.notAddressed,
}));

export function PlenaryScreen() {
  const theme = useTheme();
  const [filters, setFilters] = useState<PlenaryFiltersValue>({
    ...defaultPlenaryFilters,
  });

  return (
    <PlenaryPageContainer>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: 2,
          color: theme.palette.text.primary,
          bgcolor: "transparent",
        }}
      >
        <PlenaryHeader />

        <PlenaryFilters
          filters={filters}
          onFiltersChange={setFilters}
        />

        <PlenarySummaryCards />

        <Box
          sx={{
            display: "flex",
            flexWrap: { xs: "wrap", md: "nowrap" },
            alignItems: "stretch",
            gap: 2.75,
          }}
        >
          <Box sx={{ flex: { xs: "1 1 100%", md: "0 0 486px" }, minWidth: 0 }}>
            <OverallImplementationCard />
          </Box>

          <Box sx={{ flex: { xs: "1 1 100%", md: "1 1 0" }, minWidth: 0 }}>
            <AgencyStatusCard rows={agencyRows} />
          </Box>
        </Box>

        <Box
          sx={{
            display: "flex",
            flexWrap: { xs: "wrap", md: "nowrap" },
            alignItems: "stretch",
            gap: 2.75,
          }}
        >
          <Box sx={{ flex: { xs: "1 1 100%", md: "1 1 0" }, minWidth: 0 }}>
            <WorkingGroupStatusCard rows={workingGroupRows} />
          </Box>

          <Box sx={{ flex: { xs: "1 1 100%", md: "1 1 0" }, minWidth: 0 }}>
            <CategoryIssuesCard rows={categoryIssueRows} />
          </Box>
        </Box>
      </Box>
    </PlenaryPageContainer>
  );
}