"use client";

import { useMemo, useState } from "react";

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

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

import {
  useCdcIssueMatrixList,
  useCdcIssueMatrixSummary,
} from "../hook/use-cdc-issue-matrix";

import {
  CdcIssueMatrixFilters,
  defaultCdcIssueMatrixFilters,
  type CdcIssueMatrixFilterOptions,
  type CdcIssueMatrixFilterState,
} from "./cdc-issue-matrix-filters";
import { CdcIssueMatrixGrid } from "./cdc-issue-matrix-grid";
import { CdcIssueMatrixHeader } from "./cdc-issue-matrix-header";
import { CdcIssueMatrixStatusCards } from "./cdc-issue-matrix-status-cards";
import { CdcIssueMatrixTable } from "./cdc-issue-matrix-table";
import type { CdcIssueMatrixView } from "./cdc-issue-matrix-view-toggle";
import { CDC_ISSUE_MATRIX_STATUS_FILTER_OPTIONS } from "./cdc-issue-matrix-data";
import { normalizeCdcIssueMatrixLanguage } from "./cdc-issue-matrix-i18n";

export function CdcIssueMatrixScreen() {
  const theme = useTheme();
  const { language } = useAppLanguage();
  const matrixLanguage = normalizeCdcIssueMatrixLanguage(language);

  const {
    rows,
    isLoading: isLoadingRows,
    error: rowsError,
  } = useCdcIssueMatrixList();
  const { summary, isLoading: isLoadingSummary } = useCdcIssueMatrixSummary();

  const [search, setSearch] = useState("");
  const [view, setView] = useState<CdcIssueMatrixView>("list");
  const [filters, setFilters] = useState<CdcIssueMatrixFilterState>({
    ...defaultCdcIssueMatrixFilters,
  });

  const filterOptions = useMemo<CdcIssueMatrixFilterOptions>(() => {
    const getUniqueOptions = (values: string[], sortDescending = false) => {
      const uniqueOptions = Array.from(
        new Set(values.filter(Boolean).filter((value) => value !== "-")),
      );

      uniqueOptions.sort((firstValue, secondValue) =>
        sortDescending
          ? Number(secondValue) - Number(firstValue)
          : firstValue.localeCompare(secondValue),
      );

      return uniqueOptions;
    };

    return {
      category: getUniqueOptions(rows.map((row) => row.category)),
      status: [...CDC_ISSUE_MATRIX_STATUS_FILTER_OPTIONS],
      workingGroup: getUniqueOptions(rows.map((row) => row.workingGroup)),
      year: getUniqueOptions(
        rows.map((row) => row.year),
        true,
      ),
      plenaryEscalation: ["Yes", "No"],
    };
  }, [rows]);

  const handleFilterChange = (
    key: keyof CdcIssueMatrixFilterState,
    value: string[],
  ) => {
    setFilters((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const filteredRows = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();

    return rows.filter((row) => {
      const matchesSearch =
        normalizedSearch === "" ||
        [
          row.issue,
          row.category,
          row.issueDescription,
          row.recommendation,
          row.governmentDecision,
          row.primaryAgency,
          row.workingGroup,
          row.status,
          row.year,
        ]
          .join(" ")
          .toLowerCase()
          .includes(normalizedSearch);

      const matchesCategory =
        filters.category.length === 0 ||
        filters.category.includes(row.category);

      const matchesStatus =
        filters.status.length === 0 || filters.status.includes(row.status);

      const matchesWorkingGroup =
        filters.workingGroup.length === 0 ||
        filters.workingGroup.includes(row.workingGroup);

      const matchesYear =
        filters.year.length === 0 || filters.year.includes(row.year);

      const matchesPlenaryEscalation =
        filters.plenaryEscalation.length === 0 ||
        (filters.plenaryEscalation.includes("Yes") && row.plenaryEscalation) ||
        (filters.plenaryEscalation.includes("No") && !row.plenaryEscalation);

      return (
        matchesSearch &&
        matchesCategory &&
        matchesStatus &&
        matchesWorkingGroup &&
        matchesYear &&
        matchesPlenaryEscalation
      );
    });
  }, [search, filters, rows]);

  return (
    <Box
      sx={{
        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        display: "flex",
        flexDirection: "column",
        bgcolor: theme.palette.background.default,
        color: theme.palette.text.primary,
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
      }}
    >
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          width: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <CdcIssueMatrixHeader
          search={search}
          language={matrixLanguage}
          exportDisabled
          onSearchChange={setSearch}
          onNewIssue={() => {}}
        />

        <CdcIssueMatrixFilters
          filters={filters}
          language={matrixLanguage}
          options={filterOptions}
          view={view}
          onChange={handleFilterChange}
          onViewChange={setView}
        />

        <Box sx={{ mb: 3 }}>
          <CdcIssueMatrixStatusCards
            language={matrixLanguage}
            summary={summary}
          />
        </Box>

        {view === "list" ? (
          <CdcIssueMatrixTable
            rows={filteredRows}
            language={matrixLanguage}
            loading={isLoadingRows || isLoadingSummary}
            error={rowsError}
            showRemark
          />
        ) : (
          <CdcIssueMatrixGrid
            rows={filteredRows}
            language={matrixLanguage}
            loading={isLoadingRows || isLoadingSummary}
            error={rowsError}
          />
        )}
      </Box>
    </Box>
  );
}