ims/components/incidents/incident-list.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'

const TYPE_LABELS: Record<string, string> = {
  injury: 'Injury / Medical',
  near_miss: 'Near Miss',
  hazard: 'Hazard',
  asset_damage: 'Asset Damage',
  environmental: 'Environmental',
  security: 'Security',
  fire: 'Fire / Emergency',
}

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',
}

type Incident = {
  id: string
  reference_no: string | null
  incident_type: string
  status: string
  severity: number | null
  reported_at: string
  sites: { name: string } | null
  zones: { name: string } | null
  reporter: { name: string } | null
}

interface Props {
  incidents: Incident[]
  basePath: string
}

export function IncidentList({ incidents, basePath }: Props) {
  const [typeFilter, setTypeFilter] = useState('')
  const [statusFilter, setStatusFilter] = useState('')
  const [search, setSearch] = useState('')

  const filtered = incidents.filter(inc => {
    if (typeFilter && inc.incident_type !== typeFilter) return false
    if (statusFilter && inc.status !== statusFilter) return false
    if (search) {
      const q = search.toLowerCase()
      return (
        inc.reference_no?.toLowerCase().includes(q) ||
        inc.incident_type.includes(q) ||
        (inc.sites?.name ?? '').toLowerCase().includes(q)
      )
    }
    return true
  })

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        <input
          type="search"
          placeholder="Search ref, type, site…"
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48 focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
        <select
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={typeFilter}
          onChange={e => setTypeFilter(e.target.value)}
        >
          <option value="">All types</option>
          {Object.entries(TYPE_LABELS).map(([v, l]) => (
            <option key={v} value={v}>{l}</option>
          ))}
        </select>
        <select
          className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={statusFilter}
          onChange={e => setStatusFilter(e.target.value)}
        >
          <option value="">All statuses</option>
          {Object.keys(STATUS_COLORS).map(s => (
            <option key={s} value={s}>{s.replace(/_/g, ' ')}</option>
          ))}
        </select>
      </div>

      {filtered.length === 0 ? (
        <div className="text-center py-12 text-gray-500 text-sm">No incidents found</div>
      ) : (
        <div className="divide-y divide-gray-100 bg-white rounded-xl shadow-sm overflow-hidden">
          {filtered.map(inc => (
            <Link
              key={inc.id}
              href={`${basePath}/incidents/${inc.id}`}
              className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
            >
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 mb-0.5">
                  <span className="font-mono text-sm font-semibold text-gray-900">
                    {inc.reference_no ?? '—'}
                  </span>
                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-700'}`}>
                    {inc.status.replace(/_/g, ' ').toUpperCase()}
                  </span>
                </div>
                <div className="text-sm text-gray-600">
                  {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
                  {inc.zones?.name && ` · ${inc.zones.name}`}
                  {inc.sites?.name && ` · ${inc.sites.name}`}
                </div>
              </div>
              <div className="ml-4 text-right">
                <div className="text-xs text-gray-400">
                  {new Date(inc.reported_at).toLocaleDateString('en-MY')}
                </div>
                {inc.severity && (
                  <div className="text-xs text-gray-500 mt-0.5">Sev {inc.severity}</div>
                )}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}