import {
  ActionIcon,
  Box,
  Button,
  Card,
  Group,
  Select,
  Stack,
  Tabs,
  Text,
  TextInput,
} from "@mantine/core";
import {
  AlertTriangle,
  ArrowRight,
  Calendar,
  CheckCircle2,
  Clock,
  LayoutList,
  Package,
  Plus,
  RefreshCw,
  Search,
  User,
  X,
} from "lucide-react";
import { useCallback, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";

import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
// BookingStatusTabs / Operations* queues removed — replaced by booking-kind tabs.
import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
import { bookingTable } from "@/components/bookings/booking-ui.styles";
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import {
  useBookingDetail,
  useBookingList,
  useBookingListSummary,
} from "@/hooks/bookings/useBookings";
import type { BookingListFilter } from "@/services/bookings.service";
import type { BookingListRow } from "@/types/booking";
import {
  Badge,
  DataTable,
  DataTableFooter,
  usePagination,
  type ColumnDef,
} from "@edr/ui-common";

/** The two booking-kind tabs: one-time vs general-contract bookings. */
type BookingKindTab = "ONE_TIME" | "GENERAL_CONTRACT";

const BOOKING_KIND_TABS: { value: BookingKindTab; label: string }[] = [
  { value: "ONE_TIME", label: "One-time booking" },
  { value: "GENERAL_CONTRACT", label: "General booking" },
];

/** Status options for the filter select — built from the shared status styles. */
const STATUS_OPTIONS = Object.entries(BOOKING_STATUS_STYLES).map(
  ([value, { label }]) => ({ value, label }),
);

const TRADE_DIRECTION_OPTIONS = [
  { value: "IMPORT", label: "Import" },
  { value: "EXPORT", label: "Export" },
  { value: "DOMESTIC", label: "Domestic" },
];

const FREIGHT_TYPE_OPTIONS = [
  { value: "CONTAINER", label: "Container" },
  { value: "BULK", label: "Bulk" },
];

function formatDate(value: string | null | undefined): string {
  if (!value) return "—";
  const d = new Date(value);
  return Number.isNaN(d.getTime())
    ? "—"
    : d.toLocaleDateString(undefined, {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
}

export default function BookingRequestsPage() {
  const navigate = useNavigate();
  const { pagination, setPagination } = usePagination({ pageSize: 10 });
  const [query, setQuery] = useState("");
  // Booking-kind tabs (one-time vs general contract) replace the old status tabs.
  const [kindTab, setKindTab] = useState<BookingKindTab>("ONE_TIME");
  // Per-tab filter selects (each nullable = "all").
  const [statusFilter, setStatusFilter] = useState<string | null>(null);
  const [directionFilter, setDirectionFilter] = useState<string | null>(null);
  const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(null);
  const [allocateOpen, setAllocateOpen] = useState(false);
  const [allocateIds, setAllocateIds] = useState<string[]>([]);
  const suppressRowClickRef = useRef(false);
  const suppressRowClick = useCallback(() => {
    suppressRowClickRef.current = true;
    window.setTimeout(() => {
      suppressRowClickRef.current = false;
    }, 400);
  }, []);

  const filter: BookingListFilter = useMemo(() => {
    return {
      page: pagination.pageIndex + 1,
      pageSize: pagination.pageSize,
      sortBy: "createdAt",
      sortOrder: "DESC",
      // React Query cache key per kind tab.
      tab: kindTab,
      bookingType: kindTab,
      ...(statusFilter ? { statuses: statusFilter } : {}),
      ...(directionFilter ? { tradeDirection: directionFilter } : {}),
      ...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
    };
  }, [
    pagination.pageIndex,
    pagination.pageSize,
    kindTab,
    statusFilter,
    directionFilter,
    freightTypeFilter,
  ]);

  const { data, isLoading, isError, refetch, isFetching } = useBookingList(filter);
  const primaryAllocateId = allocateIds[0];
  const { data: allocateBooking } = useBookingDetail(
    allocateOpen ? primaryAllocateId : undefined,
  );
  const {
    data: summary,
    isLoading: summaryLoading,
    refetch: refetchSummary,
  } = useBookingListSummary(filter);

  const rows = useMemo(() => {
    const items = (data?.items ?? []).map(toBookingListRow);
    const q = query.trim().toLowerCase();
    if (!q) return items;
    return items.filter(
      (b) =>
        b.reference.toLowerCase().includes(q) ||
        b.customerLabel.toLowerCase().includes(q),
    );
  }, [data?.items, query]);

  const total = data?.total ?? 0;
  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
  const hasSearch = query.trim().length > 0;
  const showEmpty = !isLoading && !isError && rows.length === 0;

  const metrics = summary?.metrics;
  const tabCounts = summary?.tabs;

  const handleRefresh = useCallback(() => {
    void refetch();
    void refetchSummary();
  }, [refetch, refetchSummary]);

  const handleRowClick = useCallback(
    (row: BookingListRow) => {
      if (suppressRowClickRef.current) return;
      navigate(`/dashboard/booking-requests/${row.id}`);
    },
    [navigate],
  );

  const columns: ColumnDef<BookingListRow>[] = [
    {
      id: "booking",
      header: () => <span className={bookingTable.headerCell}>Booking</span>,
      cell: ({ row }) => {
        const b = row.original;
        return (
          <div className="flex items-center gap-3 py-1.5">
            <div className={bookingTable.rowIcon}>
              <Package className="size-4" strokeWidth={1.75} />
            </div>
            <div className="min-w-0">
              <p className="truncate font-medium text-foreground">{b.reference}</p>
              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
                <User className="size-3 shrink-0 opacity-70" />
                {b.customerLabel}
              </p>
            </div>
          </div>
        );
      },
    },
    {
      id: "route",
      header: () => <span className={bookingTable.headerCell}>Route</span>,
      cell: ({ row }) => {
        const b = 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">{b.originLabel}</span>
              <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
              <span className="max-w-[8rem] truncate">{b.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"
              >
                {b.tradeDirection}
              </Badge>
              <Badge
                variant="secondary"
                className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
              >
                {b.freightType}
              </Badge>
            </div>
          </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}
            consolidated={Boolean(row.original.consolidationPartnerId)}
            partnerReference={row.original.consolidationPartnerReference}
          />
        </div>
      ),
      meta: {
        headerClassName: "min-w-[11rem]",
        cellClassName: "min-w-[11rem]",
      },
    },
    {
      id: "approval",
      header: () => (
        <span className={bookingTable.headerCell}>Approval</span>
      ),
      cell: ({ row }) => <BookingApprovalProgressCell row={row.original} />,
    },
    {
      id: "scheduled",
      header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
      cell: ({ row }) => (
        <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
          <Calendar className="size-3.5" />
          {formatDate(row.original.scheduledDate)}
        </span>
      ),
    },
    {
      id: "priority",
      header: () => <span className={bookingTable.headerCell}>Priority</span>,
      cell: ({ row }) => (
        <BookingPriorityBadge score={row.original.priorityScore} />
      ),
    },
    {
      id: "actions",
      size: 140,
      cell: ({ row }) => (
        <BookingActionsMenu
          row={row.original}
          variant="table"
          onSuppressRowClick={suppressRowClick}
        />
      ),
    },
  ];

  return (
    <PageContainer>
      <Stack gap="lg">
          <PageHeader
            title="Booking requests"
            subtitle="Review, approve, and schedule freight booking requests."
            action={
              <>
                <Button
                  color="edr-green"
                  leftSection={<Plus size={18} />}
                  onClick={() => navigate("/dashboard/booking-requests/new")}
                >
                  Create booking
                </Button>
                <Button
                  variant="default"
                  leftSection={<RefreshCw size={16} />}
                  loading={isFetching}
                  onClick={handleRefresh}
                >
                  Refresh
                </Button>
              </>
            }
          />

          <KpiStrip
            loading={summaryLoading}
            items={[
              {
                label: "In queue",
                value: metrics?.inQueue ?? 0,
                icon: LayoutList,
                color: "edr-green",
              },
              {
                label: "Needs action",
                value: metrics?.needsAction ?? 0,
                icon: Clock,
                color: "yellow",
              },
              {
                label: "Urgent",
                value: metrics?.urgent ?? 0,
                icon: AlertTriangle,
                color: "red",
              },
              {
                label: "Completed",
                value: tabCounts?.completed ?? 0,
                icon: CheckCircle2,
                color: "edr-green",
              },
            ]}
          />

          {/* Status tabs replaced by booking-kind tabs (one-time / general). The
              old BookingStatusTabs is commented out — status is now a filter select.
          <BookingStatusTabs
            active={activeTab}
            onChange={(tab) => {
              setActiveTab(tab);
              setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
            }}
            counts={tabCounts}
          />
          */}

          <Tabs
            value={kindTab}
            onChange={(value) => {
              setKindTab((value as BookingKindTab) ?? "ONE_TIME");
              setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
            }}
          >
            <Tabs.List>
              {BOOKING_KIND_TABS.map((t) => (
                <Tabs.Tab key={t.value} value={t.value}>
                  {t.label}
                </Tabs.Tab>
              ))}
            </Tabs.List>
          </Tabs>

          <Card p={0}>
            <Stack gap={0}>
              <Box px="md" pt="md" pb="sm" w="100%">
                <Stack gap="sm">
                  <Group justify="space-between" gap="md" wrap="wrap">
                    <TextInput
                      placeholder="Search reference or customer…"
                      leftSection={<Search size={18} />}
                      value={query}
                      onChange={(e) => setQuery(e.target.value)}
                      rightSection={
                        query && (
                          <ActionIcon
                            size="sm"
                            color="gray"
                            radius="md"
                            variant="transparent"
                            onClick={() => setQuery("")}
                          >
                            <X size={16} />
                          </ActionIcon>
                        )
                      }
                      style={{ flex: 1, minWidth: "200px" }}
                      radius="lg"
                    />
                    <Text size="sm" c="dimmed">
                      {total} record{total !== 1 ? "s" : ""}
                    </Text>
                  </Group>
                  <Group gap="sm" wrap="wrap">
                    <Select
                      placeholder="All statuses"
                      data={STATUS_OPTIONS}
                      value={statusFilter}
                      onChange={(v) => {
                        setStatusFilter(v);
                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                      }}
                      clearable
                      searchable
                      radius="lg"
                      style={{ minWidth: 200 }}
                    />
                    <Select
                      placeholder="All directions"
                      data={TRADE_DIRECTION_OPTIONS}
                      value={directionFilter}
                      onChange={(v) => {
                        setDirectionFilter(v);
                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                      }}
                      clearable
                      radius="lg"
                      style={{ minWidth: 170 }}
                    />
                    <Select
                      placeholder="All freight types"
                      data={FREIGHT_TYPE_OPTIONS}
                      value={freightTypeFilter}
                      onChange={(v) => {
                        setFreightTypeFilter(v);
                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                      }}
                      clearable
                      radius="lg"
                      style={{ minWidth: 170 }}
                    />
                  </Group>
                </Stack>
              </Box>

              {showEmpty ? (
                <Box px="md" pb="md">
                  <BookingTableEmpty
                    isError={isError}
                    hasSearch={hasSearch}
                    onRetry={handleRefresh}
                  />
                </Box>
              ) : (
                <Box style={{ overflowX: "auto" }} w="100%">
                  <DataTable
                    columns={columns}
                    data={rows}
                    status={isLoading ? "loading" : isError ? "error" : "success"}
                    onRowClick={handleRowClick}
                    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>

        {allocateBooking ? (
          <AllocateBookingWizard
            booking={allocateBooking}
            opened={allocateOpen}
            onClose={() => {
              setAllocateOpen(false);
              setAllocateIds([]);
              void refetch();
            }}
            initialBookingIds={allocateIds}
          />
        ) : null}
    </PageContainer>
  );
}