// ViG Command Center — Dragon Manager
const { useState: useStateDr, useMemo: useMemoDr } = React;

function DragonManagerPage() {
  const V = window.VIG;
  const [type, setType] = useStateDr('Mounted');
  const [assign, setAssign] = useStateDr(() => LS.get('vig2_dragon_assign', {}));
  const saveAssign = (t, name) => { const next = { ...assign, [t]: name }; setAssign(next); LS.set('vig2_dragon_assign', next); };

  const ranked = useMemoDr(() => CALC.bestDragons(type, V.dragons.length), [type]);
  const top = ranked[0];
  const assignedName = assign[type];

  return (
    <div className="space-y-4">
      <Card className="flex flex-col gap-3 p-5 sm:flex-row sm:items-center">
        <div className="flex-1">
          <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">Dragon optimization</h3>
          <p className="text-[12px] text-zinc-400">Pick a troop type to score every dragon by its contribution to that march, then assign your choice.</p>
        </div>
        <Segmented options={['Ground', 'Mounted', 'Ranged', 'Siege']} value={type} onChange={setType} />
      </Card>

      {top && (
        <Card className="overflow-hidden">
          <div className="flex items-center gap-2 border-b border-zinc-100 bg-brand/[0.03] px-5 py-2.5 dark:border-zinc-800">
            <Icon name="trophy" size={14} className="text-brand" />
            <span className="text-[12px] font-semibold uppercase tracking-wide text-brand">Top pick for {type}</span>
          </div>
          <div className="flex flex-col gap-4 p-5 sm:flex-row sm:items-center">
            <div className="flex items-center gap-3.5">
              <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-orange-600 text-white"><Icon name="star" size={26} /></div>
              <div>
                <div className="text-[17px] font-semibold text-zinc-900 dark:text-white">{top.d.name}</div>
                <div className="text-[12px] text-zinc-400">{top.d.source} · LDR {top.lead}</div>
              </div>
            </div>
            <div className="grid flex-1 grid-cols-2 gap-3 sm:grid-cols-4">
              {[['Fit', top.fit + '%'], [type + ' buff', '+' + top.troopBuff], ['March spd', '+' + top.ms], ['Effects', '2']].map(([l, v], i) => (
                <div key={i} className="rounded-lg border border-zinc-100 px-3 py-2 dark:border-zinc-800"><div className="text-[11px] text-zinc-400">{l}</div><div className="text-[16px] font-semibold tabular-nums text-zinc-900 dark:text-white">{v}</div></div>
              ))}
            </div>
            <Btn variant={assignedName === top.d.name ? 'outline' : 'brand'} onClick={() => saveAssign(type, top.d.name)} className="shrink-0">
              {assignedName === top.d.name ? <><Icon name="check" size={15} />Assigned</> : 'Assign to ' + type}
            </Btn>
          </div>
        </Card>
      )}

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {ranked.map(({ d, fit, troopBuff, ms, lead }) => {
          const isAssigned = assignedName === d.name;
          return (
            <Card key={d.name} className={`p-4 ${isAssigned ? 'ring-2 ring-brand' : ''}`}>
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500 dark:bg-zinc-800"><Icon name="star" size={17} /></div>
                  <div><div className="text-[14px] font-semibold text-zinc-900 dark:text-white">{d.name}</div><div className="text-[11px] text-zinc-400">{d.source}</div></div>
                </div>
                <Ring pct={fit} size={40} thickness={4.5} />
              </div>
              <div className="mt-3 grid grid-cols-3 gap-1.5 text-center">
                {[[type, '+' + troopBuff], ['MS', '+' + ms], ['LDR', lead]].map(([l, v], i) => (
                  <div key={i} className="rounded-md bg-zinc-50 py-1.5 dark:bg-zinc-800/50"><div className="text-[10px] uppercase text-zinc-400">{l}</div><div className="text-[13px] font-semibold tabular-nums text-zinc-800 dark:text-zinc-100">{v}</div></div>
                ))}
              </div>
              <div className="mt-3 space-y-1">
                {[d.effect1, d.effect2].filter(Boolean).map((e, i) => <div key={i} className="flex items-start gap-1.5 text-[11.5px] text-zinc-500 dark:text-zinc-400"><Icon name="bolt" size={11} className="mt-0.5 shrink-0 text-brand" />{e}</div>)}
              </div>
              <Btn variant={isAssigned ? 'outline' : 'ghost'} size="sm" onClick={() => saveAssign(type, d.name)} className="mt-3 w-full">
                {isAssigned ? <><Icon name="check" size={14} />Assigned to {type}</> : 'Assign'}
              </Btn>
            </Card>
          );
        })}
      </div>
    </div>
  );
}
window.DragonManagerPage = DragonManagerPage;