// Refined performance screens — Stage mode & Setlist-live — Songbook Master.
// Same Studio-Dark language as the song-detail polish: Instrument Serif display,
// JetBrains Mono lyrics, orange chord chips, teal key accent. Big "across-the-room"
// lyrics, a single organized control dock, and refined transport chrome.

const PT = {
  bg:        "#0B0B0C",
  bgRaise:   "#121213",
  surface:   "#161617",
  ink:       "#ECE7DB",
  inkSoft:   "#A09A8E",
  inkMuted:  "#6A655C",
  line:      "rgba(236,231,219,0.085)",
  lineStrong:"rgba(236,231,219,0.18)",
  chord:     "#E2965F",
  chordBg:   "rgba(226,150,95,0.15)",
  teal:      "#5FC2AC",
  tealBg:    "rgba(95,194,172,0.13)",
  accent:    "#E8A87C",
  fontDisplay: '"Instrument Serif", Georgia, serif',
  fontUI:      '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif',
  fontMono:    '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace',
};

// ---- chord-over-lyric line ----
function PChordLine({ pairs, fontSize = 25 }) {
  return (
    <div style={{
      display: "flex", alignItems: "flex-end",
      fontFamily: PT.fontMono, fontSize, lineHeight: 1.3, whiteSpace: "pre",
    }}>
      {pairs.map((p, i) => {
        const minW = p.c ? p.c.length + 1 : 0;
        const text = p.l || " ";
        const padded = text.length < minW ? text + " ".repeat(minW - text.length) : text;
        return (
          <div key={i} style={{ display: "flex", flexDirection: "column" }}>
            {p.c
              ? <span style={{
                  alignSelf: "flex-start",
                  background: PT.chordBg, color: PT.chord,
                  padding: "1px 8px", marginBottom: 6, borderRadius: 5,
                  fontWeight: 600, fontSize: fontSize * 0.76, lineHeight: 1.25,
                }}>{p.c}</span>
              : <span style={{ height: fontSize * 0.76 * 1.25 + 7 }}>&nbsp;</span>}
            <span style={{ color: PT.ink }}>{padded}</span>
          </div>
        );
      })}
    </div>
  );
}

const PSONG = {
  title: "Amazing Grace",
  key: "G", tempo: 80, time: "4/4",
  sections: [
    { type: "Verse", label: "Verse 1", lines: [
      [{c:"G",l:"Amazing grace, how "},{c:"C",l:"sweet the "},{c:"G",l:"sound,"}],
      [{c:"",l:"That "},{c:"Em",l:"saved a wretch "},{c:"D",l:"like me."}],
      [{c:"",l:"I "},{c:"G",l:"once was lost, but "},{c:"C",l:"now am "},{c:"G",l:"found,"}],
      [{c:"",l:"Was "},{c:"G",l:"blind, but "},{c:"D",l:"now I "},{c:"G",l:"see."}],
    ]},
    { type: "Verse", label: "Verse 2", lines: [
      [{c:"",l:"'Twas "},{c:"G",l:"grace that taught my "},{c:"C",l:"heart to "},{c:"G",l:"fear,"}],
      [{c:"",l:"And "},{c:"G",l:"grace my "},{c:"D",l:"fears re"},{c:"G",l:"lieved."}],
      [{c:"G",l:"How precious did that "},{c:"C",l:"grace ap"},{c:"G",l:"pear,"}],
      [{c:"Em",l:"The hour I "},{c:"D",l:"first be"},{c:"G",l:"lieved."}],
    ]},
    { type: "Verse", label: "Verse 3", lines: [
      [{c:"G",l:"Through many "},{c:"C",l:"dangers, toils and "},{c:"G",l:"snares,"}],
      [{c:"",l:"I "},{c:"Em",l:"have al"},{c:"D",l:"ready "},{c:"G",l:"come;"}],
    ]},
  ],
};

// ---- shared chrome ----
function StatTrio() {
  const stats = [
    { l: "Key",   v: "G",   accent: true },
    { l: "Tempo", v: "80" },
    { l: "Time",  v: "4/4" },
  ];
  return (
    <div style={{ display: "flex", alignItems: "stretch" }}>
      {stats.map((s, i) => (
        <div key={s.l} style={{
          display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
          padding: "0 20px",
          borderLeft: i > 0 ? `1px solid ${PT.line}` : "none",
        }}>
          <span style={{ fontFamily: PT.fontUI, fontSize: 9.5, fontWeight: 800, letterSpacing: "0.24em", textTransform: "uppercase", color: PT.inkMuted }}>{s.l}</span>
          <span style={{ fontFamily: PT.fontDisplay, fontSize: 30, lineHeight: 0.95, color: s.accent ? PT.teal : PT.ink }}>{s.v}</span>
        </div>
      ))}
    </div>
  );
}

function SectionHead({ label, active, type }) {
  const color = active ? PT.ink : PT.inkSoft;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16, position: "relative" }}>
      {active && <span style={{ position: "absolute", left: -22, top: 2, bottom: 2, width: 4, borderRadius: 3, background: PT.accent }}/>}
      <span style={{
        fontFamily: PT.fontDisplay, fontStyle: "italic", fontSize: 30,
        color: type === "Interlude" ? PT.teal : color, lineHeight: 1, whiteSpace: "nowrap",
        marginRight: active ? 6 : 0,
      }}>{label}</span>
      {active && <span style={{
        fontFamily: PT.fontUI, fontSize: 9, fontWeight: 800, letterSpacing: "0.2em", textTransform: "uppercase",
        color: PT.accent, background: "rgba(232,168,124,0.14)", padding: "3px 8px", borderRadius: 5, whiteSpace: "nowrap",
      }}>Now</span>}
      <span style={{ flex: 1, height: 1, background: PT.line }}/>
    </div>
  );
}

function LyricBody({ fontSize = 25, activeIndex = 0 }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
      {PSONG.sections.map((sec, i) => (
        <section key={i} style={{ paddingLeft: 22 }}>
          <SectionHead label={sec.label} type={sec.type} active={i === activeIndex}/>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {sec.lines.map((line, j) => <PChordLine key={j} pairs={line} fontSize={fontSize}/>)}
          </div>
        </section>
      ))}
    </div>
  );
}

// ---- floating control dock ----
function DockBtn({ children, primary, big }) {
  return (
    <button style={{
      width: 50, height: 50, borderRadius: 13,
      display: "flex", alignItems: "center", justifyContent: "center",
      background: primary ? PT.accent : "transparent",
      color: primary ? PT.bg : PT.ink,
      border: "none", cursor: "pointer",
      fontFamily: PT.fontDisplay, fontSize: big ? 24 : 18,
    }}>{children}</button>
  );
}

function Dock() {
  const div = <span style={{ width: 28, height: 1, background: PT.line, margin: "2px auto" }}/>;
  return (
    <div style={{
      position: "absolute", right: 18, top: "50%", transform: "translateY(-50%)",
      display: "flex", flexDirection: "column", alignItems: "center", gap: 2,
      padding: 7, borderRadius: 18,
      background: PT.bgRaise, border: `1px solid ${PT.lineStrong}`,
      boxShadow: "0 18px 44px rgba(0,0,0,0.5)",
      zIndex: 5,
    }}>
      <DockBtn primary>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5l12 7-12 7V5z"/></svg>
      </DockBtn>
      {div}
      <DockBtn big>A</DockBtn>
      <DockBtn>A</DockBtn>
      {div}
      <DockBtn>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5"/><path d="M6 11l6-6 6 6"/></svg>
      </DockBtn>
      <DockBtn>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></svg>
      </DockBtn>
    </div>
  );
}

function ExitPill() {
  return (
    <span style={{
      fontFamily: PT.fontUI, fontSize: 12, fontWeight: 800, letterSpacing: "0.18em", textTransform: "uppercase",
      color: PT.inkSoft, border: `1px solid ${PT.lineStrong}`, borderRadius: 10,
      padding: "9px 15px", display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap",
    }}>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
      Exit
    </span>
  );
}

// ============================================================
// STAGE MODE
// ============================================================
function StageMode() {
  const Status = window.IPadStatus;
  return (
    <div style={{ width: "100%", height: "100%", background: PT.bg, color: PT.ink, display: "flex", flexDirection: "column", overflow: "hidden", fontFamily: PT.fontUI, position: "relative" }}>
      <Status T={PT} dark/>

      {/* top bar */}
      <header style={{ flexShrink: 0, padding: "12px 30px 16px", display: "flex", alignItems: "center", gap: 16, borderBottom: `1px solid ${PT.lineStrong}` }}>
        <ExitPill/>
        <span style={{ fontFamily: PT.fontDisplay, fontStyle: "italic", fontSize: 32, letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>Amazing Grace</span>
        <div style={{ flex: 1 }}/>
        <StatTrio/>
      </header>

      {/* lyrics */}
      <div style={{ flex: 1, overflowY: "auto", padding: "30px 100px 28px 30px" }}>
        <LyricBody fontSize={24} activeIndex={0}/>
      </div>

      <Dock/>

      {/* transpose bar */}
      <div style={{ flexShrink: 0, padding: "14px 30px", borderTop: `1px solid ${PT.lineStrong}`, background: PT.bgRaise, display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ fontFamily: PT.fontUI, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.26em", textTransform: "uppercase", color: PT.inkMuted }}>Transpose</span>
        <button style={stepBtn(false)}>−</button>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontFamily: PT.fontDisplay, fontStyle: "italic", fontSize: 30, color: PT.teal, lineHeight: 1 }}>G</span>
          <span style={{ fontFamily: PT.fontMono, fontSize: 13, color: PT.inkMuted }}>±0</span>
        </span>
        <button style={stepBtn(true)}>+</button>
        <div style={{ flex: 1 }}/>
        <span style={{ fontFamily: PT.fontUI, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.26em", textTransform: "uppercase", color: PT.inkMuted }}>Auto-scroll</span>
        <span style={{ fontFamily: PT.fontMono, fontSize: 13, color: PT.inkSoft }}>1.0×</span>
      </div>
    </div>
  );
}

// ============================================================
// SETLIST · LIVE
// ============================================================
function SetlistLive() {
  const Status = window.IPadStatus;
  const progress = 0.46;
  return (
    <div style={{ width: "100%", height: "100%", background: PT.bg, color: PT.ink, display: "flex", flexDirection: "column", overflow: "hidden", fontFamily: PT.fontUI, position: "relative" }}>
      <Status T={PT} dark/>

      {/* top bar */}
      <header style={{ flexShrink: 0, padding: "12px 30px 16px", display: "flex", alignItems: "center", gap: 16, borderBottom: `1px solid ${PT.lineStrong}` }}>
        <ExitPill/>
        <span style={{ fontFamily: PT.fontDisplay, fontStyle: "italic", fontSize: 32, letterSpacing: "-0.01em", whiteSpace: "nowrap" }}>Amazing Grace</span>
        <div style={{ flex: 1 }}/>
        <StatTrio/>
      </header>

      {/* lyrics */}
      <div style={{ flex: 1, overflowY: "auto", padding: "30px 100px 28px 30px" }}>
        <LyricBody fontSize={24} activeIndex={0}/>
      </div>

      <Dock/>

      {/* transport / up-next bar */}
      <div style={{ flexShrink: 0, background: PT.bgRaise, borderTop: `1px solid ${PT.lineStrong}` }}>
        {/* progress */}
        <div style={{ height: 3, background: PT.line }}>
          <div style={{ width: `${progress * 100}%`, height: "100%", background: PT.accent }}/>
        </div>
        <div style={{ padding: "15px 30px", display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
            <span style={{ fontFamily: PT.fontUI, fontSize: 9.5, fontWeight: 800, letterSpacing: "0.26em", textTransform: "uppercase", color: PT.inkMuted }}>Up Next</span>
            <span style={{ display: "flex", alignItems: "baseline", gap: 10, whiteSpace: "nowrap" }}>
              <span style={{ fontFamily: PT.fontDisplay, fontStyle: "italic", fontSize: 24, lineHeight: 1 }}>Holy, Holy, Holy</span>
              <span style={{ fontFamily: PT.fontMono, fontSize: 12, fontWeight: 700, color: PT.teal, background: PT.tealBg, padding: "3px 8px", borderRadius: 5 }}>D</span>
            </span>
          </div>
          <div style={{ flex: 1 }}/>
          <span style={{ fontFamily: PT.fontMono, fontSize: 12, color: PT.inkMuted, letterSpacing: "0.1em", whiteSpace: "nowrap" }}>3 / 8</span>
          <button style={transBtn(false)}>‹ Prev</button>
          <button style={transBtn(true)}>Next ›</button>
        </div>
      </div>
    </div>
  );
}

function stepBtn(filled) {
  return {
    width: 46, height: 46, borderRadius: 11,
    fontFamily: PT.fontDisplay, fontSize: 20,
    display: "flex", alignItems: "center", justifyContent: "center",
    background: filled ? PT.accent : "transparent",
    color: filled ? PT.bg : PT.ink,
    border: filled ? `1px solid ${PT.accent}` : `1px solid ${PT.lineStrong}`,
    cursor: "pointer",
  };
}
function transBtn(primary) {
  return {
    fontFamily: PT.fontUI, fontSize: 12.5, fontWeight: 800, letterSpacing: "0.16em", textTransform: "uppercase",
    padding: "12px 22px", borderRadius: 11, cursor: "pointer", whiteSpace: "nowrap",
    background: primary ? PT.accent : "transparent",
    color: primary ? PT.bg : PT.inkSoft,
    border: primary ? `1px solid ${PT.accent}` : `1px solid ${PT.lineStrong}`,
  };
}

window.StageMode = StageMode;
window.SetlistLive = SetlistLive;