"use client";

import { useState } from "react";

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

import type { CdcGpsfMeetingRequestRow } from "@/features/cdc-gpsf/meeting-requests/cdc-gpsf-meeting-request-data";
import { useCdcGpsfMeetingRequestI18n } from "@/features/cdc-gpsf/meeting-requests/use-cdc-gpsf-meeting-request-i18n";

import { CdcGpsfMeetingRequestDetailDialog } from "./detail/cdc-gpsf-meeting-request-detail-dialog";
import { CdcGpsfMeetingRequestsFilters } from "./cdc-gpsf-meeting-requests-filters";
import { CdcGpsfMeetingRequestsHeader } from "./cdc-gpsf-meeting-requests-header";
import type { CdcGpsfMeetingRequestsViewMode } from "./cdc-gpsf-meeting-requests-view-tabs";
import { CdcGpsfMeetingRequestsGrid } from "./grid/cdc-gpsf-meeting-requests-grid";
import { CdcGpsfMeetingRequestsTable } from "./table/cdc-gpsf-meeting-requests-table";

export function CdcGpsfMeetingRequestsScreen() {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";
  const language = useCdcGpsfMeetingRequestI18n();

  const [activeView, setActiveView] =
    useState<CdcGpsfMeetingRequestsViewMode>("table");

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

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

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

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

  const sharedViewProps = {
    language,
    refreshKey,
    workingGroupFilter,
    governmentAgencyFilter,
    statusFilter,
    meetingDateFilter,
    onView: handleView,
  };

  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",
        }}
      >
        <CdcGpsfMeetingRequestsHeader language={language} />

        <CdcGpsfMeetingRequestsFilters
          activeView={activeView}
          language={language}
          onViewChange={setActiveView}
          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 === "grid" ? undefined : 1,
            minHeight: 0,
            display: "flex",
            flexDirection: "column",
            borderRadius: 2,
            bgcolor: isDark ? alpha("#ffffff", 0.04) : "transparent",
          }}
        >
          {activeView === "grid" ? (
            <CdcGpsfMeetingRequestsGrid {...sharedViewProps} />
          ) : (
            <CdcGpsfMeetingRequestsTable {...sharedViewProps} />
          )}
        </Box>
      </Box>

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