// ViG Command Center — Covenant Center + Optimizer
const { useState: useStateC, useMemo: useMemoC } = React;

function CovenantCard({ cov, status, onPick }) {
  const tone = status.complete ? 'green' : status.ownedCount > 0 ? 'brand' : 'zinc';
  return (
    <Card className="p-4 transition-shadow hover:shadow-md">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="truncate text-[14px] font-semibold text-zinc-900 dark:text-white">{cov.main}</div>
          <div className="mt-0.5 text-[12px] text-zinc-400">Main covenant set</div>
        </div>
        <Ring pct={status.pct} size={44} thickness={5} color={status.complete ? '#16a34a' : '#FF6B00'} />
      </div>
      <div className="mt-3 grid grid-cols-2 gap-1.5">
        {status.members.map((m, i) => {
          const have = !status.missing.includes(m);
          return (
            <div key={i} className={`flex items-center gap-1.5 rounded-md px-2 py-1 text-[12px] ${have ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400' : 'bg-zinc-50 text-zinc-400 dark:bg-zinc-800/50'}`}>
              <Icon name={have ? 'check' : 'x'} size={12} stroke={2.5} />
              <span className="truncate">{m}</span>
            </div>
          );
        })}
      </div>
      <div className="mt-3 space-y-1 border-t border-zinc-100 pt-3 dark:border-zinc-800">
        {[cov.buff1, cov.buff2].filter(Boolean).map((b, i) => (
          <div key={i} className="flex items-start gap-1.5 text-[12px] text-zinc-500 dark:text-zinc-400"><Icon name="bolt" size={12} className="mt-0.5 shrink-0 text-brand" /><span>{b}</span></div>
        ))}
      </div>
    </Card>
  );
}

const BUFF_CATS = ['Attack', 'HP', 'Defense', 'March Speed', 'Training', 'Debuff'];
const COV_TROOPS = ['Mounted', 'Ground', 'Ranged', 'Siege'];
function covBuffCat(buff) {
  const b = (buff || '').toLowerCase();
  if (b.startsWith('enemy') || /-\d+%/.test(b)) return 'Debuff';
  if (b.includes('march speed') || b.includes('march seed')) return 'March Speed';
  if (b.includes('training')) return 'Training';
  if (b.includes('attack')) return 'Attack';
  if (b.includes('hp')) return 'HP';
  if (b.includes('defense')) return 'Defense';
  return 'Other';
}
function covTroop(buff) {
  const b = (buff || '').toLowerCase();
  if (b.includes('mounted')) return 'Mounted';
  if (b.includes('ground')) return 'Ground';
  if (b.includes('range')) return 'Ranged';
  if (b.includes('siege')) return 'Siege';
  return null;
}
function FilterSelect({ value, onChange, children, active }) {
  return (
    <select value={value} onChange={e => onChange(e.target.value)}
      className={`h-9 cursor-pointer rounded-lg border bg-white px-2.5 text-[13px] font-medium outline-none transition-colors dark:bg-zinc-900 ${active ? 'border-brand text-zinc-900 dark:text-white' : 'border-zinc-200 text-zinc-600 hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-300'}`}>
      {children}
    </select>
  );
}

function CovenantPage() {
  const V = window.VIG;
  const { ownedByName } = useOwn();
  const [q, setQ] = useStateC('');
  const [filter, setFilter] = useStateC('all'); // all|complete|progress|locked
  const [buffCat, setBuffCat] = useStateC('all');
  const [troop, setTroop] = useStateC('all');
  const [sort, setSort] = useStateC('progress'); // progress|name|missing

  const enriched = useMemoC(() => V.covenants.map(c => ({ cov: c, status: CALC.covenantStatus(c, ownedByName) })), [ownedByName]);
  const rows = useMemoC(() => {
    const ql = q.trim().toLowerCase();
    let r = enriched.filter(({ cov, status }) => {
      if (ql && ![cov.main, cov.c1, cov.c2, cov.c3, cov.buff1, cov.buff2].some(s => (s || '').toLowerCase().includes(ql))) return false;
      if (filter === 'complete' && !status.complete) return false;
      if (filter === 'progress' && !(!status.complete && status.ownedCount > 0)) return false;
      if (filter === 'locked' && status.ownedCount !== 0) return false;
      if (buffCat !== 'all' && ![cov.buff1, cov.buff2].some(b => covBuffCat(b) === buffCat)) return false;
      if (troop !== 'all' && ![cov.buff1, cov.buff2].some(b => covTroop(b) === troop)) return false;
      return true;
    });
    r = r.slice().sort((a, b) => {
      if (sort === 'name') return a.cov.main.localeCompare(b.cov.main);
      if (sort === 'missing') return a.status.missing.length - b.status.missing.length;
      return b.status.pct - a.status.pct; // progress: closest to complete first
    });
    return r;
  }, [enriched, q, filter, buffCat, troop, sort]);

  const filtersActive = buffCat !== 'all' || troop !== 'all';

  const summary = useMemoC(() => {
    const complete = enriched.filter(e => e.status.complete).length;
    const progress = enriched.filter(e => !e.status.complete && e.status.ownedCount > 0).length;
    const avg = Math.round(enriched.reduce((a, e) => a + e.status.pct, 0) / enriched.length);
    return { complete, progress, locked: enriched.length - complete - progress, avg };
  }, [enriched]);

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <KpiCard label="Complete" value={summary.complete} sub={`of ${enriched.length}`} icon="check" accent />
        <KpiCard label="In progress" value={summary.progress} sub="1+ generals owned" icon="link" />
        <KpiCard label="Locked" value={summary.locked} sub="no generals yet" icon="x" />
        <KpiCard label="Avg completion" value={summary.avg + '%'} sub="across all sets" icon="target" />
      </div>

      <div className="flex flex-wrap items-center gap-2.5">
        <SearchInput value={q} onChange={setQ} placeholder="Search covenants, generals, buffs…" className="w-full sm:w-72" />
        <Segmented options={[{ value: 'all', label: 'All' }, { value: 'complete', label: 'Complete' }, { value: 'progress', label: 'In progress' }, { value: 'locked', label: 'Locked' }]} value={filter} onChange={setFilter} />
        <FilterSelect value={buffCat} onChange={setBuffCat} active={buffCat !== 'all'}>
          <option value="all">All buffs</option>
          {BUFF_CATS.map(c => <option key={c} value={c}>{c}</option>)}
        </FilterSelect>
        <FilterSelect value={troop} onChange={setTroop} active={troop !== 'all'}>
          <option value="all">All troops</option>
          {COV_TROOPS.map(t => <option key={t} value={t}>{t}</option>)}
        </FilterSelect>
        <FilterSelect value={sort} onChange={setSort}>
          <option value="progress">Sort: Closest to complete</option>
          <option value="missing">Sort: Fewest missing</option>
          <option value="name">Sort: A–Z</option>
        </FilterSelect>
        {filtersActive && <Btn variant="ghost" size="sm" onClick={() => { setBuffCat('all'); setTroop('all'); }}>Clear</Btn>}
        <span className="ml-auto text-[12px] tabular-nums text-zinc-400">{rows.length} sets</span>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {rows.map(({ cov, status }) => <CovenantCard key={cov.main} cov={cov} status={status} />)}
        {rows.length === 0 && <div className="col-span-full py-12 text-center text-zinc-400">No covenants match.</div>}
      </div>
    </div>
  );
}

function OptimizerPage({ go }) {
  const { ownedByName } = useOwn();
  const [count, setCount] = useStateC(10);
  const picks = useMemoC(() => CALC.optimizeCovenants(ownedByName, count), [ownedByName, count]);

  return (
    <div className="space-y-4">
      <Card className="flex flex-col gap-3 p-5 sm:flex-row sm:items-center">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-brand/10 text-brand"><Icon name="target" size={20} /></div>
        <div className="flex-1">
          <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">Priority engine</h3>
          <p className="text-[12px] text-zinc-400">Ranks incomplete covenants by how close they are to completion and the value of the buffs they unlock. Toggle ownership in the database to refine.</p>
        </div>
        <Segmented options={[{ value: 5, label: 'Top 5' }, { value: 10, label: 'Top 10' }, { value: 20, label: 'Top 20' }]} value={count} onChange={setCount} />
      </Card>

      {picks.length === 0 ? (
        <Card className="p-12 text-center"><div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15"><Icon name="trophy" size={24} /></div><div className="text-sm font-semibold text-zinc-900 dark:text-white">All covenants complete</div><div className="text-[13px] text-zinc-400">Nothing left to prioritize.</div></Card>
      ) : (
        <Card className="divide-y divide-zinc-100 dark:divide-zinc-800">
          {picks.map(({ cov, status, value, score }, i) => (
            <div key={cov.main} className="flex items-center gap-4 p-4">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-[14px] font-semibold tabular-nums text-white dark:bg-white dark:text-zinc-900">{i + 1}</div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="truncate text-[14px] font-semibold text-zinc-900 dark:text-white">{cov.main}</span>
                  <Pill tone="brand">{status.ownedCount}/{status.total} owned</Pill>
                </div>
                <div className="mt-0.5 truncate text-[12px] text-zinc-400">Need <span className="font-medium text-zinc-600 dark:text-zinc-300">{status.missing.join(', ')}</span></div>
                <div className="mt-1.5 flex flex-wrap gap-1.5">
                  {[cov.buff1, cov.buff2].filter(Boolean).map((b, j) => <span key={j} className="inline-flex items-center gap-1 rounded bg-zinc-50 px-1.5 py-0.5 text-[11px] text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"><Icon name="bolt" size={10} className="text-brand" />{b}</span>)}
                </div>
              </div>
              <div className="hidden w-28 shrink-0 sm:block">
                <div className="mb-1 flex justify-between text-[11px] text-zinc-400"><span>priority</span><span className="font-semibold tabular-nums text-brand">{score}</span></div>
                <Progress value={score} />
              </div>
              <Ring pct={status.pct} size={42} thickness={5} />
            </div>
          ))}
        </Card>
      )}
      <div className="flex justify-center"><Btn variant="outline" size="sm" onClick={() => go('generals')}>Open General Database<Icon name="arrow" size={14} /></Btn></div>
    </div>
  );
}
window.CovenantPage = CovenantPage;
window.OptimizerPage = OptimizerPage;