/* ============ List page ============ */
function ListPage({nav,filter}){
  const [q,setQ]=useState(filter.q||"");
  const [cat,setCat]=useState(filter.cat||"");
  const [area,setArea]=useState(filter.area||"");
  const [age,setAge]=useState(filter.age||"");
  const [fee,setFee]=useState("");
  const [sort,setSort]=useState("osusume");

  // re-sync when navigated with new filter
  useEffect(()=>{
    setQ(filter.q||"");setCat(filter.cat||"");setArea(filter.area||"");setAge(filter.age||"");
  },[filter]);

  let results=DATA.SPOTS.filter(s=>{
    if(q){const t=(s.title+s.lead+s.loc+s.place+s.tags.join("")).toLowerCase();
      if(!t.includes(q.toLowerCase()))return false;}
    if(cat&&!s.cats.includes(cat))return false;
    if(area&&s.area!==area)return false;
    if(age&&!s.ages.includes(age))return false;
    if(fee&&s.fee!==fee)return false;
    return true;
  });
  if(sort==="free")results=[...results].sort((a,b)=>(a.fee==="無料"?0:1)-(b.fee==="無料"?0:1));
  if(sort==="name")results=[...results].sort((a,b)=>a.title.localeCompare(b.title,"ja"));

  const active=[];
  if(cat)active.push({k:"cat",label:cat,clear:()=>setCat("")});
  if(area)active.push({k:"area",label:area,clear:()=>setArea("")});
  if(age)active.push({k:"age",label:age,clear:()=>setAge("")});
  if(fee)active.push({k:"fee",label:fee,clear:()=>setFee("")});
  if(q)active.push({k:"q",label:`"${q}"`,clear:()=>setQ("")});
  const clearAll=()=>{setCat("");setArea("");setAge("");setFee("");setQ("")};

  const title=cat||"おでかけ・イベントをさがす";

  return (
    <main className="page-fade">
      <div className="wrap">
        <div className="crumb">
          <a onClick={()=>nav("home")}>ホーム</a><Icon n="chevR"/><span>さがす</span>
        </div>
        <div className="page-head">
          <h1>{title}</h1>
          <p>編集部が選んだ富山の親子おでかけスポットから、天気・年齢・エリアで、ぴったりの行き先をしぼり込めます。</p>
        </div>
        <div className="list-layout">
          <aside className="filters">
            <div className="list-search">
              <input value={q} onChange={e=>setQ(e.target.value)} placeholder="キーワードで検索"/>
              <button aria-label="検索"><Icon n="search"/></button>
            </div>
            <div className="filter-group">
              <h4>カテゴリ</h4>
              <div className="chip-row">
                {["イベント","おでかけスポット","雨の日","無料スポット","グルメ"].map(c=>(
                  <button key={c} className={"chip"+(cat===c?" on":"")}
                    onClick={()=>setCat(cat===c?"":c)}>{c}</button>
                ))}
              </div>
            </div>
            <div className="filter-group">
              <h4>対象年齢</h4>
              <div className="chip-row">
                {DATA.AGES.map(a=>(
                  <button key={a} className={"chip"+(age===a?" on":"")}
                    onClick={()=>setAge(age===a?"":a)}>{a}</button>
                ))}
              </div>
            </div>
            <div className="filter-group">
              <h4>エリア</h4>
              <div className="chip-row">
                {DATA.AREAS.map(a=>(
                  <button key={a} className={"chip"+(area===a?" on":"")}
                    onClick={()=>setArea(area===a?"":a)}>{a}</button>
                ))}
              </div>
            </div>
            <div className="filter-group">
              <h4>料金</h4>
              <div className="chip-row">
                {["無料","有料"].map(f=>(
                  <button key={f} className={"chip"+(fee===f?" on":"")}
                    onClick={()=>setFee(fee===f?"":f)}>{f}</button>
                ))}
              </div>
            </div>
          </aside>

          <section>
            {active.length>0 && (
              <div className="active-filters">
                {active.map(a=>(
                  <span key={a.k} className="afilter">{a.label}
                    <button onClick={a.clear} aria-label="解除"><Icon n="close"/></button>
                  </span>
                ))}
                <button className="clear-all" onClick={clearAll}>すべて解除</button>
              </div>
            )}
            <div className="list-toolbar">
              <span className="list-count"><b>{results.length}</b> 件のスポット</span>
              <div className="sort">
                {[["osusume","おすすめ順"],["free","無料優先"],["name","名前順"]].map(([k,l])=>(
                  <button key={k} className={"chip"+(sort===k?" on":"")} onClick={()=>setSort(k)}>{l}</button>
                ))}
              </div>
            </div>
            {results.length>0?(
              <div className="results">
                {results.map(s=><SpotCard key={s.id} s={s} nav={nav}/>)}
              </div>
            ):(
              <div className="empty">
                <Icon n="search"/>
                <p style={{fontWeight:700,color:"var(--ink-soft)",marginBottom:6}}>条件に合うスポットが見つかりませんでした</p>
                <p style={{fontSize:"13.5px",marginBottom:14}}>条件を少しゆるめると、見つかりやすくなります。</p>
                <button className="clear-all" onClick={clearAll}>条件をリセットする</button>
              </div>
            )}
          </section>
        </div>
      </div>
      <CTABand/>
    </main>
  );
}
window.ListPage=ListPage;