import React, { useEffect, useState } from 'https://esm.sh/react@19.1.1';
import { createRoot } from 'https://esm.sh/react-dom@19.1.1/client';

const tabs=[['merchant','远行商人'],['pets','宠物图鉴'],['egg','孵蛋查询'],['guide','草系徽章']];
const attributes=['','普通','草','火','水','光','地','冰','龙','电','毒','虫','武','翼','萌','幽','恶','机械','幻'];
const Source=({href,children})=><a className="source" href={href} target="_blank" rel="noreferrer">数据来源：{children}</a>;

function Merchant(){
  const [data,setData]=useState({items:[],status:'loading'}); const [tick,setTick]=useState(0);
  useEffect(()=>{fetch(`/api/merchant?t=${tick}`).then(r=>r.json()).then(setData).catch(()=>setData({items:[],status:'error'}))},[tick]);
  const now=new Date(),hour=now.getHours(),round=hour<8?null:Math.min(Math.floor((hour-8)/4)+1,4),end=round?new Date(now.getFullYear(),now.getMonth(),now.getDate(),8+round*4):new Date(now.getFullYear(),now.getMonth(),now.getDate(),8);
  const remain=Math.max(0,end-now),hh=String(Math.floor(remain/3600000)).padStart(2,'0'),mm=String(Math.floor(remain%3600000/60000)).padStart(2,'0');
  return <section className="module"><h2>远行商人 · 本轮情报</h2><div className="summary"><div className="card"><small>当前轮次</small><b>{round?`${8+(round-1)*4}:00–${8+round*4}:00`:'未营业'}</b></div><div className="card"><small>距离刷新</small><b>{hh}:{mm}</b></div><div className="card"><small>营业状态</small><b>{round?'营业中':'休息中'}</b></div></div><div className="card goods"><header><div><h3>本轮商品</h3><p>仅展示当前轮次有效商品</p></div><button onClick={()=>setTick(x=>x+1)}>刷新</button></header>{data.items.length?<div className="goods-grid">{data.items.map((x,i)=><article key={`${x.name}-${i}`}><h4>{x.name}</h4><p>{x.price||'价格以来源页为准'} 洛克贝</p><span>限购 {x.limit||'—'}</span></article>)}</div>:<div className="empty">{data.status==='loading'?'正在同步 18183 数据…':'数据源暂时未返回本轮商品，请稍后刷新。'}</div>}<Source href="https://db.18183.com/lkwgyxsr/">18183 远行商人助手</Source></div><div className="notice">营业时间 08:00–24:00；每日 08:00、12:00、16:00、20:00 刷新，每轮持续 4 小时。</div></section>
}

function Pets(){
  const [search,setSearch]=useState(''); const [attribute,setAttribute]=useState(''); const [items,setItems]=useState([]); const [selected,setSelected]=useState(null); const [detail,setDetail]=useState(null); const [loading,setLoading]=useState(true);
  useEffect(()=>{const c=new AbortController();setLoading(true);const qs=new URLSearchParams({search,attribute,limit:'100'});fetch(`/api/pokemon?${qs}`,{signal:c.signal}).then(r=>r.json()).then(d=>{setItems(d.items||[]);setSelected(s=>(d.items||[]).find(x=>x.name===s?.name)||(d.items||[])[0]||null)}).catch(e=>{if(e.name!=='AbortError')setItems([])}).finally(()=>setLoading(false));return()=>c.abort()},[search,attribute]);
  useEffect(()=>{if(!selected)return setDetail(null);setDetail(null);fetch(`/api/pokemon/detail?name=${encodeURIComponent(selected.name)}`).then(r=>r.json()).then(d=>setDetail(d.item||selected)).catch(()=>setDetail(selected))},[selected?.name]);
  const p=detail||selected;
  return <section className="module"><h2>宠物图鉴 · 精灵档案</h2><div className="card filters"><label>搜索精灵</label><div className="search"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="输入名称或编号，例如：魔力猫 / 004"/><select value={attribute} onChange={e=>setAttribute(e.target.value)}>{attributes.map(x=><option key={x} value={x}>{x||'全部属性'}</option>)}</select></div></div><div className="pet-layout"><div className="pet-list">{loading?<div className="card">正在同步 BWIKI…</div>:items.map((x,i)=><button className={selected?.name===x.name?'pet active':'pet'} onClick={()=>setSelected(x)} key={`${x.name}-${i}`}><span><b>{x.name}</b><small>NO.{x.number}</small></span><em>{x.attribute}</em></button>)}</div>{p&&<article className="card detail"><header><div><small>NO.{p.number}</small><h3>{p.name}</h3></div><em>{p.attribute}系</em></header><h4>初始资质</h4><div className="stats">{Object.entries({生命:p.hp,物攻:p.physical_attack,魔攻:p.magic_attack,物防:p.physical_defense,魔防:p.magic_defense,速度:p.speed}).map(([k,v])=><div key={k}><small>{k}</small><b>{v??'—'}</b></div>)}</div><div className="info"><div><small>进化链</small><p>{p.evolution_chain||'以 BWIKI 最新资料为准'}</p></div><div><small>获取方式</small><p>{p.acquisition_method||'以 BWIKI 最新资料为准'}</p></div></div><h4>技能信息</h4><div className="skills">{p.skills?.length?p.skills.slice(0,12).map((s,i)=><div key={`${s.name}-${i}`}><b>{s.name}</b><span>{s.category||'技能'} · 能耗 {s.energyCost??'—'} · 威力 {s.power??'—'}</span><p>{s.effect}</p></div>):<p className="muted">正在读取技能资料…</p>}</div><Source href={`https://wiki.biligame.com/rocom/${encodeURIComponent(p.name)}`}>洛克王国世界 BWIKI（CC BY-NC-SA 4.0）</Source></article>}</div></section>
}

function Egg(){
  const [height,setHeight]=useState(''); const [weight,setWeight]=useState(''); const [results,setResults]=useState([]); const [loading,setLoading]=useState(false);
  const query=()=>{setLoading(true);fetch(`/api/egg?height=${encodeURIComponent(height)}&weight=${encodeURIComponent(weight)}&v=20260815`).then(r=>r.json()).then(d=>setResults(d.items||[])).finally(()=>setLoading(false))};
  return <section className="module"><h2>孵蛋查询 · 蛋组研究</h2><div className="egg-layout"><div className="card"><h3>蛋参数反查精灵</h3><p className="muted">输入蛋的尺寸和重量，查看真实候选精灵。</p><div className="form-grid"><label>尺寸（m）<input type="number" step="0.01" value={height} onChange={e=>setHeight(e.target.value)}/></label><label>重量（kg）<input type="number" step="0.1" value={weight} onChange={e=>setWeight(e.target.value)}/></label></div><button className="primary" onClick={query} disabled={loading||(!height&&!weight)}>{loading?'查询中…':'开始反查'}</button></div><div className="card"><h3>候选结果</h3>{results.length?results.map((x,i)=><div className="result" key={`${x.name}-${i}`}><div><b>{x.name}</b><strong>{x.confidence??'匹配'}{typeof x.confidence==='number'?'%':''}</strong></div><div><i style={{width:`${x.confidence||70}%`}}/></div></div>):<div className="empty">输入参数后查询</div>}<Source href="https://db.18183.com/lkwgyxsr/egg.html">18183 孵蛋查询工具</Source></div></div><div className="card breed"><h3>蛋组配对</h3><p>蛋组及可配种对象由 18183 最新数据提供，反查结果中可继续查看来源页完整关系。</p></div></section>
}

function Guide(){return <section className="module"><h2>草系徽章 · 挑战攻略</h2><div className="summary"><div className="card"><small>模式</small><b>肉鸽单人挑战</b></div><div className="card"><small>章节</small><b>3 大章节</b></div><div className="card"><small>最终 BOSS</small><b>罗兰</b></div></div><div className="card"><h3>推荐精灵</h3><div className="tags">{['黑猫','布鲁斯','蚊子','燃薪虫','岚鸟','圣水守护','上岸蛙'].map(x=><span key={x}>{x}</span>)}</div></div>{[['阶段一｜建立输出','优先选择威力 ≥ 60 的火系、虫系克制技能。'],['阶段二｜形成连击','叠加连击词条，保证输出循环与血量继承。'],['阶段三｜补足功能','补充回复、减伤与控制，应对罗兰的自愈和孢子毒伤。']].map(([a,b])=><details className="card" key={a}><summary>{a}</summary><p>{b}</p></details>)}<Source href="https://wiki.biligame.com/rocom/草系徽章试炼">18183 / 洛克王国世界 BWIKI 社区攻略</Source></section>}

function App(){const [tab,setTab]=useState('merchant');return <main><section className="hero"><span>洛克王国 · 世界</span><h1>洛克王国 Wiki 助手</h1><p>远行商人、宠物图鉴、孵蛋研究与徽章攻略，一站式冒险百科。</p></section><nav>{tabs.map(([id,name])=><button className={tab===id?'active':''} onClick={()=>setTab(id)} key={id}>{name}</button>)}</nav>{tab==='merchant'?<Merchant/>:tab==='pets'?<Pets/>:tab==='egg'?<Egg/>:<Guide/>}</main>}
createRoot(document.getElementById('root')).render(<App/>);