import { useState } from 'react'
import {
  AlertTriangle,
  Briefcase,
  Crown,
  Layers,
  MapPin,
  Radar,
  RefreshCw,
  ScanSearch,
  ShieldAlert,
  ShieldCheck,
  Target,
  TrendingUp,
  Users,
} from 'lucide-react'
import { useMissionAdoptForecast, useMissionCommandCenter } from './queries'
import { missionBrand } from './brand'
import { WhoCanSupport } from './WhoCanSupport'
import { Badge, Bar, Panel, Stat } from '../../components/ui'
import { Gauge } from '../../components/Gauge'
import { MissionCheckModal } from '../../components/MissionCheckModal'
import { ToolHeader } from '../../components/ToolHeader'
import { bandColor, fmtUSD, num, stateColor } from '../../lib/format'
import type { CCRecommendation, CCUpcomingOpportunity } from '../../lib/types'

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 } = useMissionCommandCenter()
  const [missionCheck, setMissionCheck] = useState(false)

  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">
      <MissionCheckModal open={missionCheck} onClose={() => setMissionCheck(false)} />
      <ToolHeader name={missionBrand.name} tagline={missionBrand.tagline} accent={missionBrand.accent} />
      {/* 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} · {fmtUSD(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 ? (
                        <>
                          <span className="font-semibold text-warn">{fmtUSD(g.value_at_risk)} exposure</span>
                          {g.value_representative && (
                            <span
                              className="ml-1.5 rounded bg-line/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted"
                              title="Representative demo value, not a real federal figure"
                            >
                              representative
                            </span>
                          )}
                          {' · '}
                        </>
                      ) : null}
                      {g.impacted_opportunities.slice(0, 2).join(', ')}
                    </div>
                    {/* counted basis, so the dollar is auditable, never a bare sum */}
                    <div className="mt-0.5 text-[11px] text-faint">{g.value_basis}</div>
                    {/* modeled Mission Readiness Impact */}
                    {num(g.impact_modeled_pct) > 0 && (
                      <div
                        className="mt-0.5 flex items-center gap-1 text-[11px] text-blue-soft"
                        title={g.impact_modeled_label}
                      >
                        <TrendingUp size={11} />
                        Mission Readiness Impact, plus {g.impact_modeled_pct} pts coverage if filled, modeled
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
            <button
              onClick={() => setMissionCheck(true)}
              className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-gold/50 px-3 py-2 text-xs font-semibold text-gold hover:bg-gold/10"
            >
              <ScanSearch size={14} /> Find Candidate
            </button>
          </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>

      {/* ROW: upcoming opportunities (forecasts) + incumbent landscape (contract awards) */}
      <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
        <Panel title="Upcoming Opportunities™" hint="planning data, does not change current readiness" className="xl:col-span-7">
          {d.upcoming_opportunities.length === 0 ? (
            <p className="text-sm text-muted">No forecasts ingested yet.</p>
          ) : (
            <div className="space-y-2">
              {d.upcoming_opportunities.map((u) => (
                <UpcomingCard key={u.record_id} u={u} />
              ))}
            </div>
          )}
        </Panel>

        <Panel title="Incumbent Landscape" hint="who holds the contracts" className="xl:col-span-5">
          {d.incumbent_landscape.length === 0 ? (
            <p className="text-sm text-muted">No award data ingested yet.</p>
          ) : (
            <div className="space-y-1.5">
              {d.incumbent_landscape.map((inc) => (
                <div key={inc.record_id} className="flex items-center justify-between rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
                  <div className="min-w-0">
                    <div className="truncate text-sm font-semibold">{inc.incumbent}</div>
                    <div className="text-xs text-muted">
                      {inc.agency}
                      {inc.naics ? ` · NAICS ${inc.naics}` : ''}
                    </div>
                  </div>
                  <div className="shrink-0 pl-2 text-right">
                    <div className="text-sm font-bold tabular-nums">{fmtUSD(inc.value)}</div>
                    <div className="text-[10px] uppercase tracking-wide text-faint">{inc.value_source || inc.source}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </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>

      {/* Who can support this mission today, read from the persisted screenMATCH evaluations. */}
      <WhoCanSupport />
    </div>
  )
}

// UpcomingCard renders one forecast with its honest fit note and a compact adopt as requirement form.
// Adopting creates a real requirement the shared engine scores; on success the dashboard refreshes so
// the new requirement shows up in coverage. The forecast itself never alters the current readiness.
function UpcomingCard({ u }: { u: CCUpcomingOpportunity }) {
  const [open, setOpen] = useState(false)
  const [level, setLevel] = useState('secret')
  const [years, setYears] = useState(3)
  const [skills, setSkills] = useState('')
  const adopt = useMissionAdoptForecast()

  return (
    <div className="rounded-lg border border-line/50 bg-surface/60 px-3 py-2">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold">{u.title}</div>
          <div className="text-xs text-muted">
            {u.agency}
            {u.naics ? ` · NAICS ${u.naics}` : ''}
            {u.place_of_performance ? ` · ${u.place_of_performance}` : ''}
            {u.estimated_award_date ? ` · est. award ${u.estimated_award_date}` : ''}
            {u.estimated_value ? ` · ${fmtUSD(u.estimated_value)}` : ''}
          </div>
        </div>
        <span
          className="shrink-0 rounded bg-line/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted"
          title="Forecast, subject to change"
        >
          {u.planning_note}
        </span>
      </div>
      <div className="mt-1 text-[11px] text-blue-soft">{u.fit_note}</div>
      {u.adoptable && (
        <div className="mt-1.5">
          {!open ? (
            <button onClick={() => setOpen(true)} className="text-[11px] font-semibold text-gold hover:underline">
              Adopt as requirement
            </button>
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault()
                adopt.mutate(
                  {
                    recordID: u.record_id,
                    input: {
                      required_level: level,
                      required_poly: 'none',
                      required_years: years,
                      key_personnel: false,
                      skills: skills
                        .split(',')
                        .map((s) => s.trim())
                        .filter(Boolean),
                    },
                  },
                  { onSuccess: () => setOpen(false) },
                )
              }}
              className="mt-1 space-y-1.5 rounded-md border border-line/50 bg-navy-950/40 p-2"
            >
              <div className="flex flex-wrap items-center gap-1.5">
                <select
                  value={level}
                  onChange={(e) => setLevel(e.target.value)}
                  className="rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none"
                  aria-label="Required clearance"
                >
                  <option value="none">No clearance</option>
                  <option value="secret">Secret</option>
                  <option value="top_secret">Top Secret</option>
                  <option value="ts_sci">TS/SCI</option>
                </select>
                <input
                  type="number"
                  min={0}
                  value={years}
                  onChange={(e) => setYears(Number(e.target.value))}
                  className="w-16 rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none"
                  aria-label="Required years"
                />
              </div>
              <input
                value={skills}
                onChange={(e) => setSkills(e.target.value)}
                placeholder="Required skills, comma separated"
                className="w-full rounded border border-line/70 bg-navy-950/60 px-1.5 py-1 text-[11px] outline-none"
                aria-label="Required skills"
              />
              <div className="flex items-center gap-1.5">
                <button
                  type="submit"
                  disabled={adopt.isPending}
                  className="rounded bg-gold/20 px-2 py-1 text-[11px] font-semibold text-gold hover:bg-gold/30 disabled:opacity-50"
                >
                  {adopt.isPending ? 'Adopting…' : 'Create requirement'}
                </button>
                <button type="button" onClick={() => setOpen(false)} className="text-[11px] text-muted hover:text-ink">
                  Cancel
                </button>
                {adopt.isError && <span className="text-[11px] text-risk">Could not adopt. Try again.</span>}
              </div>
            </form>
          )}
        </div>
      )}
    </div>
  )
}