export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { redirect, notFound } from 'next/navigation'
import { getSession } from '@/lib/auth/get-session'

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 supabase = await createClient()

  const { data: inc } = await supabase
    .from('incidents')
    .select(`
      id, reference_no, incident_type, status, severity, reported_at, closed_at,
      description, injury_involved, medical_status, lost_days,
      sites (name), zones (name),
      capa_actions (id, description, status, due_date)
    `)
    .eq('id', id)
    .eq('reported_by', session.sub)
    .single()

  if (!inc) notFound()

  const siteName = (inc.sites as unknown as { name: string } | null)?.name
  const zoneName = (inc.zones as unknown as { name: string } | null)?.name
  const capas = (inc.capa_actions as unknown as Array<{ id: string; description: string; status: string; due_date: string | null }>) ?? []

  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.reference_no ?? inc.id.slice(0, 8)}</h1>
            <p className="text-sm text-gray-500 capitalize">{inc.incident_type?.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">
          {siteName && <div><p className="text-xs text-gray-500">Site</p><p className="font-medium">{siteName}</p></div>}
          {zoneName && <div><p className="text-xs text-gray-500">Zone</p><p className="font-medium">{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.reported_at && (
            <div>
              <p className="text-xs text-gray-500">Reported</p>
              <p className="font-medium">{new Date(inc.reported_at as string).toLocaleDateString('en-MY')}</p>
            </div>
          )}
          {inc.closed_at && (
            <div>
              <p className="text-xs text-gray-500">Closed</p>
              <p className="font-medium">{new Date(inc.closed_at as string).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>
  )
}