'use client'

import Link from 'next/link'

interface Props {
  incidentId: string
  referenceNo: string | null
  status: string
  backHref: string
  canTriage?: boolean
  canInvestigate?: boolean
  canAddCapa?: boolean
}

const STATUS_COLORS: Record<string, string> = {
  reported: 'bg-yellow-100 text-yellow-800',
  triaged: 'bg-blue-100 text-blue-800',
  investigating: 'bg-purple-100 text-purple-800',
  capa_pending: 'bg-orange-100 text-orange-800',
  verification: 'bg-indigo-100 text-indigo-800',
  closed: 'bg-green-100 text-green-800',
}

const STATUS_LABELS: Record<string, string> = {
  reported: 'Reported',
  triaged: 'Triaged',
  investigating: 'Investigating',
  capa_pending: 'CAPA Pending',
  verification: 'Verification',
  closed: 'Closed',
}

export function IncidentHeader({
  incidentId, referenceNo, status, backHref,
  canTriage, canInvestigate, canAddCapa,
}: Props) {
  return (
    <div className="sticky top-0 z-30 bg-white border-b border-gray-200 shadow-sm">
      <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between gap-4 flex-wrap">
        <div className="flex items-center gap-3 min-w-0">
          <Link href={backHref} className="text-sm text-gray-500 hover:text-gray-700 shrink-0">
            ← Incidents
          </Link>
          <span className="text-gray-300 shrink-0">|</span>
          <span className="text-sm font-mono font-semibold text-gray-900 truncate">
            {referenceNo ?? 'Pending'}
          </span>
          <span className={`text-xs px-2 py-0.5 rounded-full font-medium shrink-0 ${STATUS_COLORS[status] ?? 'bg-gray-100 text-gray-800'}`}>
            {STATUS_LABELS[status] ?? status.replace(/_/g, ' ')}
          </span>
        </div>
        <div className="flex gap-2 shrink-0">
          {canTriage && (
            <Link
              href={`/hse/incidents/${incidentId}/triage`}
              className="text-xs px-3 py-1.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700"
            >
              Triage
            </Link>
          )}
          {canInvestigate && (
            <Link
              href={`/hse/incidents/${incidentId}/investigation`}
              className="text-xs px-3 py-1.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700"
            >
              Investigate
            </Link>
          )}
          {canAddCapa && (
            <Link
              href={`/hse/incidents/${incidentId}/capa/new`}
              className="text-xs px-3 py-1.5 bg-amber-600 text-white rounded-lg font-medium hover:bg-amber-700"
            >
              Add CAPA
            </Link>
          )}
        </div>
      </div>
    </div>
  )
}