// ViG Command Center v2 — Account Analysis + Knowledge Base
const { useMemo: useMemoAN } = React;

function AnalysisPage({ go }) {
  const h = useMemoAN(() => computeHealth(), []);
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-12 gap-4">
        {h.modules.map(m => (
          <CCPanel key={m.id} className="col-span-12 md:col-span-6 xl:col-span-4" title={`${m.label} · ${m.weight}% of health`}>
            <div className="flex items-center gap-4">
              <div className="relative h-[84px] w-[84px] shrink-0">
                <svg width="84" height="84" className="-rotate-90">
                  <circle cx="42" cy="42" r="35" fill="none" strokeWidth="8" stroke="#1f1f1f" />
                  <circle cx="42" cy="42" r="35" fill="none" strokeWidth="8" stroke={scoreColor(m.score)} strokeLinecap="round" strokeDasharray={`${m.score / 100 * 2 * Math.PI * 35} ${2 * Math.PI * 35}`} style={{ transition: 'all .6s' }} />
                </svg>
                <div className="absolute inset-0 flex items-center justify-center text-[20px] font-extrabold tabular-nums text-white">{m.score}</div>
              </div>
              <div className="min-w-0 flex-1">
                <div className="text-[12px] font-bold uppercase tracking-wide" style={{ color: scoreColor(m.score) }}>
                  {m.score >= 80 ? 'Strong' : m.score >= 60 ? 'Developing' : m.score >= 40 ? 'Weak' : 'Critical'}
                </div>
                <p className="mt-1 text-[12px] leading-relaxed text-zinc-500">{m.action}</p>
                <button onClick={() => go(m.page)} className="mt-2 rounded-md border border-zinc-700 px-2.5 py-1 text-[11.5px] font-semibold text-zinc-300 transition-colors hover:border-brand hover:text-white">Open tool →</button>
              </div>
            </div>
          </CCPanel>
        ))}
      </div>

      <CCPanel title="Score History">
        {h.hist.length < 2 ? (
          <p className="py-6 text-center text-[12.5px] text-zinc-500">Your health score history will chart here as your account evolves.</p>
        ) : (
          <LineChart labels={h.hist.map((x, i) => i + 1 === h.hist.length ? 'now' : '')} height={104}
            series={[{ name: 'health', color: '#E53935', data: h.hist.map(x => x.s) }]} yFmt={v => Math.round(v)} />
        )}
      </CCPanel>
    </div>
  );
}

function KnowledgePage({ go }) {
  const cards = [
    { icon: 'grid', title: 'Construction Speed Checklist', body: '25 stacking sources of construction speed — Monarch gear, Celtic talent, European culture, duty officers, seals and more.', page: 'construction', cta: 'Open in Construction' },
    { icon: 'flame', title: 'Rally & March Playbook', body: 'Troop tier distributions per rally type, trap-buster composition, and kingdom-level layer sizing from the ViG Rally Guide.', page: 'march', cta: 'Open March Center' },
    { icon: 'shield', title: 'Gear Scenario Rules', body: 'Attacking/Rallying = Basic + Attacking buffs · Reinforcing/Defending = Basic + In-City · Monsters = Basic + Attacking + Monster.', page: 'gear', cta: 'Open Gear Calculator' },
    { icon: 'star', title: 'Dragon Usage by Spender', body: 'Every dragon\u2019s recommended role for free-to-play through high coiner, with unlock paths and talent breakpoints.', page: 'dragoncodex', cta: 'Open Dragon Codex' },
    { icon: 'link', title: 'Covenant Basics', body: 'A covenant activates when all listed generals are owned. The Optimizer ranks which to finish next by buff value and proximity.', page: 'optimizer', cta: 'Open Optimizer' },
    { icon: 'trophy', title: 'Alliance Intel Feed', body: 'Live VIG / RSP / NEF standings sync from the live source with 24h auto-refresh, deltas and promotion tracking.', page: 'warroom', cta: 'Open War Room' },
  ];
  return (
    <div className="grid grid-cols-12 gap-4">
      {cards.map(c => (
        <CCPanel key={c.title} className="col-span-12 md:col-span-6 xl:col-span-4">
          <div className="flex h-full flex-col">
            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand/10 text-brand"><Icon name={c.icon} size={18} /></span>
            <h3 className="mt-3 text-[14px] font-bold text-white">{c.title}</h3>
            <p className="mt-1.5 flex-1 text-[12.5px] leading-relaxed text-zinc-500">{c.body}</p>
            <button onClick={() => go(c.page)} className="mt-3 self-start rounded-md border border-zinc-700 px-3 py-1.5 text-[12px] font-semibold text-zinc-300 transition-colors hover:border-brand hover:text-white">{c.cta} →</button>
          </div>
        </CCPanel>
      ))}
    </div>
  );
}
Object.assign(window, { AnalysisPage, KnowledgePage });