/* ASTRA — pantalla Detalle de película */
function DetailScreen({ data, movie, onBack, onPickShowtime, cinema, onCinema }) {
  const dates = useMemo(() => data.dateChips(7), [data]);
  const [date, setDate] = useState(dates[0].key);
  const formats = movie.formats;
  const [fmt, setFmt] = useState(formats[0]);
  const [trailer, setTrailer] = useState(false);
  const [lightsDimmed, setLightsDimmed] = useState(false);
  const times = data.showtimes[fmt] || data.showtimes["2D"];

  return (
    <div className="detail fade-up">
      {/* backdrop */}
      <div className="detail-hero">
        <div className="detail-bg" style={{ background: `linear-gradient(120deg, ${movie.tint[0]}, ${movie.tint[1]})` }}>
          {movie.backdrop && <img className="hero-bg-img" src={movie.backdrop} alt="" />}
        </div>
        <div className="detail-scrim" />
        <div className="wrap detail-hero-inner">
          <button className="btn btn-ghost btn-sm back-btn" onClick={onBack}>
            <Ico d={PATHS.chevL} size={16} /> Cartelera
          </button>
          <div className="detail-hero-grid">
            <div className="detail-poster">
              <Poster movie={movie} slotId={"detail-poster-" + movie.id} />
            </div>
            <div className="detail-info">
              <div className="row gap8" style={{ marginBottom: 14, flexWrap: "wrap" }}>
                <span className="badge">{movie.releaseLabel}</span>
                {movie.original !== movie.title && <span className="badge">{movie.original}</span>}
              </div>
              <h1 className="detail-title">{movie.title}</h1>
              <p className="detail-tag">{movie.tagline}</p>
              <div className="detail-meta soft row gap12" style={{ flexWrap: "wrap", alignItems: "center" }}>
                <span className={"rating " + movie.rating}>{movie.rating}</span>
                <span>{movie.genre.join(" · ")}</span>
                <span className="dot-sep">·</span>
                <span>{fmtDur(movie.duration)}</span>
                {movie.score && (
                  <>
                    <span className="dot-sep">·</span>
                    <span className="score-badge" style={{ display: "inline-flex", alignItems: "center", gap: "4px" }}>
                      <Ico d={PATHS.star} size={13} sw={0} style={{ color: "var(--gold)", fill: "var(--gold)" }} />
                      <strong style={{ color: "var(--gold)" }}>{movie.score}</strong>
                    </span>
                  </>
                )}
              </div>
              <p className="detail-syn">{movie.synopsis}</p>
              
              <div className="detail-credits">
                <div><span className="cr-label">DIRECCIÓN</span><span>{movie.director}</span></div>
                <div><span className="cr-label">CLASIFICACIÓN</span><span>{movie.rating} — {movie.rating === "TP" ? "Para todo público" : movie.rating === "+12" ? "Apta para mayores de 12 años" : movie.rating === "+15" ? "Apta para mayores de 15 años" : "Apta para mayores de 18 años"}</span></div>
                <div><span className="cr-label">AÑO</span><span>{movie.year || 2026}</span></div>
                <div><span className="cr-label">IDIOMA</span><span>{movie.langs.map((l) => l === "DOB" ? "Doblada (Español)" : "Subtitulada").join(" · ")}</span></div>
              </div>

              {/* Elenco Destacado con Avatares */}
              <div style={{ marginTop: 24 }}>
                <span className="cr-label" style={{ display: "block", marginBottom: 10 }}>ELENCO DESTACADO</span>
                <div className="row gap8" style={{ flexWrap: "wrap" }}>
                  {movie.cast.map((actor) => (
                    <div key={actor} className="row gap8" style={{ background: "rgba(255,255,255,0.03)", padding: "6px 12px 6px 6px", borderRadius: 30, border: "1px solid var(--line)" }}>
                      <div style={{
                        width: 28,
                        height: 28,
                        borderRadius: "50%",
                        background: `linear-gradient(135deg, ${movie.tint[0]}, ${movie.tint[1]})`,
                        color: "#fff",
                        display: "grid",
                        placeItems: "center",
                        fontSize: 11,
                        fontWeight: 700
                      }}>
                        {actor.split(" ").map(w => w[0]).join("").slice(0, 2)}
                      </div>
                      <span style={{ fontSize: 13, fontWeight: 600 }}>{actor}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="row gap12" style={{ marginTop: 26, flexWrap: "wrap" }}>
                <button className="btn btn-ghost btn-lg" onClick={() => setTrailer(true)}>
                  <Ico d={PATHS.play} size={16} sw={0} style={{ color: "var(--gold)" }} /> Ver tráiler
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* selección de funciones */}
      <section className="wrap section showtimes">
        <div className="eyebrow">Compra en 3 pasos · Función</div>
        <h2 className="section-title" style={{ marginBottom: 28 }}>Elige tu función</h2>

        <div className="st-toolbar">
          <button className="loc loc-lg" onClick={onCinema}>
            <Ico d={PATHS.pin} size={16} style={{ color: "var(--gold)" }} /> {cinema}
          </button>
        </div>

        <div className="st-block">
          <div className="st-label"><Ico d={PATHS.cal} size={15} /> FECHA</div>
          <div className="date-row">
            {dates.map((d) => (
              <button key={d.key} className={"date-chip" + (date === d.key ? " on" : "")} onClick={() => setDate(d.key)}>
                <span className="dc-dow">{d.dow}</span>
                <span className="dc-day">{d.day}</span>
                <span className="dc-mon">{d.mon}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="st-block">
          <div className="st-label"><Ico d={PATHS.film} size={15} /> FORMATO</div>
          <div className="row gap8" style={{ flexWrap: "wrap" }}>
            {formats.map((f) => (
              <button key={f} className={"fmt-tab" + (fmt === f ? " on" : "")} onClick={() => setFmt(f)}>{f}</button>
            ))}
          </div>
        </div>

        <div className="st-block">
          <div className="st-label"><Ico d={PATHS.clock} size={15} /> HORARIO · {fmt}</div>
          <div className="times-row">
            {times.map((t) => (
              <button key={t} className="time-chip" onClick={() => onPickShowtime({ movie, date, fmt, time: t, cinema })}>
                {t}
                <span className="tc-lang">{movie.langs[0] === "DOB" ? "ESP" : "SUB"}</span>
              </button>
            ))}
          </div>
          <p className="muted" style={{ marginTop: 16, fontSize: 13.5 }}>
            Selecciona un horario para elegir tus butacas. Precios desde <b style={{ color: "var(--gold)" }}>${data.prices.adulto}</b> por persona · butacas premium con un pequeño cargo adicional.
          </p>
        </div>
      </section>

      {/* Modal de Tráiler real — portal a <body> para que el position:fixed sea relativo al viewport
          (el contenedor .detail con animación fade-up crea un containing block y lo descentraría) */}
      {trailer && ReactDOM.createPortal(
        <div className="modal-back" onClick={() => { setTrailer(false); setLightsDimmed(false); }}
             style={{ background: lightsDimmed ? "rgba(0,0,0,0.98)" : "rgba(6,4,8,.82)", transition: "background 0.5s ease" }}>
          <div className="modal trailer-modal" onClick={(e) => e.stopPropagation()}>
            <div className="trailer-frame" style={{ border: "1px solid var(--gold)" }}>
              <iframe
                width="100%"
                height="100%"
                src={`https://www.youtube.com/embed/${movie.youtubeId || "y8sz-f63v7w"}?autoplay=1&rel=0`}
                title="Trailer oficial"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
              ></iframe>
            </div>
            <div className="row gap12" style={{ justifyContent: "center", marginTop: 16 }}>
              <button className={"btn btn-sm " + (lightsDimmed ? "btn-gold" : "btn-ghost")} onClick={() => setLightsDimmed(!lightsDimmed)}>
                <Ico d={PATHS.star} size={14} /> {lightsDimmed ? "Encender luces" : "Apagar luces"}
              </button>
              <button className="btn btn-solid btn-sm" onClick={() => { setTrailer(false); setLightsDimmed(false); }}>Cerrar</button>
            </div>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
}

Object.assign(window, { DetailScreen });