"use client";

import { useState } from "react";

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

import { MeetingRequestsCalendar } from "@/features/pswg/meeting-request/components/calendar/meeting-requests-calendar";
import { MeetingRequestCreate } from "@/features/pswg/meeting-request/components/create/meeting-request-create";
import { MeetingRequestsFilters } from "@/features/pswg/meeting-request/components/meeting-requests-filters";
import { MeetingRequestsHeader } from "@/features/pswg/meeting-request/components/meeting-requests-header";
import type { MeetingRequestsViewMode } from "@/features/pswg/meeting-request/components/meeting-requests-view-tabs";
import { MeetingRequestsTable } from "@/features/pswg/meeting-request/components/table/meeting-requests-table";
import type { MeetingRequestRow } from "@/features/pswg/meeting-request/meeting-request-data";
import { useMeetingRequestI18n } from "@/features/pswg/meeting-request/use-meeting-request-i18n";
import { CdcGpsfMeetingRequestDetailDialog } from "@/features/cdc-gpsf/meeting-requests/components/detail/cdc-gpsf-meeting-request-detail-dialog";
import { ToastNotification } from "@/components/ui/toast-notification";

type MeetingRequestsScreenViewMode =
  | MeetingRequestsViewMode
  | "create"
  | "edit";

type MeetingRequestsScreenProps = {
  initialView?: MeetingRequestsViewMode;
  initialMeetingId?: number;
};

export function MeetingRequestsScreen({
  initialView = "table",
  initialMeetingId,
}: MeetingRequestsScreenProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const language = useMeetingRequestI18n();

  const [activeView, setActiveView] =
    useState<MeetingRequestsScreenViewMode>(initialView);

  const [editingRow, setEditingRow] = useState<MeetingRequestRow | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailId, setDetailId] = useState<number | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  const [workingGroupFilter, setWorkingGroupFilter] = useState<string[]>([]);
  const [governmentAgencyFilter, setGovernmentAgencyFilter] = useState<
    string[]
  >([]);
  const [statusFilter, setStatusFilter] = useState<string[]>([]);
  const [meetingDateFilter, setMeetingDateFilter] = useState<string[]>([]);
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  function handleBackToTable() {
    setEditingRow(null);
    setActiveView("table");
  }

  function handleCreate() {
    setEditingRow(null);
    setActiveView("create");
  }

  function handleEdit(row: MeetingRequestRow) {
    setEditingRow(row);
    setActiveView("edit");
  }

  function handleView(row: MeetingRequestRow) {
    setDetailId(Number(row.id));
    setDetailOpen(true);
  }

  function handleCloseDetail() {
    setDetailOpen(false);
    setDetailId(null);
  }

  function handleRefresh() {
    setRefreshKey((current) => current + 1);
  }

  function handleSubmitSuccess(
    _payload?: unknown,
    options?: { sent: boolean; sendFailed?: boolean },
  ) {
    handleRefresh();
    handleBackToTable();

    if (options?.sendFailed) {
      // Saving worked but sending did not come back, so we cannot promise it
      // went out. Point the user at the list instead of the create form, where
      // trying again would create a duplicate.
      setToastMessage(
        "Meeting request saved, but sending was not confirmed. Please check its status in the list.",
      );

      return;
    }

    setToastMessage(
      options?.sent
        ? "Meeting request submitted successfully."
        : "Meeting request draft saved successfully.",
    );
  }

  function handleSendSuccess() {
    handleRefresh();
    setToastMessage("Meeting request submitted successfully.");
  }

  function handleViewChange(view: MeetingRequestsViewMode) {
    setActiveView(view);
  }

  if (activeView === "create" || activeView === "edit") {
    return (
      <Box
        sx={{
          width: "100%",
          minWidth: 0,
          minHeight: "100%",
          px: { xs: 2, md: 3 },
          py: { xs: 2, md: 3 },
          color: theme.palette.text.primary,
        }}
      >
        <MeetingRequestCreate
          key={activeView === "edit" ? `edit-${editingRow?.id}` : "create"}
          language={language}
          mode={activeView}
          editRow={editingRow}
          onBack={handleBackToTable}
          onSubmit={handleSubmitSuccess}
        />
      </Box>
    );
  }

  return (
    <Box
      sx={{
        width: "100%",
        minWidth: 0,
        minHeight: "calc(100dvh - 64px)",
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: theme.palette.text.primary,
      }}
    >
      <Box
        sx={{
          flex: 1,
          minHeight: 0,
          borderRadius: 3,
          display: "flex",
          flexDirection: "column",
        }}
      >
        <MeetingRequestsHeader
          view={activeView}
          language={language}
          onCreate={handleCreate}
        />

        <MeetingRequestsFilters
          activeView={activeView}
          language={language}
          onViewChange={handleViewChange}
          workingGroupFilter={workingGroupFilter}
          onWorkingGroupFilterChange={setWorkingGroupFilter}
          governmentAgencyFilter={governmentAgencyFilter}
          onGovernmentAgencyFilterChange={setGovernmentAgencyFilter}
          statusFilter={statusFilter}
          onStatusFilterChange={setStatusFilter}
          meetingDateFilter={meetingDateFilter}
          onMeetingDateFilterChange={setMeetingDateFilter}
        />

        <Box
          sx={{
            mt: { xs: 2, md: 3 },
            width: "100%",
            minWidth: 0,
            flex: activeView === "calendar" ? undefined : 1,
            minHeight: 0,
            display: "flex",
            flexDirection: "column",
            borderRadius: 2,
            bgcolor: isDark ? alpha("#ffffff", 0.04) : "transparent",
          }}
        >
          {activeView === "calendar" ? (
            <MeetingRequestsCalendar
              initialMeetingId={initialMeetingId}
            />
          ) : (
            <MeetingRequestsTable
              language={language}
              refreshKey={refreshKey}
              workingGroupFilter={workingGroupFilter}
              governmentAgencyFilter={governmentAgencyFilter}
              statusFilter={statusFilter}
              meetingDateFilter={meetingDateFilter}
              onView={handleView}
              onEdit={handleEdit}
              onSendSuccess={handleSendSuccess}
            />
          )}
        </Box>
      </Box>

      <CdcGpsfMeetingRequestDetailDialog
        open={detailOpen}
        meetingRequestId={detailId}
        onClose={handleCloseDetail}
      />

      <ToastNotification
        open={Boolean(toastMessage)}
        message={toastMessage ?? ""}
        onClose={() => setToastMessage(null)}
      />
    </Box>
  );
}