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

import type { Freight } from "@edr/types";

import { fmtDate, 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>
  );
}

export function PaymentCard({
  booking,
  pricing,
}: {
  booking: Freight.IBooking;
  pricing: Pricing;
}) {
  const paid = booking.paymentStatus === "PAID";
  // Customer sees the grand total plus the price breakdown that makes it up.
  // A staff adjustment, when present, overrides the computed total and is
  // flagged with an "Adjusted by EDR" badge.
  const isAdjusted =
    booking.adjustedTotalAmount !== null &&
    booking.adjustedTotalAmount !== undefined;
  const currency = pricing?.currency ?? booking.paymentCurrency;
  const total = isAdjusted
    ? `${Number(booking.adjustedTotalAmount).toLocaleString()} ${currency}`
    : priceTotal(pricing);
  const hasItems = priceLineItems(pricing).length > 0;

  return (
    <SectionCard p={22}>
      <Group justify="space-between" align="center">
        <CardTitle>Payment</CardTitle>
        <Group
          component="span"
          gap={6}
          align="center"
          wrap="nowrap"
          style={{
            display: "inline-flex",
            borderRadius: 999,
            padding: "5px 11px",
            fontSize: 11.5,
            fontWeight: 700,
            backgroundColor: paid ? "#ECF6F1" : "#FDF3E0",
            color: paid ? "#0A6F4D" : "#9A5B00",
            border: paid ? "1px solid #CDEBDD" : undefined,
          }}
        >
          {paid && <CheckCircle2 size={13} />}
          {paid
            ? "Paid"
            : (booking.paymentStatus?.replace(/_/g, " ") ?? "Pending")}
        </Group>
      </Group>
      <Box mt={12}>
        <Text fz="26px" fw={800} c="#10202F">
          {total}
        </Text>
        {isAdjusted && (
          <Box
            component="span"
            mt={6}
            style={{
              display: "inline-block",
              borderRadius: 6,
              backgroundColor: "#EAF1FB",
              padding: "3px 8px",
              fontSize: 11,
              fontWeight: 700,
              color: "#2E5B96",
            }}
          >
            Adjusted by EDR
          </Box>
        )}
        {isAdjusted && booking.adjustmentReason && (
          <Text mt={6} fz="12.5px" c="#6B7C8E">
            {booking.adjustmentReason}
          </Text>
        )}
        {paid && (
          <Text mt={4} fz="12.5px" c="#9AA8B5">
            Paid · {fmtDate(booking.updatedAt)}
          </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">
              {isAdjusted ? "Adjusted total" : "Total"}
            </Text>
            <Text fz="15px" fw={800} c="#10202F">
              {total}
            </Text>
          </Group>
        </>
      )}
      {/* <Button */}
      {/*   fullWidth */}
      {/*   mt={16} */}
      {/*   variant="default" */}
      {/*   radius={10} */}
      {/*   leftSection={<FileText size={17} color="#475569" />} */}
      {/*   styles={{ root: { height: 46 }, label: { fontSize: 13.5, fontWeight: 700, color: "#10202F" } }} */}
      {/* > */}
      {/*   Download invoice */}
      {/* </Button> */}
    </SectionCard>
  );
}
