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

export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { asAdmin } from '@/lib/db/with-user'
import { redirect, notFound } from 'next/navigation'
import { getSession } from '@/lib/auth/get-session'
import { incidents, sites, zones, capaActions } from '@/lib/db/schema'
import { eq, and } from 'drizzle-orm'

const STATUS_LABELS: Record<string, string> = {
  reported: 'Reported', triaged: 'Triaged', investigating: 'Investigating',
  capa_pending: 'CAPA Pending', verification: 'Verification', closed: 'Closed',
}
const STATUS_COLORS: Record<string, string> = {
  reported: 'bg-gray-100 text-gray-600', triaged: 'bg-yellow-100 text-yellow-800',
  investigating: 'bg-blue-100 text-blue-700', capa_pending: 'bg-orange-100 text-orange-700',
  verification: 'bg-purple-100 text-purple-700', closed: 'bg-green-100 text-green-700',
}

export default async function ReporterIncidentDetail({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const session = await getSession()
  if (!session) redirect('/login')

  const [inc] = await asAdmin(db =>
    db.select({
      id: incidents.id,
      referenceNo: incidents.referenceNo,
      incidentType: incidents.incidentType,
      status: incidents.status,
      severity: incidents.severity,
      reportedAt: incidents.reportedAt,
      closedAt: incidents.closedAt,
      description: incidents.description,
      injuryInvolved: incidents.injuryInvolved,
      medicalStatus: incidents.medicalStatus,
      lostDays: incidents.lostDays,
      siteName: sites.name,
      zoneName: zones.name,
    })
    .from(incidents)
    .leftJoin(sites, eq(incidents.siteId, sites.id))
    .leftJoin(zones, eq(incidents.zoneId, zones.id))
    .where(and(eq(incidents.id, id), eq(incidents.reportedBy, session.sub)))
    .limit(1)
  )

  if (!inc) notFound()

  const capas = await asAdmin(db =>
    db.select({
      id: capaActions.id,
      description: capaActions.description,
      status: capaActions.status,
      dueDate: capaActions.dueDate,
    })
    .from(capaActions)
    .where(eq(capaActions.incidentId, id))
  )

  return (
    <main className="max-w-2xl mx-auto px-4 py-6 space-y-4">
      <div className="flex items-center gap-2 mb-2">
        <Link href="/reporter" className="text-sm text-blue-600 hover:underline">← My Reports</Link>
      </div>

      <div className="bg-white rounded-xl shadow-sm p-5">
        <div className="flex items-start justify-between gap-3 mb-4">
          <div>
            <h1 className="text-lg font-bold text-gray-900">{inc.referenceNo ?? inc.id.slice(0, 8)}</h1>
            <p className="text-sm text-gray-500 capitalize">{inc.incidentType?.replace(/_/g, ' ')}</p>
          </div>
          <span className={`text-xs rounded-full px-2 py-1 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
            {STATUS_LABELS[inc.status] ?? inc.status}
          </span>
        </div>

        <div className="grid grid-cols-2 gap-3 text-sm mb-4">
          {inc.siteName && <div><p className="text-xs text-gray-500">Site</p><p className="font-medium">{inc.siteName}</p></div>}
          {inc.zoneName && <div><p className="text-xs text-gray-500">Zone</p><p className="font-medium">{inc.zoneName}</p></div>}
          {inc.severity && <div><p className="text-xs text-gray-500">Severity</p><p className="font-medium">{inc.severity} / 5</p></div>}
          {inc.reportedAt && (
            <div>
              <p className="text-xs text-gray-500">Reported</p>
              <p className="font-medium">{new Date(inc.reportedAt).toLocaleDateString('en-MY')}</p>
            </div>
          )}
          {inc.closedAt && (
            <div>
              <p className="text-xs text-gray-500">Closed</p>
              <p className="font-medium">{new Date(inc.closedAt).toLocaleDateString('en-MY')}</p>
            </div>
          )}
        </div>

        {inc.description && (
          <div className="border-t border-gray-100 pt-4">
            <p className="text-xs text-gray-500 mb-1">Description</p>
            <p className="text-sm text-gray-800 whitespace-pre-line">{inc.description}</p>
          </div>
        )}
      </div>

      {capas.length > 0 && (
        <div className="bg-white rounded-xl shadow-sm p-5">
          <h2 className="text-sm font-semibold text-gray-900 mb-3">Corrective Actions ({capas.length})</h2>
          <div className="space-y-2">
            {capas.map(c => (
              <div key={c.id} className="flex items-start justify-between gap-3 text-sm">
                <p className="text-gray-700 flex-1">{c.description}</p>
                <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${
                  c.status === 'verified' ? 'bg-green-100 text-green-700' :
                  c.status === 'pending_verification' ? 'bg-purple-100 text-purple-700' :
                  'bg-gray-100 text-gray-600'
                }`}>{c.status.replace(/_/g, ' ')}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </main>
  )
}