import { useNavigate, useParams } from "react-router-dom";
import { ArrowLeft, FileSignature, Package } from "lucide-react";
import {
  Container,
  Stack,
  Grid,
  Center,
  Loader,
  Text,
  Paper,
  Button,
  Box,
} from "@mantine/core";

import { PageContainer } from "@/components/page";
import Breadcrumbs from "@/components/ui/Breadcrumbs";
import { ApprovalStepsCard } from "@/components/bookings/ApprovalStepsCard";
import { BookingActionsToolbar } from "@/components/bookings/BookingActionsToolbar";
import { BookingPricingSummary } from "@/components/bookings/BookingPricingSummary";
import { BookingWorkflowStepper } from "@/components/bookings/BookingWorkflowStepper";
import { ConsolidationWaitingBanner } from "@/components/bookings/detail/ConsolidationWaitingBanner";
import {
  detailStyles,
  BookingRequestHero,
  BookingRouteServiceCard,
  BookingMileServicesCard,
  BookingCargoCard,
  BookingCompanyCard,
  BookingContractSummaryCard,
  BookingDocumentsCard,
  type BookingFileView,
} from "@/components/bookings/detail";
import { WarehouseInfoCard } from "@/components/warehouses";
import { getStatusMeta } from "@/features/bookings/booking-status.config";
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
import { downloadBookingFile } from "@/services/files.service";
import {
  useBookingDetail,
  useBookingMutations,
} from "@/hooks/bookings/useBookings";
import toast from "react-hot-toast";

// Signature / generated-contract files are surfaced on the contract page, not
// in the booking's Documents list.
const SIGNATURE_FILE_CODES = new Set([
  "signature",
  "signature_customer",
  "signature_staff",
  "contract",
]);

export default function BookingRequestDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const {
    data: booking,
    isLoading,
    isError,
    refetch,
    isFetching,
  } = useBookingDetail(id);
  const mutations = useBookingMutations(id ?? "");

  const handleDownloadFile = async (file: BookingFileView) => {
    try {
      await downloadBookingFile(file.id, file.name);
    } catch {
      toast.error("Could not download file.");
    }
  };

  if (isLoading) {
    return (
      <PageContainer>
        <Center mih="60vh">
          <Stack align="center" gap="md">
            <Loader color="gray" />
            <Text size="sm" c="dimmed" fw={500}>
              Loading booking…
            </Text>
          </Stack>
        </Center>
      </PageContainer>
    );
  }

  if (isError || !booking) {
    return (
      <PageContainer>
        <Container size="sm" py="xl">
          <Paper
            radius="md"
            withBorder
            p="xl"
            ta="center"
            style={detailStyles.card}
          >
            <Center>
              <Box
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: 64,
                  height: 64,
                  borderRadius: 16,
                  background: "var(--mantine-color-gray-1)",
                  color: "var(--mantine-color-gray-6)",
                }}
              >
                <Package size={32} />
              </Box>
            </Center>
            <Text fw={700} size="lg" mt="lg">
              Booking not found
            </Text>
            <Text size="sm" c="dimmed" mt={4}>
              This request may have been removed or the link is invalid.
            </Text>
            <Button
              variant="default"
              mt="lg"
              leftSection={<ArrowLeft size={16} />}
              onClick={() => navigate("/dashboard/booking-requests")}
            >
              Back to booking requests
            </Button>
          </Paper>
        </Container>
      </PageContainer>
    );
  }

  const row = toBookingListRow(booking);
  const statusMeta = getStatusMeta(booking.status);
  const showContractButton = [
    "CONTRACT_READY",
    "SIGNED_CUSTOMER",
    "FULLY_EXECUTED",
  ].includes(booking.status);
  const showApprovalCard =
    booking.status === "PENDING_APPROVAL" ||
    booking.status === "APPROVED_PENDING_SIGNATURE";

  return (
    <PageContainer>
      <Breadcrumbs
        items={[
          { label: "Booking requests", href: "/dashboard/booking-requests" },
          { label: booking.reference },
        ]}
      />

      <Stack gap="lg">
        <BookingRequestHero
          booking={booking}
          customerLabel={row.customerLabel}
          onBack={() => navigate("/dashboard/booking-requests")}
          onRefresh={() => refetch()}
          isFetching={isFetching}
        />

        <BookingWorkflowStepper
          status={booking.status}
          title={statusMeta.title}
          description={statusMeta.description}
          titleColor={statusMeta.color}
        />

        {booking.status === "PENDING_CONSOLIDATION" && (
          <ConsolidationWaitingBanner bookingId={booking.id} />
        )}

        <Grid gap="lg">
          {/* LEFT — primary content */}
          <Grid.Col span={{ base: 12, lg: 8 }}>
            <Stack gap="lg">
              <BookingRouteServiceCard
                booking={booking}
                originLabel={row.originLabel}
                destinationLabel={row.destinationLabel}
              />
              <BookingMileServicesCard booking={booking} />
              <BookingCargoCard booking={booking} />
              {booking.contractSummary && (
                <BookingContractSummaryCard summary={booking.contractSummary} />
              )}
              <BookingDocumentsCard
                files={(booking.files ?? []).filter(
                  (f) => !SIGNATURE_FILE_CODES.has(f.code ?? ""),
                )}
                onDownload={handleDownloadFile}
              />
            </Stack>
          </Grid.Col>

          {/* RIGHT — sticky action / summary rail */}
          <Grid.Col span={{ base: 12, lg: 4 }}>
            <Box style={{ position: "sticky", top: 24 }}>
              <Stack gap="lg">
                <BookingCompanyCard booking={booking} />
                <BookingPricingSummary booking={booking} />
                <WarehouseInfoCard
                  bookingId={booking.id}
                  bookingReference={booking.reference}
                />
                <BookingActionsToolbar
                  booking={booking}
                  mutations={mutations}
                />
                {showContractButton && (
                  <Button
                    fullWidth
                    color="edr-green"
                    leftSection={<FileSignature size={16} />}
                    onClick={() =>
                      navigate(
                        `/dashboard/booking-requests/${booking.id}/contract`,
                      )
                    }
                  >
                    View & sign contract
                  </Button>
                )}
                {showApprovalCard && (
                  <ApprovalStepsCard booking={booking} mutations={mutations} />
                )}
              </Stack>
            </Box>
          </Grid.Col>
        </Grid>
      </Stack>
    </PageContainer>
  );
}
