"use client";

import { useState } from "react";

import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
import FileUploadOutlinedIcon from "@mui/icons-material/FileUploadOutlined";

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

import { useAppLanguage } from "@/components/providers/app-language-provider";

import type { MinistryRgcDecisionRow } from "../data/ministry-rgc-decision-data";
import { useMinistryRgcDecisions } from "../hook/use-ministry-rgc-decisions";
import { MinistryRgcDecisionDetailScreen } from "../view-detail/rgc-decision-detail-screen";

import { MinistryRgcDecisionFilters } from "./ministry-rgc-decision-filters";
import { MinistryRgcDecisionSummary } from "./ministry-rgc-decision-summary";
import { MinistryRgcDecisionTable } from "./ministry-rgc-decision-table";
import {
  ministryRgcDecisionText,
  normalizeMinistryRgcDecisionLanguage,
} from "../ministry-rgc-decision-i18n";

export function MinistryRgcDecisionScreen() {
  const theme = useTheme();
  const { language } = useAppLanguage();
  const currentLanguage = normalizeMinistryRgcDecisionLanguage(language);
  const text = ministryRgcDecisionText[currentLanguage];
  const isDark = theme.palette.mode === "dark";

  const [selectedRow, setSelectedRow] =
    useState<MinistryRgcDecisionRow | null>(null);

  const {
    filteredRows,
    loading,
    error,

    selectedStatuses,
    selectedPrimaryAgencyIds,
    selectedCategoryIds,
    meetingDate,

    toggleStatus,
    togglePrimaryAgency,
    toggleCategory,

    selectAllStatuses,
    selectAllPrimaryAgencies,
    selectAllCategories,

    setMeetingDate,
    resetFilters,
    reload,
  } = useMinistryRgcDecisions();

  const solvedCount = filteredRows.filter(
    (row) => row.status === "Solved",
  ).length;

  const inProgressCount = filteredRows.filter(
    (row) => row.status === "In Progress",
  ).length;

  const notAddressedCount = filteredRows.filter(
    (row) => row.status === "Not Addressed",
  ).length;

  const primaryAgencyCount = new Set(
    filteredRows
      .map((row) => row.ministryId)
      .filter(
        (id): id is number =>
          typeof id === "number" &&
          Number.isInteger(id) &&
          id > 0,
      ),
  ).size;

  if (selectedRow) {
    return (
      <MinistryRgcDecisionDetailScreen
        decision={selectedRow}
        onBack={() => setSelectedRow(null)}
      />
    );
  }

  return (
    <Box
      sx={{
        width: "100%",
        minHeight: "calc(100vh - 64px)",
        px: {
          xs: 2,
          md: 3,
        },
        py: 2.5,
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
        overflowX: "hidden",
      }}
    >
      <Stack
        direction={{
          xs: "column",
          md: "row",
        }}
        spacing={2}
        sx={{
          mb: 2.2,
          alignItems: {
            xs: "stretch",
            md: "flex-start",
          },
          justifyContent: "space-between",
        }}
      >
        <Box>
          <Typography
            component="h1"
            sx={{
              color: theme.palette.text.primary,
              fontSize: {
                xs: 28,
                md: 32,
              },
              fontWeight: 800,
              lineHeight: 1.1,
            }}
          >
            {text.pageTitle}
          </Typography>

          <Typography
            sx={{
              mt: 1,
              color: theme.palette.text.primary,
              fontSize: 12,
              fontWeight: 500,
            }}
          >
            {text.pageSubtitle}
          </Typography>
        </Box>

        <Button
          variant="outlined"
          startIcon={
            <FileUploadOutlinedIcon
              sx={{
                fontSize: 17,
              }}
            />
          }
          endIcon={
            <ExpandMoreRoundedIcon
              sx={{
                fontSize: 17,
              }}
            />
          }
          sx={{
            height: 40,
            minWidth: 128,
            px: 1.7,
            borderRadius: "6px",
            textTransform: "none",
            color: theme.palette.primary.main,
            borderColor: theme.palette.primary.main,
            bgcolor: theme.palette.background.paper,
            fontSize: 12,
            fontWeight: 700,
            boxShadow: "none",

            "&:hover": {
              borderColor: theme.palette.primary.dark,
              bgcolor: alpha(
                theme.palette.primary.main,
                isDark ? 0.14 : 0.06,
              ),
              boxShadow: "none",
            },
          }}
        >
          {text.export}
        </Button>
      </Stack>

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

      <MinistryRgcDecisionFilters
        selectedStatuses={selectedStatuses}
        selectedPrimaryAgencyIds={
          selectedPrimaryAgencyIds
        }
        selectedCategoryIds={selectedCategoryIds}
        meetingDate={meetingDate}
        onToggleStatus={toggleStatus}
        onTogglePrimaryAgency={togglePrimaryAgency}
        onToggleCategory={toggleCategory}
        onSelectAllStatuses={selectAllStatuses}
        onSelectAllPrimaryAgencies={
          selectAllPrimaryAgencies
        }
        onSelectAllCategories={selectAllCategories}
        onMeetingDateChange={setMeetingDate}
        onReset={resetFilters}
      />

      <MinistryRgcDecisionSummary
        total={filteredRows.length}
        solved={solvedCount}
        inProgress={inProgressCount}
        notAddressed={notAddressedCount}
        primaryAgencies={primaryAgencyCount}
      />

      <Typography
        sx={{
          mt: 2.5,
          mb: 1.2,
          color: theme.palette.text.primary,
          fontSize: 16,
          fontWeight: 800,
        }}
      >
        {text.listTitle}
      </Typography>

      <MinistryRgcDecisionTable
        rows={filteredRows}
        loading={loading}
        onViewDetail={(row) => setSelectedRow(row)}
      />
    </Box>
  );
}

export default MinistryRgcDecisionScreen;