import { directionLabel } from "@/lib/utils";
import {
  ActionIcon,
  Box,
  Card,
  Group,
  Select,
  Stack,
  Tabs,
  Text,
  TextInput,
  ThemeIcon,
} from "@mantine/core";
import { useDebouncedValue } from "@mantine/hooks";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import {
  ArrowRight,
  FileText,
  Inbox,
  RefreshCw,
  Repeat,
  Search,
  User,
  X,
} from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import { bookingTable } from "@/components/bookings/booking-ui.styles";
import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge";
import { PageContainer, PageHeader } from "@/components/page";
import {
  toContractListRow,
  type ContractListRow,
} from "@/features/contracts/mapContractListRow";
import { bookingsService } from "@/services/bookings.service";
import { contractsService } from "@/services/contracts.service";
import type { BookingDetail } from "@/types/booking";
import {
  Badge,
  DataTable,
  DataTableFooter,
  usePagination,
  type ColumnDef,
} from "@edr/ui-common";

/**
 * Operations "Clearance Documents" hub — worklist for clearance-document
 * review on contracts WITHOUT customs clearing (self-clearance):
 * Contracts tab = contract-level review (one-time flow), General tab =
 * per-booking review under GENERAL non-customs contracts. Rows deep-link to
 * the existing review detail pages; search / status filter / pagination are
 * all server-side.
 */

type HubTab = "contracts" | "general";

const PAGE_SIZE = 10;

/** Status filter options for the Contracts tab (values = `statuses` param). */
const CONTRACT_STATUS_OPTIONS = [
  {
    value: [
      "AWAITING_CLEARANCE_DOCUMENTS",
      "CLEARANCE_UNDER_REVIEW",
      "CLEARANCE_READY_FOR_BOOKING",
      "FULLY_EXECUTED",
      "CONTRACT_ACTIVE",
      "ACTIVE_SHIPMENT_IN_PROGRESS",
      "CONTRACT_CLOSED",
      "CANCELLED",
    ].join(","),
    label: "All statuses",
  },
  { value: "AWAITING_CLEARANCE_DOCUMENTS", label: "Awaiting documents" },
  { value: "CLEARANCE_UNDER_REVIEW", label: "Under review" },
  { value: "CLEARANCE_READY_FOR_BOOKING", label: "Ready for booking" },
  { value: "FULLY_EXECUTED,CONTRACT_ACTIVE", label: "Finalized" },
  {
    value: "ACTIVE_SHIPMENT_IN_PROGRESS,CONTRACT_CLOSED",
    label: "In progress / closed",
  },
  { value: "CANCELLED", label: "Cancelled" },
];

/** Status filter options for the General (per-booking) tab. */
const BOOKING_STATUS_OPTIONS = [
  {
    value: "AWAITING_DOCUMENTS,DOCUMENTS_UNDER_REVIEW,CLEARANCE_READY",
    label: "All statuses",
  },
  { value: "AWAITING_DOCUMENTS", label: "Awaiting documents" },
  { value: "DOCUMENTS_UNDER_REVIEW", label: "Under review" },
  { value: "CLEARANCE_READY", label: "Clearance ready" },
];

export default function ClearanceDocumentsPage() {
  const navigate = useNavigate();
  const [hubTab, setHubTab] = useState<HubTab>("contracts");
  const [query, setQuery] = useState("");
  const [debouncedQuery] = useDebouncedValue(query, 300);
  const [contractStatuses, setContractStatuses] = useState(
    CONTRACT_STATUS_OPTIONS[0].value,
  );
  const [bookingStatuses, setBookingStatuses] = useState(
    BOOKING_STATUS_OPTIONS[0].value,
  );
  const { pagination, setPagination } = usePagination({ pageSize: PAGE_SIZE });

  const search = debouncedQuery.trim() || undefined;

  const resetPage = useCallback(() => {
    setPagination({ pageIndex: 0, pageSize: PAGE_SIZE });
  }, [setPagination]);

  const page = pagination.pageIndex + 1;

  const contractsQuery = useQuery({
    queryKey: [
      "clearance-documents",
      "contracts",
      contractStatuses,
      page,
      search,
    ],
    queryFn: () =>
      contractsService.getOpsClearanceQueue({
        page,
        pageSize: PAGE_SIZE,
        statuses: contractStatuses,
        search,
      }),
    enabled: hubTab === "contracts",
    placeholderData: keepPreviousData,
  });

  const generalQuery = useQuery({
    queryKey: ["clearance-documents", "general", bookingStatuses, page, search],
    queryFn: () =>
      // Per-booking self-clearance instances are drawdowns under GENERAL
      // non-customs contracts: they carry bookingType=ONE_TIME (each shipment
      // is one-time) with contractKind=GENERAL, so filtering on
      // bookingType=GENERAL_CONTRACT returned nothing. customsClearingEnabled
      // =false + the three per-booking clearance statuses already isolate
      // exactly this worklist — the same set the old booking-request tab showed.
      bookingsService.list({
        statuses: bookingStatuses,
        customsClearingEnabled: "false",
        page,
        pageSize: PAGE_SIZE,
        search,
      }),
    enabled: hubTab === "general",
    placeholderData: keepPreviousData,
  });

  const contractRows = useMemo(
    () => (contractsQuery.data?.items ?? []).map(toContractListRow),
    [contractsQuery.data?.items],
  );
  const bookingRows = generalQuery.data?.items ?? [];

  const contractColumns: ColumnDef<ContractListRow>[] = useMemo(
    () => [
      {
        id: "contract",
        header: () => <span className={bookingTable.headerCell}>Customer</span>,
        cell: ({ row }) => {
          const c = row.original;
          return (
            <div className="flex items-center gap-3 py-1.5">
              <div className={bookingTable.rowIcon}>
                <User className="size-4" strokeWidth={1.75} />
              </div>
              <div className="min-w-0">
                <p className="truncate font-medium text-foreground">
                  {c.customerLabel}
                </p>
                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
                  <FileText className="size-3 shrink-0 opacity-70" />
                  {c.reference}
                </p>
              </div>
            </div>
          );
        },
      },
      {
        id: "route",
        header: () => <span className={bookingTable.headerCell}>Route</span>,
        cell: ({ row }) => {
          const c = row.original;
          return (
            <div className="space-y-1 py-1">
              <div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
                <span className="max-w-[8rem] truncate">{c.originLabel}</span>
                <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
                <span className="max-w-[8rem] truncate">
                  {c.destinationLabel}
                </span>
              </div>
              <div className="flex gap-1.5">
                <Badge
                  variant="outline"
                  className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
                >
                  {directionLabel(c.tradeDirection)}
                </Badge>
                <Badge
                  variant="secondary"
                  className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
                >
                  {c.freightType}
                </Badge>
              </div>
            </div>
          );
        },
      },
      {
        id: "kind",
        header: () => <span className={bookingTable.headerCell}>Kind</span>,
        cell: ({ row }) => (
          <Badge
            variant="outline"
            className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase"
          >
            {row.original.contractKind === "GENERAL" ? (
              <span className="inline-flex items-center gap-1">
                <Repeat className="size-3" /> General
              </span>
            ) : (
              "One-time"
            )}
          </Badge>
        ),
      },
      {
        id: "status",
        size: 200,
        minSize: 180,
        header: () => <span className={bookingTable.headerCell}>Status</span>,
        cell: ({ row }) => (
          <div className="py-1">
            <ContractStatusBadge
              status={row.original.status}
              isRenewal={row.original.isRenewal}
            />
          </div>
        ),
        meta: {
          headerClassName: "min-w-[11rem]",
          cellClassName: "min-w-[11rem]",
        },
      },
    ],
    [],
  );

  const bookingColumns: ColumnDef<BookingDetail>[] = useMemo(
    () => [
      {
        id: "booking",
        header: () => <span className={bookingTable.headerCell}>Customer</span>,
        cell: ({ row }) => {
          const b = row.original;
          const customer = b.isGovernment
            ? (b.governmentInstitution ?? "Government")
            : (b.company?.name ?? "—");
          return (
            <div className="flex items-center gap-3 py-1.5">
              <div className={bookingTable.rowIcon}>
                <User className="size-4" strokeWidth={1.75} />
              </div>
              <div className="min-w-0">
                <p className="truncate font-medium text-foreground">
                  {customer}
                </p>
                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
                  <FileText className="size-3 shrink-0 opacity-70" />
                  {b.reference}
                </p>
              </div>
            </div>
          );
        },
      },
      {
        id: "contractRef",
        header: () => <span className={bookingTable.headerCell}>Contract</span>,
        cell: ({ row }) => (
          <Text size="sm">{row.original.contractReference ?? "—"}</Text>
        ),
      },
      {
        id: "shipment",
        header: () => <span className={bookingTable.headerCell}>Shipment</span>,
        cell: ({ row }) => {
          const b = row.original;
          return (
            <div className="flex gap-1.5 py-1">
              <Badge
                variant="outline"
                className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
              >
                {b.tradeDirection ?? "—"}
              </Badge>
              <Badge
                variant="secondary"
                className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
              >
                {b.freightType ?? "—"}
              </Badge>
            </div>
          );
        },
      },
      {
        id: "status",
        size: 200,
        minSize: 180,
        header: () => <span className={bookingTable.headerCell}>Status</span>,
        cell: ({ row }) => (
          <div className="py-1">
            <BookingStatusBadge status={row.original.status} />
          </div>
        ),
        meta: {
          headerClassName: "min-w-[11rem]",
          cellClassName: "min-w-[11rem]",
        },
      },
    ],
    [],
  );

  const isContracts = hubTab === "contracts";
  const activeQuery = isContracts ? contractsQuery : generalQuery;
  const total = activeQuery.data?.total ?? 0;
  const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
  const showEmpty =
    !activeQuery.isLoading &&
    !activeQuery.isError &&
    (isContracts ? contractRows.length : bookingRows.length) === 0;
  const tableStatus = activeQuery.isLoading
    ? "loading"
    : activeQuery.isError
      ? "error"
      : "success";

  const statusOptions = isContracts
    ? CONTRACT_STATUS_OPTIONS
    : BOOKING_STATUS_OPTIONS;
  const statusValue = isContracts ? contractStatuses : bookingStatuses;
  const setStatusValue = isContracts ? setContractStatuses : setBookingStatuses;

  return (
    <PageContainer>
      <Stack gap="lg">
        <PageHeader
          title="Clearance Documents"
          subtitle="Operations review of customer clearance documents for contracts without customs clearing."
          action={
            <ActionIcon
              variant="default"
              size="lg"
              radius="md"
              loading={activeQuery.isFetching}
              onClick={() => void activeQuery.refetch()}
              aria-label="Refresh"
            >
              <RefreshCw size={16} />
            </ActionIcon>
          }
        />

        <Tabs
          value={hubTab}
          onChange={(v) => {
            setHubTab((v as HubTab) ?? "contracts");
            resetPage();
          }}
        >
          <Tabs.List>
            <Tabs.Tab value="contracts">Contracts</Tabs.Tab>
            <Tabs.Tab value="general">General</Tabs.Tab>
          </Tabs.List>
        </Tabs>

        <Card p={0}>
          <Stack gap={0}>
            <Box px="md" pt="md" pb="sm" w="100%">
              <Group justify="space-between" gap="md" wrap="wrap">
                <TextInput
                  placeholder={
                    isContracts
                      ? "Search reference or customer…"
                      : "Search booking, contract or customer…"
                  }
                  leftSection={<Search size={18} />}
                  value={query}
                  onChange={(e) => {
                    setQuery(e.target.value);
                    resetPage();
                  }}
                  rightSection={
                    query && (
                      <ActionIcon
                        size="sm"
                        color="gray"
                        radius="md"
                        variant="transparent"
                        onClick={() => {
                          setQuery("");
                          resetPage();
                        }}
                      >
                        <X size={16} />
                      </ActionIcon>
                    )
                  }
                  style={{ flex: 1, minWidth: "200px" }}
                  radius="lg"
                />
                <Select
                  data={statusOptions}
                  value={statusValue}
                  onChange={(v) => {
                    setStatusValue(v ?? statusOptions[0].value);
                    resetPage();
                  }}
                  allowDeselect={false}
                  radius="lg"
                  w={220}
                  aria-label="Filter by status"
                />
                <Text size="sm" c="dimmed">
                  {total} record{total !== 1 ? "s" : ""}
                </Text>
              </Group>
            </Box>

            {showEmpty ? (
              <Stack align="center" gap={8} py={48}>
                <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
                  <Inbox size={22} />
                </ThemeIcon>
                <Text c="dimmed">
                  No {isContracts ? "contracts" : "bookings"} match this view.
                </Text>
              </Stack>
            ) : (
              <Box style={{ overflowX: "auto" }} w="100%">
                {isContracts ? (
                  <DataTable
                    columns={contractColumns}
                    data={contractRows}
                    status={tableStatus}
                    onRowClick={(row) =>
                      navigate(
                        `/dashboard/contracts/clearance-documents/${row.id}`,
                      )
                    }
                    pagination={{
                      pageIndex: pagination.pageIndex,
                      pageSize: pagination.pageSize,
                      pageCount,
                      totalCount: total,
                    }}
                    tableOptions={{
                      state: { pagination },
                      onPaginationChange: setPagination,
                      manualPagination: true,
                      pageCount,
                    }}
                    containerClassName="border-0 shadow-none bg-transparent"
                    footer={DataTableFooter}
                  />
                ) : (
                  <DataTable
                    columns={bookingColumns}
                    data={bookingRows}
                    status={tableStatus}
                    onRowClick={(row) =>
                      navigate(`/dashboard/clearance/${row.id}`)
                    }
                    pagination={{
                      pageIndex: pagination.pageIndex,
                      pageSize: pagination.pageSize,
                      pageCount,
                      totalCount: total,
                    }}
                    tableOptions={{
                      state: { pagination },
                      onPaginationChange: setPagination,
                      manualPagination: true,
                      pageCount,
                    }}
                    containerClassName="border-0 shadow-none bg-transparent"
                    footer={DataTableFooter}
                  />
                )}
              </Box>
            )}
          </Stack>
        </Card>
      </Stack>
    </PageContainer>
  );
}
