/* ============================================================
   CanchApp UI Kit — primitives
   Icon (Lucide path data), Button, Badge, Avatar, etc.
   ============================================================ */

// ---- Icon: a small subset of Lucide (MIT) line icons ----
const CC_ICONS = {
  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/>',
  mapPin: '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
  calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
  users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>',
  trophy: '<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0 1 14 0v1"/>',
  home: '<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/>',
  chevronRight: '<path d="m9 6 6 6-6 6"/>',
  chevronLeft: '<path d="m15 6-6 6 6 6"/>',
  star: '<path d="m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z"/>',
  zap: '<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>',
  x: '<path d="M18 6 6 18M6 6l12 12"/>',
  sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/>',
  arrowLeft: '<path d="M19 12H5M12 19l-7-7 7-7"/>',
  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
  heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/>',
  navigation: '<path d="M3 11l19-9-9 19-2-8-8-2Z"/>',
  ticket: '<path d="M3 9a3 3 0 0 0 0 6v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z"/><path d="M13 5v14"/>',
};

function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 2, style = {}, fill = 'none' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ flex: '0 0 auto', display: 'block', ...style }}
      dangerouslySetInnerHTML={{ __html: CC_ICONS[name] || '' }} />
  );
}

// ---- Button ----
function Button({ variant = 'primary', children, leftIcon, onClick, full, size = 'md', style = {} }) {
  const base = {
    border: '1px solid transparent', borderRadius: 'var(--radius-btn)',
    font: 'var(--text-body-strong)', cursor: 'pointer', display: 'inline-flex',
    alignItems: 'center', justifyContent: 'center', gap: 8,
    minHeight: size === 'sm' ? 38 : 44, padding: size === 'sm' ? '0 16px' : '12px 24px',
    width: full ? '100%' : 'auto', transition: 'background 140ms ease, transform 120ms ease',
    WebkitTapHighlightColor: 'transparent', ...style,
  };
  const variants = {
    primary: { background: 'var(--primary)', color: '#fff' },
    accent: { background: 'var(--accent)', color: 'var(--ink)' },
    ghost: { background: 'transparent', color: 'var(--muted)' },
    outline: { background: 'var(--surface)', color: 'var(--ink)', borderColor: 'var(--border)' },
  };
  const hover = {
    primary: 'var(--primary-700)', accent: 'var(--accent-700)',
    ghost: 'var(--surface-sunk)', outline: 'var(--surface-sunk)',
  };
  const [h, setH] = React.useState(false);
  const v = { ...variants[variant] };
  if (h && variant !== 'outline') v.background = hover[variant];
  if (h && variant === 'outline') v.background = 'var(--surface-sunk)';
  return (
    <button onClick={onClick} style={{ ...base, ...v }}
      onMouseDown={e => e.currentTarget.style.transform = 'scale(0.98)'}
      onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
      onMouseEnter={() => setH(true)} onMouseLeave={() => { setH(false); }}>
      {leftIcon && <Icon name={leftIcon} size={18} />}
      {children}
    </button>
  );
}

// ---- Badge ----
const BADGE_TONES = {
  teal: { background: 'var(--primary-050)', color: 'var(--primary)' },
  amber: { background: 'var(--accent-050)', color: 'var(--accent-700)' },
  success: { background: 'var(--success-050)', color: 'var(--success)' },
  error: { background: 'var(--error-050)', color: 'var(--error)' },
  neutral: { background: 'var(--surface-sunk)', color: 'var(--muted)' },
};
function Badge({ tone = 'teal', icon, dot, children, style = {} }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
      padding: '4px 10px', borderRadius: 'var(--radius-pill)', font: 'var(--text-label)',
      ...BADGE_TONES[tone], ...style,
    }}>
      {dot && <span style={{ width: 7, height: 7, borderRadius: 999, background: 'currentColor' }} />}
      {icon && <Icon name={icon} size={13} fill={icon === 'star' ? 'currentColor' : 'none'} />}
      {children}
    </span>
  );
}

// ---- Avatar (initials) ----
function Avatar({ name = '', size = 36, tone = 'var(--primary)' }) {
  const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
  return (
    <span style={{
      width: size, height: size, borderRadius: 999, background: 'var(--primary-050)',
      color: tone, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      font: 'var(--text-label)', fontSize: size * 0.36, flex: '0 0 auto',
    }}>{initials}</span>
  );
}

// ---- SectionHeader ----
function SectionHeader({ title, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '4px 0' }}>
      <h2 className="cc-h3" style={{ font: 'var(--text-h3)', letterSpacing: 'var(--tracking-tight)' }}>{title}</h2>
      {action && <a className="cc-link" style={{ font: 'var(--text-label)', color: 'var(--primary)', cursor: 'pointer' }} onClick={onAction}>{action}</a>}
    </div>
  );
}

// Turf-toned photo placeholder (no real images shipped with the kit)
function CourtPhoto({ children, height = 116, tint = '#2E7D5B', style = {} }) {
  return (
    <div style={{
      height, background: tint, position: 'relative',
      display: 'flex', alignItems: 'flex-end', padding: 10, ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { Icon, Button, Badge, Avatar, SectionHeader, CourtPhoto, CC_ICONS });