"use client";

import { 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 type {
  MeetingRequest,
  MeetingRequestStatus,
} from "../meeting-request-data";
import { useMeetingRequests } from "../hook/use-meeting-requests";
import { useMeetingRequestI18n } from "../use-meeting-request-i18n";
import { MeetingCreateDialog } from "@/features/ministry/meeting-calendar/components/create-meeting/meeting-create-dialog";
import {
  createMeetingSavePayload,
  type MeetingCreateForm,
} from "@/features/ministry/meeting-calendar/meeting-create-form";
import { createMeeting } from "@/features/ministry/meeting-calendar/meeting-calendar-service";
import { useCurrentUser } from "@/features/auth/hook/use-current-user";
import { MeetingRequestsFilters } from "./meeting-requests-filters";
import { MeetingRequestsHeader } from "./meeting-requests-header";
import { MeetingRequestsTable } from "./table/meeting-requests-table";

export default function MeetingRequestsScreen() {
  const router = useRouter();
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  const { t, fontFamily } = useMeetingRequestI18n();
  const { filteredRows, filters, updateFilter, loading, error, refetch } =
    useMeetingRequests();
  const { user: currentUser } = useCurrentUser();

  const [createMeetingRow, setCreateMeetingRow] =
    useState<MeetingRequest | null>(null);
  const [scheduleSuccessOpen, setScheduleSuccessOpen] = useState(false);

  const statusLabels = useMemo<Record<MeetingRequestStatus, string>>(() => {
    const oldLabels = t.statusLabels as Partial<Record<string, string>>;

    return {
      Draft: oldLabels.Draft ?? "Draft",
      Submitted: oldLabels.Submitted ?? "Submitted",
      "Under Review": oldLabels["Under Review"] ?? "Under Review",
      Scheduled: oldLabels.Scheduled ?? "Scheduled",
      Completed: oldLabels.Completed ?? "Completed",
    };
  }, [t.statusLabels]);

  const handleViewDetail = (row: MeetingRequest) => {
    router.push(`/ministry/meeting-requests/${row.id}`);
  };

  const handleCreateMeeting = (row: MeetingRequest) => {
    setCreateMeetingRow(row);
  };

  const handleCloseCreateMeeting = () => {
    setCreateMeetingRow(null);
  };

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

    return {
      title: createMeetingRow.title,
      description: createMeetingRow.description,
      status: createMeetingRow.status,
      meetingRequestId: createMeetingRow.id,
    };
  }, [createMeetingRow]);

  const getCurrentUserId = () => {
    if (!currentUser?.id) {
      throw new Error(t.detail.waitForProfile);
    }

    return currentUser.id;
  };

  const saveMeeting = async (
    form: MeetingCreateForm,
    status: "Draft" | "Scheduled",
  ) => {
    if (!createMeetingRow) {
      throw new Error(t.detail.notLoaded);
    }

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

    setCreateMeetingRow(null);

    if (status === "Draft") {
      router.push("/ministry/meeting-calendar");
      return;
    }

    await refetch();
    setScheduleSuccessOpen(true);
  };

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

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

  const handleExport = () => {
    const headers = [
      t.table.no,
      t.table.meetingTitle,
      t.table.status,
      t.table.issues,
      t.table.meetingRequest,
      t.table.requestedDate,
      t.table.requestedBy,
      t.table.action,
    ];

    const csvRows = filteredRows.map((row, index) => [
      index + 1,
      row.title,
      statusLabels[row.status],
      row.issueCount,
      row.documentName,
      row.requestedDate,
      row.requestedBy,
      "",
    ]);

    const csv = [headers, ...csvRows]
      .map((row) =>
        row.map((cell) => `"${String(cell).replaceAll('"', '""')}"`).join(","),
      )
      .join("\n");

    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "meeting-requests.csv";
    link.click();

    URL.revokeObjectURL(url);
  };

  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",
        "--mr-blue-soft": isDark ? "#1E3A5F" : "#EAF5FF",
        "--mr-chip-bg": isDark ? "#1E3A5F" : "#EDF8FD",
        "--mr-chip-border": isDark ? "#4D87C7" : "#B6DBF6",
        "--mr-red-bg": isDark ? "#3B2B3A" : "#FFFBFA",
        "--mr-red-text": isDark ? "#FCA5A5" : "#F04438",
        "--mr-row-hover": isDark ? "#111C2E" : "#FFFFFF",

        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
        color: "var(--mr-text)",
        fontFamily,
        bgcolor: "transparent",
        overflowX: "hidden",
      }}
    >
      <MeetingRequestsHeader
        title={t.title}
        count={t.badgeCount}
        subtitle={t.allMeetings}
      />

      <MeetingRequestsFilters
        filters={filters}
        onFilterChange={updateFilter}
        onExport={handleExport}
        labels={{
          status: t.status,
          year: t.year,
          numberOfIssues: t.numberOfIssues,
          export: t.export,
        }}
        statusLabels={statusLabels}
      />

      {loading && (
        <Typography
          sx={{
            mb: 1.5,
            fontSize: 13,
            color: "var(--mr-muted)",
          }}
        >
          Loading meeting requests...
        </Typography>
      )}

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

      <MeetingRequestsTable
        rows={filteredRows}
        labels={t.table}
        statusLabels={statusLabels}
        onView={handleViewDetail}
        onCreateMeeting={handleCreateMeeting}
      />

      <MeetingCreateDialog
        open={Boolean(createMeetingRow)}
        confirmBeforeSchedule
        showIssueActions={false}
        title={t.meetingCreate.createMeeting}
        initialForm={createMeetingInitialForm}
        onClose={handleCloseCreateMeeting}
        onSchedule={handleScheduleMeeting}
        onSaveDraft={handleSaveDraftMeeting}
        issues={createMeetingRow?.issues ?? []}
        governmentAgencies={createMeetingRow?.governmentAgencies}
        meetingRequest={
          createMeetingRow
            ? {
                id: createMeetingRow.id,
                requestedBy: createMeetingRow.requestedBy,
                requestedDate: createMeetingRow.requestedDate,
                documentName: createMeetingRow.documentName,
                privateSectorWG: createMeetingRow.privateSectorWG,
                submittedBy: createMeetingRow.submittedBy,
                status: createMeetingRow.status,
              }
            : undefined
        }
      />

      <ToastNotification
        open={scheduleSuccessOpen}
        onClose={() => setScheduleSuccessOpen(false)}
        message={t.detail.meetingScheduledSuccess}
        closeLabel={t.meetingCalendar.detail.close}
        position="bottom-right"
        autoHideDuration={3200}
      />
    </Box>
  );
}