export const dynamic = 'force-dynamic'

import Link from 'next/link'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { StatCard } from '@/components/dashboard/stat-card'

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-700',
  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 SupervisorPage() {
  const supabase = await createClient()
  const { data: { user } } = await supabase.auth.getUser()
  if (!user) redirect('/login')

  const { data: profile } = await supabase
    .from('users')
    .select('name, site_id, role')
    .eq('id', user.id)
    .single()
  if (!profile || !['supervisor', 'admin'].includes(profile.role)) redirect('/')
  if (!profile.site_id) {
    return (
      <main className="max-w-4xl mx-auto px-4 py-6">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">Supervisor Portal</h1>
        <p className="text-sm text-gray-500">No site assigned — contact your administrator.</p>
      </main>
    )
  }

  const { data: siteRow } = await supabase.from('sites').select('name').eq('id', profile.site_id).single()
  const siteName = (siteRow as unknown as { name: string } | null)?.name ?? 'Your Site'

  // Resolve incident IDs once to avoid duplicate queries inside Promise.all
  const { data: siteIncidents } = await supabase
    .from('incidents')
    .select('id')
    .eq('site_id', profile.site_id)
  const incidentIds = siteIncidents?.map(r => r.id) ?? []

  const [
    { data: openIncidents },
    { count: closedCount },
    { count: openCount },
    { data: overdueCapas },
    { data: allCapas },
  ] = await Promise.all([
    supabase
      .from('incidents')
      .select('id, reference_no, incident_type, status, reported_at')
      .eq('site_id', profile.site_id)
      .neq('status', 'closed')
      .order('reported_at', { ascending: false })
      .limit(10),
    supabase
      .from('incidents')
      .select('*', { count: 'exact', head: true })
      .eq('site_id', profile.site_id)
      .eq('status', 'closed'),
    supabase
      .from('incidents')
      .select('*', { count: 'exact', head: true })
      .eq('site_id', profile.site_id)
      .neq('status', 'closed'),
    supabase
      .from('capa_actions')
      .select('id, description, due_date, users (name)')
      .eq('status', 'overdue')
      .in('incident_id', incidentIds),
    supabase
      .from('capa_actions')
      .select('id, status')
      .in('incident_id', incidentIds),
  ])

  const resolvedOpenCount = openCount ?? 0
  const resolvedClosedCount = closedCount ?? 0
  const overdueCount = overdueCapas?.length ?? 0

  const capaRows = allCapas ?? []
  const capaOpenCount = capaRows.filter(c => ['open', 'in_progress'].includes(c.status)).length
  const capaVerifiedCount = capaRows.filter(c => c.status === 'verified').length

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

  return (
    <main className="max-w-4xl 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">Supervisor Portal</h1>
          <p className="text-sm text-gray-500 mt-1">{siteName}</p>
        </div>
        <Link href="/supervisor/incidents" className="text-sm text-blue-600 hover:underline">
          All incidents →
        </Link>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
        <StatCard label="Open Incidents" value={resolvedOpenCount} accent={resolvedOpenCount > 0 ? 'yellow' : 'green'} />
        <StatCard label="Closed Incidents" value={resolvedClosedCount} accent="green" />
        <StatCard label="Open CAPAs" value={capaOpenCount} accent={capaOpenCount > 0 ? 'yellow' : 'green'} />
        <StatCard label="CAPA Overdue" value={overdueCount} accent={overdueCount > 0 ? 'red' : 'green'} />
      </div>

      {/* Open incidents */}
      <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Open Incidents</h2>
        {(openIncidents ?? []).length === 0 ? (
          <p className="text-sm text-gray-400">No open incidents.</p>
        ) : (
          <div className="space-y-2">
            {(openIncidents ?? []).map(inc => (
              <Link
                key={inc.id}
                href={`/supervisor/incidents/${inc.id}`}
                className="flex items-center justify-between py-2 border-b border-gray-50 last:border-0 hover:bg-gray-50 -mx-2 px-2 rounded"
              >
                <div>
                  <p className="text-sm font-medium text-gray-900">{inc.reference_no ?? inc.id.slice(0, 8)}</p>
                  <p className="text-xs text-gray-500">{TYPE_LABELS[inc.incident_type] ?? inc.incident_type}</p>
                </div>
                <span className={`text-xs rounded-full px-2 py-0.5 font-medium ${STATUS_COLORS[inc.status] ?? 'bg-gray-100 text-gray-700'}`}>
                  {STATUS_LABELS[inc.status] ?? inc.status}
                </span>
              </Link>
            ))}
          </div>
        )}
      </div>

      {/* Overdue CAPAs */}
      {overdueCount > 0 && (
        <div className="bg-white rounded-xl shadow-sm p-5">
          <h2 className="text-sm font-semibold text-red-600 uppercase tracking-wide mb-4">Overdue CAPAs</h2>
          <div className="space-y-2">
            {(overdueCapas ?? []).map(capa => (
              <div key={capa.id} className="flex items-start justify-between py-2 border-b border-gray-50 last:border-0">
                <div className="flex-1 min-w-0 mr-4">
                  <p className="text-sm text-gray-800 line-clamp-2">{capa.description}</p>
                  <p className="text-xs text-gray-500 mt-0.5">
                    Owner: {(capa.users as unknown as { name: string } | null)?.name ?? 'Unassigned'}
                  </p>
                </div>
                <span className="text-xs text-red-600 font-semibold shrink-0">
                  Due {capa.due_date ? new Date(capa.due_date as string).toLocaleDateString('en-MY') : '—'}
                </span>
              </div>
            ))}
          </div>
          <p className="text-xs text-gray-400 mt-3">CAPA verification rate: {capaRows.length > 0 ? Math.round((capaVerifiedCount / capaRows.length) * 100) : 'N/A'}%</p>
        </div>
      )}
    </main>
  )
}