// pages-projects.jsx

function ProjectsPage({ go, tweaks }) {
  const [filter, setFilter] = React.useState("released");

  const all = [
    ...window.PROJECTS.map(p => ({ ...p, tags: p.tags && p.tags.length ? p.tags : ["released"] })),
    ...window.UPCOMING.map(p => ({ ...p, tags: ["upcoming"], title: p.titleDisplay, director: p.director || (p.by || "").replace(/^.*—\s*/, ""), distributor: p.medium, logline: p.action })),
    ...(window.LIVE_EVENTS || []).map(p => ({ ...p, tags: ["live-events"] }))
  ];
  const shown = all.filter(p => p.tags.includes(filter));

  return (
    <main className="page" data-screen-label="02 Projects">
      <section className="shell">
        <div className="proj-filters proj-filters--flush">
          <button className={"proj-filter" + (filter === "released" ? " is-active" : "")} onClick={() => setFilter("released")}>Released</button>
          <button className={"proj-filter" + (filter === "upcoming" ? " is-active" : "")} onClick={() => setFilter("upcoming")}>Upcoming</button>
          <button className={"proj-filter" + (filter === "live-events" ? " is-active" : "")} onClick={() => setFilter("live-events")}>Live Events • Theatre</button>
          <button className={"proj-filter" + (filter === "laura-rister" ? " is-active" : "")} onClick={() => setFilter("laura-rister")}>Laura Rister • Filmography</button>
          <button className={"proj-filter" + (filter === "television" ? " is-active" : "")} onClick={() => setFilter("television")}>Television</button>
        </div>

        {shown.length === 0 ? (
          <div className="proj-empty">Watch this space!</div>
        ) : (
          <ProjectsLayout layout={tweaks.projectsLayout} go={go} items={shown} filter={filter} />
        )}
      </section>
    </main>
  );
}

function ProjectsLayout({ layout, go, items, filter }) {
  items = items || window.PROJECTS;

  // Imagine-style poster grid — minimal, info on hover
  if (layout === "posters" || !layout || layout === "list") {
    return (
      <div className="proj-posters">
        {items.map((p, i) => (
          <article key={p.slug} className="card">
            <div className="poster" onClick={() => go("project/" + p.slug)}
              onMouseEnter={() => { if (p.heroImage) { const im = new Image(); im.src = p.heroImage; } }}>
              {!p.poster && (
                <div className="stripes">
                  <div className="stripes-label">
                    <span className="sl-ttl">{p.title}</span>
                    <span className="sl-note">Key art to be provided</span>
                  </div>
                </div>
              )}
              {p.poster && (
                <img src={p.poster} alt={p.title + ' poster'} width="1080" height="1600"
                  loading={i < 2 ? "eager" : "lazy"} decoding="async"
                  fetchPriority={i < 2 ? "high" : "auto"}
                  onError={(e) => { e.currentTarget.style.display = 'none'; }} />
              )}
              <div className="poster-veil">
                <div className="poster-veil-inner">
                  <h3 className="ttl">{p.titleStyle === "italic" ? <em>{p.title}</em> : p.title}</h3>
                  <p className="logline">{p.logline}</p>
                </div>
              </div>
            </div>
            {filter === "live-events" && p.slug === "jerry-garcia-experience" && (
              <a className="proj-filter proj-ticket-btn" href="https://eyesofthe.world/" target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>Get Ticket Alerts</a>
            )}
          </article>
        ))}
      </div>
    );
  }

  if (layout === "grid") {
    return (
      <div className="proj-grid">
        {items.map(p => (
          <article key={p.slug} className="card" onClick={() => go("project/" + p.slug)}>
            <div className="thumb">
              <div className="stripes"></div>
              <div className="placeholder">{p.distributor}</div>
            </div>
            <h3 className="ttl">{p.titleStyle === "italic" ? <i>{p.title}</i> : p.title}</h3>
            <div className="eg-num">{p.director} · {p.year}</div>
          </article>
        ))}
      </div>
    );
  }
  if (layout === "asymmetric") {
    const spans = [[1, 6, 760], [7, 12, 540], [1, 5, 580], [6, 12, 740], [2, 8, 680]];
    return (
      <div className="proj-asym">
        {items.map((p, i) => {
          const [c1, c2, h] = spans[i % spans.length];
          return (
            <article key={p.slug} className="card"
              style={{ gridColumn: `${c1} / ${c2 + 1}` }}
              onClick={() => go("project/" + p.slug)}>
              <div className="thumb" style={{ aspectRatio: "auto", height: h }}>
                <div className="stripes"></div>
              </div>
              <h3 className="ttl">{p.titleStyle === "italic" ? <i>{p.title}</i> : p.title}</h3>
              <div className="eg-num">{p.director} · {p.distributor} · {p.year}</div>
            </article>
          );
        })}
      </div>
    );
  }
  // editorial list (compact)
  return (
    <div className="proj-list">
      {items.map((p, i) => (
        <article key={p.slug} className="proj-item" onClick={() => go("project/" + p.slug)}>
          <div className="eg-num">{String(i + 1).padStart(2, "0")}</div>
          <h3 className="ttl">{p.titleStyle === "italic" ? <i>{p.title}</i> : p.title}</h3>
          <div className="meta-stack">
            <div className="eg-label">{p.director}</div>
            <div className="eg-num">{p.distributor} · {p.year}</div>
            <div className="proj-list-logline">{p.logline}</div>
          </div>
          <div className="thumb">
            <div className="stripes"></div>
          </div>
          <div className="arrow eg-label">
            <span className="dash"></span>
            CASE
          </div>
        </article>
      ))}
    </div>
  );
}

Object.assign(window, { ProjectsPage });