// shared.jsx — tokens + small atoms shared by both screen options
// Exports to window: TK, Thumb, Icon

const TK = {
  bg: '#0B0B0F',
  bg2: '#100F16',
  card: 'rgba(255,255,255,0.045)',
  cardSolid: '#16151D',
  line: 'rgba(255,255,255,0.09)',
  line2: 'rgba(255,255,255,0.06)',
  text: '#F4F3F8',
  muted: 'rgba(244,243,248,0.56)',
  faint: 'rgba(244,243,248,0.34)',
  accent: '#7C5CFF',
  accent2: '#9B82FF',
  accentDim: 'rgba(124,92,255,0.16)',
  ok: '#46D6A6',
  display: "'Space Grotesk', system-ui, sans-serif",
  body: "'Plus Jakarta Sans', system-ui, sans-serif",
  mono: "'Space Mono', ui-monospace, monospace"
};

// ── line-icon set (1.8px stroke, currentColor) ────────────────
function Icon({ name, size = 20, color = 'currentColor', stroke = 1.8, style = {} }) {
  const p = { fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    copy: <><rect x="9" y="9" width="11" height="11" rx="2.5" {...p} /><path d="M5 15V6a2 2 0 012-2h8" {...p} /></>,
    check: <path d="M5 12.5l4.5 4.5L19 7" {...p} />,
    plus: <path d="M12 5v14M5 12h14" {...p} />,
    image: <><rect x="3.5" y="4.5" width="17" height="15" rx="3" {...p} /><circle cx="9" cy="10" r="1.7" {...p} /><path d="M4.5 17l5-4.5 4 3.5 3-2.5 3.5 3" {...p} /></>,
    link: <><path d="M9 13a4 4 0 005.7.3l2.6-2.6a4 4 0 00-5.7-5.7L10.2 6.4" {...p} /><path d="M15 11a4 4 0 00-5.7-.3l-2.6 2.6a4 4 0 005.7 5.7L13.8 17.6" {...p} /></>,
    arrow: <><path d="M5 12h13" {...p} /><path d="M13 6l6 6-6 6" {...p} /></>,
    logout: <><path d="M14 7V5a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2h6a2 2 0 002-2v-2" {...p} /><path d="M10 12h10m0 0l-3-3m3 3l-3 3" {...p} /></>,
    bolt: <path d="M13 3L5 13h6l-1 8 8-10h-6l1-8z" {...p} />,
    chevR: <path d="M9 6l6 6-6 6" {...p} data-comment-anchor="9e5bcb0d0f-path-35-13" />,
    tag: <><path d="M4 9.5V5a1 1 0 011-1h4.5a1 1 0 01.7.3l9 9a1 1 0 010 1.4l-4.5 4.5a1 1 0 01-1.4 0l-9-9a1 1 0 01-.3-.7z" {...p} /><circle cx="8" cy="8" r="1.3" fill={color} stroke="none" /></>,
    spark: <path d="M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6L12 4z" {...p} />
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>{paths[name]}</svg>);

}

// ── screenshot thumbnail placeholder (looks like a mini app screen) ──
// Deterministic skeleton; selected check overlay in accent.
const THUMB_HUES = [266, 210, 168, 38, 330, 248];
function Thumb({ i = 0, label, selected = true, radius = 12, showCheck = true }) {
  const hue = THUMB_HUES[i % THUMB_HUES.length];
  const head = `hsl(${hue} 52% 78%)`;
  const headDeep = `hsl(${hue} 48% 64%)`;
  const block = `hsl(${hue} 30% 90%)`;
  const lineC = `hsl(${hue} 22% 84%)`;
  // vary the skeleton a touch per index
  const tall = i % 2 === 0;
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: '1 / 1.18',
      borderRadius: radius, overflow: 'hidden',
      background: 'linear-gradient(160deg,#FCFCFE,#EEEDF5)',
      boxShadow: '0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(0,0,0,0.05)'
    }}>
      {/* faux status row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 7px 0' }}>
        <div style={{ width: 14, height: 3, borderRadius: 2, background: lineC }} />
        <div style={{ width: 10, height: 3, borderRadius: 2, background: lineC }} />
      </div>
      {/* header block */}
      <div style={{ margin: '6px 7px 0', height: tall ? 26 : 20, borderRadius: 5,
        background: `linear-gradient(135deg,${head},${headDeep})` }} />
      {/* skeleton content */}
      <div style={{ padding: '7px 7px 0', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ width: '78%', height: 4, borderRadius: 3, background: lineC }} />
        <div style={{ width: '55%', height: 4, borderRadius: 3, background: lineC }} />
        <div style={{ marginTop: 3, display: 'flex', gap: 4 }}>
          <div style={{ width: 16, height: 16, borderRadius: 4, background: block }} />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3, paddingTop: 2 }}>
            <div style={{ width: '70%', height: 3.5, borderRadius: 2, background: lineC }} />
            <div style={{ width: '45%', height: 3.5, borderRadius: 2, background: lineC }} />
          </div>
        </div>
      </div>
      {/* index label */}
      <div style={{ position: 'absolute', left: 6, bottom: 5,
        fontFamily: TK.mono, fontSize: 7.5, letterSpacing: 0.2,
        color: 'rgba(0,0,0,0.34)' }}>{label || `IMG_04${21 + i}`}</div>
      {/* selected check */}
      {selected && showCheck &&
      <div style={{ position: 'absolute', right: 5, bottom: 5,
        width: 16, height: 16, borderRadius: 99, background: TK.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 1px 4px rgba(124,92,255,0.5)' }}>
          <Icon name="check" size={11} color="#fff" stroke={2.6} />
        </div>
      }
    </div>);

}

Object.assign(window, { TK, Thumb, Icon });