// Shared atoms used by both directions

const { useState, useMemo, useEffect } = React;

// A subtle striped placeholder block. Optional label.
function Placeholder({ label, dark, ratio, height, accent, style, children, rounded, bordered }) {
  const aspect = ratio || (height ? null : '4 / 3');
  const bg = dark ? '#11202E' : '#E1E9F0';
  const fg = dark ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.55)';
  return (
    <div
      className={dark ? 'ae-stripes-light' : 'ae-stripes'}
      style={{
        background: bg,
        aspectRatio: aspect,
        height: height,
        position: 'relative',
        overflow: 'hidden',
        ...(rounded ? { borderRadius: rounded } : {}),
        ...(bordered ? { border: `1px solid rgba(0,0,0,0.10)` } : {}),
        ...style,
      }}
    >
      {accent && (
        <div style={{ position:'absolute', inset:0, background:accent, mixBlendMode:'multiply', opacity:.06 }} />
      )}
      {label && (
        <div className="ae-mono" style={{
          position:'absolute', left:14, bottom:12,
          fontSize:10, letterSpacing:'.08em', textTransform:'uppercase',
          color: fg,
        }}>
          {label}
        </div>
      )}
      {children}
    </div>
  );
}

// Stock pill (used in product cards / detail)
function StockPill({ status, theme }) {
  const colors = {
    'In stock':   { dot: '#1F7A3D', bg: 'rgba(31,122,61,.08)',  fg: '#1F7A3D' },
    'Low stock':  { dot: '#B07B16', bg: 'rgba(176,123,22,.08)', fg: '#B07B16' },
    'Pre-order':  { dot: '#0E1A2B', bg: 'rgba(14,26,43,.08)',   fg: '#0E1A2B' },
  };
  const c = colors[status] || colors['In stock'];
  return (
    <span className="ae-mono" style={{
      display:'inline-flex', alignItems:'center', gap:6,
      fontSize:9.5, letterSpacing:'.06em', textTransform:'uppercase',
      padding:'4px 8px', borderRadius:999,
      background:c.bg, color:c.fg,
    }}>
      <span style={{ width:5, height:5, borderRadius:5, background:c.dot }} />
      {status}
    </span>
  );
}

// Small chevron tab nav for switching pages within an artboard.
function PageTabs({ pages, active, onChange, theme }) {
  const ink   = theme.ink;
  const muted = theme.muted;
  return (
    <div style={{
      display:'flex', gap:0, borderTop:`1px solid ${theme.line}`,
      borderBottom:`1px solid ${theme.line}`,
      padding:'0 32px', background: theme.bg,
      position:'sticky', top:0, zIndex:5,
    }}>
      {pages.map((p) => {
        const on = p.id === active;
        return (
          <button
            key={p.id}
            onClick={() => onChange(p.id)}
            className="ae-mono"
            style={{
              appearance:'none', border:0, background:'transparent',
              padding:'12px 14px', cursor:'pointer',
              fontSize:10, letterSpacing:'.1em', textTransform:'uppercase',
              color: on ? ink : muted,
              borderBottom: on ? `2px solid ${theme.accent}` : '2px solid transparent',
              marginBottom:-1,
              fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            }}
          >
            {p.label}
          </button>
        );
      })}
    </div>
  );
}

// Tiny SVG glyph for cert blocks
function CertGlyph({ code, color }) {
  return (
    <div style={{
      width:36, height:36, border:`1px solid ${color}`,
      display:'flex', alignItems:'center', justifyContent:'center',
      borderRadius:2,
    }}>
      <span className="ae-mono" style={{ fontSize:10, letterSpacing:'.05em', color }}>{code}</span>
    </div>
  );
}

window.Placeholder = Placeholder;
window.StockPill = StockPill;
window.PageTabs = PageTabs;
window.CertGlyph = CertGlyph;