'use client'

import { LEAD_STAGE_LABELS, LEAD_STAGE_TONE, type LeadStage } from '@/lib/domain/broker-leads'

export const BTN = 'rounded-lg bg-[#0f1b2d] px-3 py-1.5 text-xs font-bold text-white transition hover:bg-[#1c2d47] disabled:opacity-50'
export const BTN_SOFT = 'rounded-lg border bg-white px-3 py-1.5 text-xs font-bold text-neutral-800 transition hover:bg-neutral-50 disabled:opacity-50'
export const BTN_DANGER = 'rounded-lg border border-red-200 bg-red-50 px-3 py-1.5 text-xs font-bold text-red-700 transition hover:bg-red-100 disabled:opacity-50'
export const INPUT = 'rounded-lg border px-2.5 py-1.5 text-sm'
export const CARD = 'rounded-2xl border bg-white p-5'

const TONE = { neutral: 'bg-neutral-100 text-neutral-700 border-neutral-200', info: 'bg-blue-50 text-blue-800 border-blue-200', success: 'bg-green-50 text-green-800 border-green-200', warn: 'bg-amber-50 text-amber-900 border-amber-200', danger: 'bg-red-50 text-red-800 border-red-200' }

export function Pill({ tone, children }: { tone: keyof typeof TONE; children: React.ReactNode }) {
  return <span className={`inline-flex items-center whitespace-nowrap rounded-full border px-2 py-0.5 text-[11px] font-semibold ${TONE[tone]}`}>{children}</span>
}

export function StagePill({ stage }: { stage: LeadStage }) {
  return <Pill tone={LEAD_STAGE_TONE[stage]}>{LEAD_STAGE_LABELS[stage]}</Pill>
}

export function fmtDate(iso: string | null | undefined): string {
  if (!iso) return '—'
  return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
}
export function fmtDateTime(iso: string | null | undefined): string {
  if (!iso) return '—'
  return new Date(iso).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
}

export async function call<T = Record<string, unknown>>(url: string, body: Record<string, unknown>): Promise<T> {
  const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
  const json = await r.json().catch(() => ({}))
  if (!r.ok) throw new Error(json.error ?? 'Something went wrong.')
  return json as T
}

export function Stat({ label, value, sub }: { label: string; value: React.ReactNode; sub?: string }) {
  return (
    <div className="rounded-xl border bg-white p-2.5 text-center">
      <p className="text-lg font-bold">{value}</p>
      <p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-400">{label}</p>
      {sub && <p className="text-[10px] text-neutral-400">{sub}</p>}
    </div>
  )
}

export const REASON_LABELS: Record<string, string> = {
  already_converted: 'relation already confirmed', declined: 'declined the relation', manual_review: 'in manual review', suppressed: 'suppressed', unsubscribed: 'unsubscribed', bounced: 'bounced', already_signed_up: 'already signed up',
  frequency_cap: 'emailed too recently', campaign_stopped: 'campaign stopped', lead_deleted: 'lead removed', global_suppression: 'address suppressed', hard_bounced: 'hard bounced', marketing_suppression: 'unsubscribed from updates', campaign_suppression: 'campaign suppression', preference_off: 'preference off', template_inactive: 'template inactive', template_missing: 'template missing', demo_address: 'demo address',
}
export const reason = (r: string | null | undefined) => (r ? REASON_LABELS[r] ?? r.replace(/_/g, ' ') : '')