/* phone.jsx — stylized phone-screenshot thumbnails (placeholder UIs, scalable) */

/* Share React hooks across babel scripts via window (avoids top-level const collisions) */
window.useState = React.useState;
window.useEffect = React.useEffect;
window.useRef = React.useRef;
window.useMemo = React.useMemo;
window.useCallback = React.useCallback;

const ACC = {
  green: "#5bd06a", blue: "#2eb6f0", pink: "#ff5b96", amber: "#f5b945",
  teal: "#34d3c0", violet: "#9b7cf6", red: "#f0625b", gray: "#3a3a44",
};

function PhoneScreen({ arch, accent = "gray", w = 66 }) {
  const light = accent !== "gray";
  const c = ACC[accent] || ACC.gray;
  const bg = light ? "#f4f4f7" : "#15151c";
  const ink = light ? "#d4d4dc" : "#26262f";       // neutral element
  const ink2 = light ? "#e6e6ec" : "#1d1d25";      // faint element
  const soft = light ? c : "#34343f";              // accent or muted
  const g = Math.max(1.5, w * 0.035);
  const pad = Math.max(3, w * 0.09);

  const bar = (width, h = g * 1.1, col = ink, extra = {}, key) => (
    <div key={key} style={{ width, height: h, borderRadius: 99, background: col, ...extra }} />
  );
  const dot = (s, col = c, key) => (
    <div key={key} style={{ width: s, height: s, borderRadius: 99, background: col, flex: "none" }} />
  );

  const wrap = (children, extra = {}) => (
    <div style={{ position: "absolute", inset: 0, padding: pad, display: "flex", flexDirection: "column", gap: g, ...extra }}>
      {children}
    </div>
  );

  const tabbar = (
    <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-around", alignItems: "center", paddingTop: g, borderTop: `1px solid ${ink2}` }}>
      {[0,1,2,3,4].map(i => dot(g*1.3, i===0 ? c : ink, i))}
    </div>
  );

  let body;
  switch (arch) {
    case "splash":
      body = wrap(
        <div style={{ flex: 1, display: "grid", placeItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: g*1.4 }}>
            <div style={{ width: w*0.32, height: w*0.32, borderRadius: w*0.09, background: c }} />
            {bar(w*0.34, g*1.1, ink)}
          </div>
        </div>, { background: light ? c : bg, justifyContent: "center" }
      );
      if (light) body = wrap(
        <div style={{ flex: 1, display: "grid", placeItems: "center" }}>
          <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:g*1.4 }}>
            <div style={{ width:w*0.34, height:w*0.34, borderRadius:w*0.1, background:"#fff" }} />
            {bar(w*0.34, g, "rgba(255,255,255,.7)")}
          </div>
        </div>, { background: c }
      );
      break;

    case "home":
      body = wrap(<>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          {bar(w*0.22, g*1.3, soft)} <div style={{ display:"flex", gap:g*0.7 }}>{dot(g*1.4,c)}{dot(g*1.4,ink)}</div>
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: g*1.1, paddingTop: g, position:"relative" }}>
          {[0.5,0.28,0.6,0.4,0.55].map((off,i) => (
            <div key={i} style={{ width: w*0.16, height: w*0.16, borderRadius: 99, background: i===0?c:ink, marginLeft: `${(off-0.4)*w*1.4}px`, boxShadow: i===0?`0 0 0 ${g*0.6}px ${light?'rgba(0,0,0,.06)':'#20202a'}`:"none" }} />
          ))}
        </div>
        {tabbar}
      </>);
      break;

    case "list":
      body = wrap(<>
        {bar(w*0.4, g*1.5, soft)}
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.9, flex:1, paddingTop:g*0.4 }}>
          {[0,1,2,3,4].map(i => (
            <div key={i} style={{ display:"flex", alignItems:"center", gap:g }}>
              {dot(g*2.2, i%3===0?c:ink)}
              <div style={{ display:"flex", flexDirection:"column", gap:g*0.5, flex:1 }}>
                {bar("70%", g, ink)} {bar("45%", g*0.8, ink2)}
              </div>
            </div>
          ))}
        </div>
        {tabbar}
      </>);
      break;

    case "lesson":
      body = wrap(<>
        <div style={{ display:"flex", alignItems:"center", gap:g }}>
          {dot(g*1.6, ink)}
          <div style={{ flex:1, height:g*1.1, borderRadius:99, background:ink2, overflow:"hidden" }}>
            <div style={{ width:"55%", height:"100%", background:c }} />
          </div>
          {dot(g*1.6, ACC.red)}
        </div>
        <div style={{ paddingTop:g, display:"flex", flexDirection:"column", gap:g*0.6 }}>
          {bar("80%", g*1.1, ink)} {bar("55%", g, ink2)}
        </div>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:g*0.8, marginTop:"auto", marginBottom:g }}>
          {[0,1,2,3].map(i => <div key={i} style={{ height:w*0.16, borderRadius:g, border:`1px solid ${i===1?c:ink}`, background: i===1?(light?'rgba(91,208,106,.12)':'#1c1c24'):'transparent' }} />)}
        </div>
        <div style={{ height:g*2.6, borderRadius:g, background:c }} />
      </>);
      break;

    case "dialog":
      body = wrap(<>
        <div style={{ position:"absolute", inset:0, background: light?"rgba(20,20,28,.45)":"rgba(0,0,0,.55)" }} />
        <div style={{ position:"absolute", left:pad, right:pad, top:"28%", padding:pad, borderRadius:g*1.5, background: light?"#fff":"#1e1e27", display:"flex", flexDirection:"column", gap:g, alignItems:"center", boxShadow:"0 8px 20px rgba(0,0,0,.4)" }}>
          {dot(w*0.16, soft)}
          {bar("70%", g*1.1, ink)} {bar("85%", g*0.8, ink2)}
          <div style={{ display:"flex", gap:g*0.8, width:"100%", marginTop:g*0.4 }}>
            <div style={{ flex:1, height:g*2.4, borderRadius:g, background:c }} />
            <div style={{ flex:1, height:g*2.4, borderRadius:g, border:`1px solid ${ink}` }} />
          </div>
        </div>
      </>, { padding:0 });
      break;

    case "profile":
      body = wrap(<>
        <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:g*0.7, paddingTop:g }}>
          <div style={{ width:w*0.24, height:w*0.24, borderRadius:99, background:c }} />
          {bar(w*0.32, g*1.1, ink)}
        </div>
        <div style={{ display:"flex", justifyContent:"space-around", padding:`${g}px 0`, borderTop:`1px solid ${ink2}`, borderBottom:`1px solid ${ink2}`, marginTop:g*0.4 }}>
          {[0,1,2].map(i => <div key={i} style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:g*0.4 }}>{bar(g*3,g*1.3, i===1?c:ink)}{bar(g*2.4,g*0.7,ink2)}</div>)}
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.8, flex:1, paddingTop:g*0.6 }}>
          {[0,1,2].map(i => <div key={i} style={{ display:"flex", alignItems:"center", gap:g }}>{dot(g*1.8, ink)}{bar("60%", g, ink2)}</div>)}
        </div>
        {tabbar}
      </>);
      break;

    case "store":
      body = wrap(<>
        {bar(w*0.36, g*1.5, soft)}
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:g*0.8, flex:1, paddingTop:g*0.4 }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{ borderRadius:g, border:`1px solid ${ink2}`, padding:g*0.8, display:"flex", flexDirection:"column", gap:g*0.5, background: i===0?(light?'rgba(155,124,246,.10)':'#1b1b24'):'transparent' }}>
              {dot(g*2.4, i===0?c:ink)} {bar("80%", g*0.8, ink)} <div style={{ height:g*1.8, borderRadius:99, background:i===0?c:ink2, marginTop:"auto" }} />
            </div>
          ))}
        </div>
        {tabbar}
      </>);
      break;

    case "settings":
      body = wrap(<>
        {bar(w*0.34, g*1.4, ink)}
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.9, flex:1, paddingTop:g*0.4 }}>
          {[0,1,2,3,4].map(i => (
            <div key={i} style={{ display:"flex", alignItems:"center", justifyContent:"space-between", paddingBottom:g*0.6, borderBottom:`1px solid ${ink2}` }}>
              <div style={{ display:"flex", alignItems:"center", gap:g*0.8 }}>{dot(g*1.6, ink)}{bar(w*0.3, g*0.9, ink)}</div>
              <div style={{ width:g*3, height:g*1.6, borderRadius:99, background: i%2===0?c:ink2 }} />
            </div>
          ))}
        </div>
      </>);
      break;

    case "reward":
      body = wrap(<>
        <div style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:g*1.2, position:"relative" }}>
          {[[-0.3,-0.2,c],[0.32,-0.1,ACC.amber],[-0.28,0.28,ACC.blue],[0.3,0.3,ACC.pink]].map(([x,y,col],i)=>(
            <div key={i} style={{ position:"absolute", left:`${50+x*70}%`, top:`${42+y*70}%`, width:g*1.1, height:g*1.1, borderRadius:2, background:col, transform:`rotate(${i*40}deg)` }} />
          ))}
          <div style={{ width:w*0.3, height:w*0.3, borderRadius:99, background:c, boxShadow:`0 0 0 ${g}px ${light?'rgba(91,208,106,.16)':'#20202a'}` }} />
          {bar(w*0.4, g*1.2, ink)} {bar(w*0.28, g*0.8, ink2)}
        </div>
        <div style={{ height:g*2.6, borderRadius:g, background:c }} />
      </>);
      break;

    case "leaderboard":
      body = wrap(<>
        {bar(w*0.42, g*1.4, soft)}
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.7, flex:1, paddingTop:g*0.4 }}>
          {[0,1,2,3,4].map(i => (
            <div key={i} style={{ display:"flex", alignItems:"center", gap:g*0.8, padding:`${g*0.4}px ${g*0.6}px`, borderRadius:g*0.7, background: i===1?(light?'rgba(245,185,69,.14)':'#1c1c24'):'transparent' }}>
              {bar(g*1.4, g*1.4, i<3?ACC.amber:ink, { borderRadius:3 })}
              {dot(g*1.8, ink)}
              {bar("40%", g*0.9, ink)}
              <div style={{ marginLeft:"auto" }}>{bar(g*2.4, g*0.9, i===1?c:ink2)}</div>
            </div>
          ))}
        </div>
      </>);
      break;

    case "notes":
      body = wrap(<>
        {bar(w*0.4, g*1.5, soft)}
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.7, paddingTop:g*0.4 }}>
          {["95%","80%","88%","60%"].map((wd,i)=>bar(wd, g*0.8, i%4===2?soft:ink2, {}, i))}
        </div>
        <div style={{ borderRadius:g, border:`1px solid ${soft}`, background: light?'rgba(46,182,240,.08)':'#191922', padding:g*0.8, display:"flex", flexDirection:"column", gap:g*0.5, marginTop:g*0.4 }}>
          {bar("70%", g*0.9, soft)}{bar("90%", g*0.7, ink2)}
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:g*0.7, marginTop:g*0.4 }}>
          {["85%","70%"].map((wd,i)=>bar(wd, g*0.8, ink2, {}, i))}
        </div>
      </>);
      break;

    default:
      body = wrap(<div style={{ flex:1 }} />);
  }

  return (
    <div style={{ position: "absolute", inset: 0, background: bg, overflow: "hidden" }}>
      {/* status bar */}
      <div style={{ position:"absolute", top:0, left:0, right:0, height: Math.max(4, w*0.07), display:"flex", alignItems:"center", justifyContent:"space-between", padding:`0 ${pad}px`, zIndex:5, pointerEvents:"none" }}>
        <div style={{ width:w*0.12, height:Math.max(1,w*0.012), borderRadius:99, background: light?"#1d1d24":"#3a3a44" }} />
        <div style={{ width:w*0.1, height:Math.max(1,w*0.012), borderRadius:99, background: light?"#1d1d24":"#3a3a44" }} />
      </div>
      <div style={{ position:"absolute", inset:0, paddingTop: Math.max(4, w*0.07) }}>{body}</div>
    </div>
  );
}

/* Phone frame wrapper — 有真实截图 shot 时显示截图，否则回退风格化占位 */
function Phone({ arch, accent = "gray", w = 66, active = false, dim = false, shot = null, style = {} }) {
  const h = Math.round(w * 2.04);
  const r = Math.max(6, w * 0.13);
  // 截图键经 CARTO.asset 解析：本地 → /maps/...，线上静态 → R2 base/maps/...
  const src = shot && window.CARTO && CARTO.asset ? CARTO.asset(shot) : shot;
  return (
    <div className={active ? "phone-active" : ""} style={{
      width: w, height: h, borderRadius: r, position: "relative", overflow: "hidden",
      background: "#000",
      border: `1px solid ${active ? "var(--acc-hi)" : "rgba(255,255,255,.14)"}`,
      boxShadow: active
        ? "0 0 0 2px var(--acc), 0 0 28px 5px rgba(139,124,246,.6), 0 10px 30px -8px rgba(0,0,0,.7)"
        : "0 6px 18px -6px rgba(0,0,0,.6)",
      opacity: dim ? 0.5 : 1,
      transition: "opacity .3s, border-color .2s, box-shadow .2s",
      ...style,
    }}>
      <div style={{ position: "absolute", inset: Math.max(1.5, w*0.022), borderRadius: r * 0.8, overflow: "hidden", background: "#000" }}>
        {src
          ? <img src={src} alt="" draggable={false}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              onError={(e) => { e.currentTarget.style.display = "none"; }} />
          : <PhoneScreen arch={arch} accent={accent} w={w} />}
      </div>
    </div>
  );
}

/* Real App icon — renders the App Store artwork when available, else a colored fallback. */
function AppIcon({ icon = {}, s = 44, radius = 0.26, fontScale = 1, style = {} }) {
  const base = {
    width: s, height: s, borderRadius: s * radius, flex: "none",
    boxShadow: "inset 0 0 0 1px rgba(255,255,255,.16)", overflow: "hidden",
    background: icon.bg || "var(--raised)", ...style,
  };
  if (icon.url) {
    return <img src={icon.url} alt="" draggable={false}
      style={{ ...base, objectFit: "cover", display: "block" }}
      onError={(e) => { e.currentTarget.style.visibility = "hidden"; }} />;
  }
  const label = icon.fg || icon.t || "?";
  const long = (label || "").length > 1 && !/\p{Emoji}/u.test(label || "");
  return (
    <div style={{ ...base, display: "grid", placeItems: "center", color: "#fff",
      fontFamily: "var(--mono)", fontWeight: 700, lineHeight: 1,
      fontSize: (long ? s * 0.34 : s * 0.46) * fontScale }}>{label}</div>
  );
}

Object.assign(window, { Phone, PhoneScreen, ACC, AppIcon });