// design-system.jsx — tokens + shared atoms for the Pacer prototype

const PACER = {
  // surfaces
  bg: '#0a0c0a',
  surface: '#13161300',  // transparent
  elevated: '#161916',
  card: '#191c19',
  inset: '#0f120f',
  border: 'rgba(255,255,255,0.07)',
  borderStrong: 'rgba(255,255,255,0.12)',

  // text
  text: '#f1f3ee',
  textDim: '#a0a59f',
  textMute: '#6b716a',
  textSubtle: '#4d524c',

  // accents
  lime: '#d4ff3a',          // primary accent / live / CTA
  limeInk: '#0a0c0a',       // text on lime
  limeSoft: 'rgba(212,255,58,0.14)',
  limeBorder: 'rgba(212,255,58,0.35)',

  magenta: '#ff5fa2',       // women-only / safety
  magentaSoft: 'rgba(255,95,162,0.15)',
  magentaBorder: 'rgba(255,95,162,0.4)',

  amber: '#ffb547',         // pending / heads-up
  amberSoft: 'rgba(255,181,71,0.13)',

  // type
  font: '"Space Grotesk", -apple-system, system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, "SF Mono", monospace',
};

window.PACER = PACER;

// ─────────────────────────────────────────────────────────────
// Atoms
// ─────────────────────────────────────────────────────────────

function Chip({ children, tone = 'default', size = 'sm', style = {} }) {
  const tones = {
    default:  { bg: 'rgba(255,255,255,0.06)', fg: PACER.textDim, bd: PACER.border },
    lime:     { bg: PACER.limeSoft, fg: PACER.lime, bd: PACER.limeBorder },
    magenta:  { bg: PACER.magentaSoft, fg: PACER.magenta, bd: PACER.magentaBorder },
    amber:    { bg: PACER.amberSoft, fg: PACER.amber, bd: 'rgba(255,181,71,0.3)' },
    solid:    { bg: PACER.lime, fg: PACER.limeInk, bd: PACER.lime },
    ghost:    { bg: 'transparent', fg: PACER.textDim, bd: PACER.border },
  };
  const t = tones[tone] || tones.default;
  const sizes = {
    xs: { fs: 10.5, py: 3, px: 7, h: 18, gap: 4 },
    sm: { fs: 11.5, py: 4, px: 8, h: 22, gap: 5 },
    md: { fs: 13, py: 6, px: 10, h: 28, gap: 6 },
  };
  const s = sizes[size];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: s.gap,
      height: s.h, padding: `0 ${s.px}px`,
      background: t.bg, color: t.fg,
      border: `1px solid ${t.bd}`, borderRadius: 999,
      fontFamily: PACER.font, fontSize: s.fs, fontWeight: 500,
      letterSpacing: 0.2, whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
}

function Avatar({ name, color, size = 36, photo = false, ring = false }) {
  // deterministic color from name
  const palette = ['#ff5fa2', '#ffb547', '#7fd0ff', '#d4ff3a', '#c89bff', '#ff8a6a', '#9affc4'];
  let hash = 0;
  for (let i = 0; i < (name || '').length; i++) hash = (hash * 31 + name.charCodeAt(i)) | 0;
  const c = color || palette[Math.abs(hash) % palette.length];
  const initials = (name || '?').split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();

  // Blend accent into the dark base so stacked avatars opaquely occlude.
  const mix = (hex, base, a) => {
    const h = hex.replace('#', ''); const b = base.replace('#', '');
    const r = Math.round(parseInt(h.slice(0,2),16)*a + parseInt(b.slice(0,2),16)*(1-a));
    const g = Math.round(parseInt(h.slice(2,4),16)*a + parseInt(b.slice(2,4),16)*(1-a));
    const bl= Math.round(parseInt(h.slice(4,6),16)*a + parseInt(b.slice(4,6),16)*(1-a));
    return `rgb(${r},${g},${bl})`;
  };
  const fill = mix(c, '#0a0c0a', 0.22);

  if (photo) {
    // photo placeholder: subtle striped square w/ initial overlay
    return (
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `repeating-linear-gradient(135deg, ${c}33 0 6px, ${c}55 6px 12px), ${fill}`,
        color: c, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: PACER.font, fontWeight: 600, fontSize: size * 0.38,
        border: ring ? `2px solid ${PACER.lime}` : `1px solid rgba(255,255,255,0.08)`,
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.2)',
        flexShrink: 0,
      }}>{initials}</div>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: fill, color: c,
      border: `1px solid ${c}55`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: PACER.font, fontWeight: 600, fontSize: size * 0.38,
      flexShrink: 0,
    }}>{initials}</div>
  );
}

function Btn({ children, variant = 'primary', onClick, size = 'md', leading, trailing, disabled, style = {} }) {
  const variants = {
    primary:  { bg: PACER.lime, fg: PACER.limeInk, bd: PACER.lime },
    secondary:{ bg: 'rgba(255,255,255,0.06)', fg: PACER.text, bd: PACER.borderStrong },
    ghost:    { bg: 'transparent', fg: PACER.text, bd: 'transparent' },
    danger:   { bg: 'rgba(255,95,95,0.1)', fg: '#ff7a7a', bd: 'rgba(255,95,95,0.3)' },
    dark:     { bg: '#000', fg: PACER.text, bd: PACER.border },
  };
  const v = variants[variant];
  const sizes = { sm: { h: 36, fs: 14, px: 14 }, md: { h: 48, fs: 16, px: 18 }, lg: { h: 56, fs: 17, px: 22 } };
  const s = sizes[size];
  return (
    <button onClick={disabled ? null : onClick} disabled={disabled} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      height: s.h, padding: `0 ${s.px}px`, borderRadius: 14,
      background: v.bg, color: v.fg, border: `1px solid ${v.bd}`,
      fontFamily: PACER.font, fontSize: s.fs, fontWeight: 600,
      letterSpacing: -0.1, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1, transition: 'transform .08s, opacity .15s',
      WebkitTapHighlightColor: 'transparent',
      ...style,
    }}
    onMouseDown={e => { if (!disabled) e.currentTarget.style.transform = 'scale(0.98)'; }}
    onMouseUp={e => { e.currentTarget.style.transform = 'scale(1)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
    >
      {leading}{children}{trailing}
    </button>
  );
}

// Single line stat — e.g. "5K  6:00/km  Beginner"
function StatRow({ items, color }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 10,
      fontFamily: PACER.mono, fontSize: 13, color: color || PACER.textDim,
      letterSpacing: 0,
    }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span style={{ color: PACER.textSubtle }}>·</span>}
          <span>{it}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

// SVG icons (line, 1.6 stroke)
function Icon({ name, size = 20, color = 'currentColor', style = {} }) {
  const s = size;
  const stroke = { stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', fill: 'none' };
  const paths = {
    home: <><path d="M3 10l9-7 9 7v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V10z" {...stroke}/></>,
    plus: <><path d="M12 5v14M5 12h14" {...stroke}/></>,
    user: <><circle cx="12" cy="8" r="4" {...stroke}/><path d="M4 21c0-4 4-6 8-6s8 2 8 6" {...stroke}/></>,
    pin:  <><path d="M12 22s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z" {...stroke}/><circle cx="12" cy="10" r="2.5" {...stroke}/></>,
    clock:<><circle cx="12" cy="12" r="9" {...stroke}/><path d="M12 7v5l3 2" {...stroke}/></>,
    bolt: <><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" {...stroke}/></>,
    users:<><circle cx="9" cy="9" r="3.5" {...stroke}/><path d="M2 20c0-3 3-5 7-5s7 2 7 5" {...stroke}/><circle cx="17" cy="8" r="3" {...stroke}/><path d="M14 14c4 0 7 2 8 6" {...stroke}/></>,
    chev: <><path d="M9 6l6 6-6 6" {...stroke}/></>,
    chevL:<><path d="M15 6l-6 6 6 6" {...stroke}/></>,
    chevD:<><path d="M6 9l6 6 6-6" {...stroke}/></>,
    close:<><path d="M6 6l12 12M18 6L6 18" {...stroke}/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2" {...stroke}/><path d="M8 11V8a4 4 0 018 0v3" {...stroke}/></>,
    unlock:<><rect x="5" y="11" width="14" height="10" rx="2" {...stroke}/><path d="M8 11V8a4 4 0 017-2.7" {...stroke}/></>,
    check:<><path d="M4 12l5 5L20 6" {...stroke}/></>,
    shield:<><path d="M12 2l9 3v6c0 5-4 9-9 11-5-2-9-6-9-11V5l9-3z" {...stroke}/></>,
    flag: <><path d="M5 21V4M5 4h12l-2 4 2 4H5" {...stroke}/></>,
    send: <><path d="M21 3L3 11l7 2 2 7 9-17z" {...stroke}/></>,
    filter:<><path d="M3 5h18M6 12h12M10 19h4" {...stroke}/></>,
    search:<><circle cx="11" cy="11" r="7" {...stroke}/><path d="M21 21l-4-4" {...stroke}/></>,
    chat: <><path d="M21 12a8 8 0 11-3-6.2L21 4l-1 4.5A8 8 0 0121 12z" {...stroke}/></>,
    arrow:<><path d="M5 12h14M13 5l7 7-7 7" {...stroke}/></>,
    pace: <><circle cx="12" cy="13" r="7" {...stroke}/><path d="M12 13l3-3M10 4h4M12 6V4" {...stroke}/></>,
    run:  <><circle cx="14" cy="4.5" r="1.5" {...stroke}/><path d="M5 21l3-6 3 2 2-5 3 4 4-1" {...stroke}/></>,
    cal:  <><rect x="3" y="5" width="18" height="16" rx="2" {...stroke}/><path d="M3 10h18M8 3v4M16 3v4" {...stroke}/></>,
    phone:<><rect x="6" y="2" width="12" height="20" rx="2" {...stroke}/><path d="M11 18h2" {...stroke}/></>,
    dots: <><circle cx="5" cy="12" r="1.5" fill={color} stroke="none"/><circle cx="12" cy="12" r="1.5" fill={color} stroke="none"/><circle cx="19" cy="12" r="1.5" fill={color} stroke="none"/></>,
    eye:  <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" {...stroke}/><circle cx="12" cy="12" r="3" {...stroke}/></>,
    gear: <><circle cx="12" cy="12" r="3" {...stroke}/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" {...stroke}/></>,
    cam:  <><path d="M3 8h4l2-3h6l2 3h4v11H3V8z" {...stroke}/><circle cx="12" cy="13" r="4" {...stroke}/></>,
    trash:<><path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14" {...stroke}/></>,
    bell: <><path d="M6 19h12l-1-2v-5a5 5 0 00-10 0v5l-1 2zM10 21a2 2 0 004 0" {...stroke}/></>,
    info: <><circle cx="12" cy="12" r="9" {...stroke}/><path d="M12 11v6M12 8v.5" {...stroke}/></>,
    help: <><circle cx="12" cy="12" r="9" {...stroke}/><path d="M9 9a3 3 0 016 0c0 2-3 2-3 4M12 17v.5" {...stroke}/></>,
    exit: <><path d="M14 4h5v16h-5M14 12H3M7 8l-4 4 4 4" {...stroke}/></>,
  };
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0, ...style }}>{paths[name]}</svg>
  );
}

// Sectioned card surface for prototype screens
function Card({ children, style = {}, onClick, interactive }) {
  return (
    <div onClick={onClick} style={{
      background: PACER.card,
      border: `1px solid ${PACER.border}`,
      borderRadius: 18,
      ...(interactive ? { cursor: 'pointer', transition: 'border-color .15s, transform .12s' } : {}),
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { PACER, Chip, Avatar, Btn, StatRow, Icon, Card });