// ViG Command Center v2 — COMMAND CENTER (intelligent dashboard)
const { useState: useStateCC, useMemo: useMemoCC, useEffect: useEffectCC } = React;

function CCPanel({ title, action, children, className = '', pad = true }) {
  return (
    <section className={`flex flex-col rounded-xl border border-zinc-800 bg-zinc-900 ${className}`}>
      {title && <header className="flex items-center justify-between border-b border-zinc-800 px-4 py-2.5">
        <h3 className="text-[11px] font-bold uppercase tracking-[0.14em] text-zinc-400">{title}</h3>{action}
      </header>}
      <div className={`flex-1 ${pad ? 'p-4' : ''}`}>{children}</div>
    </section>
  );
}

function CommandPage({ go }) {
  const h = useMemoCC(() => computeHealth(), []);
  const animScore = h.score;

  return (
    <div className="grid grid-cols-12 gap-4">
      <SmartAlerts go={go} />
      <AIBriefingCard go={go} />
      {/* row 1: health + radar + alliance + readiness */}
      <CCPanel className="col-span-12 md:col-span-6 xl:col-span-3" title="Account Health">
        <div className="flex items-center justify-center gap-5">
          <HealthRing score={animScore} size={158} />
          <div className="space-y-2.5">
            <div>
              <div className="text-[10px] uppercase tracking-wide text-zinc-500">Trend</div>
              <div className={`text-[16px] font-bold tabular-nums ${h.trend >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>{h.trend >= 0 ? '▲ +' : '▼ '}{h.trend}</div>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-wide text-zinc-500">League</div>
              <div className="text-[14px] font-bold text-white">{h.score >= 80 ? 'Elite' : h.score >= 60 ? 'Veteran' : h.score >= 40 ? 'Soldier' : 'Recruit'}</div>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-wide text-zinc-500">Critical flags</div>
              <div className={`text-[16px] font-bold tabular-nums ${h.alerts.length ? 'text-[#FF1744]' : 'text-emerald-400'}`}>{h.alerts.length}</div>
            </div>
          </div>
        </div>
      </CCPanel>

      <CCPanel className="col-span-12 md:col-span-6 xl:col-span-3" title="Capability Radar">
        <Radar modules={h.modules} size={240} />
      </CCPanel>

      <CCPanel className="col-span-12 md:col-span-6 xl:col-span-3" title="Readiness">
        <div className="flex h-full items-center justify-around">
          {h.readiness.map(r => <Gauge key={r.label} value={r.value} label={r.label} size={104} />)}
        </div>
      </CCPanel>

      <CCPanel className="col-span-12 md:col-span-6 xl:col-span-3" title="Alliance Position" action={
        <button onClick={() => go('warroom')} className="text-[11px] font-semibold text-brand hover:underline">War Room →</button>
      }>
        <div className="flex h-full flex-col justify-center gap-3">
          <div className="flex items-end gap-3">
            <span className="text-[44px] font-extrabold leading-none text-white">#{h.alliance.rank}</span>
            <span className="pb-1 text-[12px] text-zinc-500">of {h.alliance.total} alliances</span>
          </div>
          <div className="space-y-1.5 text-[12.5px]">
            <div className="flex justify-between"><span className="text-zinc-500">VIG power</span><span className="font-bold tabular-nums text-white">{h.alliance.power.toLocaleString()}B</span></div>
            {h.alliance.rank > 1
              ? <div className="flex justify-between"><span className="text-zinc-500">Gap to {h.alliance.leader}</span><span className="font-bold tabular-nums text-brand">{h.alliance.gap.toLocaleString()}B</span></div>
              : <div className="flex justify-between"><span className="text-zinc-500">Status</span><span className="font-bold text-emerald-400">Leading the server</span></div>}
          </div>
        </div>
      </CCPanel>

      {/* row 2: upgrade queue + module bars + alerts */}
      <CCPanel className="col-span-12 xl:col-span-5" title="Upgrade Queue" action={<span className="text-[10.5px] text-zinc-600">weakest first</span>}>
        <div className="space-y-2">
          {h.recs.slice(0, 5).map((r, i) => (
            <button key={r.id} onClick={() => go(r.page)} className={`flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-all hover:border-brand/60 ${i === 0 ? 'cc-pulse border-brand/50 bg-brand/5' : 'border-zinc-800 bg-zinc-900'}`}>
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[12px] font-extrabold text-white" style={{ background: r.severity === 'critical' ? '#FF1744' : r.severity === 'warning' ? '#b45309' : '#3f3f46' }}>{r.priority}</span>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2"><span className="text-[13px] font-bold text-white">{r.label}</span><span className="text-[11px] font-bold tabular-nums" style={{ color: scoreColor(r.score) }}>{r.score}/100</span></div>
                <div className="truncate text-[11.5px] text-zinc-500">{r.action}</div>
              </div>
              <Icon name="chevron" size={15} className="shrink-0 text-zinc-600" />
            </button>
          ))}
          {h.recs.length === 0 && <div className="py-8 text-center text-[12.5px] text-zinc-500">All systems above 85 — elite account.</div>}
        </div>
      </CCPanel>

      <CCPanel className="col-span-12 md:col-span-7 xl:col-span-4" title="Module Scores">
        <div className="space-y-3">
          {h.modules.map(m => (
            <button key={m.id} onClick={() => go(m.page)} className="block w-full text-left">
              <div className="mb-1 flex items-center justify-between text-[12px]">
                <span className="font-semibold text-zinc-300">{m.label} <span className="text-zinc-600">· {m.weight}%</span></span>
                <span className="font-bold tabular-nums" style={{ color: scoreColor(m.score) }}>{m.score}</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-zinc-800">
                <div className="cc-bar h-full rounded-full" style={{ width: m.score + '%', background: scoreColor(m.score) }}></div>
              </div>
            </button>
          ))}
        </div>
      </CCPanel>

      <CCPanel className="col-span-12 md:col-span-5 xl:col-span-3" title="Critical Alerts">
        <div className="space-y-2">
          {h.alerts.length === 0 ? (
            <div className="flex h-full flex-col items-center justify-center gap-2 py-8 text-center">
              <span className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-400"><Icon name="check" size={20} /></span>
              <span className="text-[12.5px] text-zinc-500">No critical weaknesses detected.</span>
            </div>
          ) : h.alerts.map(a => (
            <button key={a.id} onClick={() => go(a.page)} className="flex w-full items-start gap-2.5 rounded-lg border border-[#FF1744]/40 bg-[#FF1744]/[0.07] px-3 py-2.5 text-left">
              <span className="mt-0.5 h-2 w-2 shrink-0 animate-pulse rounded-full bg-[#FF1744]"></span>
              <div><div className="text-[12.5px] font-bold text-white">{a.label} critically low ({a.score})</div><div className="text-[11.5px] text-zinc-500">{a.action}</div></div>
            </button>
          ))}
          <button onClick={() => go('analysis')} className="mt-1 w-full rounded-lg border border-zinc-800 py-2 text-[12px] font-semibold text-zinc-400 transition-colors hover:border-brand/50 hover:text-white">Full account analysis →</button>
        </div>
      </CCPanel>
    </div>
  );
}
window.CommandPage = CommandPage;
window.CCPanel = CCPanel;