export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { redirect } 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',
}

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

  const { data: incidents } = await supabase
    .from('incidents')
    .select('id, reference_no, incident_type, status, reported_at, severity, sites (name)')
    .eq('reported_by', session.sub)
    .order('reported_at', { ascending: false })

  const rows = incidents ?? []
  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 => {
            const siteName = (inc.sites as unknown as { name: string } | null)?.name
            return (
              <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.reference_no ?? inc.id.slice(0, 8)}
                    </p>
                    <p className="text-xs text-gray-500 mt-0.5">
                      {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
                      {siteName ? ` · ${siteName}` : ''}
                      {inc.severity ? ` · Severity ${inc.severity}` : ''}
                    </p>
                    {inc.reported_at && (
                      <p className="text-xs text-gray-400 mt-0.5">
                        {new Date(inc.reported_at as string).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>
  )
}