"use client";

import { useMemo, useState } from "react";

import { useRouter } from "next/navigation";

import Box from "@mui/material/Box";

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

export function ProgressReportScreen() {
  const router = useRouter();
  const [filters, setFilters] = useState<ProgressReportFiltersValue>({
    ...defaultProgressReportFilters,
  });
  const { rows: fetchedRows, isLoading, error } = usePswgProgressReports();
  const rows = useMemo(
    () => filterProgressReportRows(fetchedRows, filters),
    [fetchedRows, filters],
  );

  return (
    <ProgressReportPageContainer>
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          width: "100%",
          display: "flex",
          flexDirection: "column",
          gap: 2,
        }}
      >
        <ProgressReportHeader />

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

        <Box
          sx={{
            flex: 1,
            minHeight: 0,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <ProgressReportTable
            rows={rows}
            loading={isLoading}
            error={error}
            onView={(row) => router.push(`/pswg/progress-report/${row.id}`)}
          />
        </Box>
      </Box>
    </ProgressReportPageContainer>
  );
}