// Refined "Amazing Grace" song-detail screen — Songbook Master.
// Stays inside the shipped visual language (Studio-Dark palette, Instrument Serif
// display, JetBrains Mono lyrics, orange chord chips, teal key accent) and elevates
// the masthead, metadata, and vertical rhythm.

const T = {
  bg:        "#0B0B0C",
  bgRaise:   "#101011",
  surface:   "#161617",
  ink:       "#ECE7DB",
  inkSoft:   "#A09A8E",
  inkMuted:  "#6A655C",
  line:      "rgba(236,231,219,0.085)",
  lineSoft:  "rgba(236,231,219,0.05)",
  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 (monospace aligned) ----
function ChordLine({ pairs, fontSize = 19 }) {
  return (
    <div style={{
      display: "flex", alignItems: "flex-end",
      fontFamily: T.fontMono, fontSize, lineHeight: 1.32, 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: T.chordBg, color: T.chord,
                  padding: "1px 7px", marginBottom: 5, borderRadius: 5,
                  fontWeight: 600, fontSize: fontSize * 0.78, lineHeight: 1.25,
                  letterSpacing: "0.01em",
                }}>{p.c}</span>
              : <span style={{ height: fontSize * 0.78 * 1.25 + 6 }}>&nbsp;</span>}
            <span style={{ color: T.ink }}>{padded}</span>
          </div>
        );
      })}
    </div>
  );
}

// ---- song data ----
const SONG = {
  title: "Amazing Grace",
  artist: "John Newton",
  source: "Olney Hymns",
  year: "1779",
  folder: "Worship",
  key: "G",
  tempo: 80,
  time: "4/4",
  length: "3:42",
  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: "Interlude", label: "Interlude", chordsOnly: ["G","C","G","D","Em","C","G"] },
    { 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;"}],
      [{c:"G",l:"'Tis grace hath "},{c:"C",l:"brought me safe thus "},{c:"G",l:"far,"}],
      [{c:"",l:"And "},{c:"G",l:"grace will "},{c:"D",l:"lead me "},{c:"G",l:"home."}],
    ]},
    { type: "Verse", label: "Verse 4", lines: [
      [{c:"",l:"When "},{c:"G",l:"we've been there ten "},{c:"C",l:"thousand "},{c:"G",l:"years,"}],
      [{c:"",l:"Bright "},{c:"Em",l:"shining as the "},{c:"D",l:"sun,"}],
    ]},
  ],
};

// ---- small chrome pieces ----
function Glyph() {
  const G = window.SBM_LOGOS && window.SBM_LOGOS.Glyph;
  return G ? <G size={30} fg={T.ink} accent={T.chord} strokeWidth={26} stringWidth={6}/> : null;
}

function NavTab({ children, active }) {
  return (
    <span style={{
      fontFamily: T.fontUI, fontSize: 13, fontWeight: 800,
      letterSpacing: "0.2em", textTransform: "uppercase",
      color: active ? T.bg : T.inkMuted,
      background: active ? T.accent : "transparent",
      padding: active ? "7px 16px" : "7px 4px",
      borderRadius: 9,
      display: "inline-flex", alignItems: "center", gap: 8,
    }}>{children}</span>
  );
}

function PillBtn({ children, tone = "quiet" }) {
  const styles = {
    quiet:  { color: T.inkSoft, border: `1px solid ${T.lineStrong}`, background: "transparent" },
    tag:    { color: T.teal,    border: `1px solid ${T.tealBg}`,     background: T.tealBg },
  }[tone];
  return (
    <span style={{
      fontFamily: T.fontUI, fontSize: 12.5, fontWeight: 800,
      letterSpacing: "0.16em", textTransform: "uppercase",
      padding: "9px 15px", borderRadius: 10,
      display: "inline-flex", alignItems: "center", gap: 8, ...styles,
    }}>{children}</span>
  );
}

// ---- metadata strip ----
function StatCell({ label, value, unit, accent, last }) {
  return (
    <div style={{
      flex: 1, padding: "13px 18px",
      borderRight: last ? "none" : `1px solid ${T.line}`,
      display: "flex", flexDirection: "column", gap: 5,
    }}>
      <span style={{
        fontFamily: T.fontUI, fontSize: 10, fontWeight: 800,
        letterSpacing: "0.26em", textTransform: "uppercase", color: T.inkMuted,
      }}>{label}</span>
      <span style={{ display: "flex", alignItems: "baseline", whiteSpace: "nowrap" }}>
        <span style={{
          display: "inline-block",
          fontFamily: T.fontDisplay, fontSize: 36, lineHeight: 0.9,
          color: accent ? T.teal : T.ink, marginRight: unit ? 9 : 0,
        }}>{value}</span>
        {unit && <span style={{ fontFamily: T.fontMono, fontSize: 11, color: T.inkMuted, letterSpacing: "0.04em" }}>{unit}</span>}
      </span>
    </div>
  );
}

// ---- the screen ----
function SongDetail() {
  const Status = window.IPadStatus;
  return (
    <div style={{
      width: "100%", height: "100%", background: T.bg, color: T.ink,
      display: "flex", flexDirection: "column", overflow: "hidden",
      fontFamily: T.fontUI,
    }}>
      <Status T={T} dark/>

      {/* ===== top app bar ===== */}
      <header style={{ flexShrink: 0, padding: "10px 30px 0", background: T.bg }}>
        <div style={{ display: "flex", alignItems: "center", gap: 13, paddingBottom: 14 }}>
          <Glyph/>
          <span style={{ fontFamily: T.fontDisplay, fontStyle: "italic", fontSize: 23, letterSpacing: "-0.01em" }}>
            Songbook Master
          </span>
        </div>
        <nav style={{
          display: "flex", alignItems: "center", gap: 26,
          borderTop: `1px solid ${T.line}`, paddingTop: 14, paddingBottom: 14,
        }}>
          <NavTab active>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg>
            Library
          </NavTab>
          <NavTab>Folders</NavTab>
          <NavTab>Setlists</NavTab>
          <NavTab>Settings</NavTab>
        </nav>
      </header>

      {/* ===== sub bar: back + actions ===== */}
      <div style={{
        flexShrink: 0, padding: "12px 30px",
        borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.lineStrong}`,
        display: "flex", alignItems: "center", gap: 12, background: T.bg,
      }}>
        <span style={{
          fontFamily: T.fontUI, fontSize: 12.5, fontWeight: 800,
          letterSpacing: "0.18em", textTransform: "uppercase", color: T.inkSoft,
          display: "inline-flex", alignItems: "center", gap: 7,
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
          Library
        </span>
        <div style={{ flex: 1 }}/>
        <PillBtn tone="tag">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7l8.5-3.5a2 2 0 0 1 1.7 0L21 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><circle cx="8" cy="11" r="1.5"/></svg>
          Worship
        </PillBtn>
        <PillBtn>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 14v6h6"/><path d="M20 10V4h-6"/><path d="M20 4l-7 7"/><path d="M4 20l7-7"/></svg>
          Stage
        </PillBtn>
        <PillBtn>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4l6 6L9 21H3v-6L14 4z"/></svg>
          Edit
        </PillBtn>
      </div>

      {/* ===== scroll body ===== */}
      <div style={{ flex: 1, overflowY: "auto", padding: "32px 30px 28px" }}>
        {/* masthead */}
        <div style={{ marginBottom: 26 }}>
          <span style={{
            fontFamily: T.fontMono, fontSize: 12, fontWeight: 500,
            letterSpacing: "0.34em", textTransform: "uppercase", color: T.inkMuted,
          }}>Hymnal · Public Domain</span>
          <div style={{
            margin: "12px 0 0", fontFamily: T.fontDisplay, fontWeight: 400,
            fontSize: 80, lineHeight: 0.92, letterSpacing: "-0.02em", color: T.ink,
          }}>Amazing Grace</div>
          <div style={{ marginTop: 12, fontFamily: T.fontUI, fontSize: 16, color: T.inkSoft }}>
            {SONG.artist} <span style={{ color: T.inkMuted }}>·</span> <span style={{ fontStyle: "italic", fontFamily: T.fontDisplay, fontSize: 19 }}>{SONG.source}</span> <span style={{ color: T.inkMuted }}>·</span> {SONG.year}
          </div>

          {/* unified metadata strip */}
          <div style={{
            marginTop: 22, display: "flex",
            border: `1px solid ${T.lineStrong}`, borderRadius: 12,
            background: T.bgRaise, overflow: "hidden",
          }}>
            <StatCell label="Key"    value={SONG.key}   accent/>
            <StatCell label="Tempo"  value={SONG.tempo} unit="BPM"/>
            <StatCell label="Time"   value={SONG.time}/>
            <StatCell label="Length" value={SONG.length} last/>
          </div>
        </div>

        {/* verse selector */}
        <div style={{ display: "flex", gap: 9, flexWrap: "wrap", marginBottom: 32 }}>
          {["All","Verse 1","Verse 2","Interlude","Verse 3","Verse 4"].map((c, i) => (
            <span key={c} style={{
              fontFamily: T.fontUI, fontSize: 12, fontWeight: 800,
              letterSpacing: "0.16em", textTransform: "uppercase",
              padding: "8px 15px", borderRadius: 9,
              color: i === 0 ? T.bg : T.inkSoft,
              background: i === 0 ? T.ink : "transparent",
              border: i === 0 ? `1px solid ${T.ink}` : `1px solid ${T.line}`,
            }}>{c}</span>
          ))}
        </div>

        {/* lyrics */}
        {SONG.sections.map((sec, i) => (
          <section key={i} style={{ marginBottom: 38 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 18 }}>
              <span style={{
                fontFamily: T.fontDisplay, fontStyle: "italic", fontSize: 30,
                color: sec.type === "Interlude" ? T.teal : T.ink, lineHeight: 1,
                whiteSpace: "nowrap", flexShrink: 0,
              }}>{sec.label}</span>
              <span style={{ flex: 1, height: 1, background: T.line }}/>
              <span style={{
                fontFamily: T.fontMono, fontSize: 11, letterSpacing: "0.2em",
                textTransform: "uppercase", color: T.inkMuted,
                whiteSpace: "nowrap", flexShrink: 0,
              }}>{sec.chordsOnly ? "Instrumental" : `${sec.lines.length} lines`}</span>
            </div>

            {sec.chordsOnly ? (
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                {sec.chordsOnly.map((c, j) => (
                  <span key={j} style={{
                    fontFamily: T.fontMono, fontSize: 16, fontWeight: 600, color: T.chord,
                    background: T.chordBg, padding: "8px 14px", borderRadius: 7,
                  }}>{c}</span>
                ))}
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {sec.lines.map((line, j) => <ChordLine key={j} pairs={line} fontSize={19}/>)}
              </div>
            )}
          </section>
        ))}
      </div>

      {/* ===== bottom control bar ===== */}
      <div style={{
        flexShrink: 0, padding: "14px 30px",
        borderTop: `1px solid ${T.lineStrong}`, background: T.bgRaise,
        display: "flex", alignItems: "center", gap: 18,
      }}>
        <span style={{ fontFamily: T.fontUI, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.26em", textTransform: "uppercase", color: T.inkMuted }}>Font Size</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button style={ctrlBtn(false)}>A</button>
          <button style={{ ...ctrlBtn(true), fontSize: 22 }}>A</button>
        </div>
        <div style={{ flex: 1 }}/>
        <span style={{ fontFamily: T.fontUI, fontSize: 10.5, fontWeight: 800, letterSpacing: "0.26em", textTransform: "uppercase", color: T.inkMuted }}>Transpose</span>
        <span style={{ fontFamily: T.fontDisplay, fontStyle: "italic", fontSize: 32, color: T.teal, lineHeight: 1 }}>G</span>
        <span style={{ fontFamily: T.fontMono, fontSize: 13, color: T.inkMuted }}>±0</span>
        <div style={{ display: "flex", gap: 8 }}>
          <button style={ctrlBtn(false)}>−</button>
          <button style={ctrlBtn(true)}>+</button>
        </div>
      </div>
    </div>
  );
}

function ctrlBtn(filled) {
  return {
    width: 46, height: 46, borderRadius: 11,
    fontFamily: T.fontDisplay, fontSize: 18,
    display: "flex", alignItems: "center", justifyContent: "center",
    background: filled ? T.accent : "transparent",
    color: filled ? T.bg : T.ink,
    border: filled ? `1px solid ${T.accent}` : `1px solid ${T.lineStrong}`,
    cursor: "pointer",
  };
}

window.SongDetail = SongDetail;
window.SBM_T = T;