/* global React, PROJECTS, FaultyTerminal */

const { useEffect } = React;

// ============================================================
// PROJECT PAGE — full routed page at #/projects/:slug
// ============================================================
function ProjectPage({ project, onClose, onNav }) {
  const idx  = PROJECTS.findIndex((p) => p.slug === project.slug);
  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  // ESC → back to index
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <main className="project-page-wrap">
      {/* ── content ───────────────────────────────────────── */}
      <div className="project-page">
        <div className="crumb">Project · {project.n} · {project.year}</div>
        <h1>{project.name}</h1>
        <p className="subtitle">{project.sub}</p>

        <div className="meta-row">
          {project.metrics.map(([k, v], i) => (
            <div key={i}>
              <span className="k">{k}</span>
              <span className="v">{v}</span>
            </div>
          ))}
        </div>

        {/* Cover — video > image > texture placeholder */}
        {project.video
          ? <video
              src={project.video}
              className="cover cover-img"
              autoPlay loop muted playsInline
            />
          : project.image
          ? <img
              src={project.image}
              alt={project.name}
              className="cover cover-img"
            />
          : <div className="cover cover-img" style={{ padding: 0, overflow: "hidden" }}>
              <FaultyTerminal
                scale={2.2}
                gridMul={[2, 1]}
                digitSize={2.1}
                timeScale={0.3}
                scanlineIntensity={0.8}
                glitchAmount={1}
                flickerAmount={0.6}
                noiseAmp={1}
                chromaticAberration={0}
                dither={0}
                curvature={0}
                tint="#ece8db"
                mouseReact={true}
                mouseStrength={0.5}
                brightness={0.85}
                style={{ width: "100%", height: "100%" }}
              />
            </div>
        }

        <div className="body">
          <aside className="side">
            <div className="group">
              <div className="k">Stack</div>
              <ul>
                {project.stack.map((s) => <li key={s}>{s}</li>)}
              </ul>
            </div>
            <div className="group">
              <div className="k">Links</div>
              <ul>
                {project.links.map(([k, v]) => (
                  <li key={k}>
                    <a href={v} target="_blank" rel="noopener noreferrer">{k}</a>
                  </li>
                ))}
              </ul>
            </div>
            <div className="group">
              <div className="k">Status</div>
              <div style={{ color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 11 }}>
                {project.status}
              </div>
            </div>
          </aside>

          <div>
            <section className="block">
              <h3>Problem</h3>
              <p>{project.problem}</p>
            </section>
            <section className="block">
              <h3>Approach</h3>
              <p>{project.approach}</p>
            </section>
            <section className="block">
              <h3>Result</h3>
              <p>{project.result}</p>
            </section>
          </div>
        </div>

        {/* ── editorial media gallery ── */}
        {project.images && project.images.length > 0 && (
          <div className="proj-gallery">
            <div className="proj-gallery-head">
              <span className="label">Media</span>
              <span className="label">{String(project.images.length).padStart(2, "0")}</span>
            </div>
            <div className="proj-gallery-grid">
              {project.images.map((img, i) => (
                <figure
                  key={i}
                  className={`proj-gallery-item${img.span === "full" ? " full" : ""}`}
                >
                  {img.video
                    ? <video src={img.video} autoPlay loop muted playsInline />
                    : img.src
                    ? <img src={img.src} alt={img.caption || ""} />
                    : <div className="proj-gallery-placeholder" />
                  }
                  {img.caption && (
                    <figcaption>
                      <span className="idx">{String(i + 1).padStart(2, "0")}</span>
                      {img.caption}
                    </figcaption>
                  )}
                </figure>
              ))}
            </div>
          </div>
        )}

        {/* ── project-to-project nav ── */}
        <div className="nav-foot">
          <a href="#" onClick={(e) => { e.preventDefault(); onNav(prev.slug); }}>
            ← {prev.n} · {prev.name}
          </a>
          <a href="#" onClick={(e) => { e.preventDefault(); onClose(); }}>
            ↑ back to index
          </a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav(next.slug); }}>
            {next.n} · {next.name} →
          </a>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { ProjectPage });