/* global window, React */
const { useState, useEffect, useMemo, useCallback, useRef } = React;

/* ------------------------------------------------------------------
   Embers — animated rising particle field
------------------------------------------------------------------ */
function Embers({ count = 36 }) {
  const items = useMemo(() => {
    return Array.from({ length: count }, (_, i) => ({
      left: Math.random() * 100,
      duration: 8 + Math.random() * 12,
      delay: -Math.random() * 18,
      drift: (Math.random() - 0.5) * 220 + "px",
      size: 1 + Math.random() * 2,
      key: i,
    }));
  }, [count]);
  return (
    <div className="embers" aria-hidden="true">
      {items.map((e) => (
        <span
          key={e.key}
          className="ember"
          style={{
            left: e.left + "%",
            width: e.size + "px",
            height: e.size + "px",
            animationDuration: e.duration + "s",
            animationDelay: e.delay + "s",
            "--drift": e.drift,
          }}
        />
      ))}
    </div>
  );
}

/* ------------------------------------------------------------------
   Corner brackets helper
------------------------------------------------------------------ */
function FrameCorners() {
  return (<><span className="corner-bl"></span><span className="corner-br"></span></>);
}

/* ------------------------------------------------------------------
   HUD bars (top + bottom)
------------------------------------------------------------------ */
function HudTop({ stage, onHome, lastEdited = "MMXXV · GLASGOW" }) {
  return (
    <div className="hud-top">
      <div className="hud-mark">
        <a href="#" onClick={(e) => { e.preventDefault(); onHome(); }} style={{ display: "flex", gap: 10, alignItems: "center", textDecoration: "none", color: "inherit" }}>
          <span className="sigil">B</span>
          <span className="mono">Bad Attitude · Studios</span>
        </a>
      </div>
      <div className="hud-title">
        {stage === "title" && <>HALL OF BLADES <span className="dot">◆</span> EST. MMXXV</>}
        {stage === "barber" && <>STEP 01 <span className="dot">◆</span> CHOOSE THY BARBER</>}
        {stage === "cut" && <>STEP 02 <span className="dot">◆</span> CHOOSE THY CUT</>}
        {stage === "confirm" && <>STEP 03 <span className="dot">◆</span> SEAL THE COVENANT</>}
        {stage === "booked" && <>COVENANT SEALED <span className="dot">◆</span> FAREWELL</>}
      </div>
      <div className="hud-right">
        <span>93 HOPE ST · G2 6LD</span>
        <span className="live">LIVE BOOKING</span>
      </div>
    </div>
  );
}

function HudBottom({ legend, rightMeta }) {
  return (
    <div className="hud-bottom">
      <div className="input-legend">
        {legend.map((it, i) => (
          <span key={i} className="key"><b>{it.k}</b>{it.l}</span>
        ))}
      </div>
      <div className="mono t-dim" style={{ textAlign: "right" }}>{rightMeta}</div>
    </div>
  );
}

/* ------------------------------------------------------------------
   StatBar
------------------------------------------------------------------ */
function StatBar({ label, value }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      ref.current.style.width = "0%";
      requestAnimationFrame(() => {
        if (ref.current) ref.current.style.width = value + "%";
      });
    }
  }, [value]);
  return (
    <div className="stat-row">
      <span>{label}</span>
      <span className="bar"><i ref={ref}></i></span>
      <span className="stat-val">{value}</span>
    </div>
  );
}

/* ------------------------------------------------------------------
   TITLE SCREEN — opens the experience
------------------------------------------------------------------ */
function TitleScreen({ onEnter, bgIntensity = 0.35 }) {
  // Press-any-key + click anywhere
  useEffect(() => {
    const onKey = (e) => {
      if (["Enter", " ", "ArrowRight"].includes(e.key)) onEnter();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onEnter]);

  return (
    <div className="screen title-screen" onClick={onEnter} style={{ cursor: "pointer" }}>
      {/* Studio backdrop with heavy overlay */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0, overflow: "hidden",
      }}>
        <img src="assets/studio.png" alt="" style={{
          width: "100%", height: "100%", objectFit: "cover",
          filter: `saturate(0.45) contrast(1.15) brightness(0.55) hue-rotate(-8deg)`,
          opacity: bgIntensity,
        }} />
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at 50% 40%, rgba(160,30,25,0.35) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.92) 100%)",
        }} />
      </div>

      <div className="stack" style={{ position: "relative", zIndex: 2 }}>
        <img src="assets/logo.png" alt="Bad Attitude Studios logo" style={{
          width: 180, height: 180, objectFit: "contain",
          filter: "drop-shadow(0 0 24px rgba(160,30,25,0.55))",
        }} />
        <div className="eyebrow">EST · GLASGOW · MMXXV</div>
        <h1>
          <span style={{ fontFamily: "'UnifrakturCook', 'Cinzel', serif", fontWeight: 700 }}>Bad</span>
          {" "}
          <span className="amp" style={{ fontFamily: "'UnifrakturCook', serif" }}>Attitude</span>
          <div style={{ fontSize: "0.42em", letterSpacing: "0.65em", marginTop: 8, color: "var(--ink-dim)" }}>STUDIOS</div>
        </h1>
        <div className="kanji-row">悪 ・ 態 ・ 度 ・ 工 ・ 房</div>
        <div className="subtitle">
          A barber-shop disguised as a hall of blades. Three masters. Six rites. One chair waiting for you.
        </div>
        <div className="prompt">PRESS ANY KEY TO ENTER</div>
      </div>

      <div className="title-quote">
        “In this chair, every man is an emperor for forty-five minutes.”
        <span className="src">— HOUSE DOCTRINE</span>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------
   BARBER (Character) Select
------------------------------------------------------------------ */
function BarberSelect({ selectedId, onSelect, onContinue, onBack }) {
  const selected = BARBERS.find((b) => b.id === selectedId) || BARBERS[0];

  useEffect(() => {
    const onKey = (e) => {
      const i = BARBERS.findIndex((b) => b.id === selected.id);
      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
        onSelect(BARBERS[(i + 1) % BARBERS.length].id);
      } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
        onSelect(BARBERS[(i - 1 + BARBERS.length) % BARBERS.length].id);
      } else if (e.key === "Enter") {
        onContinue();
      } else if (e.key === "Escape") {
        onBack();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [selected.id, onSelect, onContinue, onBack]);

  return (
    <div className="screen" data-screen-label="02 Barber Select">
      <div className="chapter">
        <div className="step">CHAPTER · ONE</div>
        <div>
          <div className="chapter-title">Choose <span className="ornament">◆</span> Thy <span className="ornament">◆</span> Barber</div>
          <div className="chapter-sub">Three masters keep the chairs at 93 Hope Street. Pick the hand you trust.</div>
        </div>
        <div className="right-meta">FLOOR 03 · SUITE 357<br/>OPEN UNTIL 19:00</div>
      </div>

      <div className="divider"><span className="diamond"></span></div>

      <div className="char-layout">
        {/* Left: roster */}
        <div>
          <div className="roster-head"><span>Roster · 03 / 03</span><span>Status</span></div>
          <div className="roster">
            {BARBERS.map((b) => (
              <div
                key={b.id}
                className={"roster-item" + (b.id === selected.id ? " active" : "")}
                onClick={() => onSelect(b.id)}
              >
                <div className="rank">{b.rank}</div>
                <div className="who">
                  <div className="name">{b.name}</div>
                  <div className="epithet">“{b.epithet}”</div>
                  <div className="meta">{b.chair} · {b.years}</div>
                </div>
                <div className={"status " + b.status}>{b.statusLabel}</div>
              </div>
            ))}
          </div>

          <div className="frame" style={{ marginTop: 16, padding: "14px 16px" }}>
            <FrameCorners/>
            <div className="mono t-gold" style={{ marginBottom: 8 }}>Sworn Tenets</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.45 }}>
              No phones in the chair.<br/>
              No questions about the ravens.<br/>
              No appointments after sundown on Sunday.
            </div>
          </div>
        </div>

        {/* Center: portrait */}
        <div className="portrait-stage">
          <div className="portrait">
            <div className="sig">
              SIGIL · {selected.sigil}<br/>
              <b>{selected.ja}</b>
            </div>
            <div className="slot">
              <div className="slot-label">
                {selected.portraitLabel.line1}
                <b>{selected.portraitLabel.line2}</b>
              </div>
            </div>
            <div className="name-plate">
              <div className="epithet">“{selected.epithet}”</div>
              <div className="name">{selected.name} <span className="ja">{selected.ja}</span></div>
            </div>
          </div>
        </div>

        {/* Right: dossier */}
        <div className="dossier">
          <div className="frame crimson panel">
            <FrameCorners/>
            <h4>DOSSIER · {selected.rank}</h4>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: "var(--ink)", lineHeight: 1.45, fontStyle: "italic" }}>
              {selected.bio}
            </div>
          </div>

          <div className="frame panel">
            <FrameCorners/>
            <h4>ATTRIBUTES</h4>
            {STAT_ORDER_BARBER.map((k) => (
              <StatBar key={k} label={k} value={selected.stats[k]} />
            ))}
          </div>

          <div className="frame quote-card">
            <FrameCorners/>
            <div className="qm">“{selected.quote}”</div>
            <div className="qs">— {selected.quoteSrc}</div>
          </div>

          <div className="frame panel">
            <FrameCorners/>
            <h4>SPECIALTY</h4>
            <div className="tags">
              {selected.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>

          <button className="enter-btn" onClick={onContinue}>
            Choose <span className="t-blood">▸</span> Cut
          </button>
        </div>
      </div>

      <HudBottom
        legend={[
          { k: "↑↓", l: "Browse roster" },
          { k: "↵", l: "Confirm" },
          { k: "esc", l: "Back" },
        ]}
        rightMeta={`SELECTED · ${selected.name}`}
      />
    </div>
  );
}

/* ------------------------------------------------------------------
   CUT (Class) Select
------------------------------------------------------------------ */
function CutSelect({ barberId, selectedCutId, onSelect, onContinue, onBack }) {
  const barber = BARBERS.find((b) => b.id === barberId);
  const selected = CUTS.find((c) => c.id === selectedCutId) || CUTS[0];

  useEffect(() => {
    const onKey = (e) => {
      const i = CUTS.findIndex((c) => c.id === selected.id);
      if (e.key === "ArrowRight") onSelect(CUTS[(i + 1) % CUTS.length].id);
      else if (e.key === "ArrowLeft") onSelect(CUTS[(i - 1 + CUTS.length) % CUTS.length].id);
      else if (e.key === "ArrowDown") onSelect(CUTS[Math.min(CUTS.length - 1, i + 3)].id);
      else if (e.key === "ArrowUp") onSelect(CUTS[Math.max(0, i - 3)].id);
      else if (e.key === "Enter") onContinue();
      else if (e.key === "Escape") onBack();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [selected.id, onSelect, onContinue, onBack]);

  return (
    <div className="screen" data-screen-label="03 Cut Select">
      <div className="chapter">
        <div className="step">CHAPTER · TWO</div>
        <div>
          <div className="chapter-title">Choose <span className="ornament">◆</span> Thy <span className="ornament">◆</span> Cut</div>
          <div className="chapter-sub">
            Selected master · <span className="t-gold">{barber.name}</span> — “{barber.epithet}”. They recommend <span className="t-blood">{CUTS.find((c)=>c.id===barber.bestCut).name}</span>.
          </div>
        </div>
        <div className="right-meta">06 RITES AVAILABLE<br/>VAT INCLUDED</div>
      </div>

      <div className="divider"><span className="diamond"></span></div>

      <div className="class-layout">
        {CUTS.map((c) => {
          const recommended = c.id === barber.bestCut;
          return (
            <div
              key={c.id}
              className={"frame class-card" + (c.id === selected.id ? " active" : "")}
              onClick={() => onSelect(c.id)}
            >
              <FrameCorners/>
              <div className="class-head">
                <span className="tier">{c.tier}{recommended ? " · RECOMMENDED" : ""}</span>
                <span className="price">{c.price} · {c.duration}</span>
              </div>
              <div>
                <div className="class-name">{c.name}</div>
                <div className="class-ja">{c.ja}</div>
              </div>
              <div className="class-blurb">{c.blurb}</div>
              <div className="class-stats">
                {STAT_ORDER_CUT.map((k) => (
                  <StatBar key={k} label={k} value={c.stats[k]} />
                ))}
              </div>
              <div className="class-foot">
                <span>{c.notes}</span>
                <b>{c.id === selected.id ? "◆ SELECTED" : "SELECT"}</b>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ padding: "0 56px 120px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
        <button className="ghost-btn" onClick={onBack}>◂ Re-cast Barber</button>
        <div className="mono t-dim" style={{ textAlign: "center" }}>
          MASTER · <span className="t-gold">{barber.name}</span> &nbsp;◆&nbsp;
          RITE · <span className="t-blood">{selected.name}</span> &nbsp;◆&nbsp;
          TOTAL · <span style={{ color: "var(--ink)" }}>{selected.price}</span>
        </div>
        <button className="enter-btn" style={{ width: "auto", padding: "14px 28px" }} onClick={onContinue}>
          Seal <span className="t-blood">▸</span> Covenant
        </button>
      </div>

      <HudBottom
        legend={[
          { k: "←→", l: "Browse rites" },
          { k: "↵", l: "Confirm" },
          { k: "esc", l: "Back" },
        ]}
        rightMeta={`RITE · ${selected.name}`}
      />
    </div>
  );
}

/* ------------------------------------------------------------------
   CONFIRM Screen — pick day/time + summary
------------------------------------------------------------------ */
function ConfirmScreen({ barberId, cutId, dayIdx, time, name, onSetDay, onSetTime, onSetName, onConfirm, onBack }) {
  const barber = BARBERS.find((b) => b.id === barberId);
  const cut = CUTS.find((c) => c.id === cutId);
  const day = DAYS[dayIdx];

  return (
    <div className="screen" data-screen-label="04 Confirm">
      <div className="chapter">
        <div className="step">CHAPTER · THREE</div>
        <div>
          <div className="chapter-title">Seal <span className="ornament">◆</span> the <span className="ornament">◆</span> Covenant</div>
          <div className="chapter-sub">A name. A day. An hour. The chair will know the rest.</div>
        </div>
        <div className="right-meta">UPCOMING SEVEN DAYS</div>
      </div>

      <div className="divider"><span className="diamond"></span></div>

      <div className="confirm-screen" style={{ padding: "0 56px 100px" }}>
        {/* Left: summary */}
        <div className="confirm-left">
          <div className="frame crimson confirm-card">
            <FrameCorners/>
            <div className="mono t-gold" style={{ marginBottom: 14 }}>◆ BOOKING SCROLL</div>
            <div className="summary-row">
              <span className="k">Master</span>
              <span className="v">{barber.name}<small>“{barber.epithet}” · {barber.chair}</small></span>
            </div>
            <div className="summary-row">
              <span className="k">Rite</span>
              <span className="v">{cut.name}<small>{cut.tier} · {cut.duration}</small></span>
            </div>
            <div className="summary-row">
              <span className="k">Tribute</span>
              <span className="v">{cut.price}<small>cash · card · contactless · whisky not accepted</small></span>
            </div>
            <div className="summary-row">
              <span className="k">Day</span>
              <span className="v">{day.full}</span>
            </div>
            <div className="summary-row">
              <span className="k">Hour</span>
              <span className="v">{time || "—"}<small>{time ? "you will be in the chair within five minutes of this hour" : "select an hour from the grid"}</small></span>
            </div>
          </div>

          <div className="frame confirm-card">
            <FrameCorners/>
            <div className="mono t-gold" style={{ marginBottom: 14 }}>◆ NAME THYSELF</div>
            <input
              type="text"
              placeholder="Type the name on the chair"
              value={name}
              onChange={(e) => onSetName(e.target.value)}
              style={{
                width: "100%",
                background: "rgba(0,0,0,0.4)",
                border: "1px solid rgba(176,141,87,0.35)",
                color: "var(--ink)",
                padding: "14px 16px",
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 20,
                letterSpacing: "0.04em",
                outline: "none",
              }}
            />
            <div className="mono t-faint" style={{ marginTop: 10 }}>
              SMS REMINDER · 24H PRIOR · WE TEXT, NEVER CALL
            </div>
          </div>
        </div>

        {/* Right: day/time picker */}
        <div className="confirm-right">
          <div className="frame confirm-card">
            <FrameCorners/>
            <div className="mono t-gold" style={{ marginBottom: 14 }}>◆ CHOOSE A DAY</div>
            <div className="day-grid">
              {DAYS.map((d, i) => (
                <div
                  key={i}
                  className={"day-cell" + (i === dayIdx ? " active" : "")}
                  style={d.closed ? { opacity: 0.35, cursor: "not-allowed" } : {}}
                  onClick={() => !d.closed && onSetDay(i)}
                >
                  <div className="dow">{d.dow}</div>
                  <div className="num">{d.num}</div>
                </div>
              ))}
            </div>
            <div className="mono t-gold" style={{ marginBottom: 14, marginTop: 10 }}>◆ CHOOSE AN HOUR</div>
            <div className="time-grid">
              {TIMES.map((t) => {
                const gone = GONE_TIMES.has(t);
                return (
                  <div
                    key={t}
                    className={"time-cell" + (t === time ? " active" : "") + (gone ? " gone" : "")}
                    onClick={() => !gone && onSetTime(t)}
                  >
                    {t}
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ display: "flex", gap: 12 }}>
            <button className="ghost-btn" onClick={onBack}>◂ Back</button>
            <button
              className="enter-btn"
              style={{ flex: 1 }}
              disabled={!time || !name.trim()}
              onClick={onConfirm}
            >
              ◆ Take the Chair
            </button>
          </div>
        </div>
      </div>

      <HudBottom
        legend={[
          { k: "esc", l: "Back" },
          { k: "↵", l: "Confirm" },
        ]}
        rightMeta="HOPE STREET · GLASGOW"
      />
    </div>
  );
}

/* ------------------------------------------------------------------
   BOOKED Screen
------------------------------------------------------------------ */
function BookedScreen({ barberId, cutId, day, time, name, onReset }) {
  const barber = BARBERS.find((b) => b.id === barberId);
  const cut = CUTS.find((c) => c.id === cutId);
  const [showBanner, setShowBanner] = useState(true);

  useEffect(() => {
    const t = setTimeout(() => setShowBanner(false), 2400);
    return () => clearTimeout(t);
  }, []);

  // Generate a fake booking ref
  const ref = useMemo(() => {
    const r = Math.random().toString(36).slice(2, 8).toUpperCase();
    return `BAS-${r}`;
  }, []);

  return (
    <div className="booked-screen" data-screen-label="05 Booked">
      {showBanner && (
        <div className="banner">
          <div className="strip"></div>
          <div className="text">
            COVENANT SEALED
            <span className="ja">契約 締結</span>
          </div>
        </div>
      )}

      <div className="stack">
        <img src="assets/logo.png" alt="" style={{
          width: 110, height: 110, objectFit: "contain",
          filter: "drop-shadow(0 0 24px rgba(160,30,25,0.55))",
        }} />
        <div className="victory">FAREWELL · WAYFARER</div>
        <h2>{name.trim() || "FRIEND"}, the chair is yours.</h2>
        <div className="ja-big">道 ・ 中 ・ 御 ・ 武 ・ 運</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "var(--ink-dim)", fontSize: 18, maxWidth: 580, lineHeight: 1.5 }}>
          Arrive five minutes early. Bring nothing but the head on your shoulders. The whisky is on the second shelf, behind the brick.
        </div>

        <div className="frame crimson ticket">
          <FrameCorners/>
          <div>
            <span className="k">Reference</span>
            <span className="v mono" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 15, letterSpacing: "0.2em" }}>{ref}</span>
          </div>
          <div>
            <span className="k">Master</span>
            <span className="v">{barber.name}</span>
          </div>
          <div>
            <span className="k">Rite</span>
            <span className="v">{cut.name}</span>
          </div>
          <div>
            <span className="k">When</span>
            <span className="v">{day.full} · {time}</span>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
          <button className="ghost-btn" onClick={onReset}>◂ Book Again</button>
          <button className="enter-btn" style={{ padding: "14px 28px", width: "auto" }} onClick={onReset}>
            Add to Calendar
          </button>
        </div>

        <div className="mono t-faint" style={{ marginTop: 28 }}>
          BAD ATTITUDE STUDIOS · 93 HOPE ST · SUITE 357 · GLASGOW G2 6LD · MMXXV
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Embers, FrameCorners, HudTop, HudBottom, StatBar,
  TitleScreen, BarberSelect, CutSelect, ConfirmScreen, BookedScreen,
});