"use client";

import { useMemo, useState } from "react";
import type { ReactNode } from "react";

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

import { AgencyStatusCard } from "@/features/ministry/dashboard/components/charts/agency-status-card";
import { CategoryIssuesCard } from "@/features/ministry/dashboard/components/charts/category-issues-card";
import { OverallStatusCard } from "@/features/ministry/dashboard/components/charts/overall-status-card";
import { WorkingGroupStatusCard } from "@/features/ministry/dashboard/components/charts/dashboard-status-card";
import { DashboardPageContainer } from "@/features/ministry/dashboard/components/dashboard-page-container";
import { CdcGpsfDashboardFilters } from "@/features/cdc-gpsf/dashboard/components/cdc-gpsf-dashboard-filters";
import { CdcGpsfDashboardHeader } from "@/features/cdc-gpsf/dashboard/components/cdc-gpsf-dashboard-header";
import { CdcGpsfDashboardSummaryCards } from "@/features/cdc-gpsf/dashboard/components/cdc-gpsf-dashboard-summary-cards";
import { useCdcGpsfDashboardSummary } from "@/features/cdc-gpsf/dashboard/hook/use-cdc-gpsf-dashboard";
import {
  buildDashboardSummaryParams,
  mapAgenciesToAgencyRows,
  mapCardsToDonut,
  mapCardsToStatusCounts,
  mapCategoriesToRows,
  mapWorkingGroupsToRows,
} from "@/features/cdc-gpsf/dashboard/cdc-gpsf-dashboard-mappers";
import {
  defaultCdcGpsfDashboardFilters,
  type CdcGpsfDashboardFiltersValue,
} from "@/features/cdc-gpsf/dashboard/cdc-gpsf-dashboard-data";

type CdcGpsfDashboardScreenProps = {
  headerActions?: ReactNode;
};

export function CdcGpsfDashboardScreen({
  headerActions,
}: CdcGpsfDashboardScreenProps) {
  const theme = useTheme();

  const [filters, setFilters] = useState<CdcGpsfDashboardFiltersValue>({
    ...defaultCdcGpsfDashboardFilters,
  });

  // Only filters with a value become query params ("" = show everything).
  const summaryParams = useMemo(
    () => buildDashboardSummaryParams(filters),
    [filters],
  );
  const { summary, error } = useCdcGpsfDashboardSummary(summaryParams);

  // Reshape the API payload once per response so the charts do not restart
  // their animations every time something unrelated re-renders.
  const donutData = useMemo(() => mapCardsToDonut(summary.cards), [summary]);
  const statusCounts = useMemo(
    () => mapCardsToStatusCounts(summary.cards),
    [summary],
  );
  const agencyRows = useMemo(
    () => mapAgenciesToAgencyRows(summary.byPrimaryAgency),
    [summary],
  );
  const workingGroupRows = useMemo(
    () => mapWorkingGroupsToRows(summary.byWorkingGroup),
    [summary],
  );
  const categoryRows = useMemo(
    () => mapCategoriesToRows(summary.byCategory),
    [summary],
  );

  return (
    <DashboardPageContainer>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: 3,
          color: theme.palette.text.primary,
        }}
      >
        <CdcGpsfDashboardHeader actions={headerActions} />
        <CdcGpsfDashboardFilters filters={filters} onFiltersChange={setFilters} />
        <CdcGpsfDashboardSummaryCards summary={summary.cards} />

        {error ? (
          <Alert severity="error" sx={{ borderRadius: 2 }}>
            {error}
          </Alert>
        ) : null}

        <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 }}>
            <OverallStatusCard
              data={donutData}
              counts={statusCounts}
              centerValue={summary.cards.totalIssues}
            />
          </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={categoryRows} />
          </Box>
        </Box>
      </Box>
    </DashboardPageContainer>
  );
}