// ViG Command Center — Dragon Codex (unlock, buffs, stats, talents, leveling cost)
const { useState: useStateDC, useMemo: useMemoDC, useEffect: useEffectDC } = React;
const DC = window.DRAGONCODEX;

function dcBuffTone(b) { if (/enemy|-\d|death to|wounded to/i.test(b)) return 'red'; if (/march|capacity|survival|research|construction|speed|size/i.test(b)) return 'blue'; return 'green'; }
function dcUnlockKind(u) {
  if (/anniversary/i.test(u)) return { label: 'Anniversary', color: '#a855f7' };
  if (/wonder/i.test(u)) return { label: 'Wonder', color: '#0ea5e9' };
  if (/legendary/i.test(u)) return { label: 'Legendary Egg', color: '#f59e0b' };
  if (/egg/i.test(u)) return { label: 'Dragon Egg', color: '#16a34a' };
  if (/treasure|gemstone/i.test(u)) return { label: 'Treasures', color: '#e11d48' };
  if (/sacred|elder/i.test(u)) return { label: 'Sacred/Elder', color: '#dc2626' };
  return { label: 'Pasture', color: '#0891b2' };
}
const fmtExp = n => n >= 1e6 ? (n / 1e6).toFixed(n >= 1e7 ? 0 : 1) + 'M' : n.toLocaleString();

function DragonDrawer({ dragon, open, onClose }) {
  const [from, setFrom] = useStateDC(1);
  const [to, setTo] = useStateDC(10);
  if (!dragon) return null;
  const exp = DC.expTable[dragon.name] || DC.expTable[dragon.name.replace(' Dragon', '')] || [];
  const maxLvl = exp.length;
  const c = Math.min(from, to), t = Math.max(from, to);
  const expCost = exp.slice(c, t).reduce((s, v) => s + v, 0);
  const uk = dcUnlockKind(dragon.unlock);

  return (
    <Drawer open={open} onClose={onClose} title="Dragon detail">
      {dragon && (
        <div className="p-5">
          <div className="flex items-center gap-3.5">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl text-white" style={{ background: `linear-gradient(135deg, ${uk.color}, ${uk.color}bb)` }}><Icon name="flame" size={24} /></div>
            <div>
              <div className="text-[18px] font-semibold text-zinc-900 dark:text-white">{dragon.name}</div>
              <div className="mt-1 flex items-center gap-2"><Pill tone={dragon.type === 'Elder' ? 'red' : 'zinc'}>{dragon.type}</Pill><span className="text-[11px] font-medium" style={{ color: uk.color }}>{uk.label}</span></div>
            </div>
          </div>

          <div className="mt-4 rounded-lg border border-zinc-200 bg-zinc-50 px-3.5 py-2.5 dark:border-zinc-800 dark:bg-zinc-800/40">
            <div className="text-[11px] font-semibold uppercase tracking-wide text-zinc-400">How to unlock</div>
            <div className="text-[13px] text-zinc-700 dark:text-zinc-200">{dragon.unlock}</div>
          </div>

          {/* buffs by tier */}
          <h4 className="mt-5 text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Dragon buffs by level</h4>
          <div className="mt-2 space-y-2.5">
            {dragon.tiers.map((tier, i) => (
              <div key={i} className="rounded-lg border border-zinc-100 p-3 dark:border-zinc-800">
                <div className="mb-1.5 flex items-center gap-2"><span className="rounded bg-brand/10 px-1.5 py-0.5 text-[11px] font-bold text-brand">Lv {tier.lv}</span></div>
                <div className="flex flex-wrap gap-1.5">
                  {tier.buffs.map((b, j) => <Pill key={j} tone={dcBuffTone(b)} className="!text-[11px]">{b}</Pill>)}
                </div>
                {tier.stats.length > 0 && <div className="mt-1.5 text-[11px] text-zinc-400">Stat boost: {tier.stats.join(' / ')}</div>}
              </div>
            ))}
          </div>

          {/* talents */}
          {(dragon.talents40.length > 0 || dragon.talents100.length > 0 || dragon.talent60.length > 0) && (
            <>
              <h4 className="mt-5 text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Talents</h4>
              <div className="mt-2 space-y-2">
                {dragon.talents40.length > 0 && <div><div className="text-[11px] font-medium text-zinc-500">Lv 40</div><div className="mt-1 flex flex-wrap gap-1.5">{dragon.talents40.flat().map((tt, j) => <Pill key={j} tone={dcBuffTone(tt)} className="!text-[11px]">{tt}</Pill>)}</div></div>}
                {dragon.talents100.length > 0 && <div><div className="text-[11px] font-medium text-zinc-500">Lv 100</div><div className="mt-1 flex flex-wrap gap-1.5">{dragon.talents100.flat().map((tt, j) => <Pill key={j} tone={dcBuffTone(tt)} className="!text-[11px]">{tt}</Pill>)}</div></div>}
                {dragon.talent60.length > 0 && <div><div className="text-[11px] font-medium text-zinc-500">Lv 60</div><div className="mt-1 flex flex-wrap gap-1.5">{dragon.talent60.map((tt, j) => <Pill key={j} tone={dcBuffTone(tt)} className="!text-[11px]">{tt}</Pill>)}</div></div>}
              </div>
              {dragon.maxRefines && <div className="mt-2 text-[11.5px] text-zinc-400">Max refines: {dragon.maxRefines}</div>}
            </>
          )}

          {/* leveling cost */}
          {maxLvl > 0 && (
            <>
              <h4 className="mt-5 text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Leveling EXP cost</h4>
              <div className="mt-2 rounded-lg border border-zinc-100 p-3.5 dark:border-zinc-800">
                <div className="grid grid-cols-2 gap-3">
                  {[['From Lv', from, setFrom], ['To Lv', to, setTo]].map(([l, v, set], i) => (
                    <div key={i}>
                      <div className="mb-1 flex items-center justify-between text-[11px]"><span className="text-zinc-400">{l}</span><span className="font-bold tabular-nums" style={{ color: i ? '#FF6B00' : '#71717a' }}>{v}</span></div>
                      <input type="range" min={i ? 1 : 1} max={maxLvl} value={v} onChange={e => set(+e.target.value)} className="w-full" style={{ accentColor: i ? '#FF6B00' : '#a1a1aa' }} />
                    </div>
                  ))}
                </div>
                <div className="mt-3 flex items-center justify-between border-t border-zinc-100 pt-2.5 dark:border-zinc-800">
                  <span className="text-[12px] text-zinc-500">EXP required</span>
                  <span className="text-[18px] font-bold tabular-nums text-brand">{expCost.toLocaleString()}</span>
                </div>
              </div>
            </>
          )}

          {/* uses */}
          <h4 className="mt-5 text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Recommended use by spender</h4>
          <div className="mt-2 grid grid-cols-2 gap-2">
            {[['Free to play', dragon.uses.ftp], ['Low coiner', dragon.uses.low], ['Medium coiner', dragon.uses.med], ['High coiner', dragon.uses.high]].filter(u => u[1]).map(([l, v], i) => (
              <div key={i} className="rounded-lg border border-zinc-100 p-2.5 dark:border-zinc-800"><div className="text-[10.5px] uppercase tracking-wide text-zinc-400">{l}</div><div className="text-[12.5px] font-medium text-zinc-800 dark:text-zinc-100">{v}</div></div>
            ))}
          </div>
        </div>
      )}
    </Drawer>
  );
}

function DragonCodexPage() {
  const [q, setQ] = useStateDC('');
  const [type, setType] = useStateDC('All');
  const [unlockF, setUnlockF] = useStateDC('All');
  const [sel, setSel] = useStateDC(null);

  const unlockKinds = useMemoDC(() => ['All', ...new Set(DC.dragons.map(d => dcUnlockKind(d.unlock).label))], []);
  const rows = useMemoDC(() => {
    const ql = q.trim().toLowerCase();
    return DC.dragons.filter(d => {
      if (type !== 'All' && d.type !== type) return false;
      if (unlockF !== 'All' && dcUnlockKind(d.unlock).label !== unlockF) return false;
      if (ql && !(d.name.toLowerCase().includes(ql) || d.tiers.some(t => t.buffs.some(b => b.toLowerCase().includes(ql))))) return false;
      return true;
    });
  }, [q, type, unlockF]);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2.5">
        <SearchInput value={q} onChange={setQ} placeholder="Search dragons or buffs…" className="w-full sm:w-64" />
        <Segmented options={['All', 'Standard', 'Elder']} value={type} onChange={setType} />
        <select value={unlockF} onChange={e => setUnlockF(e.target.value)} className="h-9 rounded-lg border border-zinc-200 bg-white px-2.5 text-[13px] font-medium outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900">
          {unlockKinds.map(k => <option key={k} value={k}>{k === 'All' ? 'All sources' : k}</option>)}
        </select>
        <span className="ml-auto text-[12px] tabular-nums text-zinc-400">{rows.length} dragons</span>
      </div>

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
        {rows.map(d => {
          const uk = dcUnlockKind(d.unlock);
          const top = d.tiers[d.tiers.length - 1];
          return (
            <button key={d.name} onClick={() => setSel(d)} className="group rounded-xl border border-zinc-200 bg-white p-4 text-left transition-all hover:-translate-y-0.5 hover:border-brand/40 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-10 w-10 items-center justify-center rounded-xl text-white" style={{ background: `linear-gradient(135deg, ${uk.color}, ${uk.color}bb)` }}><Icon name="flame" size={20} /></div>
                  <div>
                    <div className="text-[14px] font-semibold text-zinc-900 dark:text-white">{d.name}</div>
                    <div className="text-[11px] font-medium" style={{ color: uk.color }}>{uk.label}</div>
                  </div>
                </div>
                {d.type === 'Elder' && <Pill tone="red">Elder</Pill>}
              </div>
              <div className="mt-3 flex flex-wrap gap-1.5">
                {top.buffs.slice(0, 3).map((b, j) => <Pill key={j} tone={dcBuffTone(b)} className="!text-[10.5px]">{b}</Pill>)}
              </div>
              <div className="mt-2.5 flex items-center gap-1.5 text-[11px] text-zinc-400"><Icon name="chevron" size={12} className="transition-transform group-hover:translate-x-0.5" />tap for buffs, talents & leveling cost</div>
            </button>
          );
        })}
        {rows.length === 0 && <div className="col-span-full py-12 text-center text-zinc-400">No dragons match your filters.</div>}
      </div>

      <DragonDrawer dragon={sel} open={!!sel} onClose={() => setSel(null)} />
    </div>
  );
}
window.DragonCodexPage = DragonCodexPage;