import Link from 'next/link'
import { StatusBadge } from './status-badge'
import { formatFullDate } from '@/lib/format'
import type { Trip, TripWarning } from '@/types/db'

export function TripCard({ trip, warnings }: { trip: Trip; warnings: TripWarning[] }) {
  const tripWarnings = warnings.filter((w) => w.trip_id === trip.id)
  const danger = tripWarnings.filter((w) => w.severity === 'danger').length

  return (
    <Link
      href={`/trips/${trip.id}`}
      className="block rounded-xl border bg-white p-4 transition hover:border-neutral-400 hover:shadow-sm"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <p className="truncate font-semibold">
            {trip.origin || 'Origin TBD'} → {trip.destination || 'Destination TBD'}
          </p>
          <p className="mt-0.5 truncate text-sm text-neutral-500">
            {trip.commodity || 'Commodity TBD'} · {trip.carrier_name || 'Carrier TBD'}
            {trip.unit_number ? ` · Unit ${trip.unit_number}` : ''}
          </p>
        </div>
        <StatusBadge status={trip.status} policy={trip.permit_policy} />
      </div>
      <div className="mt-3 flex items-center justify-between border-t pt-2.5 text-xs text-neutral-500">
        <span className="font-mono">{trip.ref_code}</span>
        <span>{formatFullDate(trip.created_at)}</span>
      </div>
      {tripWarnings.length > 0 && (
        <p className={`mt-2 text-xs font-semibold ${danger > 0 ? 'text-red-600' : 'text-amber-700'}`}>
          ⚠ {tripWarnings.length} active warning{tripWarnings.length === 1 ? '' : 's'}
        </p>
      )}
    </Link>
  )
}