const AREA_LABEL = { ai: "AI · ML", ds: "Data Science", bc: "Blockchain", cl: "Cloud" };

const Papers = () => {
  const [filter, setFilter] = React.useState("all");
  const items = filter === "all" ? window.PAPERS : window.PAPERS.filter(p => p.area === filter);
  return (
    <section className="section" id="papers">
      <div className="section-head">
        <span className="section-eyebrow">Bulletin · /publications</span>
        <Cli path="papers" cmd="ls -al *.pdf" flags=" --sort=year --recent=24m"/>
        <h2 className="section-title">Recent <em style={{fontStyle:"italic",color:"var(--mint-deep)"}}>publications</em></h2>
        <p className="section-sub">Fresh sticky notes pinned to our island bulletin — full archive on DBLP & Scholar.</p>
      </div>
      <div className="board">
        <div className="paper-filter">
          <button className={filter==="all"?"active":""} onClick={()=>setFilter("all")}>All</button>
          {["ai","ds","bc","cl"].map(a => (
            <button key={a} className={filter===a?"active":""} onClick={()=>setFilter(a)}>{AREA_LABEL[a]}</button>
          ))}
        </div>
        <div className="papers">
          {items.map((p, i) => (
            <article key={p.title} className={"paper" + (p.year >= 2025 ? " is-new" : "")} data-area={p.area}>
              <span className="paper-pin"/>
              <div className="paper-meta">
                <span className="paper-year">{p.year}</span>
                <span className="paper-area-dot"/>
                <span>{AREA_LABEL[p.area]}</span>
                <span className="paper-id">#{String(i+1).padStart(3,"0")}</span>
              </div>
              <h4>{p.title}</h4>
              <div className="paper-venue">{p.venue}</div>
              <div className="paper-authors">{p.authors}</div>
              {p.tags && (
                <div className="paper-tags">
                  {p.tags.map(t => <span key={t} className="paper-tag">{t}</span>)}
                </div>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Papers = Papers;