import { AlertIcon, CheckCircleIcon } from './Icons';

/** Result of an account action, passed back as ?ok= / ?err= */
export function Notice({ ok, err }: { ok?: string; err?: string }) {
  if (!ok && !err)
    return null;
  return err ? (
    <p role="alert" className="mb-5 flex items-start gap-2 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2.5 text-sm text-danger">
      <AlertIcon className="mt-0.5 h-4 w-4" /> {err}
    </p>
  ) : (
    <p role="status" className="mb-5 flex items-start gap-2 rounded-lg border border-ledger/30 bg-ledger-tint px-3 py-2.5 text-sm text-ledger">
      <CheckCircleIcon className="mt-0.5 h-4 w-4" /> {ok}
    </p>
  );
}

export function PageTitle({ title, intro }: { title: string; intro?: React.ReactNode }) {
  return (
    <header className="mb-6">
      <h1 className="font-serif text-3xl font-semibold tracking-tight">{title}</h1>
      {intro && <p className="mt-2 max-w-2xl text-sm leading-relaxed text-ink-2">{intro}</p>}
    </header>
  );
}

const STATUS: Record<string, [string, string]> = {
  accepted: ['Accepted', 'bg-ledger-soft text-ledger'],
  declined: ['Declined', 'bg-sunken text-muted'],
  closed: ['Closed', 'bg-sunken text-muted'],
  waiting: ['Waiting for reply', 'bg-brass-soft text-brass'],
  new: ['Being matched', 'bg-brass-soft text-brass'],
  routed: ['Sent to lawyers', 'bg-ledger-tint text-ledger'],
  expired: ['No lawyer accepted', 'bg-sunken text-muted'],
  retained: ['Lawyer instructed', 'bg-ledger-soft text-ledger'],
  contacted: ['Contacted', 'bg-ledger-tint text-ledger'],
};
export function StatusPill({ value }: { value: string }) {
  const [label, cls] = STATUS[value] ?? [value.replace(/_/g, ' '), 'bg-sunken text-muted'];
  return <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold capitalize ${cls}`}>{label}</span>;
}

export const fmt = (d: string | null | undefined) => (d ? new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }).format(new Date(d)) : '—');