// Library - grid + detail
const Library = ({ skin, onNav, onPickRune }) => {
  const [search, setSearch] = React.useState("");
  const [activeAett, setActiveAett] = React.useState(0);
  const filtered = window.RUNES.filter(r => {
    if (activeAett && r.aettNum !== activeAett) return false;
    if (!search) return true;
    const q = search.toLowerCase();
    return r.name.toLowerCase().includes(q) ||
           r.keywords.some(k => k.toLowerCase().includes(q));
  });

  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
      <div className="noise"/>
      <StatusBar/>
      <TopBar title="Rune Library" subtitle="Elder Futhark - 24 runes" onBack={() => onNav("home")}/>

      <div style={{ padding: "0 20px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "rgba(13,13,13,0.6)", border: "1px solid rgba(201,168,76,0.2)" }}>
          <Icon.Search color="var(--ash)" size={16}/>
          <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search runes..." style={{ flex: 1, background: "transparent", border: "none", outline: "none", color: "var(--ivory)", fontFamily: "Cormorant Garamond, serif", fontSize: 15 }}/>
        </div>

        <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
          {[{n:0,l:"All"},{n:1,l:"Freyr"},{n:2,l:"Heimdall"},{n:3,l:"Tyr"}].map(t => (
            <div key={t.n} onClick={() => setActiveAett(t.n)} className="font-display" style={{
              flex: 1, padding: "8px 6px", textAlign: "center",
              fontSize: 9, letterSpacing: "0.15em", textTransform: "uppercase",
              border: `1px solid ${activeAett === t.n ? "var(--gold)" : "rgba(201,168,76,0.15)"}`,
              color: activeAett === t.n ? "var(--gold)" : "var(--ash)",
              background: activeAett === t.n ? "rgba(201,168,76,0.08)" : "transparent",
              cursor: "pointer"
            }}>{t.l}</div>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: "0 20px 110px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
          {filtered.map(r => (
            <div key={r.id} onClick={() => onPickRune(r)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, cursor: "pointer", padding: "10px 4px", background: "rgba(26,22,18,0.4)", border: "1px solid rgba(201,168,76,0.08)" }}>
              <RuneTile rune={r} skin={skin} size={56}/>
              <div className="font-display" style={{ fontSize: 11, color: "var(--ivory)", letterSpacing: "0.05em", marginTop: 4 }}>{r.name}</div>
              <div style={{ fontSize: 9, color: "var(--ash)", fontStyle: "italic", textAlign: "center" }}>{r.keywords[0]}</div>
            </div>
          ))}
          {filtered.length === 0 && (
            <div style={{ gridColumn: "1 / -1", textAlign: "center", padding: 40, color: "var(--ash)", fontStyle: "italic" }}>No runes found</div>
          )}
        </div>
      </div>

      <BottomNav active="library" onNav={onNav}/>
    </div>
  );
};

window.Library = Library;