ims/app/(protected)/hse/incidents/[id]/page.tsx

export const dynamic = 'force-dynamic'

import { notFound } from 'next/navigation'
import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { IncidentDetail, type Incident } from '@/components/incidents/incident-detail'
import { SimilarIncidentsPanel } from '@/components/incidents/similar-incidents-panel'
import { ClosurePanel } from '@/components/incidents/closure-panel'

interface Props {
  params: Promise<{ id: string }>
}

export default async function HseIncidentDetailPage({ params }: Props) {
  const { id } = await params
  const supabase = await createClient()

  const { data: incident, error } = await supabase
    .from('incidents')
    .select(`
      id, reference_no, incident_type, description, severity, status,
      injury_involved, asset_involved, medical_status, lost_days, type_details,
      is_fatality, is_serious_bodily_injury, is_dangerous_occurrence, is_occupational_disease,
      reported_at, closed_at,
      sites (id, name),
      zones (id, name),
      reporter:users!reported_by (id, name, email),
      evidence_files (id, stage, file_url, file_type, uploaded_at)
    `)
    .eq('id', id)
    .eq('evidence_files.deleted', false)
    .single()

  if (error || !incident) notFound()

  const status = (incident as { status: string }).status

  return (
    <main className="max-w-3xl mx-auto px-4 py-6">
      <Link href="/hse/incidents" className="text-sm text-blue-600 hover:underline mb-4 inline-block">
        ← Back to inbox
      </Link>
      <IncidentDetail incident={incident as unknown as Incident} />

      {status === 'reported' && (
        <div className="mt-6">
          <Link
            href={`/hse/incidents/${id}/triage`}
            className="inline-block bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
          >
            Triage Incident
          </Link>
        </div>
      )}
      {status === 'triaged' && (
        <div className="mt-6">
          <Link
            href={`/hse/incidents/${id}/investigation`}
            className="inline-block bg-indigo-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-indigo-700"
          >
            Start Investigation
          </Link>
        </div>
      )}
      {(['investigating', 'capa_pending'] as string[]).includes(status) && (
        <div className="mt-6">
          <Link
            href={`/hse/incidents/${id}/capa/new`}
            className="inline-block bg-amber-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-amber-700"
          >
            Add CAPA Action
          </Link>
        </div>
      )}

      {Boolean(
        (incident as { is_fatality?: boolean }).is_fatality ||
        (incident as { is_serious_bodily_injury?: boolean }).is_serious_bodily_injury ||
        (incident as { is_dangerous_occurrence?: boolean }).is_dangerous_occurrence ||
        ((incident as { lost_days?: number | null }).lost_days ?? 0) >= 4
      ) && (
        <div className="mt-4 flex gap-3">
          <a
            href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp6`}
            target="_blank"
            className="inline-block bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900"
          >
            Download JKKP 6 (PDF)
          </a>
          <a
            href={`/ims/api/incidents/${id}/jkkp-pdf?form=jkkp7`}
            target="_blank"
            className="inline-block bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700"
          >
            Download JKKP 7 (PDF)
          </a>
        </div>
      )}
      <ClosurePanel incidentId={id} status={status} canClose canAddAddenda />
      <SimilarIncidentsPanel incidentId={id} />
    </main>
  )
}