// Goyo Club — Right Pane (detail view)
// Unified body structure for every kind:
//   1. Header        — title (no brackets) ↔ CTA button
//   2. Hero media    — image / video / iframe
//   3. Tag chips     — left-aligned [ # tag ]
//   4. Info area     — KV pairs, field name ↔ data (data right-aligned)
//   5. CTA repeat    — same CTA, right-aligned
//   6. Spacer        — end-of-content breathing room
// (Site footer is rendered at the app level, not per body.)

const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

// ---- Shared body parts ---------------------------------------------------

function BodyCta({ label }) {
  return (
    <button className="rbody__cta">[ <span className="btn-label">{label}</span> ]</button>
  );
}

function BodyHeader({ title, cta }) {
  return (
    <header className="rbody__header">
      <span className="rbody__title">{title}</span>
      {cta != null && <BodyCta label={cta} />}
    </header>
  );
}

function BodyHero({ children }) {
  return <div className="rbody__hero">{children}</div>;
}

function BodyTags({ tags, onTagClick, activeTag }) {
  if (!tags || tags.length === 0) return null;
  return (
    <div className="rbody__tags">
      {tags.map((t) => (
        <button
          key={t}
          className={`rbody__tag ${t === activeTag ? "rbody__tag--active" : ""}`}
          onClick={onTagClick ? () => onTagClick(t) : undefined}
          title={onTagClick ? `Filter index by ${t}` : undefined}>
          [ <span className="btn-label">{t}</span> ]
        </button>
      ))}
    </div>
  );
}

function KV({ k, v }) {
  return (
    <div className="kv">
      <span className="kv__k">{k}</span>
      <span className="kv__v">{v}</span>
    </div>
  );
}

function BodyInfo({ children }) {
  return <div className="rbody__info">{children}</div>;
}

function BodyCtaRow({ label }) {
  return (
    <div className="rbody__cta-row">
      <BodyCta label={label} />
    </div>
  );
}

function BodySpacer() {
  return <div className="rbody__spacer" aria-hidden="true" />;
}

// ---- Per-type body shells ------------------------------------------------

const HERO_INTRO = [
  "goyo club exists for the locals. For the stories that don’t always get told and for the artists shaping sound on their own terms.",
  "We were built to archive what matters, giving local artists the stage they deserve while preserving the culture of our community. This started with two filmmakers who wanted to document artists in the real world, not in studios or sets, but in the places that raised us.",
  "We curate and archive artists inside family owned spaces across Los Angeles, capturing the talent and stories of artists and spaces that often go unnoticed. Spaces with history, texture, and memory became the heart of goyo club, a way to celebrate local talent while honoring the places that hold our communities together.",
  "Our current archives include Electric Cleaners, featuring DJ mixes inside a Koreatown dry cleaner, and Finding Records, capturing live performances in the last standing Korean bookstore in Koreatown, LA. We connect these sounds with the memory of the spaces that hold our community together, expanding on this mission by building stages through live events and parties, gathering the people to listen to the local artists archived by us. We plan to expand our archives to capture many different forms of art and spaces, sharing these events with the community.",
];

function HeroBody() {
  // Hero is the brand landing — header + video only on home.
  // The HERO_INTRO paragraphs are reused by AboutPage (app.jsx) but are not
  // rendered here so the home right pane stays compact.
  const ctaLabel = (
    <React.Fragment>
      LIVE FROM LA <span className="hero-live-dot" aria-hidden="true" />
    </React.Fragment>
  );
  return (
    <div className="rbody rbody--hero">
      <BodyHeader title="GOYO CLUB" cta={ctaLabel} />
      <BodyHero>
        <div className="hero-video">
          <iframe
            className="hero-video__el"
            src="https://iframe.mediadelivery.net/embed/611356/a03291ff-e348-4fa6-862c-26fda3d9bfbd?autoplay=true&loop=true&muted=true&preload=true&responsive=true"
            loading="lazy"
            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
            allowFullScreen
            title="GOYO brand reel"
          />
        </div>
      </BodyHero>
    </div>
  );
}

function ArchiveBody({ row, onTagClick, activeTag }) {
  const b = row.body;
  const cta = (b.linkLabel || "").trim();
  return (
    <div className="rbody rbody--archive">
      <BodyHeader title={b.badge} cta={cta} />
      <BodyHero>
        <div className="ytwrap">
          <iframe
            className="ytwrap__iframe"
            src={`https://www.youtube.com/embed/${b.youtubeId}?rel=0&modestbranding=1`}
            title={b.caption}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
          <div className="ytwrap__overlay-mark">
            <div className="ytwrap__mark-inner">GOYO<br/>CLUB</div>
          </div>
        </div>
      </BodyHero>
      <BodyTags tags={b.tags} onTagClick={onTagClick} activeTag={activeTag} />
      <BodyInfo>
        <KV k="ARTIST" v={row.meta} />
        <KV k="DATE" v={row.date} />
        <KV k="CAPTION" v={b.caption} />
      </BodyInfo>
      <BodyCtaRow label={cta} />
      <BodySpacer />
    </div>
  );
}

function EventBody({ row, onTagClick, activeTag }) {
  const b = row.body;
  const cta = `${b.tickets} →`;
  return (
    <div className="rbody rbody--event">
      <BodyHeader title={`EVENT — ${row.meta}`} cta={cta} />
      <BodyHero>
        <img src={b.poster} alt={row.title} />
      </BodyHero>
      <BodyTags tags={b.tags} onTagClick={onTagClick} activeTag={activeTag} />
      <BodyInfo>
        <KV k="VENUE" v={row.meta} />
        <KV k="DATE" v={row.date} />
        <KV k="DOORS" v={b.doors} />
        <KV k="PRICE" v={b.price} />
        <KV k="LINEUP" v={b.lineup.join(", ")} />
      </BodyInfo>
      <BodyCtaRow label={cta} />
      <BodySpacer />
    </div>
  );
}

function ArticleBody({ row, onTagClick, activeTag }) {
  const b = row.body;
  const cta = "READ FULL →";
  return (
    <div className="rbody rbody--article">
      <BodyHeader title={`ARTICLE — ${row.meta}`} cta={cta} />
      <BodyHero>
        <img src={b.image} alt={row.title} />
      </BodyHero>
      <BodyTags tags={b.tags} onTagClick={onTagClick} activeTag={activeTag} />
      <BodyInfo>
        <KV k="LEDE" v={b.lede} />
        <div className="kv">
          <span className="kv__k">EXCERPT</span>
          <div className="kv__v kv__v--paragraphs">
            {b.excerpt.map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
        <KV k="AUTHOR" v={b.author} />
        <KV k="DATE" v={row.date} />
      </BodyInfo>
      <BodyCtaRow label={cta} />
      <BodySpacer />
    </div>
  );
}

function ShopBody({ row }) {
  const b = row.body;
  const cta = (b.linkLabel || "").trim();
  const [size, setSize] = useStateR(b.sizes[0]);
  return (
    <div className="rbody rbody--shop">
      <BodyHeader title={`SHOP — ${row.title.split(" ").slice(-3).join(" ")}`} cta={cta} />
      <BodyHero>
        <img src={b.image} alt={row.title} />
      </BodyHero>
      <BodyInfo>
        <KV k="PRICE" v={b.price} />
        <KV k="STOCK" v={b.stock} />
        <div className="kv">
          <span className="kv__k">SIZE</span>
          <div className="kv__v sizes">
            {b.sizes.map((s) => (
              <button key={s} className={`size ${s===size?'size--on':''}`} onClick={()=>setSize(s)}>{s}</button>
            ))}
          </div>
        </div>
        <KV k="DETAILS" v={b.description} />
      </BodyInfo>
      <BodyCtaRow label={cta} />
      <BodySpacer />
    </div>
  );
}

// ---- Right Pane wrapper --------------------------------------------------
function RightPane({ row, transitionMode, onTagClick, activeTag }) {
  const [renderRow, setRenderRow] = useStateR(row);
  const [phase, setPhase] = useStateR("in"); // 'in' | 'out'
  const [scrolling, setScrolling] = useStateR(false);
  const scrollRef = useRefR(null);

  useEffectR(() => {
    if (transitionMode === "instant") {
      setRenderRow(row);
      return;
    }
    setPhase("out");
    const t = setTimeout(() => {
      setRenderRow(row);
      setPhase("in");
    }, 180);
    return () => clearTimeout(t);
  }, [row?.id, transitionMode]);

  // Show scrollbar only while actively scrolling. CSS makes the thumb
  // transparent by default; the `right__body--scrolling` class colors it in.
  useEffectR(() => {
    const el = scrollRef.current;
    if (!el) return;
    let timer;
    const onScroll = () => {
      setScrolling(true);
      clearTimeout(timer);
      timer = setTimeout(() => setScrolling(false), 900);
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      el.removeEventListener("scroll", onScroll);
      clearTimeout(timer);
    };
  }, []);

  const r = renderRow;
  const kind = r?.body?.kind || "hero";

  let body = null;
  if (kind === "hero") body = <HeroBody />;
  else if (kind === "archive") body = <ArchiveBody row={r} onTagClick={onTagClick} activeTag={activeTag} />;
  else if (kind === "event") body = <EventBody row={r} onTagClick={onTagClick} activeTag={activeTag} />;
  else if (kind === "article") body = <ArticleBody row={r} onTagClick={onTagClick} activeTag={activeTag} />;
  else if (kind === "shop") body = <ShopBody row={r} />;

  const phaseCls = transitionMode === "instant" ? "" : `right-phase right-phase--${phase} right-phase--${transitionMode}`;
  const scrollCls = scrolling ? "right__body--scrolling" : "";

  return (
    <div className="right">
      <div ref={scrollRef} className={`right__body ${phaseCls} ${scrollCls}`}>
        {body}
      </div>
    </div>
  );
}

window.GoyoRight = { RightPane, HeroBody, HERO_INTRO };