import Link from 'next/link'
import type { Trip, TripWarning } from '@/types/db'

/**
 * "Where are the risks?" — the six at-a-glance tiles (Task 82).
 *
 * One component for both dashboards so the broker sees exactly what the
 * carrier sees (Nash, 2026-09-08: "the same thing as the carrier has").
 * Counting rules are unchanged from the original carrier dashboard:
 * "Trips with alerts" counts OPEN trips only (draft / waiting / active).
 * Curfew and escort tiles read 0 until a warning of that kind is emitted.
 */
export function RiskTiles({ trips, warnings }: { trips: Trip[]; warnings: TripWarning[] }) {
  const open = trips.filter((t) => ['draft', 'waiting_for_permits', 'active'].includes(t.status))
  const active = trips.filter((t) => t.status === 'active')
  const pending = trips.filter((t) => t.status === 'draft' || t.status === 'waiting_for_permits')
  const alertTripIds = new Set(warnings.map((w) => w.trip_id))

  const stats = [
    { label: 'Active trips', value: active.length, tone: 'info' as const },
    { label: 'Waiting on permits', value: pending.length, tone: 'info' as const },
    {
      label: 'Trips with alerts',
      value: open.filter((t) => alertTripIds.has(t.id)).length,
      tone: 'warn' as const,
    },
    {
      label: 'Permits expiring',
      value: warnings.filter((w) => w.kind === 'expiring' || w.kind === 'expired').length,
      tone: 'warn' as const,
    },
    { label: 'Curfew warnings', value: warnings.filter((w) => w.kind === 'curfew').length, tone: 'danger' as const },
    { label: 'Escort warnings', value: warnings.filter((w) => w.kind === 'escort').length, tone: 'danger' as const },
  ]

  return (
    <div className="grid grid-cols-3 gap-3 lg:grid-cols-6">
      {stats.map((c) => (
        <div key={c.label} className="rounded-xl border border-line bg-white p-3.5">
          <p
            className={`text-2xl font-extrabold tabular-nums ${
              c.value === 0
                ? 'text-navy-900'
                : c.tone === 'danger'
                  ? 'text-danger'
                  : c.tone === 'warn'
                    ? 'text-warn'
                    : 'text-navy-900'
            }`}
          >
            {c.value}
          </p>
          <p className="mt-1 text-[11px] font-medium leading-tight text-slate-body">{c.label}</p>
        </div>
      ))}
    </div>
  )
}

/** Company verification status chip (Task 89) — optional, never a gate. */
export function CompanyStatusChip({
  status,
}: {
  status: { label: string; href: string; tone: 'ok' | 'pending' | 'none' } | null | undefined
}) {
  if (!status) return null
  const tone =
    status.tone === 'ok'
      ? 'border-green-200 bg-green-50 text-green-700'
      : status.tone === 'pending'
        ? 'border-amber-200 bg-amber-50 text-amber-800'
        : 'border-line bg-white text-slate-body hover:text-ink'
  return (
    <Link href={status.href} className={`mt-2 inline-block rounded-full border px-3 py-1 text-[11px] font-semibold ${tone}`}>
      {status.tone === 'ok' ? '✓ ' : ''}
      {status.label}
    </Link>
  )
}