import { Box, Divider, Group, Text } from "@mantine/core";
import { Building2, Landmark, Mail, MapPin, Phone, User } from "lucide-react";
import type { ReactNode } from "react";

import type { BookingDetail } from "../booking-detail-types";
import { CardTitle, SectionCard } from "./layout";

function InfoRow({
  icon,
  label,
  value,
}: {
  icon: ReactNode;
  label: string;
  value: string;
}) {
  return (
    <Group gap={10} align="flex-start" wrap="nowrap" py={8}>
      <Box
        style={{
          width: 30,
          height: 30,
          borderRadius: 9,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#F1F4F7",
          color: "#475569",
          flexShrink: 0,
        }}
      >
        {icon}
      </Box>
      <Box miw={0} flex={1}>
        <Text fz="10.5px" fw={600} c="#9AA8B5" tt="uppercase" style={{ letterSpacing: "0.04em" }}>
          {label}
        </Text>
        <Text mt={2} fz="13.5px" fw={700} c="#10202F" style={{ wordBreak: "break-word" }}>
          {value}
        </Text>
      </Box>
    </Group>
  );
}

/**
 * Customer/company information billed on this booking — the joined
 * `company` relation the detail endpoint always returns (name, TIN, contact
 * details), which the previous UI never surfaced at all.
 */
export function CompanyInfoCard({ booking }: { booking: BookingDetail }) {
  const company = booking.company;
  if (!company) return null;

  const contact = company.contactPersonName
    ? company.contactPersonPhone
      ? `${company.contactPersonName} · ${company.contactPersonPhone}`
      : company.contactPersonName
    : null;

  return (
    <SectionCard>
      <Group justify="space-between" align="center" mb={4}>
        <CardTitle>Customer Information</CardTitle>
        {booking.isGovernment && (
          <Group
            component="span"
            gap={5}
            align="center"
            wrap="nowrap"
            style={{
              display: "inline-flex",
              borderRadius: 999,
              backgroundColor: "#EAF1FE",
              border: "1px solid #CFDDFB",
              padding: "3px 10px",
              fontSize: 11,
              fontWeight: 700,
              color: "#1E40AF",
            }}
          >
            <Landmark size={12} />
            Government
          </Group>
        )}
      </Group>
      <Text fz="16px" fw={800} c="#10202F" mt={6}>
        {company.name || "—"}
      </Text>
      {booking.governmentInstitution && (
        <Text fz="12.5px" c="#6B7C8E" mt={2}>
          {booking.governmentInstitution}
        </Text>
      )}

      <Divider my={10} color="#F2F5F8" />

      <Box>
        {company.tin && (
          <InfoRow icon={<Building2 size={15} />} label="TIN" value={company.tin} />
        )}
        {company.email && (
          <InfoRow icon={<Mail size={15} />} label="Email" value={company.email} />
        )}
        {company.phone && (
          <InfoRow icon={<Phone size={15} />} label="Phone" value={company.phone} />
        )}
        {company.address && (
          <InfoRow icon={<MapPin size={15} />} label="Address" value={company.address} />
        )}
        {contact && (
          <InfoRow icon={<User size={15} />} label="Contact person" value={contact} />
        )}
      </Box>
    </SectionCard>
  );
}
