/* atoms — shared primitives for the dashboard UI kit */

const Eyebrow = ({ children, color, style }) => (
  <span style={{
    fontFamily: 'var(--font-body)',
    fontSize: 10,
    fontWeight: 600,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: color || 'var(--bone-2)',
    ...style,
  }}>{children}</span>
);

const Card = ({ children, hero, hoverable, onClick, style }) => {
  const [hover, setHover] = React.useState(false);
  const heroBg = hero
    ? `radial-gradient(120% 100% at 0% 0%, rgba(255,45,111,0.10), transparent 60%), var(--ink-2)`
    : 'var(--ink-2)';
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => hoverable && setHover(true)}
      onMouseLeave={() => hoverable && setHover(false)}
      style={{
        background: hover ? 'var(--ink-3)' : heroBg,
        border: `1px solid ${hover ? 'var(--bone-3)' : 'var(--ink-4)'}`,
        borderRadius: 10,
        padding: 20,
        transition: 'all 220ms cubic-bezier(0.2,0.8,0.2,1)',
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
    >{children}</div>
  );
};

const Button = ({ children, variant = 'primary', size = 'md', onClick, icon }) => {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    sm: { padding: '6px 12px', fontSize: 12, borderRadius: 6 },
    md: { padding: '10px 18px', fontSize: 13, borderRadius: 8 },
  };
  const variants = {
    primary: {
      background: hover ? 'var(--neon-pink-glow)' : 'var(--neon-pink)',
      color: 'var(--ink-0)',
      border: '1px solid transparent',
      boxShadow: hover ? '0 0 24px -4px rgba(255,45,111,0.55)' : 'none',
    },
    secondary: {
      background: 'var(--ink-3)',
      color: 'var(--bone-0)',
      border: `1px solid ${hover ? 'var(--bone-3)' : 'var(--ink-4)'}`,
    },
    ghost: {
      background: hover ? 'var(--ink-3)' : 'transparent',
      color: hover ? 'var(--bone-0)' : 'var(--bone-1)',
      border: '1px solid transparent',
    },
  };
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: 'var(--font-body)',
        fontWeight: 600,
        cursor: 'pointer',
        lineHeight: 1,
        transition: 'all 120ms cubic-bezier(0.2,0.8,0.2,1)',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        ...sizes[size],
        ...variants[variant],
      }}
    >
      {icon ? <Icon name={icon} size={14} /> : null}
      {children}
    </button>
  );
};

const Chip = ({ children, active, kind, onClick }) => {
  const kinds = {
    default: { bg: 'var(--ink-2)', border: 'var(--ink-4)', fg: 'var(--bone-1)' },
    active: { bg: 'var(--neon-pink-soft)', border: 'var(--neon-pink)', fg: 'var(--neon-pink-glow)' },
    pos: { bg: 'rgba(194,255,61,0.12)', border: 'var(--acid)', fg: 'var(--acid)' },
    warn: { bg: 'rgba(255,177,61,0.12)', border: 'var(--amber)', fg: 'var(--amber)' },
    neg: { bg: 'rgba(255,77,77,0.12)', border: 'var(--blood)', fg: 'var(--blood)' },
  };
  const k = active ? kinds.active : (kinds[kind] || kinds.default);
  const isNum = kind === 'pos' || kind === 'warn' || kind === 'neg';
  return (
    <span
      onClick={onClick}
      style={{
        fontFamily: isNum ? 'var(--font-mono)' : 'var(--font-body)',
        fontWeight: isNum ? 600 : 500,
        fontSize: 12,
        padding: '5px 12px',
        borderRadius: 999,
        border: `1px solid ${k.border}`,
        background: k.bg,
        color: k.fg,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        cursor: onClick ? 'pointer' : 'default',
        whiteSpace: 'nowrap',
      }}
    >{children}</span>
  );
};

const Delta = ({ value, suffix = '%' }) => {
  const positive = value >= 0;
  return (
    <span style={{
      fontFamily: 'var(--font-mono)',
      fontVariantNumeric: 'tabular-nums',
      fontSize: 12,
      color: positive ? 'var(--acid)' : 'var(--blood)',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 4,
    }}>
      <span>{positive ? '▲' : '▼'}</span>
      {positive ? '+' : ''}{value.toFixed(1).replace('.', ',')}{suffix}
    </span>
  );
};

const LiveDot = ({ label = 'Live' }) => (
  <span style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '6px 12px 6px 10px',
    borderRadius: 999,
    border: '1px solid var(--neon-pink)',
    background: 'var(--neon-pink-soft)',
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    fontWeight: 600,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    color: 'var(--neon-pink-glow)',
  }}>
    <span style={{
      width: 8, height: 8, borderRadius: 999,
      background: 'var(--neon-pink)',
      boxShadow: '0 0 8px var(--neon-pink)',
      animation: 'nocturne-pulse 2s ease-in-out infinite',
    }}/>
    {label}
  </span>
);

/* Lucide-style stroked SVG icons — 1.5px, square cap, rounded join */
const Icon = ({ name, size = 16, color = 'currentColor', style }) => {
  const paths = {
    'home': <><path d="M3 12L12 4l9 8"/><path d="M5 10v9h14v-9"/></>,
    'calendar': <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18M8 2v4M16 2v4"/></>,
    'building': <><path d="M3 22V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14"/><path d="M3 22h18"/><path d="M8 10h2M14 10h2M8 14h2M14 14h2M8 18h2M14 18h2"/></>,
    'users': <><circle cx="9" cy="8" r="4"/><path d="M2 22c0-4 3-7 7-7s7 3 7 7"/><circle cx="17" cy="6" r="3"/><path d="M22 21c0-3-2-5-5-5"/></>,
    'settings': <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5h.1a1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    'arrow-right': <><path d="M5 12h14M13 5l7 7-7 7"/></>,
    'arrow-up': <><path d="M12 19V5M5 12l7-7 7 7"/></>,
    'arrow-down': <><path d="M12 5v14M5 12l7 7 7-7"/></>,
    'plus': <><path d="M12 5v14M5 12h14"/></>,
    'download': <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></>,
    'door': <><path d="M3 22h18"/><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18"/><circle cx="15" cy="12" r="0.8" fill="currentColor"/></>,
    'wine': <><path d="M8 22h8M12 15v7"/><path d="M5 2h14l-1 8a6 6 0 0 1-12 0z"/></>,
    'music': <><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></>,
    'trending-up': <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
    'gauge': <><path d="M12 14L18 8"/><circle cx="12" cy="14" r="1.5" fill="currentColor"/><path d="M3 14a9 9 0 0 1 18 0"/></>,
    'clock': <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    'pin': <><path d="M12 22s8-7 8-13a8 8 0 0 0-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/></>,
    'chevron-down': <><path d="M6 9l6 6 6-6"/></>,
    'chevron-right': <><path d="M9 6l6 6-6 6"/></>,
    'search': <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    'bell': <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
  };
  return (
    <svg
      viewBox="0 0 24 24"
      width={size} height={size}
      fill="none" stroke={color} strokeWidth="1.75"
      strokeLinecap="round" strokeLinejoin="round"
      style={style}
    >{paths[name] || <circle cx="12" cy="12" r="9"/>}</svg>
  );
};

/* Numeric — convenience wrapper */
const Num = ({ children, size = 14, color, weight = 500, style }) => (
  <span style={{
    fontFamily: 'var(--font-mono)',
    fontVariantNumeric: 'tabular-nums',
    fontWeight: weight,
    fontSize: size,
    letterSpacing: '-0.02em',
    color: color || 'var(--bone-0)',
    lineHeight: 1,
    whiteSpace: 'nowrap',
    ...style,
  }}>{children}</span>
);

Object.assign(window, { Eyebrow, Card, Button, Chip, Delta, LiveDot, Icon, Num });