// Shared low-level primitives used across the platform UI kit.
const { useState } = React;

// Icon — wraps a Lucide SVG path set; uses currentColor.
function Icon({ name, size = 20, strokeWidth = 1.75, style }) {
  const paths = {
    menu: 'M3 12h18M3 6h18M3 18h18',
    search: 'M21 21l-4.3-4.3 M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z',
    plus: 'M12 5v14M5 12h14',
    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',
    chevronDown: 'm6 9 6 6 6-6',
    chevronRight: 'm9 18 6-6-6-6',
    arrowRight: 'M5 12h14 M12 5l7 7-7 7',
    shipments: 'M16.5 9.4 7.55 4.24 M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z M3.3 7 12 12l8.7-5 M12 22V12',
    quote: 'M16 8h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h2 M9 2h6v4H9z M12 11v6 M9 14h6',
    track: 'M12 22s8-7 8-13a8 8 0 0 0-16 0c0 6 8 13 8 13z M12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    docs: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z M14 2v6h6 M16 13H8 M16 17H8',
    warehouse: 'M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z M6 18h12 M6 14h12 M6 10h12',
    analytics: 'M3 3v18h18 M7 14l4-4 4 4 5-5',
    settings: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    calculator: 'M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M8 6h8 M8 10h.01 M12 10h.01 M16 10h.01 M8 14h.01 M12 14h.01 M16 14h.01 M8 18h.01 M12 18h.01 M16 18h.01',
    box: 'M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z M3.3 7 12 12l8.7-5 M12 22V12',
    globe: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',
    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
    zap: 'M13 2 3 14h9l-1 8 10-12h-9l1-8z',
    sparkles: 'm12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z',
    clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 6v6l4 2',
    users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
    refresh: 'M3 12a9 9 0 0 1 15.2-6.4L21 8 M21 3v5h-5 M21 12a9 9 0 0 1-15.2 6.4L3 16 M3 21v-5h5',
    trending: 'm23 6-9.5 9.5-5-5L1 18 M17 6h6v6',
    lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z M7 11V7a5 5 0 0 1 10 0v4',
    sliders: 'M4 21V14 M4 10V3 M12 21v-9 M12 8V3 M20 21v-5 M20 12V3 M1 14h6 M9 8h6 M17 16h6',
    play: 'M5 3l14 9-14 9V3z',
    plane: 'M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5L3 7.5c-.2.4-.1.8.3 1L11 12l-2 3H6l-1 1 3 2 2 3 1-1v-3l3-2 3.5 7.6c.2.4.7.5 1 .3l.8-.6c.5-.2.7-.6.5-1.1Z',
    ship: 'M2 20a2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1 2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 2.4 2.4 0 0 1 2-1 2.4 2.4 0 0 1 2 1 2.4 2.4 0 0 0 2 1 2.4 2.4 0 0 0 2-1 M4 18 2 14h19.5l-1.6 3.5 M21 14 18 3H6l-3 8 M10 3v11',
    truck: 'M5 18H3V6h10v12h2 M17 18h2a1 1 0 0 0 1-1v-4l-3-4h-4v9h2 M7 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z M17 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    check: 'M5 12l4 4L19 7',
    circle: '',
    logout: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9',
    filter: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',
    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
    x: 'M18 6 6 18 M6 6l12 12',
    dot: '',
    container: 'M3 7h18v10H3z M7 7v10 M12 7v10 M17 7v10',
    clipboard: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2 M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1H9V5z',
    stack: 'M3 7l9-4 9 4-9 4-9-4z M3 12l9 4 9-4 M3 17l9 4 9-4',
    snowflake: 'M12 2v20 M2 12h20 M5 5l14 14 M19 5 5 19',
    compass: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M16 8l-4 8-4-2 2-4 6-2z',
    handshake: 'm11 17 2 2a1 1 0 1 0 1.4-1.4L13 16.2l1.5-1.5a2.1 2.1 0 0 0 0-3l-2.5-2.5a2.1 2.1 0 0 0-3 0L2 16.2l5 5 1-1 M18 13l2-2-4-4-3 3 1.2 1.2 M14 6l6 6',
    refreshCw: 'M21 12a9 9 0 1 1-3-6.7L21 8 M21 3v5h-5',
    flag: 'M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z M4 22v-7',
    tag: 'M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z M7 7h.01',
    award: 'M12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z M8.21 13.89 7 22l5-3 5 3-1.21-8.11',
    book: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20 M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z',
    pin: 'M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0z M12 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
    packageOpen: 'm12 22 8-4V6l-8 4-8-4v12l8 4z M12 22V10 M4 6l8 4 8-4 M8 8l8 4',
    homeMove: 'm3 11 9-8 9 8v10a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2V11z',
    arrowCircle: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 7v10 M8 11l4-4 4 4 M8 17h8',
    returnIcon: 'M3 12a9 9 0 1 1 3 6.7 M3 18v-4h4',
    coins: 'M12 12c5 0 9-1.3 9-3s-4-3-9-3-9 1.3-9 3 4 3 9 3z M3 9v6c0 1.7 4 3 9 3s9-1.3 9-3V9 M3 12c0 1.7 4 3 9 3s9-1.3 9-3',
    shieldCheck: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4',
    scale: 'M16 16l3-8 3 8c-2 1-4 1-6 0z M2 16l3-8 3 8c-2 1-4 1-6 0z M7 21h10 M12 3v18 M3 7l2-1h14l2 1',
    phone: 'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z',
  };
  const d = paths[name] ?? '';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round" style={style}>
      {d.split(' M').map((seg, i) => (
        <path key={i} d={(i === 0 ? seg : 'M' + seg)} />
      ))}
    </svg>
  );
}

function Button({ variant = 'primary', size = 'md', icon, iconAfter, children, onClick, style }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid transparent',
    borderRadius: 8, fontFamily: 'inherit', fontWeight: 600, cursor: 'pointer',
    transition: 'all 180ms cubic-bezier(0.16,1,0.3,1)', letterSpacing: '-0.005em', lineHeight: 1,
  };
  const sizes = {
    sm: { padding: '8px 12px', fontSize: 13 },
    md: { padding: '10px 16px', fontSize: 14 },
    lg: { padding: '14px 22px', fontSize: 15 },
  };
  const variants = {
    primary: { background: '#1E57D6', color: '#fff' },
    secondary: { background: '#fff', borderColor: '#d0d5dd', color: '#101828' },
    ghost: { background: 'transparent', color: '#344054' },
  };
  return (
    <button onClick={onClick}
      style={{ ...base, ...sizes[size], ...variants[variant], ...style }}
      onMouseEnter={(e) => {
        if (variant === 'primary') e.currentTarget.style.background = '#1846B0';
        if (variant === 'secondary') e.currentTarget.style.background = '#f9fafb';
        if (variant === 'ghost') e.currentTarget.style.background = '#f2f4f7';
      }}
      onMouseLeave={(e) => { Object.assign(e.currentTarget.style, variants[variant]); }}>
      {icon && <Icon name={icon} size={16} />}
      {children}
      {iconAfter && <Icon name={iconAfter} size={16} />}
    </button>
  );
}

function Badge({ tone = 'neutral', dot = true, children }) {
  const tones = {
    neutral: { bg: '#f2f4f7', fg: '#344054', dot: '#98a2b3' },
    success: { bg: '#ecfdf3', fg: '#027a48', dot: '#12b76a' },
    warning: { bg: '#fffaeb', fg: '#b54708', dot: '#f79009' },
    danger:  { bg: '#fef3f2', fg: '#b42318', dot: '#f04438' },
    info:    { bg: '#eff8ff', fg: '#175cd3', dot: '#2e90fa' },
    brand:   { bg: '#EFF6FF', fg: '#1846B0', dot: '#2563EB' },
  };
  const t = tones[tone];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px',
      borderRadius: 9999, background: t.bg, color: t.fg, fontSize: 11, fontWeight: 600,
      letterSpacing: '0.02em' }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 9999, background: t.dot }} />}
      {children}
    </span>
  );
}

function Card({ children, style, onClick, interactive }) {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff', border: '1px solid',
        borderColor: interactive && hover ? '#d0d5dd' : '#eaecf0',
        borderRadius: 12,
        boxShadow: interactive && hover
          ? '0 4px 8px -2px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.06)'
          : '0 1px 3px 0 rgba(16,24,40,0.08), 0 1px 2px 0 rgba(16,24,40,0.04)',
        cursor: interactive ? 'pointer' : 'default',
        transition: 'all 180ms cubic-bezier(0.16,1,0.3,1)',
        ...style,
      }}>{children}</div>
  );
}

function Input({ value, onChange, placeholder, prefix, suffix, style }) {
  const [focus, setFocus] = useState(false);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8,
      padding: '9px 12px', background: '#fff', borderRadius: 8,
      border: `1px solid ${focus ? '#2563EB' : '#d0d5dd'}`,
      boxShadow: focus ? '0 0 0 4px rgba(30,87,214,0.18)' : 'none',
      transition: 'all 120ms ease', ...style }}>
      {prefix && <span style={{ color: '#667085', display: 'flex' }}>{prefix}</span>}
      <input value={value} onChange={onChange} placeholder={placeholder}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{ border: 0, outline: 0, background: 'transparent',
          fontFamily: 'inherit', fontSize: 14, color: '#101828', width: '100%' }} />
      {suffix && <span style={{ color: '#667085', fontSize: 12 }}>{suffix}</span>}
    </div>
  );
}

function Logo({ size = 28, withWordmark = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="22" fill="#1E57D6"/>
        <text x="24" y="22" textAnchor="middle" fill="#fff"
          fontFamily="Inter, system-ui, sans-serif" fontWeight="800" fontSize="10.5" letterSpacing="-0.02em">ABGS</text>
        <path d="M17 28 L28 28 L32 32 L28 36 L17 36 L21 32 Z" fill="#DC2626"/>
      </svg>
      {withWordmark && (
        <div style={{ fontWeight: 800, fontSize: 16, letterSpacing: '-0.02em', color: '#101828', lineHeight: 1.1 }}>
          AB <span style={{ color: '#1E57D6' }}>Group</span> Shipping
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, Button, Badge, Card, Input, Logo });