import type { CSSProperties } from "react";

/** Single brand accent (gold). Used sparingly for icons/highlights, no gradients. */
export const BRAND_GREEN = "#F2A516";

/** Centralised style tokens for the booking detail page + cards. */
export const detailStyles = {
  page: {
    background: "var(--mantine-color-gray-0)",
    minHeight: "100vh",
  } satisfies CSSProperties,

  /** Flat white card — thin border, no shadow. */
  card: {
    background: "white",
    borderColor: "var(--mantine-color-gray-2)",
  } satisfies CSSProperties,

  cardHeader: {
    borderBottom: "1px solid var(--mantine-color-gray-2)",
  } satisfies CSSProperties,

  /** Subtle key-figure card (e.g. payment) — neutral tint, still flat. */
  highlightCard: {
    background: "var(--mantine-color-gray-0)",
    borderColor: "var(--mantine-color-gray-2)",
  } satisfies CSSProperties,

  /** Workflow status description banner — neutral default. */
  statusBanner: {
    background: "var(--mantine-color-gray-0)",
    borderColor: "var(--mantine-color-gray-2)",
  } satisfies CSSProperties,

  /** Workflow status banner for terminal (rejected/cancelled) states. */
  statusBannerTerminal: {
    background: "var(--mantine-color-red-0)",
    borderColor: "var(--mantine-color-red-2)",
  } satisfies CSSProperties,

  routeLine: {
    flex: 1,
    height: "1px",
    background: "var(--mantine-color-gray-3)",
  } satisfies CSSProperties,

  fileRow: {
    borderRadius: "8px",
    border: "1px solid var(--mantine-color-gray-2)",
    transition: "background 0.12s ease, border-color 0.12s ease",
  } satisfies CSSProperties,
} as const;

/** Map an approval-step status to a Mantine colour. */
export function approvalStatusColor(status: string): string {
  switch (status) {
    case "APPROVED":
      return "edr-green";
    case "PENDING":
      return "yellow";
    case "REJECTED":
      return "red";
    default:
      return "gray";
  }
}

export function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

export function formatDateTime(iso: string): string {
  return new Date(iso).toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

// ---- View model -----------------------------------------------------------

export interface BookingNamedRefView {
  id: string;
  label?: string;
  code?: string;
  companyName?: string;
  name?: string;
}

export interface BookingContainerView {
  id: string;
  quantity: number;
  vgmPerUnitTons: number;
  containerType?: {
    label?: string;
    sizeFt?: number;
    isReefer?: boolean;
  };
}

export interface BookingApprovalStepView {
  id: string;
  stepOrder: number;
  requiredRole: string;
  status: string;
  actionedAt?: string | null;
}

export interface BookingReviewNoteView {
  id: string;
  note: string;
  type: string;
  createdAt: string;
}

export interface BookingFileView {
  id: string;
  name: string;
  mimeType?: string;
  code?: string;
}

export interface BookingDetailView {
  id: string;
  reference: string;
  status: string;
  scheduledDate: string;
  totalAmount: number;
  paymentCurrency: string;
  paymentStatus: string;
  tradeDirection: string;
  freightType: string;
  priorityScore: number;
  cargoTotalWeightVgm: number;
  pnrCode?: string | null;
  consolidationPartnerId?: string | null;
  consolidationPartner?: (BookingNamedRefView & { reference?: string }) | null;
  /** End of the pay window once the booking is SELECTED_FOR_BATCH. */
  paymentDeadline?: string | null;
  createdAt: string;
  updatedAt: string;
  company?: BookingNamedRefView;
  originYard?: BookingNamedRefView;
  destinationYard?: BookingNamedRefView;
  serviceType?: BookingNamedRefView;
  cargoType?: BookingNamedRefView;
  shippingLine?: BookingNamedRefView;
  bookingContainers?: BookingContainerView[];
  approvalSteps?: BookingApprovalStepView[];
  reviewNotes?: BookingReviewNoteView[];
  files?: BookingFileView[];
}
