// app.jsx — shell, tabs, gallery
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

/* ============================================================ */

function Header({ tab, setTab }) {
  return (
    <header>
      <div className="topbar">
        <div className="brand">
          <div className="brand-mark">
            <img src="assets/logo.png" alt="Oxide" />
          </div>
          <div className="brand-title">
            <span className="lockup"><span className="sub">WALLPAPERS</span></span>
          </div>
        </div>
      </div>

      <nav className="tabs">
        <button className={"tab " + (tab === "wallpapers" ? "active" : "")} onClick={() => setTab("wallpapers")}>
          <span className="num">01</span>WALLPAPERS
        </button>
        <button className={"tab " + (tab === "constructor" ? "active" : "")} onClick={() => setTab("constructor")}>
          <span className="num">02</span>TEAM CONSTRUCTOR
        </button>
      </nav>
    </header>
  );
}

function DownloadIcon() {
  return (
    <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M6 1v8M2 6l4 4 4-4M1 11h10" />
    </svg>
  );
}

function WallpaperCard({ item }) {
  const handleDownload = (e) => {
    e.stopPropagation();
    const a = document.createElement("a");
    a.href = item.src;
    const ext = item.src.split(".").pop();
    a.download = `wp-${item.type}-${item.title}-${item.w}x${item.h}.${ext}`;
    a.click();
  };

  return (
    <div className="card">
      <div className="thumb-wrap">
        {item.isNew && <span className="badge-new">NEW</span>}
        <img className="thumb" src={item.src} alt={item.title} loading="lazy" />
        <div className="card-actions">
          <button className="dl-btn" onClick={handleDownload}>
            <DownloadIcon />
            Download
          </button>
        </div>
      </div>
      <div className="card-meta">
        <span className="card-title">
          <span className="num mono">{item.title}</span>
        </span>
        <span className="card-res">{item.res}</span>
      </div>
    </div>
  );
}

function Gallery() {
  const [filter, setFilter] = useStateA("desktop");

  const all = window.WALLPAPERS;
  const desktopCount = all.filter((w) => w.type === "desktop").length;
  const mobileCount = all.filter((w) => w.type === "mobile").length;
  const filtered = all.filter((w) => w.type === filter);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>WALLPAPERS <span className="h1-accent">/</span> GALLERY</h1>
        </div>
        <p>Official Oxide wallpaper collection. From the latest drops to classics. Free for all players.</p>
      </div>

      <div className="filterbar">
        <span className="label">PLATFORM</span>
        <button className={"chip " + (filter === "desktop" ? "active" : "")} onClick={() => setFilter("desktop")}>
          DESKTOP <span className="count">[{desktopCount}]</span>
        </button>
        <button className={"chip " + (filter === "mobile" ? "active" : "")} onClick={() => setFilter("mobile")}>
          MOBILE <span className="count">[{mobileCount}]</span>
        </button>
        <div className="spacer"></div>
        <span className="sort">SORT&nbsp;<span>NEWEST FIRST ↓</span></span>
      </div>

      <div className={"grid " + filter}>
        {filtered.map((w) => (
          <WallpaperCard key={w.id} item={w} />
        ))}
      </div>
    </div>
  );
}

function App() {
  const [tab, setTab] = useStateA("wallpapers");

  return (
    <div className="shell">
      <Header tab={tab} setTab={setTab} />
      <main>
        {tab === "wallpapers" ? <Gallery /> : <Constructor />}
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);