/* global React */
const { useState, useEffect } = React;

// ─── Icon (Lucide-style inline) ─────────────────────────────────────────────
const Icon = ({ d, size = 18, stroke = 2, style, ...rest }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round" style={style} {...rest}>
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);

const ICONS = {
  home:     'm3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM9 22V12h6v10',
  folder:   'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2z',
  check:    ['m9 11 3 3L22 4', 'M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'],
  users:    ['M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2', 'M22 21v-2a4 4 0 0 0-3-3.87', 'M16 3.13a4 4 0 0 1 0 7.75'],
  dollar:   ['M12 1v22', 'M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'],
  chart:    ['M3 3v18h18', 'M18 17V9', 'M13 17V5', 'M8 17v-3'],
  cal:      ['M3 4h18v18H3z', 'M16 2v4', 'M8 2v4', 'M3 10h18'],
  bell:     ['M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9', 'M10.3 21a1.94 1.94 0 0 0 3.4 0'],
  search:   ['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', 'm21 21-4.3-4.3'],
  settings: ['M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z', 'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'],
  plus:     ['M5 12h14', 'M12 5v14'],
  arrow:    ['M5 12h14', 'm12 5 7 7-7 7'],
  more:     ['M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 'M5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'],
  clip:     ['m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'],
  msg:      ['M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'],
  briefcase:['M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16', 'M22 13H2', 'M3 8h18a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z'],
  page:     ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8', 'M10 9H8'],
  arrowR:   ['m9 18 6-6-6-6'],
  filter:   ['M22 3H2l8 9.46V19l4 2v-8.54z'],
  sun:      ['M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12z', 'M12 2v2', 'M12 20v2', 'm4.93 4.93 1.41 1.41', 'm17.66 17.66 1.41 1.41', 'M2 12h2', 'M20 12h2', 'm4.93 19.07 1.41-1.41', 'm17.66 6.34 1.41-1.41'],
  trend:    ['m22 7-8.5 8.5-5-5L2 17', 'M16 7h6v6'],
  bolt:     ['M13 2 3 14h9l-1 8 10-12h-9z'],
  upload:   ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'm17 8-5-5-5 5', 'M12 3v12'],
  download: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'm7 10 5 5 5-5', 'M12 15V3'],
  trash:    ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'],
  share:    ['M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8', 'm16 6-4-4-4 4', 'M12 2v13'],
  link:     ['M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71', 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'],
  x:        ['M18 6 6 18', 'M6 6l12 12'],
  list:     ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'],
  grid:     ['M3 3h7v7H3z', 'M14 3h7v7h-7z', 'M3 14h7v7H3z', 'M14 14h7v7h-7z'],
  palette:  ['M12 2a10 10 0 1 0 10 10 4 4 0 0 1-4 4h-2a2 2 0 0 0-2 2v3a3 3 0 0 1-3 3', 'M7.5 10.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M12 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M16.5 10.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'],
  shield:   ['M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'],
  document: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8', 'M10 9H8'],
  logout:   ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'm16 17 5-5-5-5', 'M21 12H9'],
  moon:     'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',
  pencil:  ['M12 20h9', 'M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'],
  eye:     ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 0 1 0 6 3 3 0 0 1 0-6z'],
  mail:    ['M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z', 'M22 6l-10 7L2 6'],
  copy:    ['M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2', 'M8 8h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z'],
  image:   ['M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z', 'M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M21 15l-5-5L5 21'],
  star:    'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
  send:    ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4z'],
  info:    ['M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z', 'M12 16v-4', 'M12 8h.01'],
  tag:     ['M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l8-8a1 1 0 0 0 0-1.42z', 'M7 7h.01'],
  calc:    ['M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z', 'M8 7h8', 'M8 11h2', 'M14 11h2', 'M8 15h2', 'M14 15h2'],
  delete:  ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'],
  edit:    ['M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7', 'M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z'],
  pkg:     ['M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z', 'M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12'],
  pipeline: ['M4 3h4v18H4z', 'M10 3h4v14h-4z', 'M16 3h4v9h-4z'],
};

// ─── Logo ───────────────────────────────────────────────────────────────────
const Logo = ({ size = 32, withText = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: size, height: size, borderRadius: size * 0.28,
      background: 'var(--logo-gradient)',
      display: 'grid', placeItems: 'center',
      fontFamily: 'var(--font-sans)', fontWeight: 800,
      color: '#fff', fontSize: size * 0.42, letterSpacing: '-0.04em',
      boxShadow: '0 6px 16px rgba(29, 57, 196, 0.28)',
    }}>in</div>
    {withText && (
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.01em' }}>
        <span style={{ color: 'var(--logo-cyan)' }}>in</span>
        <span>Brivvo</span>
      </div>
    )}
  </div>
);

// ─── Avatar ─────────────────────────────────────────────────────────────────
const AVATAR_GRADIENTS = [
  'linear-gradient(135deg,#1D39C4,#36CFC9)',
  'linear-gradient(135deg,#2F54EB,#A0D911)',
  'linear-gradient(135deg,#FA541C,#FADB14)',
  'linear-gradient(135deg,#13C2C2,#1890FF)',
  'linear-gradient(135deg,#7C3AED,#1D39C4)',
];
const Avatar = ({ name = '?', size = 32, idx, src }) => {
  const initials = name.split(' ').slice(0, 2).map(n => n[0]).join('').toUpperCase();
  const i = (idx ?? name.charCodeAt(0)) % AVATAR_GRADIENTS.length;
  if (src) {
    return (
      <div style={{
        width: size, height: size, borderRadius: '50%',
        overflow: 'hidden', flexShrink: 0, background: AVATAR_GRADIENTS[i],
      }}>
        <img src={src} alt={name} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
      </div>
    );
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: AVATAR_GRADIENTS[i],
      color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700,
      fontSize: size * 0.36, display: 'grid', placeItems: 'center',
      flexShrink: 0,
    }}>{initials}</div>
  );
};

// ─── Button ─────────────────────────────────────────────────────────────────
const Button = ({ variant = 'primary', size = 'md', icon, children, onClick, style }) => {
  const sizes = {
    sm: { padding: '6px 12px', fontSize: 12, borderRadius: 6 },
    md: { padding: '9px 16px', fontSize: 13, borderRadius: 8 },
    lg: { padding: '12px 20px', fontSize: 15, borderRadius: 10 },
  };
  const variants = {
    primary: { background: 'var(--primary)', color: '#fff', border: '1px solid var(--primary)' },
    secondary: { background: 'transparent', color: 'var(--fg-primary)', border: '1px solid var(--border-strong)' },
    ghost: { background: 'transparent', color: 'var(--fg-secondary)', border: '1px solid transparent' },
    danger: { background: 'var(--accent-danger)', color: '#fff', border: '1px solid var(--accent-danger)' },
  };
  return (
    <button onClick={onClick} className="ds-btn"
      style={{
        ...sizes[size], ...variants[variant],
        fontFamily: 'var(--font-sans)', fontWeight: 600,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        cursor: 'pointer', transition: 'all 180ms', whiteSpace: 'nowrap',
        ...style,
      }}>
      {icon && <Icon d={ICONS[icon]} size={size === 'sm' ? 14 : 16} />}
      {children}
    </button>
  );
};

// ─── Badge ──────────────────────────────────────────────────────────────────
const Badge = ({ tone = 'brand', children, dot = true }) => {
  const tones = {
    brand:   { bg: 'var(--primary-soft)', fg: 'var(--geek-blue-300)', dot: 'var(--geek-blue-400)', bd: 'var(--geek-blue-a40)' },
    success: { bg: 'rgba(34,197,94,.12)', fg: '#22C55E', dot: '#22C55E', bd: 'rgba(34,197,94,.3)' },
    warning: { bg: 'rgba(250,219,20,.12)', fg: '#FADB14', dot: '#FADB14', bd: 'rgba(250,219,20,.3)' },
    danger:  { bg: 'rgba(239,68,68,.14)', fg: '#FF6A6A', dot: '#EF4444', bd: 'rgba(239,68,68,.3)' },
    cyan:    { bg: 'rgba(19,194,194,.12)', fg: '#36CFC9', dot: '#13C2C2', bd: 'rgba(19,194,194,.3)' },
    volcano: { bg: 'rgba(250,84,28,.12)', fg: '#FF7A45', dot: '#FA541C', bd: 'rgba(250,84,28,.3)' },
    neutral: { bg: 'var(--bg-elevated)', fg: 'var(--fg-secondary)', dot: 'var(--fg-muted)', bd: 'var(--border-subtle)' },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 10px', borderRadius: 999,
      fontSize: 11, fontWeight: 600,
      background: t.bg, color: t.fg, border: `1px solid ${t.bd}`,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot }} />}
      {children}
    </span>
  );
};

// ─── Card ───────────────────────────────────────────────────────────────────
const Card = ({ children, style, padding = 18, hoverable = false, onClick }) => (
  <div onClick={onClick} className={hoverable ? 'ds-card hov' : 'ds-card'} style={{
    background: 'var(--bg-surface)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 14,
    boxShadow: 'var(--shadow-2)',
    padding,
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 180ms ease',
    ...style,
  }}>{children}</div>
);

// ─── Field ──────────────────────────────────────────────────────────────────
const Field = ({ icon, label, hint, error, value, onChange, onKeyDown, type = 'text', placeholder, children }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    {label && <span style={{
      fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700,
      textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-muted)',
    }}>{label}</span>}
    {children || (
      <span style={{
        display: 'flex', alignItems: 'center', gap: 8,
        background: 'var(--bg-elevated)',
        border: `1px solid ${error ? 'var(--accent-danger)' : 'var(--border-subtle)'}`,
        borderRadius: 8, padding: '10px 12px',
      }}>
        {icon && <Icon d={ICONS[icon]} size={16} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />}
        <input type={type} value={value || ''} onChange={onChange || (()=>{})} onKeyDown={onKeyDown} placeholder={placeholder}
          style={{
            background: 'transparent', border: 'none', outline: 'none',
            color: 'var(--fg-primary)', fontFamily: 'inherit', fontSize: 14, flex: 1, minWidth: 0,
          }}/>
      </span>
    )}
    {error && <span style={{ fontSize: 12, color: 'var(--accent-danger)' }}>{error}</span>}
    {hint && !error && <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{hint}</span>}
  </label>
);

Object.assign(window, { Icon, ICONS, Logo, Avatar, Button, Badge, Card, Field });