'use client'

import { useState } from 'react'
import Link from 'next/link'
import { toast } from 'sonner'
import { PilotPreviewBanner } from '@/components/app/pilot-preview-banner'
import { BillingPreview, type RoutePurchaseRow } from '@/app/billing/billing-preview'
import { SettingsForm } from '@/app/settings/settings-form'
import type { RouteCredits } from '@/components/app/route-purchase'
import { PILOT_COMPANY_DOCS_KEY, usePreviewValue, writePreviewValue } from '@/lib/demo/pilot-store'
import { PILOT_PRIVATE_TRIPS_KEY } from '@/app/pd-new-trip/private-trip-form'
import {
  ACCESS_SCOPE_LABELS,
  computeReadiness,
  documentSlotsFor,
  onboardingTasks,
  PILOT_CAPABILITIES,
  VEHICLE_PHOTO_SIDES,
  type AssignmentStatus,
  type CapabilityStatus,
  type PilotCapability,
  type PilotDocumentStatus,
  type RelationshipStatus,
} from '@/lib/domain/pilot'
import {
  DEMO_PILOT_ACTIVITY,
  DEMO_PILOT_ASSIGNMENTS,
  DEMO_PILOT_COMPANY,
  DEMO_PILOT_CONTACTS,
  DEMO_PILOT_DRIVERS,
  DEMO_PILOT_VEHICLES,
  DEMO_RELATIONSHIP_LOG,
  DEMO_TODAY,
  demoDriver,
  demoVehicle,
  inviterOf,
  scopeSummary,
  type DemoPilotAssignment,
  type DemoPilotDriver,
  type DemoPilotVehicle,
} from '@/lib/demo/pilot'

/**
 * Pilot Company (pilot dispatch) dashboard — Phase 1 design replica.
 *
 * Article §4: "The Pilot Company dashboard should look and function very
 * similar to the Carrier Dispatch dashboard… The labels may be different, but
 * the structure should feel familiar." So this mirrors carrier-dashboard.tsx —
 * same header, summary tiles, tab strip and table — with the article's §38
 * tabs. Nash, 2026-09-12: "this is gonna live with the existing design. We're
 * gonna just add the dashboard for pilot dispatch."
 *
 * Demo data only (src/lib/demo/pilot.ts); every action is a local state change.
 */

/**
 * Nash, 2026-09-12: "it's too long. It's too many. He needs to scroll left and
 * right… this page is about the assignments. Maybe we should have this other
 * items in a separate menu, maybe above of the alerts." So the tab strip
 * under the tiles holds only the assignment views; the management sections
 * live in their own menu above the tiles. Both rows wrap — nothing scrolls
 * sideways.
 */
const ASSIGNMENT_TABS = [
  'All Assignments',
  'Active Assignments',
  'Pending Assignments',
  'Completed / History',
] as const
const MANAGE_TABS = [
  'Pilot Drivers',
  'Vehicles / Units',
  'Documents',
  'Contacts',
  'Company Profile',
  'Settings',
  'Billing / Plan',
] as const
type Tab = (typeof ASSIGNMENT_TABS)[number] | (typeof MANAGE_TABS)[number]
type AssignmentTab = (typeof ASSIGNMENT_TABS)[number]

const STATUS_STYLES: Record<AssignmentStatus, string> = {
  invited: 'bg-info-bg text-info ring-blue-200',
  accepted: 'bg-warn-bg text-warn ring-amber-200',
  'in progress': 'bg-ok-bg text-ok ring-green-200',
  completed: 'bg-neutral-100 text-slate-body ring-neutral-200',
}

const REL_STYLES: Record<RelationshipStatus, string> = {
  Pending: 'bg-warn-bg text-warn ring-amber-200',
  Approved: 'bg-ok-bg text-ok ring-green-200',
  Rejected: 'bg-danger-bg text-danger ring-red-200',
  Revoked: 'bg-neutral-100 text-slate-body ring-neutral-200',
  Suspended: 'bg-danger-bg text-danger ring-red-200',
}

const DOC_STYLES: Record<PilotDocumentStatus, string> = {
  'Not Uploaded': 'bg-neutral-100 text-slate-body ring-neutral-200',
  Uploaded: 'bg-info-bg text-info ring-blue-200',
  'Pending Review': 'bg-warn-bg text-warn ring-amber-200',
  Approved: 'bg-ok-bg text-ok ring-green-200',
  Rejected: 'bg-danger-bg text-danger ring-red-200',
  Expired: 'bg-danger-bg text-danger ring-red-200',
  'Expiring Soon': 'bg-warn-bg text-warn ring-amber-200',
}

const EMPTY_PRIVATE: DemoPilotAssignment[] = []

type DemoPilotDocumentLike = { key: string; status: PilotDocumentStatus; uploadedAt?: string; expirationDate?: string }

function readinessTone(label: string): string {
  if (label === 'Verified Pilot' || label === 'Ready for Assignment') return 'bg-ok-bg text-ok ring-green-200'
  if (label.startsWith('Business License Due')) return 'bg-warn-bg text-warn ring-amber-200'
  if (label === 'Expired Documents' || label === 'Admin Review Required') return 'bg-danger-bg text-danger ring-red-200'
  return 'bg-warn-bg text-warn ring-amber-200'
}

function Pill({ label, style }: { label: string; style: string }) {
  return (
    <span className={`inline-flex items-center whitespace-nowrap rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 ring-inset ${style}`}>
      {label}
    </span>
  )
}

/**
 * `fresh` = a pilot company that just validated its email in the signup
 * replica: no documents, no units, no capabilities yet. Nash, 2026-09-12:
 * "these three steps to let him in to join. And then the other steps are
 * done on the page itself, on the my assignments page."
 */
export function PilotCompanyDashboard({
  fresh = false,
  initialTab,
  billing,
  settings,
}: {
  fresh?: boolean
  initialTab?: string
  /** Same data /billing loads — plans, pay-as-you-go, purchase history, card. */
  billing?: { routePurchases: RoutePurchaseRow[]; routeCredits: RouteCredits; internal: boolean }
  /** Same data /settings loads — notification and language preferences. */
  settings?: { userId: string; languages: string[]; primary: string }
}) {
  const [tab, setTab] = useState<Tab>(initialTab === 'documents' ? 'Documents' : 'All Assignments')
  const [lastAssignmentTab, setLastAssignmentTab] = useState<AssignmentTab>('All Assignments')
  const isManage = (MANAGE_TABS as readonly string[]).includes(tab)
  const pickAssignmentTab = (t: AssignmentTab) => { setLastAssignmentTab(t); setTab(t) }
  // Private trips created on /pd-new-trip in this browser (article §40) sit on
  // top of the demo assignments.
  const privateTrips = usePreviewValue<DemoPilotAssignment[]>(PILOT_PRIVATE_TRIPS_KEY, EMPTY_PRIVATE)
  const [assignmentsState, setAssignments] = useState(fresh ? [] : DEMO_PILOT_ASSIGNMENTS)
  const assignments = [...privateTrips.filter((p) => !assignmentsState.some((a) => a.id === p.id)), ...assignmentsState]
  const [drivers, setDrivers] = useState(fresh ? [] : DEMO_PILOT_DRIVERS)
  const [vehicles, setVehicles] = useState(fresh ? [] : DEMO_PILOT_VEHICLES)
  const [relLog, setRelLog] = useState(fresh ? [] : DEMO_RELATIONSHIP_LOG)
  // Company documents live in the per-browser preview store so the trip
  // workspace preview can apply the documents gate (Nash: "if the pilot
  // dispatch did not upload the documents… he should not be able to open the
  // trip info"). A fresh signup starts with nothing uploaded.
  const storedDocs = usePreviewValue<DemoPilotDocumentLike[] | null>(PILOT_COMPANY_DOCS_KEY, null)
  const companyDocs: DemoPilotDocumentLike[] =
    storedDocs ?? (fresh ? DEMO_PILOT_COMPANY.documents.map((d) => ({ key: d.key, status: 'Not Uploaded' as PilotDocumentStatus })) : DEMO_PILOT_COMPANY.documents)
  const setCompanyDocs = (updater: (list: DemoPilotDocumentLike[]) => DemoPilotDocumentLike[]) => writePreviewValue(PILOT_COMPANY_DOCS_KEY, updater(companyDocs))
  const [companyCaps, setCompanyCaps] = useState(fresh ? {} : DEMO_PILOT_COMPANY.capabilities)
  const companyName = fresh ? 'Your pilot company' : DEMO_PILOT_COMPANY.name

  const active = assignments.filter((a) => a.status === 'in progress' || a.status === 'accepted')
  const pending = assignments.filter((a) => a.status === 'invited')
  const completed = assignments.filter((a) => a.status === 'completed')
  const open = assignments.filter((a) => a.status !== 'completed')
  const rows =
    tab === 'Active Assignments'
      ? active
      : tab === 'Pending Assignments'
        ? pending
        : tab === 'Completed / History'
          ? completed
          : open

  const companyDocMap = Object.fromEntries(companyDocs.map((d) => [d.key, d.status]))
  const companyReadiness = computeReadiness({
    accountType: 'pilot_company',
    name: DEMO_PILOT_COMPANY.mainContact,
    phone: DEMO_PILOT_COMPANY.phone,
    emailVerified: true,
    documents: companyDocMap,
    createdAt: fresh ? DEMO_TODAY : DEMO_PILOT_COMPANY.createdAt,
    today: DEMO_TODAY,
  })
  // Post-login setup tasks (steps 4–6), shown on the assignments tabs.
  const setupTasks = onboardingTasks({
    accountType: 'pilot_company',
    documents: companyDocMap,
    vehiclePhotos: vehicles.length === 0 ? null : Math.min(...vehicles.filter((v) => v.status === 'active').map((v) => v.photos.length), 4),
    capabilityCount: Object.keys(companyCaps).length,
  })
  const setupLeft = setupTasks.filter((t) => !t.done)

  const pendingRequests = drivers.filter((d) => d.relationship === 'Pending').length
  const docsExpiring = drivers
    .flatMap((d) => d.documents)
    .concat(companyDocs)
    .filter((d) => d.status === 'Expiring Soon' || d.status === 'Expired').length

  const tiles = [
    { label: 'Active assignments', value: active.length, tone: 'info' },
    { label: 'Pending invites', value: pending.length, tone: 'info' },
    { label: 'Drivers ready', value: drivers.filter((d) => d.relationship === 'Approved' && (d.readiness === 'Ready for Assignment' || d.readiness === 'Verified Pilot')).length, tone: 'ok' },
    { label: 'Relationship requests', value: pendingRequests, tone: 'warn' },
    { label: 'Documents expiring / expired', value: docsExpiring, tone: 'warn' },
    { label: 'Units missing photos', value: vehicles.filter((v) => v.status === 'active' && v.photos.length < 4).length, tone: 'danger' },
  ] as const

  function updateAssignment(id: string, patch: Partial<DemoPilotAssignment>) {
    setAssignments((list) => list.map((a) => (a.id === id ? { ...a, ...patch } : a)))
  }

  function decideRelationship(driver: DemoPilotDriver, status: RelationshipStatus, note?: string) {
    setDrivers((list) => list.map((d) => (d.id === driver.id ? { ...d, relationship: status } : d)))
    setRelLog((log) => [
      { at: `${DEMO_TODAY} now`, text: `${DEMO_PILOT_COMPANY.mainContact.split(' (')[0]} ${status.toLowerCase()} ${driver.name}${note ? ` — ${note}` : ''}.` },
      ...log,
    ])
    toast.success(`Preview: relationship ${status.toLowerCase()} (not saved)`)
  }

  return (
    <main className="mx-auto max-w-7xl px-4 py-8">
      <PilotPreviewBanner screen="Pilot Dispatch dashboard" />

      <div className="mt-5 flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-2xl font-extrabold tracking-tight">Pilot dispatch</h1>
          <p className="mt-1 text-sm text-slate-body">
            {companyName} — assignments, pilot drivers, units, documents and shared
            permits in one place.
          </p>
          <p className="mt-2 inline-flex items-center gap-2 text-xs">
            <Pill label={companyReadiness} style={readinessTone(companyReadiness)} />
            <span className="text-slate-body">{fresh ? 'Email validated — finish setup below' : DEMO_PILOT_COMPANY.verificationStatus}</span>
          </p>
        </div>
        {/* Article §40: pilot companies can create their own private trips. */}
        <Link
          href="/pd-new-trip"
          className="rounded-lg bg-amber-brand px-4 py-2.5 text-sm font-bold text-navy-950 shadow-sm transition hover:bg-amber-deep"
        >
          + New Trip
        </Link>
      </div>

      {/* Management menu — separate from the assignment tabs, above the alert tiles. */}
      <nav className="mt-6 flex flex-wrap items-center gap-1.5 rounded-xl border border-line bg-white p-1.5">
        <button
          onClick={() => pickAssignmentTab(lastAssignmentTab)}
          className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition ${!isManage ? 'bg-navy-900 text-white' : 'text-slate-body hover:bg-paper hover:text-ink'}`}
        >
          Assignments
        </button>
        <span className="mx-1 h-5 w-px bg-line" />
        {MANAGE_TABS.map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition ${t === tab ? 'bg-navy-900 text-white' : 'text-slate-body hover:bg-paper hover:text-ink'}`}
          >
            {t}
            {t === 'Pilot Drivers' && pendingRequests > 0 && (
              <span className={`ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-bold ${t === tab ? 'bg-white/20 text-white' : 'bg-warn-bg text-warn'}`}>
                {pendingRequests}
              </span>
            )}
          </button>
        ))}
      </nav>

      <div className="mt-5 grid grid-cols-3 gap-3 lg:grid-cols-6">
        {tiles.map((c) => (
          <div key={c.label} className="rounded-xl border border-line bg-white p-3.5">
            <p className="text-[11px] font-semibold uppercase tracking-wide text-slate-body/70">{c.label}</p>
            <p
              className={`mt-1 text-2xl font-extrabold ${
                c.tone === 'ok' ? 'text-ok' : c.tone === 'warn' ? 'text-warn' : c.tone === 'danger' ? 'text-danger' : 'text-ink'
              }`}
            >
              {c.value}
            </p>
          </div>
        ))}
      </div>

      {!isManage && (
        <div className="mt-8 flex flex-wrap gap-1 border-b border-line">
          {ASSIGNMENT_TABS.map((t) => (
            <button
              key={t}
              onClick={() => pickAssignmentTab(t)}
              className={`border-b-2 px-4 py-2.5 text-sm font-semibold transition ${
                t === tab ? 'border-amber-brand text-ink' : 'border-transparent text-slate-body hover:text-ink'
              }`}
            >
              {t}
            </button>
          ))}
        </div>
      )}
      {isManage && (
        <div className="mt-8 flex items-center justify-between border-b border-line pb-2.5">
          <h2 className="text-lg font-extrabold tracking-tight">{tab}</h2>
          <button onClick={() => pickAssignmentTab(lastAssignmentTab)} className="text-xs font-semibold text-info hover:underline">← Back to assignments</button>
        </div>
      )}

      {tab === 'Pilot Drivers' ? (
        <DriversTab drivers={drivers} vehicles={vehicles} log={relLog} onDecide={decideRelationship} onUploadForDriver={(driverId, key) => {
          setDrivers((list) => list.map((d) => (d.id === driverId ? { ...d, documents: [...d.documents.filter((x) => x.key !== key), { key, status: 'Uploaded', uploadedAt: DEMO_TODAY }] } : d)))
          toast.success('Preview: uploaded on the driver\'s behalf (file not stored)')
        }} onRequest={(name) => {
          setRelLog((log) => [{ at: `${DEMO_TODAY} now`, text: `${DEMO_PILOT_COMPANY.mainContact.split(' (')[0]} sent a relationship request to ${name}.` }, ...log])
          toast.success('Preview: request queued (no email is sent in this phase)')
        }} />
      ) : tab === 'Vehicles / Units' ? (
        <VehiclesTab vehicles={vehicles} drivers={drivers} onChange={setVehicles} />
      ) : tab === 'Documents' ? (
        <DocumentsTab docs={companyDocs} onUpload={(key) => { setCompanyDocs((list) => list.map((d) => (d.key === key ? { ...d, status: 'Uploaded', uploadedAt: DEMO_TODAY } : d))); toast.success('Preview: document marked uploaded (file not stored)') }} fresh={fresh} />
      ) : tab === 'Contacts' ? (
        <ContactsTab />
      ) : tab === 'Company Profile' ? (
        <CompanyProfileTab caps={companyCaps} onToggleCap={(c) => setCompanyCaps((prev) => { const next = { ...prev }; if (next[c]) delete next[c]; else next[c] = 'Self-declared'; return next })} docs={companyDocs} readiness={companyReadiness} driverCount={drivers.filter((d) => d.relationship === 'Approved').length} vehicleCount={vehicles.filter((v) => v.status === 'active').length} assignmentCount={assignments.length} />
      ) : tab === 'Settings' ? (
        // Nash, 2026-09-12: "he has a tab for settings. Why not give him the
        // settings tools in there" — the real settings form, inline.
        settings ? (
          <div className="mt-6 max-w-2xl">
            <SettingsForm userId={settings.userId} initialLanguages={settings.languages} initialPrimary={settings.primary} />
          </div>
        ) : (
          <LinkTab title="Settings" body="Account settings — profile, languages, notifications." href="/settings" cta="Open Settings" />
        )
      ) : tab === 'Billing / Plan' ? (
        // Nash, 2026-09-12: "display the plans available… free, starter, pro
        // and fleet with all the details, pay as you go, extended, purchase
        // history… add card and choose a plan right there on that page."
        billing ? (
          <div className="mt-2 [&_h1]:text-xl">
            <BillingPreview routePurchases={billing.routePurchases} routeCredits={billing.routeCredits} internal={billing.internal} />
          </div>
        ) : (
          <LinkTab title="Billing / Plan" body="Plans, pay-as-you-go routes, purchase history and card on file." href="/billing" cta="Open Billing & Wallet" />
        )
      ) : (
        <>
          {setupLeft.length > 0 && (
            <div className="mt-6 rounded-2xl border border-warn/30 bg-warn-bg p-5">
              <div className="flex items-center justify-between">
                <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Unfinished setup</p>
                <span className="text-[11px] font-bold text-warn">{setupLeft.length} of {setupTasks.length} to do</span>
              </div>
              <div className="mt-2 grid gap-2 md:grid-cols-3">
                {setupTasks.map((t) => (
                  <div key={t.step} className={`rounded-xl border border-line p-3 text-xs ${t.done ? 'bg-white/60 text-slate-body' : 'bg-white'}`}>
                    <div className="flex items-center justify-between gap-2">
                      <p className="font-semibold">{t.done ? '✓ ' : ''}Step {t.step} · {t.title}</p>
                      {!t.done && (
                        <button onClick={() => setTab(t.step === 4 ? 'Documents' : t.step === 5 ? 'Vehicles / Units' : 'Company Profile')} className="rounded-lg bg-navy-900 px-2.5 py-1 text-[10px] font-bold text-white">Do it</button>
                      )}
                    </div>
                    {!t.done && <p className="mt-0.5 text-slate-body">{t.missing.join(' · ')}</p>}
                  </div>
                ))}
              </div>
            </div>
          )}
          <AssignmentsTable rows={rows} tab={tab} drivers={drivers} vehicles={vehicles} onUpdate={updateAssignment} />
        </>
      )}
    </main>
  )
}

/* ------------------------------ Assignments ------------------------------ */

function AssignmentsTable({
  rows,
  tab,
  drivers,
  vehicles,
  onUpdate,
}: {
  rows: DemoPilotAssignment[]
  tab: Tab
  drivers: DemoPilotDriver[]
  vehicles: DemoPilotVehicle[]
  onUpdate: (id: string, patch: Partial<DemoPilotAssignment>) => void
}) {
  const [openId, setOpenId] = useState<string | null>(null)
  const openRow = rows.find((r) => r.id === openId) ?? null

  return (
    <>
      {/* Phone: one card per assignment (Mobile QA 2026-09-13) — the nine-column
          table below only scrolls sideways on a narrow screen. */}
      <div className="mt-4 space-y-3 sm:hidden">
        {rows.map((a) => {
          const drv = demoDriver(a.pilotDriverId)
          const veh = demoVehicle(a.vehicleId)
          return (
            <div key={a.id} className="rounded-2xl border border-line bg-white p-4 text-sm">
              <div className="flex items-start justify-between gap-2">
                <div className="min-w-0">
                  <p className="truncate font-bold">{a.origin} → {a.destination}</p>
                  <p className="truncate text-xs text-slate-body">{a.commodity} · {a.carrier}</p>
                </div>
                <Pill label={a.status} style={STATUS_STYLES[a.status]} />
              </div>
              <div className="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs">
                <p><span className="text-slate-body">Shared:</span> <span className="font-mono">{scopeSummary(a.scopes)}</span></p>
                <p><span className="text-slate-body">Permits:</span> {a.permits.filter((p) => p.shared).length} of {a.permits.length}</p>
                <p><span className="text-slate-body">Driver:</span> {drv?.name ?? <span className="text-warn">Unassigned</span>}</p>
                <p><span className="text-slate-body">Unit:</span> {veh?.unitNumber ?? '—'} · {a.position}</p>
              </div>
              {drv && a.carrierApprovalRequired && !a.driverApprovedByCarrier && (
                <p className="mt-1.5 text-[11px] font-medium text-warn">Awaiting carrier approval</p>
              )}
              <div className="mt-3 flex gap-2">
                <Link href={`/pd-trip-workspace/${a.ref}`} className="flex-1 rounded-lg bg-navy-900 py-2 text-center text-xs font-bold text-white">Open trip</Link>
                <button onClick={() => setOpenId(openId === a.id ? null : a.id)} className="flex-1 rounded-lg border border-line py-2 text-xs font-semibold text-slate-body">{openId === a.id ? 'Hide details' : 'Details'}</button>
              </div>
            </div>
          )
        })}
        {rows.length === 0 && (
          <p className="rounded-2xl border border-dashed border-line bg-white p-8 text-center text-xs text-slate-body">
            {tab === 'Completed / History' ? 'No completed assignments yet.' : 'No assignments in this view.'}
          </p>
        )}
      </div>

      <div className="mt-4 hidden overflow-x-auto rounded-2xl border border-line bg-white sm:block">
        <table className="w-full min-w-[960px] text-sm">
          <thead>
            <tr className="border-b border-line text-left text-[11px] font-bold uppercase tracking-wide text-slate-body/70">
              {['Carrier / Broker', 'Lane', 'Shared with us', 'Pilot driver', 'Unit', 'Position', 'Permits visible', 'Status', ''].map((h) => (
                <th key={h} className="px-4 py-3">{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((a) => {
              const drv = demoDriver(a.pilotDriverId)
              const veh = demoVehicle(a.vehicleId)
              const visible = a.permits.filter((p) => p.shared).length
              return (
                <tr key={a.id} className="border-b border-line last:border-0 hover:bg-paper">
                  <td className="px-4 py-3.5 font-semibold">
                    {a.carrier}
                    <p className="mt-0.5 font-mono text-[11px] font-normal text-slate-body">{a.ref} · invited by {inviterOf(a).name} ({inviterOf(a).role.toLowerCase()})</p>
                  </td>
                  <td className="px-4 py-3.5">{a.origin} → {a.destination}<p className="text-xs text-slate-body">{a.commodity}</p></td>
                  <td className="px-4 py-3.5 font-mono text-xs">{scopeSummary(a.scopes)}</td>
                  <td className="px-4 py-3.5">
                    {drv?.name ?? <span className="text-warn">Unassigned</span>}
                    {drv && a.carrierApprovalRequired && !a.driverApprovedByCarrier && (
                      <p className="text-[11px] font-medium text-warn">Awaiting carrier approval</p>
                    )}
                  </td>
                  <td className="px-4 py-3.5 font-mono text-xs">{veh?.unitNumber ?? '—'}</td>
                  <td className="px-4 py-3.5 text-xs">{a.position}</td>
                  <td className="px-4 py-3.5 text-xs">{visible} of {a.permits.length}</td>
                  <td className="px-4 py-3.5"><Pill label={a.status} style={STATUS_STYLES[a.status]} /></td>
                  <td className="px-4 py-3.5 whitespace-nowrap">
                    <Link href={`/pd-trip-workspace/${a.ref}`} className="text-xs font-bold text-info hover:underline">Open trip</Link>
                    <button onClick={() => setOpenId(openId === a.id ? null : a.id)} className="ml-3 text-xs font-semibold text-slate-body hover:text-ink">
                      {openId === a.id ? 'Hide' : 'Details'}
                    </button>
                  </td>
                </tr>
              )
            })}
            {rows.length === 0 && (
              <tr>
                <td colSpan={9} className="px-4 py-10 text-center text-sm text-slate-body">
                  {tab === 'Completed / History' ? 'No completed assignments yet.' : 'No assignments in this view. Carriers and brokers invite you from their trip workspace; you can also create your own trip.'}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      {openRow && <AssignmentDetail a={openRow} drivers={drivers} vehicles={vehicles} onUpdate={onUpdate} />}
    </>
  )
}

/** Article §30 (assign drivers) + §19–21 (what the pilot sees / never sees). */
function AssignmentDetail({
  a,
  drivers,
  vehicles,
  onUpdate,
}: {
  a: DemoPilotAssignment
  drivers: DemoPilotDriver[]
  vehicles: DemoPilotVehicle[]
  onUpdate: (id: string, patch: Partial<DemoPilotAssignment>) => void
}) {
  const approved = drivers.filter((d) => d.relationship === 'Approved')
  const drv = demoDriver(a.pilotDriverId)
  const full = a.scopes.some((s) => s.type === 'full_trip')
  const hidden = [
    'Rate confirmation',
    'Broker / carrier pricing and margin',
    'Billing settings',
    'Broker and carrier private notes',
    ...(full ? [] : ['Permits and states not shared with you']),
  ]

  return (
    <div className="mt-4 grid gap-4 lg:grid-cols-3">
      <section className="rounded-2xl border border-line bg-white p-5 lg:col-span-2">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Assignment {a.ref}</p>
            <h2 className="mt-1 text-lg font-extrabold tracking-tight">{a.origin} → {a.destination}</h2>
            <p className="text-sm text-slate-body">{a.commodity} · {a.carrier}</p>
          </div>
          <Pill label={a.status} style={STATUS_STYLES[a.status]} />
        </div>

        <div className="mt-4 rounded-xl border border-line bg-paper p-3 text-xs">
          <p className="font-bold">Access shared with us</p>
          {a.scopes.length === 0 && <p className="mt-1 text-slate-body">Nothing yet — the carrier chose “decide later”. You will see no permits until they share states, permits or the full trip. Anyone you add to this trip inherits the same (empty) access.</p>}
          {a.scopes.map((s, i) => (
            <p key={i} className="mt-1 text-slate-body">
              <span className="font-mono font-semibold text-ink">{s.type === 'full_trip' ? 'Full trip' : s.value}</span> — {ACCESS_SCOPE_LABELS[s.type]}
            </p>
          ))}
        </div>

        <div className="mt-4">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Permits on this trip</p>
          <div className="mt-2 space-y-1.5">
            {a.permits.map((p) => (
              <div key={p.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-xl border p-3 text-xs ${p.shared ? 'border-line bg-white' : 'border-dashed border-line bg-neutral-50 text-slate-body'}`}>
                <div>
                  <p className="font-semibold">
                    <span className="font-mono">{p.state}</span> · {p.permitNumber}
                  </p>
                  {p.shared ? (
                    <p className="mt-0.5 text-slate-body">Valid {p.effective} → {p.expires} · Escort: {p.escort} · Curfew: {p.curfew}</p>
                  ) : (
                    <p className="mt-0.5">Not shared with you — details hidden</p>
                  )}
                </div>
                {p.shared ? (
                  <span className="text-[11px] font-bold text-info">{p.route === 'ready' ? 'Route ready' : p.route === 'requested' ? 'Route requested' : 'Order route'}</span>
                ) : (
                  <span className="text-[11px]">🔒</span>
                )}
              </div>
            ))}
          </div>
        </div>

        {full && (
          <div className="mt-4 grid gap-2 text-xs sm:grid-cols-2">
            {[
              ['Carrier dispatcher', `${a.carrierDispatcher.name} · ${a.carrierDispatcher.phone}`],
              ['Carrier driver', `${a.carrierDriver.name} · ${a.carrierDriver.phone}`],
              ['Truck / trailer', `${a.truck} · ${a.trailer}`],
              ['Overall dimensions / weight', `${a.overall} · ${a.weight}`],
            ].map(([k, v]) => (
              <div key={k} className="rounded-xl border border-line bg-paper p-3">
                <p className="text-[10px] font-bold uppercase tracking-wide text-slate-body/70">{k}</p>
                <p className="mt-0.5 font-semibold">{v}</p>
              </div>
            ))}
          </div>
        )}

        <div className="mt-4 rounded-xl border border-danger/20 bg-danger-bg p-3 text-xs">
          <p className="font-bold text-danger">Hidden from pilot accounts</p>
          <p className="mt-0.5 text-slate-body">{hidden.join(' · ')}</p>
        </div>
      </section>

      <section className="space-y-4">
        <div className="rounded-2xl border border-line bg-white p-5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Assigned pilot driver</p>
          <select
            className="mt-2 w-full rounded-lg border border-line bg-white px-3 py-2 text-sm"
            value={a.pilotDriverId ?? ''}
            onChange={(e) => {
              const id = e.target.value || null
              onUpdate(a.id, { pilotDriverId: id, driverApprovedByCarrier: false })
              toast.success(id ? `Preview: ${demoDriver(id)?.name} assigned — carrier notified` : 'Preview: driver removed')
            }}
          >
            <option value="">— Unassigned —</option>
            {approved.map((d) => (
              <option key={d.id} value={d.id}>{d.name} · {d.readiness}</option>
            ))}
          </select>
          <p className="mt-1.5 text-[11px] text-slate-body">Only approved drivers can be assigned. {a.carrierApprovalRequired ? 'This carrier requires approval of the assigned driver.' : 'This carrier does not require driver approval.'}</p>
          {drv && a.carrierApprovalRequired && (
            <p className={`mt-1 text-[11px] font-semibold ${a.driverApprovedByCarrier ? 'text-ok' : 'text-warn'}`}>
              {a.driverApprovedByCarrier ? '✓ Approved by carrier' : 'Awaiting carrier approval'}
            </p>
          )}

          <p className="mt-4 text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Assigned unit</p>
          <select
            className="mt-2 w-full rounded-lg border border-line bg-white px-3 py-2 text-sm"
            value={a.vehicleId ?? ''}
            onChange={(e) => {
              onUpdate(a.id, { vehicleId: e.target.value || null })
              toast.success('Preview: unit linked to assignment')
            }}
          >
            <option value="">— No unit —</option>
            {vehicles.filter((v) => v.status === 'active').map((v) => (
              <option key={v.id} value={v.id}>{v.unitNumber} · {v.year} {v.make} {v.model}{v.photos.length < 4 ? ' (photos incomplete)' : ''}</option>
            ))}
          </select>

          <p className="mt-4 text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Position</p>
          <div className="mt-2 flex gap-1.5">
            {(['Lead', 'Chase', 'High pole'] as const).map((p) => (
              <button key={p} onClick={() => onUpdate(a.id, { position: p })} className={`rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-inset ${a.position === p ? 'bg-navy-900 text-white ring-navy-900' : 'bg-white text-slate-body ring-line hover:text-ink'}`}>
                {p}
              </button>
            ))}
          </div>
        </div>

        <div className="rounded-2xl border border-line bg-white p-5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Assignment status</p>
          <div className="mt-2 grid gap-1.5">
            {a.status === 'invited' && (
              <button onClick={() => { onUpdate(a.id, { status: 'accepted' }); toast.success('Preview: assignment accepted') }} className="rounded-lg bg-amber-brand py-2 text-xs font-bold text-navy-950 hover:bg-amber-deep">Accept assignment</button>
            )}
            {a.status === 'accepted' && (
              <button onClick={() => { onUpdate(a.id, { status: 'in progress' }); toast.success('Preview: marked in progress') }} className="rounded-lg bg-navy-900 py-2 text-xs font-bold text-white hover:bg-navy-800">Mark in progress</button>
            )}
            {a.status === 'in progress' && (
              <button onClick={() => { onUpdate(a.id, { status: 'completed', completedAt: DEMO_TODAY }); toast.success('Preview: assignment completed — stays in history') }} className="rounded-lg bg-navy-900 py-2 text-xs font-bold text-white hover:bg-navy-800">Mark completed</button>
            )}
            {a.status === 'completed' && <p className="text-xs text-slate-body">Completed {a.completedAt}. Kept in history.</p>}
            <button onClick={() => toast.success('Preview: carrier dispatcher notified of the assigned driver')} className="rounded-lg border border-line py-2 text-xs font-semibold text-slate-body hover:text-ink">Notify carrier of assigned driver</button>
            <Link href={`/pd-trip-workspace/${a.ref}`} className="rounded-lg border border-line py-2 text-center text-xs font-semibold text-slate-body hover:text-ink">Open trip workspace →</Link>
            <Link href={`/pc-trip-workspace/${a.ref}`} className="rounded-lg border border-line py-2 text-center text-xs font-semibold text-slate-body hover:text-ink">Preview as the pilot driver →</Link>
          </div>
        </div>

        <div className="rounded-2xl border border-line bg-white p-5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Activity log</p>
          <div className="mt-2 space-y-2 text-xs">
            {DEMO_PILOT_ACTIVITY.filter((e) => e.detail.includes(a.ref)).map((e, i) => (
              <p key={i}><span className="font-mono text-slate-body">{e.at}</span> · <span className="font-semibold">{e.action}</span> — {e.detail}</p>
            ))}
          </div>
        </div>
      </section>
    </div>
  )
}

/* ------------------------------ Pilot Drivers ------------------------------ */

function DriversTab({
  drivers,
  vehicles,
  log,
  onDecide,
  onRequest,
  onUploadForDriver,
}: {
  drivers: DemoPilotDriver[]
  vehicles: DemoPilotVehicle[]
  log: { at: string; text: string }[]
  onDecide: (d: DemoPilotDriver, s: RelationshipStatus, note?: string) => void
  onRequest: (name: string) => void
  /** Nash: "if I work for a pilot company… they handle the step four for me." Approved drivers only. */
  onUploadForDriver: (driverId: string, key: string) => void
}) {
  const [openId, setOpenId] = useState<string | null>(null)
  const [req, setReq] = useState({ name: '', email: '', phone: '' })
  const slots = documentSlotsFor('pilot_driver')

  return (
    <div className="mt-6 grid gap-4 lg:grid-cols-3">
      <div className="space-y-3 lg:col-span-2">
        {drivers.length === 0 && (
          <div className="rounded-2xl border border-dashed border-line bg-white p-10 text-center text-sm text-slate-body">
            No pilot drivers yet. Send a relationship request, or approve a driver who says they work with you — their request shows up here with the details they entered at signup.
          </div>
        )}
        {drivers.map((d) => {
          const isOpen = openId === d.id
          const docs = Object.fromEntries(d.documents.map((x) => [x.key, x.status]))
          return (
            <div key={d.id} className="rounded-2xl border border-line bg-white p-4">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <p className="font-bold">
                    {d.name}{' '}
                    <span className="ml-1 font-normal text-slate-body">· {d.homeBase} · {d.yearsExperience} yrs</span>
                  </p>
                  <p className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs">
                    <Pill label={d.relationship} style={REL_STYLES[d.relationship]} />
                    <Pill label={d.readiness} style={readinessTone(d.readiness)} />
                    {d.relationship === 'Pending' && (
                      <span className="text-slate-body">{d.requestedBy === 'driver' ? `Driver asked to connect at signup — ${d.phone} · ${d.email}` : 'Waiting for the driver to answer'}</span>
                    )}
                  </p>
                </div>
                <div className="flex gap-1.5">
                  {d.relationship === 'Pending' && d.requestedBy === 'driver' && (
                    <>
                      <button onClick={() => onDecide(d, 'Approved')} className="rounded-lg bg-navy-900 px-3 py-1.5 text-xs font-bold text-white hover:bg-navy-800">Approve</button>
                      <button onClick={() => onDecide(d, 'Rejected')} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold hover:text-danger">Deny</button>
                      <button onClick={() => toast.success('Preview: request for more information queued')} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold text-slate-body">Request more info</button>
                    </>
                  )}
                  {d.relationship === 'Approved' && (
                    <button onClick={() => onDecide(d, 'Revoked', 'no reason given')} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold text-slate-body hover:text-danger">Revoke</button>
                  )}
                  {d.relationship === 'Suspended' && (
                    <button onClick={() => onDecide(d, 'Approved', 'reinstated')} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold text-slate-body">Reinstate</button>
                  )}
                  <button onClick={() => setOpenId(isOpen ? null : d.id)} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold text-info">{isOpen ? 'Hide' : 'Profile'}</button>
                </div>
              </div>

              {isOpen && (
                <div className="mt-4 grid gap-4 border-t border-line pt-4 text-xs md:grid-cols-2">
                  <div>
                    <p className="font-bold">Contact & coverage</p>
                    <p className="mt-1 text-slate-body">{d.phone} · {d.email}</p>
                    <p className="text-slate-body">States served: <span className="font-mono text-ink">{d.statesServed.join(' ')}</span> · radius {d.serviceRadius}</p>
                    <p className="text-slate-body">Linked companies: {d.linkedCompanies.join(', ') || '—'}</p>
                    <p className="text-slate-body">Units: {d.vehicleIds.map((id) => vehicles.find((v) => v.id === id)?.unitNumber).filter(Boolean).join(', ') || '—'}</p>
                    <p className="mt-3 font-bold">Capabilities</p>
                    <div className="mt-1 flex flex-wrap gap-1">
                      {PILOT_CAPABILITIES.filter((c) => d.capabilities[c]).map((c) => (
                        <span key={c} className="rounded-full bg-paper px-2 py-0.5 ring-1 ring-inset ring-line">{c} <span className="text-slate-body">· {d.capabilities[c]}</span></span>
                      ))}
                    </div>
                  </div>
                  <div>
                    <p className="font-bold">Documents <span className="font-normal text-slate-body">{d.relationship === 'Approved' ? '— you can upload these on the driver\'s behalf; the driver can too' : '(visible once the relationship is approved)'}</span></p>
                    <div className="mt-1 space-y-1">
                      {slots.map((s) => {
                        const st = (docs[s.key] ?? 'Not Uploaded') as PilotDocumentStatus
                        const doc = d.documents.find((x) => x.key === s.key)
                        return (
                          <div key={s.key} className="flex items-center justify-between gap-2">
                            <span>{s.label}{s.required ? '' : ''}</span>
                            <span className="flex items-center gap-1.5">
                              {doc?.expirationDate && <span className="text-slate-body">exp {doc.expirationDate}</span>}
                              {st === 'Not Uploaded' && d.relationship === 'Approved' ? (
                                <button onClick={() => onUploadForDriver(d.id, s.key)} className="rounded-lg border border-line bg-white px-2 py-0.5 text-[10px] font-semibold hover:text-ink">Upload for driver</button>
                              ) : (
                                <Pill label={st} style={DOC_STYLES[st]} />
                              )}
                            </span>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )
        })}
      </div>

      <div className="space-y-4">
        <div className="rounded-2xl border border-line bg-white p-5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Request a driver relationship</p>
          <p className="mt-1 text-xs text-slate-body">The driver must approve before you can assign them. Nothing is automatic.</p>
          <div className="mt-3 space-y-2">
            {(['name', 'email', 'phone'] as const).map((k) => (
              <input key={k} value={req[k]} onChange={(e) => setReq({ ...req, [k]: e.target.value })} placeholder={k === 'name' ? 'Driver name' : k === 'email' ? 'Driver email' : 'Driver phone'} className="w-full rounded-lg border border-line px-3 py-2 text-sm" />
            ))}
            <button
              onClick={() => { if (!req.name || !req.email) { toast.error('Name and email are required'); return } onRequest(req.name); setReq({ name: '', email: '', phone: '' }) }}
              className="w-full rounded-lg bg-navy-900 py-2 text-xs font-bold text-white hover:bg-navy-800"
            >
              Send request
            </button>
          </div>
        </div>
        <div className="rounded-2xl border border-line bg-white p-5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Relationship log</p>
          <div className="mt-2 space-y-2 text-xs">
            {log.map((e, i) => (
              <p key={i}><span className="font-mono text-slate-body">{e.at}</span> · {e.text}</p>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

/* ------------------------------ Vehicles / Units ------------------------------ */

const BLANK_VEHICLE = { unitNumber: '', year: '', make: '', model: '', color: '', plate: '', plateState: '', vin: '', equipmentType: '', notes: '' }

function VehiclesTab({
  vehicles,
  drivers,
  onChange,
}: {
  vehicles: DemoPilotVehicle[]
  drivers: DemoPilotDriver[]
  onChange: (next: DemoPilotVehicle[]) => void
}) {
  const [adding, setAdding] = useState(false)
  const [form, setForm] = useState(BLANK_VEHICLE)
  const approved = drivers.filter((d) => d.relationship === 'Approved')

  function patch(id: string, p: Partial<DemoPilotVehicle>) {
    onChange(vehicles.map((v) => (v.id === id ? { ...v, ...p } : v)))
  }

  return (
    <div className="mt-6">
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-body">Every unit needs four photos — front, back, left side, right side — before it can be shown to carriers and brokers on an assignment.</p>
        <button onClick={() => setAdding((v) => !v)} className="rounded-lg bg-amber-brand px-4 py-2 text-xs font-bold text-navy-950 hover:bg-amber-deep">{adding ? 'Cancel' : '+ Add unit'}</button>
      </div>

      {adding && (
        <div className="mt-4 grid gap-2 rounded-2xl border border-line bg-white p-5 sm:grid-cols-3">
          {([
            ['unitNumber', 'Nickname / unit number'], ['year', 'Year'], ['make', 'Make'], ['model', 'Model'], ['color', 'Color'],
            ['plate', 'License plate'], ['plateState', 'Plate state'], ['vin', 'VIN (optional)'], ['equipmentType', 'Equipment type'], ['notes', 'Notes'],
          ] as const).map(([k, label]) => (
            <input key={k} value={form[k]} onChange={(e) => setForm({ ...form, [k]: e.target.value })} placeholder={label} className="rounded-lg border border-line px-3 py-2 text-sm" />
          ))}
          <button
            onClick={() => {
              if (!form.unitNumber || !form.make || !form.model || !form.plate) { toast.error('Unit number, make, model and plate are required'); return }
              onChange([{ id: `veh-${Date.now()}`, ...form, ownerType: 'pilot_company', ownerLabel: DEMO_PILOT_COMPANY.name, assignedDriverId: null, status: 'active', photos: [] }, ...vehicles])
              setForm(BLANK_VEHICLE); setAdding(false)
              toast.success('Preview: unit added — upload its four photos next')
            }}
            className="rounded-lg bg-navy-900 py-2 text-xs font-bold text-white hover:bg-navy-800 sm:col-span-3"
          >
            Save unit
          </button>
        </div>
      )}

      <div className="mt-4 grid gap-4 md:grid-cols-2">
        {vehicles.map((v) => {
          const drv = demoDriver(v.assignedDriverId)
          return (
            <div key={v.id} className={`rounded-2xl border p-5 ${v.status === 'inactive' ? 'border-dashed border-line bg-neutral-50' : 'border-line bg-white'}`}>
              <div className="flex items-start justify-between gap-3">
                <div>
                  <p className="font-bold">{v.unitNumber} <span className="font-normal text-slate-body">· {v.year} {v.make} {v.model} · {v.color}</span></p>
                  <p className="mt-0.5 text-xs text-slate-body">Plate {v.plate} ({v.plateState}){v.vin ? ` · VIN ${v.vin}` : ''} · {v.equipmentType}</p>
                  <p className="text-xs text-slate-body">Owner: {v.ownerLabel}</p>
                </div>
                <Pill label={v.status} style={v.status === 'active' ? 'bg-ok-bg text-ok ring-green-200' : 'bg-neutral-100 text-slate-body ring-neutral-200'} />
              </div>

              <div className="mt-3 grid grid-cols-4 gap-2">
                {VEHICLE_PHOTO_SIDES.map((side) => {
                  const has = v.photos.includes(side)
                  return (
                    <button
                      key={side}
                      onClick={() => { if (!has) { patch(v.id, { photos: [...v.photos, side] }); toast.success(`Preview: ${side} photo uploaded`) } }}
                      className={`aspect-[4/3] rounded-lg text-[10px] font-semibold ring-1 ring-inset ${has ? 'bg-navy-100 text-navy-900 ring-navy-100' : 'bg-white text-slate-body ring-dashed ring-line hover:text-ink'}`}
                    >
                      {has ? '📷 ' : '+ '}{side}
                    </button>
                  )
                })}
              </div>
              {v.photos.length < 4 && <p className="mt-1.5 text-[11px] font-semibold text-warn">{4 - v.photos.length} of 4 required photos missing</p>}

              <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
                <label className="text-slate-body">Assigned driver</label>
                <select value={v.assignedDriverId ?? ''} onChange={(e) => { patch(v.id, { assignedDriverId: e.target.value || null }); toast.success('Preview: vehicle assignment updated') }} className="rounded-lg border border-line bg-white px-2 py-1">
                  <option value="">—</option>
                  {approved.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
                </select>
                {drv && <span className="text-slate-body">({drv.readiness})</span>}
                <button onClick={() => patch(v.id, { status: v.status === 'active' ? 'inactive' : 'active' })} className="ml-auto rounded-lg border border-line px-2.5 py-1 font-semibold text-slate-body hover:text-ink">
                  {v.status === 'active' ? 'Mark inactive' : 'Reactivate'}
                </button>
              </div>
              {v.notes && <p className="mt-2 text-[11px] text-slate-body">{v.notes}</p>}
            </div>
          )
        })}
      </div>
    </div>
  )
}

/* ------------------------------ Documents ------------------------------ */

function DocumentsTab({ docs, onUpload, fresh }: { docs: { key: string; status: PilotDocumentStatus; uploadedAt?: string; expirationDate?: string }[]; onUpload: (key: string) => void; fresh: boolean }) {
  const slots = documentSlotsFor('pilot_company')
  const created = new Date(fresh ? DEMO_TODAY : DEMO_PILOT_COMPANY.createdAt)
  const due = new Date(created.getTime() + 30 * 86_400_000).toISOString().slice(0, 10)
  const readiness = computeReadiness({
    accountType: 'pilot_company',
    name: DEMO_PILOT_COMPANY.mainContact,
    phone: DEMO_PILOT_COMPANY.phone,
    emailVerified: true,
    documents: Object.fromEntries(docs.map((d) => [d.key, d.status])),
    createdAt: fresh ? DEMO_TODAY : DEMO_PILOT_COMPANY.createdAt,
    today: DEMO_TODAY,
  })

  return (
    <div className="mt-6 grid gap-4 lg:grid-cols-3">
      <div className="rounded-2xl border border-line bg-white p-5 lg:col-span-2">
        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Company documents</p>
        <p className="mt-1 text-xs text-slate-body">Visible to carrier dispatch and carrier admins on your assignments, and to HeavyHaul Agent admins. Brokers never see these files. <span className="font-semibold text-ink">Certificate of insurance, W-9 and business license must be on file before a trip workspace opens.</span></p>
        <div className="mt-3 divide-y divide-line">
          {slots.map((s) => {
            const doc = docs.find((d) => d.key === s.key)
            const st = doc?.status ?? 'Not Uploaded'
            return (
              <div key={s.key} className="flex flex-wrap items-center justify-between gap-3 py-3 text-sm">
                <div>
                  <p className="font-semibold">{s.label}{s.required && <span className="ml-1 text-[10px] font-bold uppercase text-danger">required</span>}</p>
                  <p className="text-xs text-slate-body">
                    {doc?.uploadedAt ? `Uploaded ${doc.uploadedAt}` : ''}
                    {doc?.expirationDate ? ` · Expires ${doc.expirationDate}` : ''}
                    {s.key === 'business_license' && st === 'Not Uploaded' ? `Must be uploaded by ${due} (30 days after account creation)` : ''}
                    {!doc?.uploadedAt && !doc?.expirationDate && s.key !== 'business_license' ? (s.expires ? 'Expiration tracked once uploaded' : 'Upload date tracked') : ''}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <Pill label={st} style={DOC_STYLES[st]} />
                  {st === 'Not Uploaded' && (
                    <button onClick={() => onUpload(s.key)} className="rounded-lg border border-line px-3 py-1.5 text-xs font-semibold hover:text-ink">Upload</button>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </div>
      <div className="rounded-2xl border border-line bg-white p-5">
        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Readiness</p>
        <p className="mt-2"><Pill label={readiness} style={readinessTone(readiness)} /></p>
        <p className="mt-3 text-xs text-slate-body">
          A pilot company can onboard and accept assignments without a business license for 30 days. After that the account is flagged <span className="font-semibold text-ink">Business License Missing · Verification Incomplete · Limited Access · Admin Review Required</span>.
        </p>
        <p className="mt-3 text-xs text-slate-body">Statuses: Not Uploaded, Uploaded, Pending Review, Approved, Rejected, Expired, Expiring Soon. Insurance, licenses and certifications carry an expiration date; the W-9 tracks its upload date.</p>
      </div>
    </div>
  )
}

/* ------------------------------ Contacts / Profile / links ------------------------------ */

function ContactsTab() {
  return (
    <div className="mt-6 overflow-x-auto rounded-2xl border border-line bg-white">
      <table className="w-full min-w-[640px] text-sm">
        <thead>
          <tr className="border-b border-line text-left text-[11px] font-bold uppercase tracking-wide text-slate-body/70">
            {['Name', 'Company', 'Role', 'Phone', 'Email'].map((h) => <th key={h} className="px-4 py-3">{h}</th>)}
          </tr>
        </thead>
        <tbody>
          {DEMO_PILOT_CONTACTS.map((c) => (
            <tr key={c.email} className="border-b border-line last:border-0">
              <td className="px-4 py-3 font-semibold">{c.name}</td>
              <td className="px-4 py-3">{c.company}</td>
              <td className="px-4 py-3 text-xs">{c.role}</td>
              <td className="px-4 py-3 text-xs">{c.phone}</td>
              <td className="px-4 py-3 text-xs">{c.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <p className="px-4 py-3 text-xs text-slate-body">The carrier dispatchers and brokers who have shared assignments with this company.</p>
    </div>
  )
}

function CompanyProfileTab({ caps, onToggleCap, docs, readiness, driverCount, vehicleCount, assignmentCount }: { caps: Partial<Record<PilotCapability, CapabilityStatus>>; onToggleCap: (c: PilotCapability) => void; docs: { key: string; status: PilotDocumentStatus }[]; readiness: string; driverCount: number; vehicleCount: number; assignmentCount: number }) {
  const c = DEMO_PILOT_COMPANY
  const docStatus = (key: string) => docs.find((d) => d.key === key)?.status ?? 'Not Uploaded'
  const R = (k: string, v: React.ReactNode) => ({ k, v })
  const rows = [
    R('Company name', c.name),
    R('Address', c.address),
    R('Phone', c.phone),
    R('Email', <>{c.email} <span className="text-ok">✓ validated</span></>),
    R('Main contact', c.mainContact),
    R('Certificate of insurance', <Pill label={docStatus('insurance')} style={DOC_STYLES[docStatus('insurance')]} />),
    R('W-9', <Pill label={docStatus('w9')} style={DOC_STYLES[docStatus('w9')]} />),
    R('Business license', <Pill label={docStatus('business_license')} style={DOC_STYLES[docStatus('business_license')]} />),
    R('Certificate of good standing (optional)', <Pill label={docStatus('good_standing')} style={DOC_STYLES[docStatus('good_standing')]} />),
    R('Pilot drivers', `${driverCount} approved`),
    R('Pilot vehicles', `${vehicleCount} active`),
    R('Assignments', `${assignmentCount} total`),
    R('Service states', <span className="font-mono">{c.serviceStates.join(' ')}</span>),
    R('Capabilities · step 6', <span className="flex flex-wrap gap-1">{PILOT_CAPABILITIES.map((k) => <button key={k} onClick={() => onToggleCap(k)} className={`rounded-full px-2 py-0.5 text-xs ring-1 ring-inset ${caps[k] ? 'bg-navy-100 text-navy-900 ring-navy-100' : 'bg-white text-slate-body/60 ring-line hover:text-ink'}`}>{k}{caps[k] ? ` · ${caps[k]}` : ''}</button>)}</span>),
    R('Company notes', c.notes),
    R('Verification status', <Pill label={readiness} style={readinessTone(readiness)} />),
  ]
  return (
    <div className="mt-6 rounded-2xl border border-line bg-white p-5">
      <dl className="divide-y divide-line text-sm">
        {rows.map(({ k, v }) => (
          <div key={k} className="grid gap-1 py-3 sm:grid-cols-3">
            <dt className="text-xs font-bold uppercase tracking-wide text-slate-body/70">{k}</dt>
            <dd className="sm:col-span-2">{v}</dd>
          </div>
        ))}
      </dl>
    </div>
  )
}

function LinkTab({ title, body, href, cta }: { title: string; body: string; href: string; cta: string }) {
  return (
    <div className="mt-6 rounded-2xl border border-line bg-white p-6">
      <h3 className="font-bold tracking-tight">{title}</h3>
      <p className="mt-1.5 text-sm text-slate-body">{body}</p>
      <Link href={href} className="mt-4 inline-block rounded-lg bg-navy-900 px-4 py-2 text-xs font-bold text-white hover:bg-navy-800">{cta}</Link>
    </div>
  )
}