"use client";

import { useMemo, useState } from "react";

import { useRouter } from "next/navigation";

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

import { ProgressReportFilters } from "@/features/ministry/progress-report/components/progress-report-filters";
import { ProgressReportHeader } from "@/features/ministry/progress-report/components/progress-report-header";
import { ProgressReportTable } from "@/features/ministry/progress-report/components/table/progress-report-table";
import { useProgressReports } from "@/features/ministry/progress-report/hook/use-progress-reports";
import {
  defaultProgressReportFilters,
  filterProgressReportRows,
  type ProgressReportFiltersValue,
} from "@/features/ministry/progress-report/progress-report-data";

export function ProgressReportScreen() {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const router = useRouter();

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

  const { rows: fetchedRows, isLoading, error } = useProgressReports();

  const rows = useMemo(
    () => filterProgressReportRows(fetchedRows, filters),
    [fetchedRows, filters],
  );

  return (
    <Box
      sx={{
        "--mr-bg": isDark ? "#0F172A" : "transparent",
        "--mr-card": isDark ? "#0F172A" : "#FFFFFF",
        "--mr-input": isDark ? "#111827" : "#FFFFFF",
        "--mr-text": isDark ? "#E5E7EB" : "#181D27",
        "--mr-muted": isDark ? "#CBD5E1" : "#717680",
        "--mr-border": isDark ? "#243244" : "#F5F5F5",
        "--mr-header": isDark ? "#29415F" : "#DDEDFB",
        "--mr-blue": isDark ? "#60A5FA" : "#1A64A8",
        "--mr-blue-soft": isDark ? "#1E3A5F" : "#EAF5FF",
        "--mr-chip-bg": isDark ? "#1E3A5F" : "#EDF8FD",
        "--mr-chip-border": isDark ? "#4D87C7" : "#B6DBF6",
        "--mr-red-bg": isDark ? "#3B2B3A" : "#FFFBFA",
        "--mr-red-text": isDark ? "#FCA5A5" : "#F04438",
        "--mr-row-hover": isDark ? "#111C2E" : "#FFFFFF",

        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 2.5 },
        py: { xs: 2.5, md: 2 },
        color: "var(--mr-text)",
        bgcolor: "transparent",
      }}
    >
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          display: "flex",
          flexDirection: "column",
          gap: 2,
        }}
      >
        <ProgressReportHeader />

        <ProgressReportFilters
          rows={fetchedRows}
          filters={filters}
          onFiltersChange={setFilters}
        />

        <ProgressReportTable
          rows={rows}
          loading={isLoading}
          error={error}
          onView={(row) => router.push(`/ministry/progress-reports/${row.id}`)}
        />
      </Box>
    </Box>
  );
}