import { Box, Badge, Group, Paper, Text, ThemeIcon } from "@mantine/core";
import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";

// Brand palette (mirrors the booking form's shared constants).
export const INK = "#10202F";
export const MUTED = "#6B7C8E";
export const GREEN = "#0EA371";
export const GREEN_DARK = "#0A6F4D";
export const BORDER = "#E6ECF2";

/**
 * A compact KPI tile used on the contracts list + detail header strips. Icon in
 * a tinted chip, big value, small label — consistent with the app's house cards.
 */
export function StatCard({
  label,
  value,
  hint,
  icon: Icon,
  color = "edr-green",
}: {
  label: string;
  value: ReactNode;
  hint?: string;
  icon: LucideIcon;
  color?: string;
}) {
  return (
    <Paper
      withBorder
      radius="lg"
      p="md"
      style={{ borderColor: BORDER, flex: 1, minWidth: 180 }}
    >
      <Group gap={12} wrap="nowrap" align="center">
        <ThemeIcon size={42} radius="md" variant="light" color={color}>
          <Icon size={20} />
        </ThemeIcon>
        <Box style={{ minWidth: 0 }}>
          <Text fz={24} fw={800} lh={1.05} style={{ color: INK, letterSpacing: "-0.02em" }}>
            {value}
          </Text>
          <Text fz={12} fw={600} c="dimmed" truncate>
            {label}
            {hint ? ` · ${hint}` : ""}
          </Text>
        </Box>
      </Group>
    </Paper>
  );
}

/** Visual config for a general-contract status. */
export const CONTRACT_STATUS_CONFIG: Record<
  string,
  { label: string; color: string; bg: string }
> = {
  DRAFT: { label: "Draft", color: "#6B7C8E", bg: "#EEF2F6" },
  SUBMITTED: { label: "Submitted", color: "#2E5B96", bg: "#EAF1FB" },
  PENDING_APPROVAL: { label: "Pending Approval", color: "#9A6700", bg: "#FFF6E5" },
  APPROVED_PENDING_SIGNATURE: { label: "Awaiting Signature", color: "#9A6700", bg: "#FFF6E5" },
  CONTRACT_READY: { label: "Ready to Sign", color: "#2E5B96", bg: "#EAF1FB" },
  SIGNED_CUSTOMER: { label: "Signed", color: "#2E5B96", bg: "#EAF1FB" },
  FULLY_EXECUTED: { label: "Awaiting Payment", color: "#9A6700", bg: "#FFF6E5" },
  CONTRACT_ACTIVE: { label: "Active", color: "#0A6F4D", bg: "#E7F6EE" },
  CONTRACT_CLOSED: { label: "Closed", color: "#6B7C8E", bg: "#EEF2F6" },
  EXPIRED: { label: "Expired", color: "#B42318", bg: "#FEECEB" },
  CANCELLED: { label: "Cancelled", color: "#B42318", bg: "#FEECEB" },
  REJECTED: { label: "Rejected", color: "#B42318", bg: "#FEECEB" },
};

export function ContractStatusBadge({ status }: { status: string }) {
  const cfg =
    CONTRACT_STATUS_CONFIG[status] ?? {
      label: status,
      color: MUTED,
      bg: "#EEF2F6",
    };
  return (
    <Badge
      variant="light"
      radius="sm"
      styles={{
        root: {
          backgroundColor: cfg.bg,
          color: cfg.color,
          fontWeight: 600,
          textTransform: "none",
          letterSpacing: 0,
        },
      }}
    >
      {cfg.label}
    </Badge>
  );
}

/** A labelled value used across the contract detail summary cards. */
export function MetaItem({
  label,
  value,
  icon,
}: {
  label: string;
  value: ReactNode;
  icon?: ReactNode;
}) {
  return (
    <div>
      <Text fz={12} fw={600} c="dimmed" mb={4} style={{ letterSpacing: 0.2 }}>
        {label}
      </Text>
      <Group gap={6} wrap="nowrap" align="center">
        {icon}
        <Text fz={14} fw={600} style={{ color: INK }}>
          {value}
        </Text>
      </Group>
    </div>
  );
}

/** Format a contracted/remaining quantity with its unit. */
export function formatQuantity(
  qty: number,
  unit?: string | null,
  isContainerLine?: boolean,
): string {
  const rounded = Number.isInteger(qty) ? qty : Number(qty.toFixed(2));
  if (isContainerLine) return `${rounded} containers`;
  if (unit === "PER_ITEM") return `${rounded} items`;
  return `${rounded} tons`;
}
