ims/app/(protected)/reporter/page.tsx

export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { asAdmin } from '@/lib/db/with-user'
import { redirect } from 'next/navigation'
import { getSession } from '@/lib/auth/get-session'
import { incidents, sites } from '@/lib/db/schema'
import { eq, desc } 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',
}

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

export default async function ReporterPage() {
  const session = await getSession()
  if (!session) redirect('/login')

  const rows = await asAdmin(db =>
    db.select({
      id: incidents.id,
      referenceNo: incidents.referenceNo,
      incidentType: incidents.incidentType,
      status: incidents.status,
      reportedAt: incidents.reportedAt,
      severity: incidents.severity,
      siteName: sites.name,
    })
    .from(incidents)
    .leftJoin(sites, eq(incidents.siteId, sites.id))
    .where(eq(incidents.reportedBy, session.sub))
    .orderBy(desc(incidents.reportedAt))
  )

  const openCount = rows.filter(r => r.status !== 'closed').length
  const closedCount = rows.filter(r => r.status === 'closed').length

  return (
    <main className="max-w-2xl mx-auto px-4 py-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">My Reports</h1>
          <p className="text-sm text-gray-400 mt-0.5">Welcome, {session.name}</p>
        </div>
        <Link
          href="/report"
          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700"
        >
          + New Report
        </Link>
      </div>

      <div className="flex gap-4 mb-6 text-sm">
        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
          <p className="text-2xl font-bold text-gray-900">{rows.length}</p>
          <p className="text-xs text-gray-500 mt-1">Total Submitted</p>
        </div>
        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
          <p className="text-2xl font-bold text-yellow-600">{openCount}</p>
          <p className="text-xs text-gray-500 mt-1">In Progress</p>
        </div>
        <div className="bg-white rounded-xl shadow-sm p-4 flex-1 text-center">
          <p className="text-2xl font-bold text-green-600">{closedCount}</p>
          <p className="text-xs text-gray-500 mt-1">Closed</p>
        </div>
      </div>

      {rows.length === 0 ? (
        <div className="bg-white rounded-xl shadow-sm p-8 text-center">
          <p className="text-gray-400 text-sm mb-4">No incidents reported yet.</p>
          <Link href="/report" className="text-blue-600 text-sm hover:underline">Submit your first report →</Link>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm divide-y divide-gray-50">
          {rows.map(inc => (
            <Link key={inc.id} href={`/reporter/incidents/${inc.id}`} className="block p-4 cursor-pointer hover:bg-gray-50 transition-colors">
              <div className="flex items-start justify-between gap-3">
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-semibold text-gray-900">
                    {inc.referenceNo ?? inc.id.slice(0, 8)}
                  </p>
                  <p className="text-xs text-gray-500 mt-0.5">
                    {TYPE_LABELS[inc.incidentType] ?? inc.incidentType}
                    {inc.siteName ? ` · ${inc.siteName}` : ''}
                    {inc.severity ? ` · Severity ${inc.severity}` : ''}
                  </p>
                  {inc.reportedAt && (
                    <p className="text-xs text-gray-400 mt-0.5">
                      {new Date(inc.reportedAt).toLocaleDateString('en-MY', {
                        day: 'numeric', month: 'short', year: 'numeric',
                      })}
                    </p>
                  )}
                </div>
                <span className={`text-xs rounded-full px-2 py-0.5 shrink-0 ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-600'}`}>
                  {STATUS_LABELS[inc.status] ?? inc.status}
                </span>
              </div>
            </Link>
          ))}
        </div>
      )}
    </main>
  )
}