import { Building2, Calendar, Clock, RefreshCw, ArrowLeft } from "lucide-react";
import { Paper, Group, Stack, Title, Text, Button, Box } from "@mantine/core";

import type { BookingDetail } from "@/types/booking";
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
import { NextStepBanner } from "@/components/bookings/NextStepBanner";

import { detailStyles, formatDate } from "./booking-detail.styles";

export interface BookingRequestHeroProps {
  booking: BookingDetail;
  customerLabel: string;
  onBack: () => void;
  onRefresh: () => void;
  isFetching?: boolean;
}

/** Top hero for the request detail page: identity, status, next step, total value. */
export function BookingRequestHero({
  booking,
  customerLabel,
  onBack,
  onRefresh,
  isFetching,
}: BookingRequestHeroProps) {
  const amount = Number(booking.totalAmount);

  return (
    <Paper radius="md" withBorder p="xl" style={detailStyles.card}>
      <Button
        variant="subtle"
        color="gray"
        size="compact-sm"
        leftSection={<ArrowLeft size={16} />}
        onClick={onBack}
        mb="md"
        ml={-8}
        fw={600}
      >
        Back to list
      </Button>

      <Group justify="space-between" align="flex-start" wrap="wrap" gap="lg">
        <Stack gap="sm" style={{ flex: 1, minWidth: 0 }}>
          <Text size="xs" c="dimmed" fw={600} tt="uppercase" lts="0.06em">
            Booking reference
          </Text>
          <Group gap="sm" align="center" wrap="wrap">
            <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
              {booking.reference}
            </Title>
            <BookingStatusBadge status={booking.status} />
            <BookingPriorityBadge score={booking.priorityScore} />
          </Group>

          {booking.nextStep && (
            <Box maw={520}>
              <NextStepBanner nextStep={booking.nextStep} />
            </Box>
          )}

          <Group gap="lg" mt={4}>
            <Group gap={6} wrap="nowrap">
              <Building2 size={14} color="var(--mantine-color-gray-5)" />
              <Text size="sm" fw={500}>
                {customerLabel}
              </Text>
            </Group>
            <Group gap={6} wrap="nowrap">
              <Calendar size={14} color="var(--mantine-color-gray-5)" />
              <Text size="sm" c="dimmed">
                Scheduled {booking.scheduledDate}
              </Text>
            </Group>
            <Group gap={6} wrap="nowrap">
              <Clock size={14} color="var(--mantine-color-gray-5)" />
              <Text size="sm" c="dimmed">
                Created {formatDate(booking.createdAt)}
              </Text>
            </Group>
          </Group>
        </Stack>

        <Stack gap="sm" align="flex-end">
          <Paper radius="md" withBorder p="md" miw={200} style={detailStyles.highlightCard}>
            <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em" ta="right">
              Total value
            </Text>
            <Text size="xl" fw={700} c="green.9" ta="right" mt={4} style={{ fontVariantNumeric: "tabular-nums" }}>
              {booking.paymentCurrency}{" "}
              {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
            </Text>
            <Text size="xs" c="dimmed" ta="right" mt={2}>
              {booking.paymentStatus}
            </Text>
          </Paper>
          <Button
            variant="default"
            size="sm"
            leftSection={<RefreshCw size={15} />}
            loading={isFetching}
            onClick={onRefresh}
          >
            Refresh
          </Button>
        </Stack>
      </Group>
    </Paper>
  );
}
