ims/app/(protected)/supervisor/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, capaActions, users } from '@/lib/db/schema'
import { eq, not, and, inArray, sql } from 'drizzle-orm'
import { aliasedTable } from 'drizzle-orm'
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 session = await getSession()
  if (!session) redirect('/login')
  if (!['supervisor', 'admin'].includes(session.role)) redirect('/')

  if (!session.siteId) {
    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 [siteRow] = await asAdmin(db =>
    db.select({ name: sites.name }).from(sites).where(eq(sites.id, session.siteId!)).limit(1)
  )
  const siteName = siteRow?.name ?? 'Your Site'

  // Get all incident IDs for this site
  const siteIncidents = await asAdmin(db =>
    db.select({ id: incidents.id }).from(incidents).where(eq(incidents.siteId, session.siteId!))
  )
  const incidentIds = siteIncidents.map(r => r.id)

  const ownerAlias = aliasedTable(users, 'owner')

  const [openIncidents, closedCountRow, openCountRow, overdueCapas, allCapas] = await Promise.all([
    asAdmin(db =>
      db.select({
        id: incidents.id,
        referenceNo: incidents.referenceNo,
        incidentType: incidents.incidentType,
        status: incidents.status,
        reportedAt: incidents.reportedAt,
      })
      .from(incidents)
      .where(and(eq(incidents.siteId, session.siteId!), not(eq(incidents.status, 'closed'))))
      .orderBy(sql`${incidents.reportedAt} desc`)
      .limit(10)
    ),
    asAdmin(db =>
      db.select({ count: sql<number>`count(*)` })
      .from(incidents)
      .where(and(eq(incidents.siteId, session.siteId!), eq(incidents.status, 'closed')))
    ),
    asAdmin(db =>
      db.select({ count: sql<number>`count(*)` })
      .from(incidents)
      .where(and(eq(incidents.siteId, session.siteId!), not(eq(incidents.status, 'closed'))))
    ),
    incidentIds.length > 0
      ? asAdmin(db =>
          db.select({
            id: capaActions.id,
            description: capaActions.description,
            dueDate: capaActions.dueDate,
            ownerName: ownerAlias.name,
          })
          .from(capaActions)
          .leftJoin(ownerAlias, eq(capaActions.ownerUserId, ownerAlias.id))
          .where(and(eq(capaActions.status, 'overdue'), inArray(capaActions.incidentId, incidentIds)))
        )
      : Promise.resolve([]),
    incidentIds.length > 0
      ? asAdmin(db =>
          db.select({ id: capaActions.id, status: capaActions.status })
          .from(capaActions)
          .where(inArray(capaActions.incidentId, incidentIds))
        )
      : Promise.resolve([]),
  ])

  const resolvedOpenCount = Number(openCountRow[0]?.count ?? 0)
  const resolvedClosedCount = Number(closedCountRow[0]?.count ?? 0)
  const overdueCount = overdueCapas.length
  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.referenceNo ?? inc.id.slice(0, 8)}</p>
                  <p className="text-xs text-gray-500">{TYPE_LABELS[inc.incidentType] ?? inc.incidentType}</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.ownerName ?? 'Unassigned'}
                  </p>
                </div>
                <span className="text-xs text-red-600 font-semibold shrink-0">
                  Due {capa.dueDate ? new Date(capa.dueDate).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>
  )
}