"use client";

import { useEffect, useMemo, useState } from "react";

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

import { MeetingSummaryFilters } from "@/features/pswg/meeting-summary/components/meeting-summary-filters";
import { MeetingSummaryHeader } from "@/features/pswg/meeting-summary/components/meeting-summary-header";
import { MeetingSummaryTable } from "@/features/pswg/meeting-summary/components/table/meeting-summary-table";
import {
  defaultMeetingSummaryFilters,
  filterMeetingSummaryRows,
  type MeetingSummaryFiltersValue,
  type MeetingSummaryRow,
} from "@/features/pswg/meeting-summary/meeting-summary-data";
import { getMeetingSummaryFont } from "@/features/ministry/meeting-summary/meeting-summary-i18n";
import {
  normalizeMeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import {
  exportMeetingSummaries,
  getMeetingSummaries,
} from "@/features/ministry/meeting-summary/meeting-summary-service";

type Props = {
  // Where a row's "View Detail" link goes. CDC-GPSF passes its own base path
  // ("/cdc-gpsf/meeting-summary") so users stay inside their section.
  detailBasePath?: string;
  // Shows the "Export as XLSX" button in the page header.
  showExportButton?: boolean;
};

export function MeetingSummaryScreen({
  detailBasePath = "/pswg/meeting-summary",
  showExportButton = false,
}: Props) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const { language } = useAppLanguage();
  const meetingSummaryLanguage = normalizeMeetingSummaryLanguage(language);

  const [filters, setFilters] = useState<MeetingSummaryFiltersValue>({
    ...defaultMeetingSummaryFilters,
  });
  const [allRows, setAllRows] = useState<MeetingSummaryRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [exporting, setExporting] = useState(false);

  async function handleExport() {
    if (exporting) return;

    setExporting(true);
    try {
      await exportMeetingSummaries();
    } catch {
      // Keep the page usable if the download fails; the user can retry.
    } finally {
      setExporting(false);
    }
  }

  useEffect(() => {
    let cancelled = false;

    getMeetingSummaries()
      .then((data) => {
        if (!cancelled) setAllRows(data);
      })
      .catch(() => {
        if (!cancelled) setAllRows([]);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, []);

  const rows = useMemo(
    () => filterMeetingSummaryRows(allRows, filters),
    [allRows, filters],
  );

  return (
    <Box
      sx={{
        "--ms-text": isDark ? "#f3f4f6" : "#181d27",
        "--ms-muted": isDark ? "#a4a7ae" : "#717680",
        "--ms-border": isDark ? "#374151" : "#e9eaeb",
        "--ms-header-bg": isDark ? "#1e3a5f" : "#edf8fd",
        "--ms-red-bg": isDark ? "#3f1d24" : "#fff1f2",
        "--ms-red-text": isDark ? "#fca5a5" : "#ef4444",
        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: "var(--ms-text)",
        fontFamily: getMeetingSummaryFont(
          meetingSummaryLanguage === "kh" ? "km" : "en",
        ),
      }}
    >
      <MeetingSummaryHeader
        showExportButton={showExportButton}
        onExport={handleExport}
        exporting={exporting}
      />
      <MeetingSummaryFilters
        filters={filters}
        onFiltersChange={setFilters}
        rows={allRows}
      />

      <MeetingSummaryTable
        rows={rows}
        loading={loading}
        detailBasePath={detailBasePath}
      />
    </Box>
  );
}