"use client";

import { useCallback, useMemo, useState, useSyncExternalStore } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { usePermissions } from "@/features/auth/hook/use-permissions";
import { APP_PERMISSIONS } from "@/features/auth/permissions";
import { CreateIssueDialog } from "@/features/pswg/working-group-issues/components/create-issuses";
import { WgAIssuesTable } from "@/features/pswg/working-group-issues/components/table/wg-issues-table";
import type { WgIssuesViewMode } from "@/features/pswg/working-group-issues/components/table/wg-issues-table-config";
import {
  WgIssuesFilters,
  type AttachmentFilterValue,
} from "@/features/pswg/working-group-issues/components/wg-issues-filters";
import { WgIssuesHeader } from "@/features/pswg/working-group-issues/components/wg-issues-header";
import { WgIssuesStatsCards } from "@/features/pswg/working-group-issues/components/wg-issues-stats-cards";
import {
  useWgIssuesFilterOptions,
  useWorkingGroupIssues,
} from "@/features/pswg/working-group-issues/hook/use-working-group-issues";
import { exportWorkingGroupIssues } from "@/features/pswg/working-group-issues/service/working-group-issues-service";
import type { IssueStatus } from "@/features/pswg/working-group-issues/wg-issues-data";
import {
  tWgIssues,
  useWgIssuesLanguage,
} from "@/features/pswg/working-group-issues/wg-issues-i18n";

const WG_ISSUES_VIEW_STORAGE_KEY = "wg-issues-view-mode";
const WG_ISSUES_VIEW_CHANGE_EVENT = "wg-issues-view-mode-change";

function normalizeViewMode(value: string | null): WgIssuesViewMode {
  return value === "grid" || value === "list" ? value : "list";
}

function getViewModeSnapshot(): WgIssuesViewMode {
  if (typeof window === "undefined") {
    return "list";
  }

  return normalizeViewMode(
    window.localStorage.getItem(WG_ISSUES_VIEW_STORAGE_KEY),
  );
}

function getServerViewModeSnapshot(): WgIssuesViewMode {
  return "list";
}

function subscribeViewMode(callback: () => void) {
  if (typeof window === "undefined") {
    return () => {};
  }

  window.addEventListener("storage", callback);
  window.addEventListener(WG_ISSUES_VIEW_CHANGE_EVENT, callback);

  return () => {
    window.removeEventListener("storage", callback);
    window.removeEventListener(WG_ISSUES_VIEW_CHANGE_EVENT, callback);
  };
}

export function WorkingGroupIssuesScreen() {
  const language = useWgIssuesLanguage();
  const { can } = usePermissions();
  const canCreateIssue = can(APP_PERMISSIONS.workingGroupIssue.create);
  const canExportIssues = can(APP_PERMISSIONS.workingGroupIssue.export);
  const [openCreateIssueDialog, setOpenCreateIssueDialog] = useState(false);
  const [selectedAttachments, setSelectedAttachments] = useState<
    AttachmentFilterValue[]
  >([]);
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [selectedPrimaryAgencies, setSelectedPrimaryAgencies] = useState<
    string[]
  >([]);
  const [selectedStatuses, setSelectedStatuses] = useState<IssueStatus[]>([]);
  const [selectedYears, setSelectedYears] = useState<string[]>([]);
  const [isExporting, setIsExporting] = useState(false);
  const [exportFeedback, setExportFeedback] = useState<{
    severity: "success" | "error";
    message: string;
  } | null>(null);
  const { error, isLoading, rows } = useWorkingGroupIssues();
  const {
    agencies: filterAgencies,
    categories: filterCategories,
    statuses: filterStatuses,
  } = useWgIssuesFilterOptions();
  const statusOptions = useMemo(
    () => filterStatuses.map((status) => status.name),
    [filterStatuses],
  );
  const categoryOptions = useMemo(
    () => filterCategories.map((category) => category.name),
    [filterCategories],
  );
  const yearOptions = useMemo(
    () =>
      Array.from(
        new Set(
          rows
            .map((row) => row.year)
            .filter((year): year is string => Boolean(year)),
        ),
      ).sort((firstYear, secondYear) => Number(secondYear) - Number(firstYear)),
    [rows],
  );
  const filteredRows = useMemo(
    () =>
      rows.filter((row) => {
        const matchesStatus =
          selectedStatuses.length === 0 ||
          selectedStatuses.includes(row.status);
        const matchesCategory =
          selectedCategories.length === 0 ||
          selectedCategories.includes(row.category);
        const matchesPrimaryAgency =
          selectedPrimaryAgencies.length === 0 ||
          selectedPrimaryAgencies.includes(row.primaryAgency);
        const matchesYear =
          selectedYears.length === 0 ||
          (row.year ? selectedYears.includes(row.year) : false);
        const matchesAttachment =
          selectedAttachments.length === 0 ||
          selectedAttachments.includes(row.hasAttachment ? "yes" : "no");

        return (
          matchesStatus &&
          matchesCategory &&
          matchesPrimaryAgency &&
          matchesYear &&
          matchesAttachment
        );
      }),
    [
      rows,
      selectedAttachments,
      selectedCategories,
      selectedPrimaryAgencies,
      selectedStatuses,
      selectedYears,
    ],
  );

  const viewMode = useSyncExternalStore(
    subscribeViewMode,
    getViewModeSnapshot,
    getServerViewModeSnapshot,
  );

  const handleViewModeChange = (nextViewMode: WgIssuesViewMode) => {
    window.localStorage.setItem(WG_ISSUES_VIEW_STORAGE_KEY, nextViewMode);
    window.dispatchEvent(new Event(WG_ISSUES_VIEW_CHANGE_EVENT));
  };

  const handleExport = useCallback(async () => {
    setIsExporting(true);
    setExportFeedback(null);

    try {
      await exportWorkingGroupIssues({
        language,
        selectedStatuses,
        selectedCategories,
        selectedPrimaryAgencies,
        selectedYears,
        selectedAttachments,
        statuses: filterStatuses,
        categories: filterCategories,
        agencies: filterAgencies,
      });
      setExportFeedback({
        severity: "success",
        message: tWgIssues(language, "exportSuccess"),
      });
    } catch (exportError) {
      setExportFeedback({
        severity: "error",
        message:
          exportError instanceof Error
            ? exportError.message
            : tWgIssues(language, "exportFailed"),
      });
    } finally {
      setIsExporting(false);
    }
  }, [
    filterAgencies,
    filterCategories,
    filterStatuses,
    language,
    selectedAttachments,
    selectedCategories,
    selectedPrimaryAgencies,
    selectedStatuses,
    selectedYears,
  ]);

  return (
    <Box
      sx={{
        minHeight: "calc(100dvh - 64px)",
        width: "100%",
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
        px: { xs: 2, md: 3 },
        py: { xs: 2, md: 3 },
      }}
    >
      <WgIssuesHeader
        canCreateIssue={canCreateIssue}
        canExport={canExportIssues}
        isExporting={isExporting}
        language={language}
        onCreateIssue={() => setOpenCreateIssueDialog(true)}
        onExport={() => {
          void handleExport();
        }}
      />

      <WgIssuesFilters
        categoryOptions={categoryOptions}
        language={language}
        onAttachmentChange={setSelectedAttachments}
        onCategoryChange={setSelectedCategories}
        onPrimaryAgencyChange={setSelectedPrimaryAgencies}
        onStatusChange={setSelectedStatuses}
        onYearChange={setSelectedYears}
        primaryAgencyOptions={filterAgencies}
        selectedAttachments={selectedAttachments}
        selectedCategories={selectedCategories}
        selectedPrimaryAgencies={selectedPrimaryAgencies}
        selectedYears={selectedYears}
        statusOptions={statusOptions}
        viewMode={viewMode}
        onViewModeChange={handleViewModeChange}
        selectedStatuses={selectedStatuses}
        yearOptions={yearOptions}
      />

      {viewMode === "list" && <WgIssuesStatsCards language={language} />}

      <Box
        sx={{
          flex: viewMode === "list" ? 1 : undefined,
          minHeight: 0,
          mt: 2,
          display: "flex",
          flexDirection: "column",
        }}
      >
        {error ? (
          <Typography sx={{ mb: 1, color: "#DC2626", fontSize: 13 }}>
            {error}
          </Typography>
        ) : null}

        {exportFeedback ? (
          <Typography
            sx={{
              mb: 1,
              color: exportFeedback.severity === "success" ? "#059669" : "#DC2626",
              fontSize: 13,
            }}
          >
            {exportFeedback.message}
          </Typography>
        ) : null}

        {isLoading ? (
          <Typography sx={{ mb: 1, color: "text.secondary", fontSize: 13 }}>
            Loading issues...
          </Typography>
        ) : null}

        <WgAIssuesTable
          language={language}
          rows={filteredRows}
          viewMode={viewMode}
        />
      </Box>

      {canCreateIssue ? (
        <CreateIssueDialog
          open={openCreateIssueDialog}
          onClose={() => setOpenCreateIssueDialog(false)}
        />
      ) : null}
    </Box>
  );
}