// openrobot.app — Design tokens & shared primitives
// Aesthetic: technical-but-warm. Dark UI with luminous amber accent.
// Mono for telemetry/data, grotesk for everything else.

const OR = {
  // Color palette — neutral grayscale with single luminous accent
  c: {
    // Backgrounds — deep neutral, slightly warm
    bg0: '#0A0B0D',       // page
    bg1: '#101216',       // card / panel
    bg2: '#171A1F',       // raised
    bg3: '#1F232A',       // input / hover
    bg4: '#2A2F38',       // border-strong
    line: '#22262E',      // hairline
    lineSoft: '#191C22',

    // Text
    t0: '#F4F5F7',        // primary
    t1: '#B8BDC7',        // secondary
    t2: '#7B8290',        // tertiary
    t3: '#525864',        // quaternary / disabled

    // Light mode counterparts
    L_bg0: '#FAFAF7',
    L_bg1: '#FFFFFF',
    L_bg2: '#F2F2EE',
    L_bg3: '#E8E8E2',
    L_bg4: '#D4D4CC',
    L_line: '#E5E5DD',
    L_lineSoft: '#EDEDE6',
    L_t0: '#0A0B0D',
    L_t1: '#3A3F47',
    L_t2: '#6B7280',
    L_t3: '#9CA3AF',

    // Accents
    amber: '#FF8A2B',     // primary accent — safety amber
    amberSoft: '#FFB070',
    amberDeep: '#C25500',
    amberGlow: 'rgba(255, 138, 43, 0.35)',

    // Status
    ok: '#5BD68C',
    warn: '#FFC857',
    danger: '#FF5C5C',
    info: '#7AB8FF',
  },

  // Type
  font: {
    sans: '"Geist", "Inter", -apple-system, system-ui, sans-serif',
    mono: '"JetBrains Mono", "Geist Mono", "SF Mono", Menlo, monospace',
    display: '"Geist", "Inter", -apple-system, sans-serif',
  },

  // Spacing
  s: { 0: 0, 1: 2, 2: 4, 3: 8, 4: 12, 5: 16, 6: 20, 7: 24, 8: 32, 9: 40, 10: 48, 11: 64, 12: 80, 13: 96 },

  // Radii
  r: { sm: 6, md: 10, lg: 14, xl: 20, pill: 9999 },
};

// Theme resolver
function useTheme(dark = true, accent = OR.c.amber) {
  return React.useMemo(() => {
    const c = OR.c;
    if (dark) {
      return {
        bg0: c.bg0, bg1: c.bg1, bg2: c.bg2, bg3: c.bg3, bg4: c.bg4,
        line: c.line, lineSoft: c.lineSoft,
        t0: c.t0, t1: c.t1, t2: c.t2, t3: c.t3,
        accent, accentGlow: hexA(accent, 0.35), accentSoft: hexA(accent, 0.15),
        ok: c.ok, warn: c.warn, danger: c.danger, info: c.info,
        dark: true,
      };
    }
    return {
      bg0: c.L_bg0, bg1: c.L_bg1, bg2: c.L_bg2, bg3: c.L_bg3, bg4: c.L_bg4,
      line: c.L_line, lineSoft: c.L_lineSoft,
      t0: c.L_t0, t1: c.L_t1, t2: c.L_t2, t3: c.L_t3,
      accent, accentGlow: hexA(accent, 0.25), accentSoft: hexA(accent, 0.12),
      ok: c.ok, warn: c.warn, danger: c.danger, info: c.info,
      dark: false,
    };
  }, [dark, accent]);
}

function hexA(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

// ─────────────────────────────────────────────────────────────
// Logo — robot eye/lens mark
// ─────────────────────────────────────────────────────────────
function ORLogo({ size = 24, color = '#F4F5F7', accent = '#FF8A2B' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <rect x="2" y="6" width="28" height="20" rx="6" stroke={color} strokeWidth="2"/>
      <circle cx="11" cy="16" r="3" fill={color}/>
      <circle cx="21" cy="16" r="3" fill={accent}/>
      <path d="M16 2v4M16 26v4" stroke={color} strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function ORWordmark({ color = '#F4F5F7', accent = '#FF8A2B', size = 18 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <ORLogo size={size + 6} color={color} accent={accent}/>
      <span style={{
        fontFamily: OR.font.display, fontWeight: 600, fontSize: size,
        letterSpacing: '-0.02em', color,
      }}>
        openrobot<span style={{ color: accent }}>.</span>
      </span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Icons — minimal stroke icons
// ─────────────────────────────────────────────────────────────
const Icon = ({ d, size = 16, stroke = 'currentColor', fill = 'none', sw = 1.6, viewBox = '0 0 24 24' }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {typeof d === 'string' ? <path d={d}/> : d}
  </svg>
);

const Icons = {
  power: 'M12 3v9 M5.5 8a8 8 0 1 0 13 0',
  battery: <g><rect x="2" y="7" width="17" height="10" rx="2"/><path d="M21 10v4"/><rect x="4" y="9" width="11" height="6" fill="currentColor" stroke="none"/></g>,
  wifi: 'M2 9c5.5-5 14.5-5 20 0 M5 12c4-3.5 10-3.5 14 0 M8.5 15c2-1.7 5-1.7 7 0 M12 18.5h.01',
  signal: <g><rect x="2" y="14" width="3" height="6"/><rect x="7" y="10" width="3" height="10"/><rect x="12" y="6" width="3" height="14"/><rect x="17" y="2" width="3" height="18"/></g>,
  play: 'M6 4l14 8-14 8z',
  pause: 'M7 4v16 M17 4v16',
  mic: 'M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z M19 11a7 7 0 0 1-14 0 M12 18v3 M9 21h6',
  cam: 'M2 7h4l2-3h8l2 3h4v13H2z M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
  home: 'M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z',
  store: 'M3 9l1-5h16l1 5 M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9 M3 9h18',
  bolt: 'M13 2L4 14h7l-1 8 9-12h-7l1-8z',
  cpu: 'M5 5h14v14H5z M9 9h6v6H9z M9 1v3 M15 1v3 M9 20v3 M15 20v3 M1 9h3 M1 15h3 M20 9h3 M20 15h3',
  add: 'M12 5v14 M5 12h14',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z M21 21l-4.3-4.3',
  arrowR: 'M5 12h14 M13 5l7 7-7 7',
  arrowL: 'M19 12H5 M11 5l-7 7 7 7',
  chev: 'M9 6l6 6-6 6',
  chevDown: 'M6 9l6 6 6-6',
  check: 'M20 6L9 17l-5-5',
  x: 'M18 6L6 18 M6 6l12 12',
  more: 'M5 12h.01 M12 12h.01 M19 12h.01',
  settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z',
  bell: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a2 2 0 0 0 3.4 0',
  download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
  github: 'M9 19c-5 1.5-5-2.5-7-3 M15 21v-3.9c.1-1-.2-1.9-.9-2.6 3-.3 6.2-1.5 6.2-6.7a5.2 5.2 0 0 0-1.5-3.6 4.8 4.8 0 0 0-.1-3.6s-1.2-.4-3.9 1.4a13.4 13.4 0 0 0-7 0C5.1 1.2 4 1.6 4 1.6a4.8 4.8 0 0 0-.1 3.6A5.2 5.2 0 0 0 2.3 8.8c0 5.2 3.2 6.4 6.2 6.7-.7.7-1 1.6-.9 2.6V21',
  terminal: 'M4 17l6-6-6-6 M12 19h8',
  layers: 'M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
  map: 'M9 4l-6 2v14l6-2 6 2 6-2V4l-6 2-6-2z M9 4v16 M15 6v16',
  joystick: <g><circle cx="12" cy="9" r="4"/><path d="M12 13v6 M9 19h6"/></g>,
  robot: <g><rect x="5" y="8" width="14" height="11" rx="2"/><circle cx="9.5" cy="13" r="1.2" fill="currentColor"/><circle cx="14.5" cy="13" r="1.2" fill="currentColor"/><path d="M12 5v3 M10 19v2 M14 19v2 M2 12v3 M22 12v3"/></g>,
  flask: 'M9 2v6L4 19a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3L15 8V2 M9 2h6 M7 14h10',
  spark: 'M12 2v4 M12 18v4 M2 12h4 M18 12h4 M5 5l3 3 M16 16l3 3 M5 19l3-3 M16 8l3-3',
  shield: 'M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z',
  globe: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M2 12h20 M12 2a15 15 0 0 1 0 20 M12 2a15 15 0 0 0 0 20',
  link: 'M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1 M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1',
  flag: 'M4 22V4 M4 4h13l-2 4 2 4H4',
  repeat: 'M17 1l4 4-4 4 M3 11V9a4 4 0 0 1 4-4h14 M7 23l-4-4 4-4 M21 13v2a4 4 0 0 1-4 4H3',
  sun: 'M12 2v2 M12 20v2 M4.9 4.9l1.4 1.4 M17.7 17.7l1.4 1.4 M2 12h2 M20 12h2 M4.9 19.1l1.4-1.4 M17.7 6.3l1.4-1.4 M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12z',
  moon: 'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z',
};

// ─────────────────────────────────────────────────────────────
// Status pip
// ─────────────────────────────────────────────────────────────
function Pip({ color, pulse = false, size = 8 }) {
  return (
    <span style={{ position: 'relative', width: size, height: size, display: 'inline-block' }}>
      <span style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: color, boxShadow: `0 0 ${size * 1.5}px ${color}`,
      }}/>
      {pulse && <span style={{
        position: 'absolute', inset: -2, borderRadius: '50%',
        border: `1px solid ${color}`, opacity: 0.5,
        animation: 'orPulse 1.6s ease-out infinite',
      }}/>}
    </span>
  );
}

// ─────────────────────────────────────────────────────────────
// Mini bar/spark for telemetry
// ─────────────────────────────────────────────────────────────
function MiniBars({ values, color, height = 18, width = 60, gap = 2 }) {
  const max = Math.max(...values, 1);
  const w = (width - gap * (values.length - 1)) / values.length;
  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      {values.map((v, i) => {
        const h = Math.max(1, (v / max) * height);
        return <rect key={i} x={i * (w + gap)} y={height - h} width={w} height={h} rx={1} fill={color} opacity={0.4 + 0.6 * (v / max)}/>;
      })}
    </svg>
  );
}

function Sparkline({ values, color, width = 100, height = 28, fill = true }) {
  const max = Math.max(...values);
  const min = Math.min(...values);
  const range = max - min || 1;
  const stepX = width / (values.length - 1);
  const pts = values.map((v, i) => `${i * stepX},${height - ((v - min) / range) * (height - 4) - 2}`).join(' ');
  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      {fill && <polygon points={`0,${height} ${pts} ${width},${height}`} fill={color} opacity={0.15}/>}
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Tag / Chip
// ─────────────────────────────────────────────────────────────
function Tag({ children, color, theme, mono = true, dot = false }) {
  const c = color || (theme && theme.t1) || '#B8BDC7';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: mono ? OR.font.mono : OR.font.sans,
      fontSize: 10, fontWeight: 500, letterSpacing: '0.04em',
      textTransform: 'uppercase', color: c,
      padding: '3px 7px', borderRadius: 4,
      border: `1px solid ${theme ? theme.line : '#22262E'}`,
      background: theme ? theme.bg2 : 'transparent',
    }}>
      {dot && <Pip color={c} size={6}/>}
      {children}
    </span>
  );
}

// Robot illustration — abstract head/torso silhouette
function RobotGlyph({ kind = 'humanoid', size = 80, color = '#F4F5F7', accent = '#FF8A2B' }) {
  const sw = 1.5;
  if (kind === 'humanoid') {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="20" y="8" width="24" height="20" rx="6"/>
        <rect x="26" y="14" width="12" height="6" rx="1.5" fill={accent} stroke="none"/>
        <path d="M32 28v4"/>
        <rect x="14" y="32" width="36" height="20" rx="3"/>
        <path d="M22 32v-2 M42 32v-2 M22 52v6 M42 52v6"/>
        <circle cx="32" cy="42" r="2.5" fill={color} stroke="none"/>
      </svg>
    );
  }
  if (kind === 'quadruped') {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="10" y="22" width="36" height="16" rx="3"/>
        <rect x="44" y="18" width="12" height="12" rx="2"/>
        <circle cx="50" cy="23" r="1.5" fill={accent} stroke="none"/>
        <path d="M16 38v14 M22 38v14 M36 38v14 M42 38v14"/>
      </svg>
    );
  }
  if (kind === 'arm') {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="20" y="50" width="24" height="8" rx="1"/>
        <circle cx="32" cy="48" r="4"/>
        <path d="M32 44V20"/>
        <circle cx="32" cy="20" r="4"/>
        <path d="M35 18l14-8"/>
        <circle cx="50" cy="9" r="3" fill={accent} stroke="none"/>
      </svg>
    );
  }
  if (kind === 'drone') {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="14" cy="14" r="8"/>
        <circle cx="50" cy="14" r="8"/>
        <circle cx="14" cy="50" r="8"/>
        <circle cx="50" cy="50" r="8"/>
        <path d="M20 20l24 24 M44 20L20 44"/>
        <rect x="26" y="26" width="12" height="12" rx="2" fill={accent} stroke="none"/>
      </svg>
    );
  }
  if (kind === 'rover') {
    return (
      <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="8" y="22" width="44" height="20" rx="3"/>
        <rect x="46" y="18" width="10" height="14" rx="1"/>
        <circle cx="51" cy="23" r="1.5" fill={accent} stroke="none"/>
        <circle cx="18" cy="46" r="6"/>
        <circle cx="42" cy="46" r="6"/>
      </svg>
    );
  }
  return null;
}

// CSS keyframes — injected once
function ORStyles() {
  return (
    <style>{`
      @keyframes orPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }
      @keyframes orScan { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(100%); opacity: 0.3; } }
      @keyframes orBlink { 0%, 95%, 100% { opacity: 1; } 97% { opacity: 0.3; } }
      @keyframes orFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
      @keyframes orSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
      @keyframes orSpin { to { transform: rotate(360deg); } }
      .or-scan-line { background: linear-gradient(180deg, transparent, var(--accent, #FF8A2B), transparent); animation: orScan 3s ease-in-out infinite; }
      .or-noise { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0); background-size: 4px 4px; }
      .or-grid { background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 32px 32px; }
      ::-webkit-scrollbar { width: 6px; height: 6px; }
      ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
      ::-webkit-scrollbar-track { background: transparent; }
    `}</style>
  );
}

Object.assign(window, { OR, useTheme, hexA, ORLogo, ORWordmark, Icon, Icons, Pip, MiniBars, Sparkline, Tag, RobotGlyph, ORStyles });