// Mobile shared primitives — icons, chrome, shared state, screen container

const MOBILE_W = 390;
const MOBILE_H = 844;

// Icons — filled/stroke matched family for mobile
const MIc = {
  home:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill={p.fill||'none'} stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m3 11 9-8 9 8"/><path d="M5 10v10h14V10"/></svg>,
  tabs:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="13" height="13" rx="2"/><rect x="7" y="7" width="13" height="13" rx="2"/></svg>,
  chat:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 4v-4H6a3 3 0 0 1-3-3z"/></svg>,
  wallet:   (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M3 10h18"/><circle cx="17" cy="15" r="1.5" fill="currentColor"/></svg>,
  calls:    (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5c0 9 6 15 15 15l2-4-5-2-2 2c-3-1-5-3-6-6l2-2-2-5z"/></svg>,
  files:    (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>,
  mesh:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/><path d="M12 7v4M12 11 6 16M12 11l6 5"/></svg>,
  settings: (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>,
  search:   (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>,
  more:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>,
  back:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>,
  close:    (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>,
  plus:     (p={}) => <svg width={p.s||22} height={p.s||22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>,
  shield:   (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v7c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V5z"/></svg>,
  bolt:     (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>,
  bluetooth:(p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m7 7 10 10-5 5V2l5 5L7 17"/></svg>,
  globe:    (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg>,
  mic:      (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>,
  scan:     (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8V5a1 1 0 0 1 1-1h3M20 8V5a1 1 0 0 0-1-1h-3M4 16v3a1 1 0 0 0 1 1h3M20 16v3a1 1 0 0 1-1 1h-3M3 12h18"/></svg>,
  ai:       (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3 2.5 5.5L20 11l-5.5 2.5L12 19l-2.5-5.5L4 11l5.5-2.5z"/></svg>,
  pay:      (p={}) => <svg width={p.s||18} height={p.s||18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M7 7h6a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h7"/></svg>,
};

// Mobile color tokens — theme-responsive via CSS vars on body[data-theme].
// Neutral tokens flip between dark/light (defined in the HTML <style>);
// accents stay constant (they read well as gradient fills in both themes).
const M_BG = 'var(--m-bg)';
const M_SURFACE = 'var(--m-surface)';
const M_SURFACE_2 = 'var(--m-surface-2)';
const M_BORDER = 'var(--m-border)';
const M_BORDER_SOFT = 'var(--m-border-soft)';
const M_FG = 'var(--m-fg)';
const M_FG_MUTED = 'var(--m-fg-muted)';
const M_FG_DIM = 'var(--m-fg-dim)';
const M_TINT = 'var(--m-tint)';
const M_TINT_2 = 'var(--m-tint-2)';
const M_SCRIM = 'var(--m-scrim)';
const M_ACCENT = '#6EE7B7';
const M_ACCENT_B = '#60A5FA';

// ─────────────────────────────────────────────────────────────
// Mobile screen wrapper — provides consistent layout inside iOS frame
// ─────────────────────────────────────────────────────────────
function MobileScreen({ children, style = {}, scroll = true }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      // Ambient aurora wallpaper — gives the glass surfaces something to pick
      // up so they read as translucent, and adds depth behind the content.
      background: 'radial-gradient(420px 340px at 85% -6%, color-mix(in oklch, ' + M_ACCENT_B + ' 22%, transparent), transparent 65%), radial-gradient(380px 420px at -10% 22%, color-mix(in oklch, ' + M_ACCENT + ' 16%, transparent), transparent 60%), radial-gradient(500px 400px at 60% 108%, color-mix(in oklch, #A78BFA 14%, transparent), transparent 65%), ' + M_BG,
      color: M_FG,
      fontFamily: 'Inter, -apple-system, system-ui, sans-serif',
      display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Address bar (compact) — used at top in Option 2, bottom in Option 1 / 3
function MAddressBar({ url = 'ajna://newtab', editing = false, onFocus, dark = true, compact = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: compact ? '8px 10px' : '10px 14px',
      background: M_SURFACE,
      border: '1px solid ' + M_BORDER_SOFT,
      borderRadius: 999,
    }} onClick={onFocus}>
      <span style={{ color: M_FG_DIM }}>{MIc.shield({ s: 14 })}</span>
      <span style={{
        flex: 1, fontSize: 13, color: url === 'ajna://newtab' ? M_FG_MUTED : M_FG,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.01em',
      }}>{url}</span>
      <span style={{ color: M_FG_DIM }}>{MIc.mic({ s: 14 })}</span>
    </div>
  );
}

// Tiny pill button
function MPill({ children, icon, onClick, active, style = {} }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 999,
      background: active ? 'rgba(96,165,250,0.18)' : M_SURFACE,
      border: '1px solid ' + (active ? 'rgba(96,165,250,0.4)' : M_BORDER_SOFT),
      color: active ? M_ACCENT_B : M_FG,
      fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
      ...style,
    }}>
      {icon}
      {children}
    </button>
  );
}

// Favicon/avatar tile (initials or image)
function MTile({ size = 28, bg = M_SURFACE_2, label, color = M_FG, img, radius = 8 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius,
      background: img ? `center/cover no-repeat url(${img})` : bg,
      color, display: 'grid', placeItems: 'center',
      fontSize: size * 0.42, fontWeight: 600,
      fontFamily: 'Geist, Inter, sans-serif', flexShrink: 0,
      letterSpacing: '0.02em',
    }}>{!img && label}</div>
  );
}

// Connection-type chip (Internet / Mesh / BLE / Mediator)
function MConnChip({ type }) {
  const MAP = {
    internet: { label: 'Internet', color: '#60A5FA', icon: MIc.globe({ s: 10 }) },
    mesh:     { label: 'Mesh',     color: '#A78BFA', icon: MIc.mesh({ s: 10 }) },
    ble:      { label: 'BLE',      color: '#22D3EE', icon: MIc.bluetooth({ s: 10 }) },
    mediator: { label: 'Mediator', color: '#FBBF24', icon: MIc.shield({ s: 10 }) },
  };
  const t = MAP[type] || MAP.internet;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      padding: '1px 6px', borderRadius: 4,
      fontSize: 9.5, fontFamily: 'JetBrains Mono, monospace',
      color: t.color, background: t.color + '1F',
      letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600,
    }}>{t.icon}{t.label}</span>
  );
}

// Status bar (iOS-ish, themed dark)
function MStatusBar({ time = '16:13' }) {
  return (
    <div style={{
      height: 52, paddingTop: 16,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '16px 28px 0', flexShrink: 0, position: 'relative', zIndex: 10,
    }}>
      <span style={{
        fontSize: 15, fontWeight: 600, color: M_FG,
        fontFamily: 'SF Pro, -apple-system, system-ui',
      }}>{time}</span>
      {/* dynamic island spacer */}
      <div style={{ width: 100, height: 28, borderRadius: 20, background: '#000', position: 'absolute', left: '50%', transform: 'translateX(-50%)', top: 11 }}/>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', color: M_FG }}>
        <svg width="16" height="11" viewBox="0 0 16 11"><rect x="0" y="7" width="2.5" height="4" rx="0.5" fill="currentColor"/><rect x="4" y="5" width="2.5" height="6" rx="0.5" fill="currentColor"/><rect x="8" y="3" width="2.5" height="8" rx="0.5" fill="currentColor"/><rect x="12" y="0" width="2.5" height="11" rx="0.5" fill="currentColor"/></svg>
        <svg width="15" height="11" viewBox="0 0 15 11"><path d="M7.5 3a8 8 0 0 1 5.3 2l1.2-1.4A10 10 0 0 0 7.5 1 10 10 0 0 0 1 3.6l1.2 1.4A8 8 0 0 1 7.5 3z" fill="currentColor"/><path d="M7.5 6.5a4.5 4.5 0 0 1 3 1.2l1.2-1.4A6.2 6.2 0 0 0 7.5 4.5 6.2 6.2 0 0 0 3.3 6.3l1.2 1.4a4.5 4.5 0 0 1 3-1.2z" fill="currentColor"/><circle cx="7.5" cy="10" r="1.2" fill="currentColor"/></svg>
        <svg width="26" height="12" viewBox="0 0 26 12"><rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke="currentColor" strokeOpacity="0.5"/><rect x="2" y="2" width="12" height="8" rx="1.5" fill="currentColor"/></svg>
      </div>
    </div>
  );
}

// Home indicator
function MHomeIndicator({ light = false }) {
  return (
    <div style={{
      height: 22, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
      paddingBottom: 7, flexShrink: 0,
    }}>
      <div style={{ width: 134, height: 5, borderRadius: 3, background: light ? 'rgba(255,255,255,0.5)' : 'rgba(255,255,255,0.9)' }}/>
    </div>
  );
}

// Device frame (phone bezel)
function MDevice({ children }) {
  return (
    <div style={{
      width: MOBILE_W + 16, height: MOBILE_H + 16,
      borderRadius: 56, padding: 8,
      background: 'linear-gradient(180deg, #1a1c20, #0a0b0d)',
      boxShadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0 2px #222',
      flexShrink: 0,
    }}>
      <div style={{
        width: MOBILE_W, height: MOBILE_H,
        borderRadius: 48, overflow: 'hidden',
        background: M_BG, position: 'relative',
      }}>{children}</div>
    </div>
  );
}

Object.assign(window, {
  MOBILE_W, MOBILE_H,
  MIc, M_BG, M_SURFACE, M_SURFACE_2, M_BORDER, M_BORDER_SOFT,
  M_FG, M_FG_MUTED, M_FG_DIM, M_ACCENT, M_ACCENT_B,
  MobileScreen, MAddressBar, MPill, MTile, MConnChip,
  MStatusBar, MHomeIndicator, MDevice,
});
