/* ARKHAM — screens: Nav, Hero, DetailModal, Player, IdleScreen, Browse, Search */
const { useState: uS, useRef: uR, useEffect: uE, useContext: uC } = React;

/* ============================== NAV ============================== */
function Nav() {
  const ctx = uC(AppCtx);
  const [scrolled, setScrolled] = uS(false);
  const [menu, setMenu] = uS(null); // 'profile' | 'notif' | null
  const [searchOpen, setSearchOpen] = uS(false);
  const searchRef = uR(null);

  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  uE(() => { if (searchOpen && searchRef.current) searchRef.current.focus(); }, [searchOpen]);
  uE(() => {
    const close = () => setMenu(null);
    if (menu) { window.addEventListener("click", close); return () => window.removeEventListener("click", close); }
  }, [menu]);

  const cats = [
    { label: "Inicio", view: "home" },
    { label: "Residencial", view: "browse", genre: "Residencial" },
    { label: "Comercial", view: "browse", genre: "Comercial" },
    { label: "Desarrollo", view: "browse", genre: "Desarrollo" },
    { label: "Master Planning", view: "browse", genre: "Master Planning" },
    { label: "Hospitality", view: "browse", genre: "Hospitality" },
    { label: "Objetos y Productos", view: "browse", genre: "Objetos y Productos" },
    { label: "Tienda", view: "tienda" },
    { label: "Premios", view: "premios" }
  ];

  const events = window.ARKHAM.events;

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-logo" onClick={() => ctx.go("home")}><img src="assets/arkham-wordmark-red.png" alt="ARKHAM" /></div>
      <div className="nav-links">
        {cats.map((c) => (
          <button key={c.label}
            className={"nav-link" + (ctx.isActive(c) ? " active" : "")}
            onClick={() => c.view === "browse" ? ctx.go("browse", c.genre) : ctx.go(c.view)}>
            {c.label}
          </button>
        ))}
      </div>

      <div className="nav-right">
        <div className={"nav-search" + (searchOpen ? " open" : "")}>
          <button className="nav-icon" onClick={() => setSearchOpen((v) => !v)} aria-label="buscar"><Icon.Search /></button>
          <input ref={searchRef} placeholder="Proyectos, tipos, autores..."
            value={ctx.query}
            onChange={(e) => { ctx.setQuery(e.target.value); if (e.target.value) ctx.go("search"); }}
            onBlur={(e) => { if (!e.target.value) setSearchOpen(false); }} />
        </div>

        <div style={{ position: "relative" }}>
          <button className="nav-icon" style={{ position: "relative" }}
            onClick={(e) => { e.stopPropagation(); setMenu(menu === "notif" ? null : "notif"); }} aria-label="eventos">
            <Icon.Bell />
            <span className="notif-dot" />
          </button>
          {menu === "notif" && (
            <div className="notif" onClick={(e) => e.stopPropagation()}>
              <div className="notif-head">
                <span className="notif-head-t">Próximos eventos</span>
                <span className="notif-head-s">Conferencias, charlas y talleres</span>
              </div>
              {events.map((ev) => (
                <div className="notif-item event" key={ev.id}>
                  <div className="event-date"><b>{ev.day}</b><span>{ev.mon}</span></div>
                  <div className="event-info">
                    <span className="event-type">{ev.type}</span>
                    <h5>{ev.title}</h5>
                    <p>{ev.where}</p>
                  </div>
                </div>
              ))}
              <div className="notif-foot">
                <span>¿No quieres perderte nada?</span>
                <button className="notif-news-btn" onClick={() => { setMenu(null); ctx.openRegister("newsletter"); }}>
                  Suscríbete al newsletter
                </button>
              </div>
            </div>
          )}
        </div>

        <div className={"avatar-group" + (menu === "profile" ? " open" : "")}
          onClick={(e) => { e.stopPropagation(); setMenu(menu === "profile" ? null : "profile"); }}>
          <div className="avatar"><ArkhamMark size={20} /></div>
          <span className="chev"><Icon.Chev s={14} /></span>
          {menu === "profile" && (
            <div className="dropdown" onClick={(e) => e.stopPropagation()}>
              <button className="dropdown-item" onClick={() => { setMenu(null); ctx.go("mylist"); }}>Mi lista</button>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}

/* ============================== HERO ============================= */
function billboardBg(b) {
  const g = `linear-gradient(135deg, hsl(${b.hue} ${b.sat}% ${b.dark + 6}%), hsl(${b.hue} ${Math.max(b.sat - 6, 3)}% ${b.dark}%))`;
  let overlay = "";
  if (b.overlay === "louver") overlay = "repeating-linear-gradient(91deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 11px),";
  if (b.overlay === "concrete") overlay = "radial-gradient(120% 80% at 70% 20%, rgba(255,255,255,0.06), transparent 60%),";
  if (b.overlay === "fade") overlay = "radial-gradient(90% 80% at 65% 40%, rgba(170,150,100,0.12), transparent 55%),";
  return { backgroundImage: overlay + g };
}

function Hero() {
  const ctx = uC(AppCtx);
  const boards = window.ARKHAM.billboards;
  const [i, setI] = uS(0);
  const [muted, setMuted] = uS(true);
  const totalAwards = window.ARKHAM.awards.length;

  uE(() => {
    const t = setInterval(() => setI((v) => (v + 1) % boards.length), (ctx.tweaks.heroSpeed || 20) * 1000);
    return () => clearInterval(t);
  }, [boards.length, ctx.tweaks.heroSpeed]);

  const nav = (d) => setI((v) => (v + d + boards.length) % boards.length);
  const b = boards[i];
  const randomProject = () => {
    const ps = window.ARKHAM.projects;
    ctx.openDetail(ps[Math.floor(Math.random() * ps.length)].id);
  };

  const renderBoard = (b) => {
    if (b.kind === "intro") return (
      <div className="hero-content">
        <img className="hero-signature-img" src="assets/arkham-script-white.png" alt="Arkham" />
        <p className="hero-desc">
          Somos una plataforma donde los sueños se convierten en espacios habitables a través de la
          arquitectura. Ya sea una casa, un edificio, una oficina o un restaurante, cada proyecto nace
          de una visión que transformamos en realidad.
        </p>
        <div className="hero-actions">
          <button className="btn btn-mystery" onClick={randomProject}><Icon.Dice s={21} /> Mystery Click</button>
          <button className="btn btn-accent" onClick={() => ctx.openRegister("contacto")}><Icon.Mail s={19} /> Contactar</button>
        </div>
      </div>
    );
    if (b.kind === "favoritos") {
      const favs = b.ids.map((id) => window.ARKHAM.byId[id]).filter(Boolean);
      return (
        <div className="hero-content wide">
          <div className="hero-kicker">Selección del estudio</div>
          <h2 className="hero-title">ARKHAM&rsquo;s of the Year</h2>
          <p className="hero-desc short">Una curaduría de las obras que mejor cuentan quiénes somos. Nuestras piezas más visitadas y premiadas del año, reunidas en un solo lugar.</p>
          <div className="hero-fav-strip">
            {favs.map((p) => (
              <button className="hero-fav" key={p.id} onClick={() => ctx.openDetail(p.id)}>
                <div className="hero-fav-poster"><Poster p={p} showBadges={false} /></div>
                <span>{p.tipo} &middot; {p.year}</span>
              </button>
            ))}
          </div>
          <div className="hero-actions">
            <button className="btn btn-play" onClick={() => ctx.go("premios")}><Icon.Trophy s={20} /> Ver los premiados</button>
          </div>
        </div>
      );
    }
    if (b.kind === "speaker") return (
      <div className="hero-content">
        <div className="hero-kicker">Conferencista</div>
        <h2 className="hero-title big">Min Peniche</h2>
        <div className="hero-subtitle">Arquitecto fundador · ARKHAM</div>
        <p className="hero-desc short">Min Peniche lleva la conversación sobre arquitectura, materia y territorio a escenarios de todo el mundo. Invítalo a tu congreso, festival o universidad.</p>
        <div className="hero-actions">
          <button className="btn btn-play" onClick={() => ctx.openRegister("contacto")}><Icon.Mic s={20} /> Contratar como speaker</button>
          <button className="btn btn-info" onClick={() => ctx.openRegister("contacto")}><Icon.Info s={20} /> Ver disponibilidad</button>
        </div>
      </div>
    );
    if (b.kind === "premios") return (
      <div className="hero-content">
        <div className="hero-kicker">Reconocimientos</div>
        <h2 className="hero-title">{totalAwards} premios y nominaciones</h2>
        <p className="hero-desc short">De la Bienal de Arquitectura Mexicana a los Architizer A+ Awards. El trabajo del estudio ha sido reconocido dentro y fuera del país.</p>
        <div className="hero-actions">
          <button className="btn btn-play" onClick={() => ctx.go("premios")}><Icon.Trophy s={20} /> Ver todos los premios</button>
        </div>
      </div>
    );
  };

  return (
    <header className="hero">
      {boards.map((bb, idx) => (
        <div key={bb.id} className={"hero-bg" + (idx === i ? " show" : "")} style={billboardBg(bb)} />
      ))}
      <div className="hero-scrim-left" />
      <div className="hero-scrim-bottom" />

      {b.kind === "intro" && <div className="hero-video-tag">video promocional · loop</div>}

      {renderBoard(b)}

      <div className="hero-rating">
        <button className="hero-mute" onClick={() => { setMuted((m) => !m); ctx.toast(muted ? "Sonido activado" : "Silenciado"); }}>
          {muted ? <Icon.VolOff s={20} /> : <Icon.VolOn s={20} />}
        </button>
        <div className="hero-tag">TV-MA</div>
      </div>

      <button className="hero-nav left" onClick={() => nav(-1)} aria-label="anterior"><Icon.ChevL s={26} /></button>
      <button className="hero-nav right" onClick={() => nav(1)} aria-label="siguiente"><Icon.ChevR s={26} /></button>

      <div className="hero-dots">
        {boards.map((bb, idx) => (
          <button key={bb.id} className={"hero-dot" + (idx === i ? " active" : "")} onClick={() => setI(idx)} aria-label={"billboard " + (idx + 1)} />
        ))}
      </div>
    </header>
  );
}

/* ========================== DETAIL MODAL ======================== */
function DetailModal({ id }) {
  const ctx = uC(AppCtx);
  const p = window.ARKHAM.byId[id];
  const [muted, setMuted] = uS(true);
  const inList = ctx.myList.includes(p.id);
  const awards = window.ARKHAM.awardCount[p.id] || 0;

  uE(() => {
    const onKey = (e) => { if (e.key === "Escape") ctx.closeDetail(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);

  return (
    <div className="modal-overlay" onClick={ctx.closeDetail}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={ctx.closeDetail}><Icon.Close s={20} /></button>

        <div className="modal-hero">
          <div className="modal-hero-img" style={posterStyle(p)} />
          <div className="poster-tex" />
          {p.hasVideo && <div className="modal-video-tag">video del proyecto · loop</div>}
          <div className="modal-hero-scrim" />
          <div className="modal-hero-title">
            <div className={p.titleClass} style={{ fontSize: p.titleClass === "pt-script" ? 76 : 60 }}>
              {p.title}{p.sub && <span className="poster-sub" style={{ fontSize: 15 }}>{p.sub}</span>}
            </div>
          </div>
          <div className="modal-hero-actions">
            <button className="btn btn-play" onClick={() => ctx.play(p.id)}><Icon.Play s={22} /> Reproducir</button>
            <button className={"circle-btn" + (inList ? " green" : "")} onClick={() => ctx.toggleList(p.id)} title="Agregar a Mi lista">
              {inList ? <Icon.Check s={20} /> : <Icon.Plus s={20} />}
            </button>
            <button className="circle-btn" title="Me gusta"><Icon.Like s={18} /></button>
          </div>
          <button className="circle-btn modal-mute" onClick={() => setMuted((m) => !m)}>
            {muted ? <Icon.VolOff s={18} /> : <Icon.VolOn s={18} />}
          </button>
        </div>

        <div className="modal-body">
          <div>
            <div className="modal-meta-line">
              <span className="match">{p.match}% para ti</span>
              <span className="modal-year">{p.year}</span>
              <span className="age-pill">{p.rating}</span>
              <span className="modal-hd">HD</span>
              {p.progress != null && <span style={{ color: "var(--red)", fontWeight: 600, fontSize: 13 }}>En proceso · {p.progress}%</span>}
            </div>
            <p className="modal-desc">{p.desc}</p>

            {awards > 0 && (
              <div className="modal-awards">
                <Icon.Trophy s={18} />
                <span>Este proyecto ha ganado <b>{awards} premio{awards === 1 ? "" : "s"}</b>.</span>
                <button className="modal-awards-link" onClick={() => { ctx.closeDetail(); ctx.go("premios"); }}>Ver premios ›</button>
              </div>
            )}

            <button className="btn-download" onClick={() => ctx.toast("Descargando lámina conceptual de " + p.title + "…")}>
              <Icon.Download s={18} /> Descargar lámina conceptual
            </button>
          </div>

          <div className="credits">
            <div className="credits-title">Ficha técnica</div>
            {Object.entries(p.credits).map(([k, v]) => (
              <div className="ln" key={k}>{k}: <b>{v}</b></div>
            ))}
            <div className="ln" style={{ marginTop: 8 }}>Tipo: <b>{p.tipo}</b></div>
            <div className="ln">Premios: <b>{awards > 0 ? awards : "—"}</b></div>
          </div>
        </div>
        <div style={{ height: 22 }} />
      </div>
    </div>
  );
}

/* ============================= PLAYER =========================== */
function Player({ id }) {
  const ctx = uC(AppCtx);
  const isReel = id === "reel";
  const p = isReel ? null : window.ARKHAM.byId[id];
  const [t, setT] = uS(0);          // 0..1
  const [playing, setPlaying] = uS(true);
  const [hideUi, setHideUi] = uS(false);
  const total = 212;                 // seconds (placeholder)
  const hideTimer = uR(null);

  uE(() => {
    if (!playing) return;
    const iv = setInterval(() => setT((v) => Math.min(1, v + 1 / total)), 1000);
    return () => clearInterval(iv);
  }, [playing]);

  // end-card: when the project finishes, show “¿Sigues ahí?”
  uE(() => {
    if (t >= 1) { setPlaying(false); ctx.triggerIdle(); }
  }, [t]);

  const wake = () => {
    setHideUi(false);
    clearTimeout(hideTimer.current);
    hideTimer.current = setTimeout(() => setHideUi(true), 3200);
  };
  uE(() => { wake(); return () => clearTimeout(hideTimer.current); }, []);
  uE(() => {
    const onKey = (e) => { if (e.key === "Escape") ctx.stop(); if (e.key === " ") { e.preventDefault(); setPlaying((v) => !v); wake(); } };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);

  const fmt = (sec) => { const m = Math.floor(sec / 60), s = Math.floor(sec % 60); return m + ":" + String(s).padStart(2, "0"); };
  const cur = t * total;
  const stageStyle = isReel
    ? { backgroundImage: "linear-gradient(135deg, hsl(130 12% 12%), hsl(220 16% 6%))" }
    : posterStyle(p);

  const seek = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    setT(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
    wake();
  };

  return (
    <div className={"player" + (hideUi && playing ? " hide-ui" : "")} onMouseMove={wake}
      onClick={(e) => { if (e.target === e.currentTarget) { setPlaying((v) => !v); wake(); } }}>
      <div className="player-stage" style={stageStyle} />
      <div className="poster-tex" />
      <div className="player-scrim" />

      <div className="player-top">
        <button className="player-back" onClick={ctx.stop}><Icon.Back s={30} /> Volver</button>
      </div>

      <div className="player-center">
        {!playing && (
          <button className="player-bigplay" onClick={() => { setPlaying(true); wake(); }}><Icon.Play s={34} /></button>
        )}
      </div>

      <div className="player-controls">
        <div className="player-bar" onClick={seek}>
          <div className="player-bar-fill" style={{ width: t * 100 + "%" }} />
          <div className="player-bar-knob" style={{ left: t * 100 + "%" }} />
        </div>
        <div className="player-row">
          <button className="ctl" onClick={() => { setPlaying((v) => !v); wake(); }}>{playing ? <Icon.Pause s={26} /> : <Icon.Play s={26} />}</button>
          <button className="ctl" onClick={() => { setT(0); wake(); }} title="Reiniciar"><Icon.Replay s={24} /></button>
          <button className="player-time" onClick={() => { setT(0.985); wake(); }} title="Ir al final" style={{ background: "none" }}>{fmt(cur)} / {fmt(total)}</button>
          <span className="player-title-sm">{isReel ? "ARKHAM — Reel de estudio" : p.title + " · Recorrido"}</span>
        </div>
      </div>
    </div>
  );
}

/* ============================= IDLE ============================= */
function IdleScreen() {
  const ctx = uC(AppCtx);
  return (
    <div className="idle">
      <div className="idle-inner">
        <img className="idle-logo-img" src="assets/arkham-wordmark-red.png" alt="ARKHAM" />
        <p className="idle-q">¿Sigues ahí?</p>
        <button className="idle-btn solid" onClick={() => { ctx.stop(); ctx.exitIdle(); ctx.go("home"); }}>Ir a menú principal</button>
        <button className="idle-btn ghost" onClick={() => { ctx.stop(); ctx.exitIdle(); ctx.go("browse", "Desarrollo"); }}>Ir a Work in process</button>
      </div>
    </div>
  );
}

/* ======================= BROWSE / SEARCH ======================== */
function Grid({ list }) {
  if (!list.length) return <div className="empty">No hay proyectos aquí todavía.</div>;
  return <div className="grid">{list.map((p) => <Card key={p.id} p={p} />)}</div>;
}

function Browse({ genre }) {
  const list = window.ARKHAM.projects.filter((p) => (p.cats || []).includes(genre));
  const subs = {
    "Residencial": "Casas y desarrollos para habitar el sueño",
    "Comercial": "Oficinas, comercio y espacios que trabajan",
    "Desarrollo": "Work in process — proyectos en construcción",
    "Master Planning": "Planeación de territorio y comunidades a gran escala",
    "Hospitality": "Hoteles, restaurantes y experiencias",
    "Objetos y Productos": "Mobiliario y piezas de autor — próximamente"
  };
  const isEmptyCat = genre === "Objetos y Productos" && !list.length;
  return (
    <div className="browse">
      <div className="browse-head">
        <h1 className="browse-title">{genre}</h1>
        <span className="browse-sub">{subs[genre]}</span>
      </div>
      {isEmptyCat
        ? <div className="coming-soon">
            <div className="coming-soon-tag">objetos y productos</div>
            <p>Estamos preparando una colección de mobiliario y piezas de autor diseñadas por el estudio.</p>
            <span className="coming-soon-pill">Próximamente</span>
          </div>
        : <Grid list={list} />}
    </div>
  );
}

function MyList() {
  const ctx = uC(AppCtx);
  const list = ctx.myList.map((id) => window.ARKHAM.byId[id]).filter(Boolean);
  return (
    <div className="browse">
      <div className="browse-head">
        <h1 className="browse-title">Mi lista</h1>
        <span className="browse-sub">{list.length} proyecto{list.length === 1 ? "" : "s"} guardado{list.length === 1 ? "" : "s"}</span>
      </div>
      {list.length ? <Grid list={list} /> :
        <div className="empty">Tu lista está vacía. Pasa el cursor sobre un proyecto y toca <b style={{color:'#fff'}}>＋</b> para guardarlo.</div>}
    </div>
  );
}

function SearchView() {
  const ctx = uC(AppCtx);
  const q = ctx.query.trim().toLowerCase();
  const list = window.ARKHAM.projects.filter((p) =>
    !q || p.title.toLowerCase().includes(q) || p.tipo.toLowerCase().includes(q) ||
    (p.cats || []).join(" ").toLowerCase().includes(q) ||
    p.genres.join(" ").toLowerCase().includes(q) ||
    Object.values(p.credits).join(" ").toLowerCase().includes(q));
  return (
    <div className="browse">
      {q
        ? <div className="search-info">Resultados para “<b>{ctx.query}</b>”</div>
        : <div className="search-info">Escribe para buscar proyectos, tipos o autores</div>}
      <Grid list={list} />
    </div>
  );
}

Object.assign(window, { Nav, Hero, DetailModal, Player, IdleScreen, Browse, MyList, SearchView, billboardBg });