"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";

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

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { ToastNotification } from "@/components/ui/toast-notification";
import { IssueListTable } from "@/features/ministry/meeting-summary/components/view-meeting-summary/issue-list-table";
import { MeetingSummaryParticipantsTable } from "@/features/ministry/meeting-summary/components/meeting-summary-participants-table";
import { printMeetingSummaryLayout } from "@/features/ministry/meeting-summary/components/view-meeting-summary/print/meeting-summary-print-action";
import { buildMeetingSummaryPrintModel } from "@/features/ministry/meeting-summary/components/view-meeting-summary/print/meeting-summary-print-mock-data";
import { MeetingSummaryPrintView } from "@/features/ministry/meeting-summary/components/view-meeting-summary/print/meeting-summary-print-view";
import { ViewMeetingSummaryInfoSection } from "@/features/ministry/meeting-summary/components/view-meeting-summary/view-meeting-summary-info-section";
import { ViewMeetingSummaryIssueDetailDialog } from "@/features/ministry/meeting-summary/components/view-meeting-summary/view-meeting-summary-issue-detail-dialog";
import { ViewMeetingSummaryReferenceSection } from "@/features/ministry/meeting-summary/components/view-meeting-summary/view-meeting-summary-reference-section";
import type {
  ViewMeetingSummaryDetail,
  ViewMeetingSummaryIssueRow,
} from "@/features/ministry/meeting-summary/components/view-meeting-summary/view-meeting-summary-data";
import {
  changeMeetingSummaryStatus,
  getMeetingSummaryById,
} from "@/features/ministry/meeting-summary/meeting-summary-service";
import { getMeetingSummaryFont } from "@/features/ministry/meeting-summary/meeting-summary-i18n";
import {
  meetingSummaryText,
  normalizeMeetingSummaryLanguage,
} from "@/features/pswg/meeting-summary/meeting-summary-i18n";

import { ViewMeetingSummaryHeader } from "./view-meeting-summary-header";

type Props = {
  summaryId: number;
  // Where the back button returns to. CDC-GPSF passes its own list page path.
  backPath?: string;
  // Hide the "Reviewed" button for view-only sections like CDC-GPSF.
  showReviewedButton?: boolean;
};

export function ViewMeetingSummaryScreen({
  summaryId,
  backPath = "/pswg/meeting-summary",
  showReviewedButton = true,
}: Props) {
  const router = useRouter();
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const { language } = useAppLanguage();
  const meetingSummaryLanguage = normalizeMeetingSummaryLanguage(language);
  const text =
    meetingSummaryText[meetingSummaryLanguage] ?? meetingSummaryText.en;
  const isInvalidSummaryId = !Number.isFinite(summaryId) || summaryId <= 0;

  const [detail, setDetail] = useState<ViewMeetingSummaryDetail | null>(null);
  const [fetchLoading, setFetchLoading] = useState(!isInvalidSummaryId);
  const [fetchError, setFetchError] = useState<string | null>(null);
  const loading = isInvalidSummaryId ? false : fetchLoading;
  const error = isInvalidSummaryId ? text.viewPage.notFound : fetchError;
  const [selectedIssue, setSelectedIssue] =
    useState<ViewMeetingSummaryIssueRow | null>(null);
  const [reviewLoading, setReviewLoading] = useState(false);
  const [reviewSuccessOpen, setReviewSuccessOpen] = useState(false);
  const printModel = useMemo(
    () => buildMeetingSummaryPrintModel(detail),
    [detail],
  );

  async function handleReviewed() {
    if (!detail || reviewLoading) return;

    setReviewLoading(true);
    try {
      await changeMeetingSummaryStatus(summaryId, "REVIEWED");
      const data = await getMeetingSummaryById(summaryId);
      setDetail(data);
      setReviewSuccessOpen(true);
    } catch {
      setFetchError(text.viewPage.loadError);
    } finally {
      setReviewLoading(false);
    }
  }

  useEffect(() => {
    if (isInvalidSummaryId) return;

    let cancelled = false;

    async function loadSummary() {
      setFetchLoading(true);
      setFetchError(null);

      try {
        const data = await getMeetingSummaryById(summaryId);
        if (cancelled) return;
        setDetail(data);
      } catch {
        if (cancelled) return;
        setFetchError(text.viewPage.loadError);
      } finally {
        if (!cancelled) setFetchLoading(false);
      }
    }

    void loadSummary();

    return () => {
      cancelled = true;
    };
  }, [isInvalidSummaryId, summaryId, text.viewPage.loadError]);

  return (
    <Box
      sx={{
        "--ms-text": isDark ? "#E5E7EB" : "#181d27",
        "--ms-muted": isDark ? "#CBD5E1" : "#717680",
        "--ms-subtle": isDark ? "#9CA3AF" : "#414651",
        "--ms-secondary": isDark ? "#E5E7EB" : "#252b37",
        "--ms-border": isDark ? "#374151" : "#e9eaeb",
        "--ms-blue": isDark ? "#60A5FA" : "#1a64a8",
        "--ms-blue-dark": isDark ? "#3B82F6" : "#155489",
        "--ms-chip-bg": isDark ? "#1E3A5F" : "#edf8fd",
        "--ms-chip-border": isDark ? "#4D87C7" : "#b6dbf6",
        "--ms-surface": isDark ? "#111827" : "#fafafa",
        "--ms-surface-track": isDark ? "#1F2937" : "#ffffff",
        minHeight: "100%",
        width: "100%",
        minWidth: 0,
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: "var(--ms-text)",
        fontFamily: getMeetingSummaryFont(
          meetingSummaryLanguage === "kh" ? "km" : "en",
        ),
        overflowX: "hidden",
      }}
    >
      <ViewMeetingSummaryHeader
        language={meetingSummaryLanguage}
        onBack={() => router.push(backPath)}
        onReviewed={handleReviewed}
        reviewedDisabled={
          reviewLoading || loading || detail?.status !== "DRAFT"
        }
        showReviewed={showReviewedButton}
      />

      {loading ? (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            minHeight: 320,
          }}
        >
          <CircularProgress size={32} />
        </Box>
      ) : error || !detail ? (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            minHeight: 320,
          }}
        >
          <Typography sx={{ fontSize: 14, color: "var(--ms-muted)" }}>
            {error ?? text.viewPage.notFound}
          </Typography>
        </Box>
      ) : (
        <>
          <ViewMeetingSummaryInfoSection detail={detail} />

          <IssueListTable
            rows={detail.issues}
            onPrint={printMeetingSummaryLayout}
            onViewIssue={setSelectedIssue}
          />

          <MeetingSummaryParticipantsTable participants={detail.participants} />

          <MeetingSummaryPrintView model={printModel} />

          <ViewMeetingSummaryReferenceSection
            reference={detail.summaryReference}
          />

          <ViewMeetingSummaryIssueDetailDialog
            open={Boolean(selectedIssue)}
            issue={selectedIssue}
            submittedBy={detail.sentBy}
            submittedDate={detail.date}
            issueDocument={detail.meetingRequestDocument}
            issueDocumentSize={detail.meetingRequestDocumentSize}
            onClose={() => setSelectedIssue(null)}
          />
        </>
      )}

      <ToastNotification
        open={reviewSuccessOpen}
        message={text.viewPage.reviewSuccess}
        onClose={() => setReviewSuccessOpen(false)}
      />
    </Box>
  );
}