"use client";

import { useState } from "react";

import { Alert, Box, Button, Stack, Typography } from "@mui/material";
import { useTheme } from "@mui/material/styles";

import type { RgcDecisionRow } from "../rgc-decision-data";
import { useRgcDecisions } from "../hook/use-rgc-decisions";

import { RgcDecisionDetailScreen } from "../view-detail/rgc-decision-detail-screen";
import { CreateRgcDecisionDialog } from "./create-rgc-decision-dialog";
import { RgcDecisionFilters } from "./rgc-decision-filters";
import { RgcDecisionHeader } from "./rgc-decision-header";
import { RgcDecisionTable } from "./rgc-decision-table";

export function CdcGpsfRgcDecisionScreen() {
  const theme = useTheme();
  const [createOpen, setCreateOpen] = useState(false);
  const [selectedDecision, setSelectedDecision] = useState<RgcDecisionRow | null>(null);

  const {
    filteredRows,
    ministries,
    plenaries,
    categories,
    indicators,
    loading,
    lookupsLoading,
    creating,
    error,
    selectedStatuses,
    selectedPrimaryAgencyIds,
    selectedCategoryIds,
    meetingDate,
    toggleStatus,
    togglePrimaryAgency,
    toggleCategory,
    setMeetingDate,
    resetFilters,
    createDecision,
    reload,
  } = useRgcDecisions();

  if (selectedDecision) {
    return (
      <RgcDecisionDetailScreen
        row={selectedDecision}
        onBack={() => setSelectedDecision(null)}
      />
    );
  }

  return (
    <Box
      sx={{
        width: "100%",
        maxWidth: "100%",
        minHeight: "calc(100vh - 64px)",
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
        px: { xs: 2, md: 3 },
        py: 2.5,
        overflowX: "hidden",
      }}
    >
      <RgcDecisionHeader onCreate={() => setCreateOpen(true)} />

      {error ? (
        <Alert
          severity="error"
          sx={{ mb: 2 }}
          action={
            <Button color="inherit" size="small" onClick={() => void reload()}>
              Reload
            </Button>
          }
        >
          {error}
        </Alert>
      ) : null}

      <RgcDecisionFilters
        ministries={ministries}
        categories={categories}
        selectedStatuses={selectedStatuses}
        selectedPrimaryAgencyIds={selectedPrimaryAgencyIds}
        selectedCategoryIds={selectedCategoryIds}
        meetingDate={meetingDate}
        onToggleStatus={toggleStatus}
        onTogglePrimaryAgency={togglePrimaryAgency}
        onToggleCategory={toggleCategory}
        onMeetingDateChange={setMeetingDate}
        onReset={resetFilters}
      />

      <Stack direction="row" sx={{ mb: 1.5, alignItems: "center", justifyContent: "space-between" }}>
        <Typography sx={{ color: theme.palette.text.primary, fontSize: 16, fontWeight: 800 }}>
          List of RGC Decisions
        </Typography>
      </Stack>

      <RgcDecisionTable
        rows={filteredRows}
        loading={loading}
        onViewDetail={(row) => setSelectedDecision(row)}
      />

      <CreateRgcDecisionDialog
        open={createOpen}
        onClose={() => setCreateOpen(false)}
        ministries={ministries}
        plenaries={plenaries}
        categories={categories}
        indicators={indicators}
        lookupsLoading={lookupsLoading}
        submitting={creating}
        onSubmit={async (input) => {
          await createDecision(input);
        }}
      />
    </Box>
  );
}

export default CdcGpsfRgcDecisionScreen;