// Refined nav screens (part A): shared chrome + Library + Folders.
// Same Studio-Dark language as the detail/performance polish, with every control
// rounded (pills + soft-radius buttons) to match.

const NT = {
  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", teal:"#5FC2AC", accent:"#E8A87C",
  paper:"#EFE9DC",
  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',
};

const KEYCOLOR = { C:"#E2965F", D:"#E8B463", E:"#F0D080", F:"#86D49E", G:"#5FC2AC", A:"#9BB8E8", B:"#C49BE6" };
const keyColor = k => KEYCOLOR[(k||"C").charAt(0).toUpperCase()] || NT.accent;
const FOLDERCOLOR = { Christmas:"#E8B463", Folk:"#86D49E", Originals:"#C49BE6", Rock:"#E89090", "Wedding sets":"#E8C463", Worship:"#7BC4E8" };

const NAV = [
  { id:"library",  label:"Library",  icon:(c)=><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={c} 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> },
  { id:"folders",  label:"Folders",  icon:(c)=><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/></svg> },
  { id:"setlists", label:"Setlists", icon:(c)=><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="7" y1="9" x2="17" y2="9"/><line x1="7" y1="13" x2="17" y2="13"/></svg> },
  { id:"settings", label:"Settings", icon:(c)=><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3.2"/><path d="M19 12a7 7 0 0 0-.12-1.3l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2.3-1.3L13.8 2h-3.6l-.4 2.5a7 7 0 0 0-2.3 1.3l-2.3-1-2 3.4 2 1.5A7 7 0 0 0 5 12a7 7 0 0 0 .12 1.3l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2.3 1.3l.4 2.5h3.6l.4-2.5a7 7 0 0 0 2.3-1.3l2.3 1 2-3.4-2-1.5A7 7 0 0 0 19 12z"/></svg> },
];

function Wordmark() {
  const G = window.SBM_LOGOS && window.SBM_LOGOS.Glyph;
  return (
    <div style={{ display:"flex", alignItems:"center", gap:12 }}>
      {G && <G size={28} fg={NT.ink} accent={NT.chord} strokeWidth={26} stringWidth={6}/>}
      <span style={{ fontFamily:NT.fontDisplay, fontStyle:"italic", fontSize:22, letterSpacing:"-0.01em", whiteSpace:"nowrap" }}>Songbook Master</span>
    </div>
  );
}

function TabNav({ active }) {
  return (
    <nav style={{ display:"flex", gap:10, padding:"0 30px 14px", borderBottom:`1px solid ${NT.lineStrong}` }}>
      {NAV.map(it => {
        const on = it.id === active;
        return (
          <span key={it.id} style={{
            display:"inline-flex", alignItems:"center", gap:9,
            padding:"9px 17px", borderRadius:12,
            fontFamily:NT.fontUI, fontSize:13, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase",
            color: on ? NT.bg : NT.inkMuted,
            background: on ? NT.accent : "transparent",
          }}>{it.icon(on ? NT.bg : NT.inkMuted)}{it.label}</span>
        );
      })}
    </nav>
  );
}

function SortToggle({ a, b }) {
  return (
    <div style={{ display:"flex", alignItems:"center", gap:12 }}>
      <span style={{ fontFamily:NT.fontUI, fontSize:10.5, fontWeight:800, letterSpacing:"0.22em", textTransform:"uppercase", color:NT.inkMuted }}>Sort by</span>
      <div style={{ display:"flex", padding:4, borderRadius:12, background:NT.bgRaise, border:`1px solid ${NT.lineStrong}` }}>
        {[a,b].map((t,i)=>(
          <span key={t} style={{
            padding:"7px 14px", borderRadius:9,
            fontFamily:NT.fontUI, fontSize:11.5, fontWeight:800, letterSpacing:"0.12em", textTransform:"uppercase",
            color: i===0 ? NT.bg : NT.inkSoft,
            background: i===0 ? NT.ink : "transparent",
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function ActionPill({ icon, label, primary }) {
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", gap:10, whiteSpace:"nowrap",
      padding:"13px 22px", borderRadius:13,
      fontFamily:NT.fontUI, fontSize:13, fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase",
      background: primary ? NT.accent : NT.paper,
      color:"#1A1714",
      boxShadow:"0 12px 30px rgba(0,0,0,0.4)",
    }}>{icon}{label}</span>
  );
}

function FloatActions({ children }) {
  return (
    <div style={{ position:"absolute", right:30, bottom:28, display:"flex", gap:14, zIndex:5 }}>{children}</div>
  );
}

// soft-rounded ghost button (replaces the old sharp EDIT box)
function EditBtn() {
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", gap:8,
      padding:"9px 16px", borderRadius:11, border:`1px solid ${NT.lineStrong}`,
      fontFamily:NT.fontUI, fontSize:12, fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase", color:NT.inkSoft,
    }}>
      <svg width="12" height="12" 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
    </span>
  );
}
function TrashBtn() {
  return (
    <span style={{
      display:"inline-flex", alignItems:"center", justifyContent:"center", width:42, height:42, borderRadius:11,
      border:`1px solid rgba(226,150,95,0.4)`, color:NT.chord,
    }}>
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/></svg>
    </span>
  );
}

function Shell({ active, kicker, title, titleItalic, sort, children, actions }) {
  const Status = window.IPadStatus;
  return (
    <div style={{ width:"100%", height:"100%", background:NT.bg, color:NT.ink, display:"flex", flexDirection:"column", overflow:"hidden", fontFamily:NT.fontUI, position:"relative" }}>
      <Status T={NT} dark/>
      <header style={{ flexShrink:0, padding:"10px 30px 0" }}>
        <div style={{ paddingBottom:14 }}><Wordmark/></div>
        <div style={{ borderTop:`1px solid ${NT.line}`, paddingTop:14 }}/>
      </header>
      <TabNav active={active}/>
      <div style={{ flexShrink:0, padding:"24px 30px 18px", display:"flex", alignItems:"flex-end", gap:20 }}>
        <div style={{ flex:1 }}>
          {kicker && <div style={{ fontFamily:NT.fontUI, fontSize:11, fontWeight:800, letterSpacing:"0.26em", textTransform:"uppercase", color:NT.chord, marginBottom:10 }}>{kicker}</div>}
          <div style={{ margin:0, fontFamily:NT.fontDisplay, fontWeight:400, fontSize:54, lineHeight:0.95, letterSpacing:"-0.02em" }}>
            {title} {titleItalic && <span style={{ fontStyle:"italic" }}>{titleItalic}</span>}
          </div>
        </div>
        {sort}
      </div>
      <div style={{ flex:1, overflowY:"auto", padding:"4px 30px 110px" }}>{children}</div>
      {actions && <FloatActions>{actions}</FloatActions>}
    </div>
  );
}

const ICON = {
  search:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#1A1714" strokeWidth="2.2" strokeLinecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="20" y2="20"/></svg>,
  plus:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#1A1714" strokeWidth="2.4" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
  importI:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#1A1714" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M5 20h14"/></svg>,
};

const LIB_SONGS = [
  { n:"001", t:"Amazing Grace", a:"John Newton", k:"G", bpm:80 },
  { n:"002", t:"Be Thou My Vision", a:"Traditional Irish", k:"Eb", bpm:72 },
  { n:"003", t:"Canon in D", a:"Johann Pachelbel", k:"D", bpm:64 },
  { n:"004", t:"Greensleeves", a:"Traditional", k:"Em", bpm:70 },
  { n:"005", t:"Holy, Holy, Holy", a:"Reginald Heber", k:"D", bpm:92 },
  { n:"006", t:"House of the Rising Sun", a:"Traditional", k:"Am", bpm:76 },
  { n:"007", t:"It Is Well With My Soul", a:"Horatio Spafford", k:"C", bpm:76 },
  { n:"008", t:"Joy to the World", a:"Isaac Watts", k:"D", bpm:96 },
];

function Library() {
  return (
    <Shell active="library" title="Your" titleItalic="library"
      sort={<SortToggle a="Title ↑" b="Artist"/>}
      actions={<><ActionPill icon={ICON.search} label="Search"/><ActionPill icon={ICON.importI} label="Import"/><ActionPill icon={ICON.plus} label="New Song" primary/></>}>
      <div style={{ marginBottom:6, display:"flex", gap:9, flexWrap:"wrap" }}>
        {["All","Worship","Folk","Rock","Originals"].map((c,i)=>(
          <span key={c} style={{
            padding:"8px 15px", borderRadius:11,
            fontFamily:NT.fontUI, fontSize:12, fontWeight:800, letterSpacing:"0.14em", textTransform:"uppercase",
            color: i===0 ? NT.bg : NT.inkSoft,
            background: i===0 ? NT.ink : "transparent",
            border: i===0 ? `1px solid ${NT.ink}` : `1px solid ${NT.line}`,
          }}>{c}</span>
        ))}
      </div>
      <div style={{ marginTop:14 }}>
        {LIB_SONGS.map((s,i)=>(
          <div key={s.n} style={{ display:"flex", alignItems:"center", gap:18, padding:"16px 0", borderTop: i===0 ? "none" : `1px solid ${NT.line}` }}>
            <span style={{ fontFamily:NT.fontMono, fontSize:12, color:NT.inkMuted, width:34 }}>{s.n}</span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontFamily:NT.fontDisplay, fontSize:27, lineHeight:1.05 }}>{s.t}</div>
              <div style={{ fontFamily:NT.fontUI, fontSize:13, color:NT.inkMuted, marginTop:2 }}>{s.a}</div>
            </div>
            <span style={{ fontFamily:NT.fontMono, fontWeight:700, fontSize:17, color:keyColor(s.k), width:40, textAlign:"center" }}>{s.k}</span>
            <span style={{ fontFamily:NT.fontMono, fontSize:14, color:NT.inkMuted, width:78, textAlign:"right" }}>{s.bpm} bpm</span>
            <TrashBtn/>
          </div>
        ))}
      </div>
    </Shell>
  );
}

const FOLDERS = [
  { n:"01", name:"Christmas", count:0 },
  { n:"02", name:"Folk", count:3 },
  { n:"03", name:"Originals", count:0 },
  { n:"04", name:"Rock", count:6 },
  { n:"05", name:"Wedding sets", count:0 },
  { n:"06", name:"Worship", count:3 },
];

function Folders() {
  return (
    <Shell active="folders" kicker="06 Collections" title="Your" titleItalic="folders"
      sort={<SortToggle a="Title ↑" b="Songs"/>}
      actions={<><ActionPill icon={ICON.search} label="Search"/><ActionPill icon={ICON.plus} label="New Folder" primary/></>}>
      <div style={{ marginTop:6 }}>
        {FOLDERS.map((f,i)=>(
          <div key={f.n} style={{ display:"flex", alignItems:"center", gap:18, padding:"18px 0", borderTop: i===0 ? "none" : `1px solid ${NT.line}` }}>
            <span style={{ fontFamily:NT.fontMono, fontSize:12, color:NT.inkMuted, width:30 }}>{f.n}</span>
            <span style={{ flex:1, fontFamily:NT.fontDisplay, fontSize:30, color:FOLDERCOLOR[f.name]||NT.ink }}>{f.name}</span>
            <span style={{ fontFamily:NT.fontUI, fontSize:12, fontWeight:700, letterSpacing:"0.14em", textTransform:"uppercase", color:NT.inkMuted }}>{f.count ? `${f.count} songs` : "No songs yet"}</span>
            <EditBtn/>
            <TrashBtn/>
          </div>
        ))}
      </div>
    </Shell>
  );
}

Object.assign(window, { NT, Library, Folders, Shell, SortToggle, ActionPill, EditBtn, TrashBtn, ICON, keyColor });