// Conversion progress modal ("Converting with AI"). Refined, vendor-neutral. Reuses NT theme.

const VT = window.NT;
const VR = window.ET_R || 12;

function ConversionProgress() {
  const Status = window.IPadStatus;
  const steps = [
    { t:"Scanning 3 pages", state:"done" },
    { t:"Reading chords & lyrics", state:"active" },
    { t:"Building sections & structure", state:"pending" },
  ];
  return (
    <div style={{ width:"100%", height:"100%", background:VT.bg, color:VT.ink, position:"relative", overflow:"hidden", fontFamily:VT.fontUI }}>
      <Status T={VT} dark/>
      <style>{`
        @keyframes sbmSpin { to { transform: rotate(360deg); } }
        @keyframes sbmSweep { 0%{transform:translateX(-110%);} 100%{transform:translateX(280%);} }
        @keyframes sbmPulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }
      `}</style>

      {/* faint chart behind */}
      <div style={{ position:"absolute", inset:0, opacity:0.14, padding:"40px 44px" }}>
        <div style={{ fontFamily:VT.fontDisplay, fontSize:40, color:VT.ink, lineHeight:0.95 }}>Nothing Is Impossible</div>
        <div style={{ fontFamily:VT.fontUI, fontSize:13, color:VT.ink, marginTop:8 }}>Anonymous · Planetshakers</div>
      </div>
      <div style={{ position:"absolute", inset:0, background:"rgba(6,6,7,0.7)", backdropFilter:"blur(3px)" }}/>

      {/* modal */}
      <div style={{ position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", padding:"40px" }}>
        <div style={{ width:"100%", maxWidth:460, background:VT.bgRaise, border:`1px solid ${VT.lineStrong}`, borderRadius:20, boxShadow:"0 40px 90px rgba(0,0,0,0.65)", padding:"40px 38px 32px", textAlign:"center" }}>

          {/* spinner ring */}
          <div style={{ width:64, height:64, margin:"0 auto 26px", position:"relative" }}>
            <div style={{ position:"absolute", inset:0, borderRadius:"50%", background:`conic-gradient(${VT.teal} 0deg, ${VT.teal} 90deg, rgba(95,194,172,0.12) 90deg, rgba(95,194,172,0.12) 360deg)`, animation:"sbmSpin 0.9s linear infinite", WebkitMask:"radial-gradient(closest-side, transparent 70%, #000 71%)", mask:"radial-gradient(closest-side, transparent 70%, #000 71%)" }}/>
            <div style={{ position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center" }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill={VT.teal}><path d="M12 2l1.7 5.6L19 9l-5.3 1.4L12 16l-1.7-5.6L5 9l5.3-1.4z"/><circle cx="18.5" cy="17.5" r="1.7"/></svg>
            </div>
          </div>

          <div style={{ fontFamily:VT.fontUI, fontSize:11, fontWeight:800, letterSpacing:"0.28em", textTransform:"uppercase", color:VT.teal, marginBottom:10 }}>Converting</div>
          <div style={{ margin:0, fontFamily:VT.fontDisplay, fontWeight:400, fontSize:38, lineHeight:1, color:VT.ink }}>Reading your chart…</div>

          {/* indeterminate bar */}
          <div style={{ height:4, borderRadius:999, background:"rgba(95,194,172,0.14)", overflow:"hidden", margin:"24px 0 26px", position:"relative" }}>
            <div style={{ position:"absolute", top:0, bottom:0, width:"34%", borderRadius:999, background:VT.teal, animation:"sbmSweep 1.4s ease-in-out infinite" }}/>
          </div>

          {/* steps */}
          <div style={{ display:"flex", flexDirection:"column", gap:14, textAlign:"left" }}>
            {steps.map((s,i)=>(
              <div key={i} style={{ display:"flex", alignItems:"center", gap:13 }}>
                <span style={{ width:22, height:22, borderRadius:999, flexShrink:0, display:"inline-flex", alignItems:"center", justifyContent:"center",
                  background: s.state==="done" ? VT.teal : "transparent",
                  border: s.state==="done" ? "none" : `1.5px solid ${s.state==="active"?VT.teal:VT.lineStrong}`,
                  animation: s.state==="active" ? "sbmPulse 1.2s ease-in-out infinite" : "none" }}>
                  {s.state==="done" && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={VT.bg} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>}
                  {s.state==="active" && <span style={{ width:7, height:7, borderRadius:999, background:VT.teal }}/>}
                </span>
                <span style={{ fontFamily:VT.fontUI, fontSize:15, fontWeight: s.state==="pending"?500:600,
                  color: s.state==="pending" ? VT.inkMuted : VT.ink }}>{s.t}</span>
              </div>
            ))}
          </div>

          <div style={{ fontFamily:VT.fontUI, fontSize:13, color:VT.inkMuted, margin:"26px 0 0" }}>This usually takes a few seconds.</div>
          <div style={{ marginTop:20 }}>
            <span style={{ fontFamily:VT.fontUI, fontSize:12, fontWeight:800, letterSpacing:"0.16em", textTransform:"uppercase", color:VT.inkSoft, border:`1px solid ${VT.lineStrong}`, borderRadius:VR, padding:"11px 20px", display:"inline-block" }}>Cancel</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ConversionProgress = ConversionProgress;