"use client";

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

import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { ToastNotification } from "@/components/ui/toast-notification";

import {
  defaultMeetingSummaryFilters,
  filterMeetingSummaryRows,
  type MeetingSummaryFiltersValue,
  type MeetingSummaryRow,
  type MeetingSummaryStatus,
} from "../meeting-summary-data";
import { getMeetingSummaries } from "../meeting-summary-service";
import { useMeetingSummaryI18n } from "../use-meeting-summary-i18n";
import { MeetingSummaryFilters } from "./meeting-summary-filters";
import { MeetingSummaryTable } from "./meeting-summary-table";
import { CreateMeetingSummaryDialog } from "./create-meeting-summary";

export function MeetingSummaryScreen() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const { lang, text: t, fontFamily } = useMeetingSummaryI18n();

  const [filters, setFilters] = useState<MeetingSummaryFiltersValue>({
    ...defaultMeetingSummaryFilters,
  });
  const [createSummaryOpen, setCreateSummaryOpen] = useState(false);
  const [allRows, setAllRows] = useState<MeetingSummaryRow[]>([]);
  const toastType = searchParams.get("toast");
  const initialToastMessage =
    toastType === "submit-cdc"
      ? t.submitSuccess
      : toastType === "draft-saved"
        ? t.draftSaved
        : null;
  const [toastMessage, setToastMessage] = useState<string | null>(
    initialToastMessage,
  );

  useEffect(() => {
    if (toastType === "submit-cdc" || toastType === "draft-saved") {
      router.replace("/ministry/meeting-summary", { scroll: false });
    }
  }, [router, toastType]);

  // Load saved summaries from the backend.
  useEffect(() => {
    let active = true;

    getMeetingSummaries()
      .then((data) => {
        if (active) setAllRows(data);
      })
      .catch(() => {
        if (active) setAllRows([]);
      });

    return () => {
      active = false;
    };
  }, []);

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

  function handleRowUpdated(id: number, status: MeetingSummaryStatus) {
    setAllRows((current) =>
      current.map((row) => (row.id === id ? { ...row, status } : row)),
    );
  }

  function handleSubmitReportSuccess() {
    setToastMessage(t.submitSuccess);
  }

  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,
      }}
    >
      <Box
        sx={{
          mb: 3,
          display: "flex",
          alignItems: { xs: "stretch", sm: "center" },
          justifyContent: "space-between",
          flexDirection: { xs: "column", sm: "row" },
          gap: 2,
        }}
      >
        <Box>
          <Typography
            component="h1"
            sx={{
              color: "var(--ms-text)",
              fontSize: { xs: 28, md: 32 },
              fontWeight: 600,
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
            }}
          >
            {t.title}
          </Typography>

          <Typography
            sx={{
              mt: 1.25,
              color: "var(--ms-muted)",
              fontSize: 12,
              fontWeight: 500,
              lineHeight: 1,
            }}
          >
            {t.subtitle}
          </Typography>
        </Box>

        <Button
          variant="contained"
          startIcon={<AddBoxOutlinedIcon sx={{ fontSize: 20 }} />}
          onClick={() => setCreateSummaryOpen(true)}
          sx={{
            minWidth: { xs: 0, sm: 190 },
            width: { xs: "100%", sm: "auto" },
            height: 40,
            alignSelf: { xs: "stretch", sm: "center" },
            borderRadius: 1,
            bgcolor: isDark ? "#60a5fa" : "#1a64a8",
            boxShadow: "none",
            textTransform: "none",
            fontSize: 12,
            fontWeight: 500,
            "&:hover": {
              bgcolor: isDark ? "#60a5fa" : "#1a64a8",
              boxShadow: "none",
            },
          }}
        >
          {t.add}
        </Button>
      </Box>

      <MeetingSummaryFilters
        lang={lang}
        rows={allRows}
        filters={filters}
        onFiltersChange={setFilters}
      />

      <MeetingSummaryTable
        lang={lang}
        rows={rows}
        onRowUpdated={handleRowUpdated}
        onSubmitReportSuccess={handleSubmitReportSuccess}
      />

      <CreateMeetingSummaryDialog
        open={createSummaryOpen}
        onClose={() => setCreateSummaryOpen(false)}
        onConfirm={(item) =>
          router.push(`/ministry/meeting-summary/new?meetingId=${item.id}`)
        }
      />

      <ToastNotification
        open={Boolean(toastMessage)}
        message={toastMessage ?? ""}
        position="bottom-right"
        closeLabel={t.common.closeNotification}
        onClose={() => setToastMessage(null)}
      />
    </Box>
  );
}