"use client";

import { useState } from "react";

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

import { PlenaryPageContainer } from "./components/plenary-page-container";
import { PlenaryFilters } from "./components/plenary-filters";
import { PlenaryHeader } from "./components/plenary-header";
import { PlenarySummaryCards } from "./components/plenary-summary-cards";

import { AgencyStatusCard } from "./components/charts/agency-status-card";
import { ImplementationStatusCard } from "./components/charts/implementation-status-card";
import { MeasureCategoryCard } from "./components/charts/measure-category-card";
import { WorkingGroupNameCard } from "./components/charts/working-group-name-card";

import {
  defaultPlenaryFilters,
  type PlenaryFiltersValue,
} from "./plenary-data";

export function DashboardScreen() {
  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: 3,
          }}
        >
          <Box
            sx={{
              flex: {
                xs: "1 1 100%",
                md: "0 0 486px",
              },
              minWidth: 0,
            }}
          >
            <ImplementationStatusCard />
          </Box>

          <Box
            sx={{
              flex: {
                xs: "1 1 100%",
                md: "1 1 666px",
              },
              minWidth: 0,
            }}
          >
            <AgencyStatusCard />
          </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,
            }}
          >
            <MeasureCategoryCard />
          </Box>

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