ims/components/incidents/incident-detail.tsx

import { EvidenceGallery } from './evidence-gallery'

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',
  transport: 'Transport / Vehicle',
}

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 MEDICAL_LABELS: Record<string, string> = {
  none: 'None',
  first_aid: 'First Aid',
  medical_treatment: 'Medical Treatment',
  lti: 'Lost Time Injury (LTI)',
}

export type Incident = {
  id: string
  reference_no: string | null
  incident_type: string
  description: string
  status: string
  severity: number | null
  injury_involved: boolean
  asset_involved: boolean
  medical_status: string | null
  lost_days: number | null
  reported_at: string
  closed_at: string | null
  type_details?: Record<string, string | boolean> | null
  sites: { id: string; name: string } | null
  zones: { id: string; name: string } | null
  trucks: { id: string; truck_no: string; carrier: string | null } | null
  reporter: { id: string; name: string; email: string } | null
  evidence_files: Array<{
    id: string
    stage: string
    file_url: string
    file_type: string
    uploaded_at: string
  }>
}

interface Props {
  incident: Incident
}

function Field({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div>
      <dt className="text-xs font-medium text-gray-700">{label}</dt>
      <dd className="text-sm text-gray-900 mt-0.5">{value ?? '—'}</dd>
    </div>
  )
}

export function IncidentDetail({ incident }: Props) {
  const reportStageFiles = incident.evidence_files.filter(f => f.stage === 'report')

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl shadow-sm p-5">
        <div className="flex items-start justify-between mb-4">
          <div>
            <h1 className="text-xl font-bold text-gray-900 font-mono">
              {incident.reference_no ?? 'Pending reference'}
            </h1>
            <p className="text-sm text-gray-600 mt-0.5">{TYPE_LABELS[incident.incident_type] ?? incident.incident_type}</p>
          </div>
          <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${STATUS_COLORS[incident.status] ?? 'bg-gray-100'}`}>
            {incident.status.replace(/_/g, ' ').toUpperCase()}
          </span>
        </div>

        <dl className="grid grid-cols-2 gap-4 sm:grid-cols-3">
          <Field label="Site" value={incident.sites?.name} />
          <Field label="Zone" value={incident.zones?.name} />
          {incident.trucks && (
            <Field
              label="Truck"
              value={`${incident.trucks.truck_no}${incident.trucks.carrier ? ` — ${incident.trucks.carrier}` : ''}`}
            />
          )}
          <Field label="Reported by" value={incident.reporter?.name} />
          <Field label="Reported at" value={new Date(incident.reported_at).toLocaleString('en-MY', { timeZone: 'Asia/Kuala_Lumpur' })} />
          <Field label="Severity" value={incident.severity ? `Level ${incident.severity}` : 'Not yet assigned'} />
          {incident.injury_involved && (
            <Field label="Medical status" value={MEDICAL_LABELS[incident.medical_status ?? 'none']} />
          )}
          {incident.injury_involved && incident.lost_days != null && (
            <Field label="Lost days" value={`${incident.lost_days} day(s)`} />
          )}
          {incident.type_details &&
            Object.entries(incident.type_details).map(([key, value]) => (
              <Field
                key={key}
                label={key.replace(/_/g, ' ')}
                value={typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value}
              />
            ))}
        </dl>
      </div>

      <div className="bg-white rounded-xl shadow-sm p-5">
        <h2 className="text-sm font-semibold text-gray-900 mb-2">Description</h2>
        <p className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">{incident.description}</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm p-5">
        <h2 className="text-sm font-semibold text-gray-900 mb-3">
          Evidence — Report Stage
          <span className="ml-2 text-gray-400 font-normal normal-case">
            {reportStageFiles.length} file{reportStageFiles.length !== 1 ? 's' : ''}
          </span>
        </h2>
        <EvidenceGallery files={incident.evidence_files} stage="report" />
      </div>
    </div>
  )
}