import {
  AlertTriangle,
  Briefcase,
  Crown,
  Layers,
  MapPin,
  Radar,
  RefreshCw,
  ShieldAlert,
  ShieldCheck,
  Target,
  TrendingUp,
  Users,
} from 'lucide-react'
import { useCommandCenter } from '../lib/queries'
import { Badge, Bar, Panel, Stat } from '../components/ui'
import { Gauge } from '../components/Gauge'
import { bandColor, num, stateColor } from '../lib/format'
import type { CCRecommendation } from '../lib/types'

function money(v: string | null | undefined): string {
  if (!v) return 'n/a'
  const n = Number(v)
  if (!Number.isFinite(n)) return 'n/a'
  if (n >= 1e9) return `$${(n / 1e9).toFixed(2)}B`
  if (n >= 1e6) return `$${(n / 1e6).toFixed(1)}M`
  if (n >= 1e3) return `$${(n / 1e3).toFixed(0)}K`
  return `$${n}`
}

const riskColor: Record<string, string> = {
  high: 'var(--color-risk)',
  medium: 'var(--color-warn)',
  low: 'var(--color-ok)',
}
const sevColor: Record<string, string> = {
  high: 'var(--color-risk)',
  critical: 'var(--color-risk)',
  medium: 'var(--color-warn)',
  warning: 'var(--color-warn)',
  low: 'var(--color-blue-soft)',
  info: 'var(--color-blue-soft)',
}

export function CommandCenter() {
  const { data: d, isLoading, refetch, isFetching } = useCommandCenter()

  if (isLoading || !d) {
    return <Panel className="grid place-items-center py-24 text-muted">Aggregating mission readiness…</Panel>
  }
  const mr = d.mission_readiness
  const ci = d.clearance_intelligence

  return (
    <div className="space-y-4">
      {/* header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Radar size={18} className="text-gold" />
          <h2 className="text-lg font-bold tracking-tight">Workforce Command Center™</h2>
          <span className="text-xs text-faint">Can we staff this mission today? · as of {d.as_of}</span>
        </div>
        <button
          onClick={() => refetch()}
          className="flex items-center gap-1.5 rounded-lg border border-line/70 px-3 py-1.5 text-sm font-semibold text-muted hover:text-ink"
        >
          <RefreshCw size={14} className={isFetching ? 'animate-spin' : ''} /> Refresh
        </button>
      </div>

      {/* SECTION: banner */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
        <Stat label="Cleared Workforce" value={d.banner.total_cleared_workforce.toLocaleString()} icon={<ShieldCheck size={16} />} />
        <Stat label="Available Now" value={d.banner.available_candidates.toLocaleString()} accent="var(--color-ok)" icon={<Users size={16} />} />
        <Stat label="Proposal Ready" value={d.banner.proposal_ready_candidates.toLocaleString()} accent="var(--color-blue-soft)" icon={<Target size={16} />} />
        <Stat label="Active Requirements" value={d.banner.active_requirements.toLocaleString()} icon={<Briefcase size={16} />} />
        <Stat label="Staffing Gaps" value={d.banner.staffing_gaps.toLocaleString()} accent={d.banner.staffing_gaps > 0 ? 'var(--color-warn)' : undefined} icon={<AlertTriangle size={16} />} />
        <Stat label="High-Risk Opps" value={d.banner.high_risk_opportunities.toLocaleString()} accent={d.banner.high_risk_opportunities > 0 ? 'var(--color-risk)' : undefined} icon={<ShieldAlert size={16} />} />
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
        {/* LEFT: opportunities + clearance */}
        <div className="space-y-4 xl:col-span-4">
          <Panel title="Active Opportunities" hint="ranked by value">
            <div className="space-y-2">
              {d.active_opportunities.map((o) => (
                <div key={o.opportunity_id} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
                  <div className="flex items-center justify-between">
                    <div className="min-w-0">
                      <div className="truncate text-sm font-semibold">{o.name}</div>
                      <div className="text-xs text-muted">
                        {o.customer_agency} · {money(o.value)}
                      </div>
                    </div>
                    <Badge color={riskColor[o.staffing_risk_code]} subtle>
                      {o.staffing_risk}
                    </Badge>
                  </div>
                  <div className="mt-1.5 flex items-center gap-2">
                    <Bar value={num(o.readiness_score)} color={riskColor[o.staffing_risk_code]} />
                    <span className="w-10 text-right text-xs font-semibold tabular-nums">{num(o.readiness_score).toFixed(0)}%</span>
                  </div>
                </div>
              ))}
            </div>
          </Panel>

          <Panel title="Clearance Intelligence">
            <div className="space-y-2">
              {ci.inventory_by_level.map((l) => {
                const max = Math.max(...ci.inventory_by_level.map((x) => x.total), 1)
                return (
                  <div key={l.level}>
                    <div className="flex items-center justify-between text-xs">
                      <span className="font-semibold">{l.label}</span>
                      <span className="tabular-nums text-muted">
                        {l.total.toLocaleString()} · <span className="text-ok">{l.available} avail</span>
                      </span>
                    </div>
                    <Bar value={(l.total / max) * 100} color="var(--color-blue)" />
                  </div>
                )
              })}
            </div>
            <div className="mt-3 flex gap-2">
              {ci.inventory_by_poly.map((p) => (
                <span key={p.poly} className="rounded-md border border-line/70 bg-navy-800/60 px-2 py-1 text-[11px] text-blue-soft">
                  {p.label} {p.total}
                </span>
              ))}
            </div>
            <div className="mt-3 grid grid-cols-4 gap-2 border-t border-line/50 pt-2 text-center">
              {[
                ['Now', ci.availability_windows.now],
                ['30d', ci.availability_windows.d30],
                ['60d', ci.availability_windows.d60],
                ['90d', ci.availability_windows.d90],
              ].map(([k, v]) => (
                <div key={k as string}>
                  <div className="text-sm font-bold tabular-nums">{(v as number).toLocaleString()}</div>
                  <div className="text-[10px] uppercase text-faint">{k as string}</div>
                </div>
              ))}
            </div>
            {(ci.expiring.due_90 > 0 || ci.expiring.expired > 0) && (
              <div className="mt-2 flex items-center gap-2 text-xs text-warn">
                <AlertTriangle size={13} />
                {ci.expiring.expired} expired · {ci.expiring.due_90} expiring ≤90d
              </div>
            )}
          </Panel>
        </div>

        {/* CENTER: mission readiness + labor category */}
        <div className="space-y-4 xl:col-span-4">
          <Panel className="grid place-items-center py-5">
            <Gauge value={num(mr.score)} color={bandColor(mr.band)} status={mr.status} />
            <div className="mt-4 w-full space-y-2">
              {mr.drivers.map((dr) => (
                <div key={dr.key}>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-ink">{dr.label}</span>
                    <span className="font-semibold tabular-nums" style={{ color: stateColor(dr.state) }}>
                      {num(dr.pct).toFixed(0)}%
                    </span>
                  </div>
                  <Bar value={num(dr.pct)} color={stateColor(dr.state)} />
                </div>
              ))}
            </div>
          </Panel>

          <Panel title="Labor Category Coverage™">
            <div className="space-y-2">
              {d.labor_category_coverage.map((c) => (
                <div key={c.labor_category}>
                  <div className="flex items-center justify-between text-xs">
                    <span>{c.labor_category}</span>
                    <span className="tabular-nums text-muted">
                      {c.filled}/{c.demanded} ·{' '}
                      <span style={{ color: bandColor(c.color) }}>{num(c.coverage).toFixed(0)}%</span>
                    </span>
                  </div>
                  <Bar value={num(c.coverage)} color={bandColor(c.color)} />
                </div>
              ))}
            </div>
          </Panel>
        </div>

        {/* RIGHT: staffing gaps + proposal readiness */}
        <div className="space-y-4 xl:col-span-4">
          <Panel title="Staffing Gaps™" hint="most valuable panel">
            {d.staffing_gaps.length === 0 ? (
              <p className="text-sm" style={{ color: 'var(--color-ok)' }}>
                Fully staffed against current demand.
              </p>
            ) : (
              <div className="space-y-2.5">
                {d.staffing_gaps.map((g) => (
                  <div key={g.labor_category + g.required_level} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-bold text-warn">{g.headline}</span>
                      {g.blocks_key_personnel && (
                        <span className="flex items-center gap-1 text-[11px] text-gold">
                          <Crown size={12} /> KP
                        </span>
                      )}
                    </div>
                    <div className="mt-0.5 text-xs text-muted">
                      {g.value_at_risk ? `${money(g.value_at_risk)} at risk · ` : ''}
                      {g.impacted_opportunities.slice(0, 2).join(', ')}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Panel>

          <Panel title="Proposal Readiness™">
            <div className="grid grid-cols-2 gap-2">
              {[
                ['Ready', d.proposal_readiness.ready, 'var(--color-ok)'],
                ['At Risk', d.proposal_readiness.at_risk, 'var(--color-warn)'],
                ['KP Missing', d.proposal_readiness.key_personnel_missing, 'var(--color-risk)'],
                ['LCAT Missing', d.proposal_readiness.labor_categories_missing, 'var(--color-warn)'],
              ].map(([k, v, c]) => (
                <div key={k as string} className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-center">
                  <div className="text-2xl font-extrabold tabular-nums" style={{ color: c as string }}>
                    {v as number}
                  </div>
                  <div className="text-[11px] uppercase tracking-wide text-muted">{k as string}</div>
                </div>
              ))}
            </div>
          </Panel>
        </div>
      </div>

      {/* ROW: win impact + heat map + recommendations */}
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
        <Panel title="Win Impact™" hint="scarcity proxy" className="xl:col-span-3">
          <div className="text-4xl font-extrabold tabular-nums" style={{ color: 'var(--color-gold)' }}>
            {d.win_impact.high_impact_count}
          </div>
          <div className="text-xs text-muted">high-impact candidates</div>
          <ul className="mt-2 space-y-1">
            {d.win_impact.top.slice(0, 5).map((c) => (
              <li key={c.candidate_id} className="flex items-center justify-between text-sm">
                <span className="truncate">{c.full_name}</span>
                <span className="shrink-0 text-[11px] text-blue-soft">
                  {c.clearance_level === 'ts_sci' ? 'TS/SCI' : c.clearance_level} · {c.years_experience}y
                </span>
              </li>
            ))}
          </ul>
        </Panel>

        <Panel title="Workforce Heat Map™" hint="candidate density by metro" className="xl:col-span-5">
          <div className="space-y-1.5">
            {d.heat_map.slice(0, 8).map((m) => {
              const max = Math.max(...d.heat_map.map((x) => x.total), 1)
              return (
                <div key={m.metro} className="flex items-center gap-2">
                  <span className="flex w-40 shrink-0 items-center gap-1 text-xs">
                    <MapPin size={12} className="text-blue-soft" />
                    {m.metro}
                  </span>
                  <Bar value={(m.total / max) * 100} color="var(--color-blue)" />
                  <span className="w-12 text-right text-xs tabular-nums text-muted">{m.total}</span>
                </div>
              )
            })}
          </div>
        </Panel>

        <Panel title="AI Recommendations" className="xl:col-span-4">
          <ul className="space-y-2">
            {d.ai_recommendations.map((r: CCRecommendation, i) => (
              <li key={i} className="flex items-start gap-2 rounded-lg border border-line/50 bg-surface/60 px-3 py-2 text-sm">
                <AlertTriangle size={15} className="mt-0.5 shrink-0" style={{ color: sevColor[r.severity] }} />
                <span>{r.message}</span>
              </li>
            ))}
          </ul>
        </Panel>
      </div>

      {/* Executive Action Center */}
      <Panel title="Executive Action Center">
        <div className="flex flex-wrap items-center gap-2.5">
          <button className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2.5 text-sm font-bold text-white hover:brightness-110">
            <Layers size={15} /> Generate Slate
          </button>
          <button className="flex items-center gap-2 rounded-lg border border-line/70 px-4 py-2.5 text-sm font-semibold text-muted hover:text-ink">
            <Target size={15} /> Screen Candidate
          </button>
          <button className="flex items-center gap-2 rounded-lg border border-line/70 px-4 py-2.5 text-sm font-semibold text-muted hover:text-ink">
            <TrendingUp size={15} /> Workforce Inventory
          </button>
          <span className="ml-auto text-xs text-faint">
            {d.action_center.open_opportunities_without_slate} opps without a slate ·{' '}
            {d.action_center.requirements_unscreened} requirements unscreened
          </span>
        </div>
      </Panel>
    </div>
  )
}