export function AdminPageHeader({ title, subtitle, action }: { title: string; subtitle?: string; action?: React.ReactNode }) {
  return (
    <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
      <div>
        <p className="text-sm font-bold uppercase text-gold">Admin</p>
        <h1 className="mt-2 font-heading text-3xl font-black">{title}</h1>
        {subtitle ? <p className="mt-2 max-w-2xl text-sm text-[#666]">{subtitle}</p> : null}
      </div>
      {action}
    </div>
  );
}

export function AdminStatusBadge({ value }: { value?: string | null }) {
  const status = value || "-";
  const tone = ["PAID", "COMPLETED", "CLOSED"].includes(status)
    ? "badge-stock"
    : ["FAILED", "CANCELLED", "OVERDUE"].includes(status)
      ? "badge-warning"
      : ["PENDING", "NEW", "OPEN", "PROCESSING"].includes(status)
        ? "badge-gold"
        : "badge-muted";

  return <span className={`badge ${tone}`}>{status}</span>;
}

export function AdminTextCell({ value, className = "max-w-[220px]" }: { value?: string | null; className?: string }) {
  const text = value?.trim() || "-";
  return <span className={`block truncate ${className}`} title={text}>{text}</span>;
}

export function AdminPreviewCell({ value, max = 120, className = "max-w-[360px]" }: { value?: string | null; max?: number; className?: string }) {
  const text = value?.trim() || "-";
  const preview = text.length > max ? `${text.slice(0, max)}...` : text;
  return <span className={`block truncate text-[#666] ${className}`} title={text}>{preview}</span>;
}