import { Box, Group, Stack, Text } from "@mantine/core";
import { Clock } from "lucide-react";

import { priceLineItems, priceTotal, type Pricing } from "../utils";
import { CardTitle, SectionCard } from "./layout";

function LineItems({ pricing }: { pricing: Pricing }) {
  const items = priceLineItems(pricing);
  if (items.length === 0) return null;
  return (
    <Stack gap={11}>
      {items.map((it) => (
        <Group key={it.label} justify="space-between" wrap="nowrap">
          <Text fz="13px" c="#6B7C8E">
            {it.label}
          </Text>
          <Text fz="13px" fw={600} c="#10202F">
            {it.value}
          </Text>
        </Group>
      ))}
    </Stack>
  );
}

const Divider = () => <Box my={16} h={1} w="100%" bg="#EEF2F6" />;

export function EstimateCard({
  pricing,
  title,
  chip,
}: {
  pricing: Pricing;
  title: string;
  chip: string;
}) {
  const hasItems = priceLineItems(pricing).length > 0;
  return (
    <SectionCard p={22}>
      <Group justify="space-between" align="center">
        <CardTitle>{title}</CardTitle>
        <Group
          component="span"
          gap={6}
          align="center"
          wrap="nowrap"
          style={{
            display: "inline-flex",
            borderRadius: 999,
            backgroundColor: "#F1F4F7",
            padding: "5px 11px",
            fontSize: 11.5,
            fontWeight: 700,
            color: "#6B7C8E",
          }}
        >
          <Clock size={13} />
          {chip}
        </Group>
      </Group>
      <Box mt={12}>
        <Group gap={8} align="flex-end" wrap="nowrap">
          <Text fz="26px" fw={800} c="#10202F" lh={1.1}>
            {priceTotal(pricing)}
          </Text>
          <Box
            component="span"
            mb={4}
            style={{
              borderRadius: 6,
              backgroundColor: "#FEF6E6",
              padding: "3px 7px",
              fontSize: 11,
              fontWeight: 700,
              color: "#B07D14",
            }}
          >
            est.
          </Box>
        </Group>
        <Text mt={4} fz="12.5px" c="#9AA8B5">
          A firm price is confirmed after EDR reviews your booking.
        </Text>
      </Box>
      {hasItems && (
        <>
          <Divider />
          <LineItems pricing={pricing} />
          <Group
            justify="space-between"
            mt={12}
            pt={14}
            style={{ borderTop: "1px solid #EEF2F6" }}
          >
            <Text fz="14px" fw={800} c="#10202F">
              Estimated total
            </Text>
            <Text fz="15px" fw={800} c="#10202F">
              {priceTotal(pricing)}
            </Text>
          </Group>
        </>
      )}
    </SectionCard>
  );
}

// The booking payment card (countdown + breakdown + invoices + download) now
// lives in ./BookingPaymentPanel. EstimateCard above stays for the draft and
// changes-requested views, which only show an estimate.
