"use client";

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

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

import { ToastNotification } from "@/components/ui/toast-notification";
import {
  createMeetingSavePayload,
  type MeetingCreateForm,
} from "@/features/ministry/meeting-calendar/meeting-create-form";
import { MeetingCreateDialog } from "@/features/ministry/meeting-calendar/components/create-meeting/meeting-create-dialog";
import { createMeeting } from "@/features/ministry/meeting-calendar/meeting-calendar-service";
import { useCurrentUser } from "@/features/auth/hook/use-current-user";

import type { MeetingRequest } from "../../meeting-request-data";
import { useMeetingRequestI18n } from "../../use-meeting-request-i18n";
import { getMeetingRequestById, startMeetingRequestReview } from "../../service/meeting-requests-service";
import { MeetingRequestDetail } from "./meeting-request-detail";

type Props = {
  meetingRequestId: number;
};

function getErrorMessage(error: unknown) {
  return error instanceof Error
    ? error.message
    : "Failed to load meeting request.";
}

export function MeetingRequestDetailScreen({ meetingRequestId }: Props) {
  const router = useRouter();
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const { fontFamily } = useMeetingRequestI18n("en");
  const { user: currentUser } = useCurrentUser();

  const [row, setRow] = useState<MeetingRequest | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [startReviewLoading, setStartReviewLoading] = useState(false);
  const [startReviewSuccessOpen, setStartReviewSuccessOpen] = useState(false);
  const [meetingSuccessMessage, setMeetingSuccessMessage] = useState("");

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

    async function loadMeetingRequest() {
      try {
        setLoading(true);
        setError("");

        const data = await getMeetingRequestById(meetingRequestId);

        if (cancelled) return;

        setRow(data);
      } catch (err) {
        if (cancelled) return;

        setRow(null);
        setError(getErrorMessage(err));
      } finally {
        if (cancelled) return;

        setLoading(false);
      }
    }

    void loadMeetingRequest();

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

  const createMeetingInitialForm = useMemo<
    Partial<MeetingCreateForm> | undefined
  >(() => {
    if (!row) return undefined;

    return {
      title: row.title,
      description: row.description,
      status: row.status,
    };
  }, [row]);

  const handleBack = () => {
    router.push("/ministry/meeting-requests");
  };

  const getCurrentUserId = () => {
    if (!currentUser?.id) {
      throw new Error("Please wait until your user profile is loaded.");
    }

    return currentUser.id;
  };

  const saveMeeting = async (
    form: MeetingCreateForm,
    status: "Draft" | "Scheduled" | "Submitted",
  ) => {
    if (!row) {
      throw new Error("Meeting request is not loaded.");
    }

    await createMeeting(
      createMeetingSavePayload(form, {
        status,
        userId: getCurrentUserId(),
        meetingRequestId: row.id,
        fallbackTitle: row.title,
        documentReference: row.documentName,
      }),
    );

    setCreateDialogOpen(false);
    const updatedRequest = await getMeetingRequestById(row.id);
    setRow(updatedRequest);

    if (status === "Scheduled") {
      setMeetingSuccessMessage(
        "Meeting scheduled and invitations sent successfully.",
      );
    } else {
      setMeetingSuccessMessage("Meeting draft saved successfully.");
    }
  };

  const handleSaveDraftMeeting = (form: MeetingCreateForm) => {
    return saveMeeting(form, "Draft");
  };

  const handleScheduleMeeting = (form: MeetingCreateForm) => {
    return saveMeeting(form, "Scheduled");
  };

  const handleStartReview = async () => {
    if (!row) return;

    try {
      setStartReviewLoading(true);
      setError("");

      const updated = await startMeetingRequestReview(row.id);
      setRow(updated);
      setStartReviewSuccessOpen(true);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setStartReviewLoading(false);
    }
  };

  return (
    <Box
      sx={{
        "--mr-bg": isDark ? "#0F172A" : "transparent",
        "--mr-card": isDark ? "#0F172A" : "#FFFFFF",
        "--mr-input": isDark ? "#111827" : "#FFFFFF",
        "--mr-text": isDark ? "#E5E7EB" : "#181D27",
        "--mr-muted": isDark ? "#CBD5E1" : "#717680",
        "--mr-border": isDark ? "#243244" : "#F5F5F5",
        "--mr-header": isDark ? "#29415F" : "#DDEDFB",
        "--mr-blue": isDark ? "#60A5FA" : "#1A64A8",

        minHeight: "100%",
        width: "100%",
        minWidth: 0,
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: "var(--mr-text)",
        fontFamily,
        bgcolor: "transparent",
        overflowX: "hidden",
      }}
    >
      {loading && (
        <Typography sx={{ fontSize: 13, color: "var(--mr-muted)" }}>
          Loading meeting request...
        </Typography>
      )}

      {!loading && error && (
        <Typography sx={{ fontSize: 13, color: "#EF4444" }}>{error}</Typography>
      )}

      {!loading && !error && row && (
        <MeetingRequestDetail
          row={row}
          onBack={handleBack}
          onCreateMeeting={() => setCreateDialogOpen(true)}
          onStartReview={handleStartReview}
          startReviewLoading={startReviewLoading}
        />
      )}

      <MeetingCreateDialog
        open={createDialogOpen}
        confirmBeforeSchedule
        showIssueActions={false}
        initialForm={createMeetingInitialForm}
        onClose={() => setCreateDialogOpen(false)}
        onSchedule={handleScheduleMeeting}
        onSaveDraft={handleSaveDraftMeeting}
        issues={row?.issues ?? []}
        governmentAgencies={row?.governmentAgencies}
        meetingRequest={
          row
            ? {
                id: row.id,
                requestedBy: row.requestedBy,
                requestedDate: row.requestedDate,
                documentName: row.documentName,
                privateSectorWG: row.privateSectorWG,
                submittedBy: row.submittedBy,
                status: row.status,
              }
            : undefined
        }
      />

      <ToastNotification
        open={Boolean(meetingSuccessMessage)}
        message={meetingSuccessMessage}
        onClose={() => setMeetingSuccessMessage("")}
      />

      <ToastNotification
        open={startReviewSuccessOpen}
        message="Meeting request review started successfully."
        onClose={() => setStartReviewSuccessOpen(false)}
      />
    </Box>
  );
}