// Gurukool shared components — React + inline styles via CSS variables
// All components consume tokens.css.

// ─── Iconography ──────────────────────────────────────────────────────
// Simple line icons (stroke 1.75), not complex SVG art.
function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.75, style = {} }) {
  const s = size;
  const p = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home: <><path d="M3 11L12 4l9 7" {...p}/><path d="M5 10v10h14V10" {...p}/></>,
    check: <path d="M5 12l5 5L20 7" {...p}/>,
    x: <path d="M6 6l12 12M18 6L6 18" {...p}/>,
    bell: <><path d="M6 8a6 6 0 1112 0v5l2 3H4l2-3V8z" {...p}/><path d="M10 19a2 2 0 004 0" {...p}/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" {...p}/><path d="M3 9h18M8 3v4M16 3v4" {...p}/></>,
    book: <path d="M4 4v16l8-3 8 3V4l-8 3-8-3z" {...p}/>,
    user: <><circle cx="12" cy="8" r="4" {...p}/><path d="M4 21a8 8 0 0116 0" {...p}/></>,
    users: <><circle cx="9" cy="8" r="3.5" {...p}/><path d="M2 20a7 7 0 0114 0" {...p}/><path d="M16 4a3.5 3.5 0 010 7M22 20a7 7 0 00-4-6.3" {...p}/></>,
    star: <path d="M12 3l2.6 5.9 6.4.7-4.8 4.4 1.4 6.3L12 17.3 6.4 20.3 7.8 14 3 9.6l6.4-.7z" {...p}/>,
    chart: <><path d="M4 4v16h16" {...p}/><path d="M8 16l4-5 3 3 5-7" {...p}/></>,
    settings: <><circle cx="12" cy="12" r="3" {...p}/><path d="M12 2v3M12 19v3M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2" {...p}/></>,
    logout: <><path d="M15 4h4a1 1 0 011 1v14a1 1 0 01-1 1h-4" {...p}/><path d="M3 12h12M11 8l4 4-4 4" {...p}/></>,
    chevronRight: <path d="M9 6l6 6-6 6" {...p}/>,
    chevronDown: <path d="M6 9l6 6 6-6" {...p}/>,
    chevronLeft: <path d="M15 6l-6 6 6 6" {...p}/>,
    plus: <path d="M12 5v14M5 12h14" {...p}/>,
    search: <><circle cx="11" cy="11" r="7" {...p}/><path d="M20 20l-3.5-3.5" {...p}/></>,
    filter: <path d="M3 5h18l-7 8v6l-4-2v-4L3 5z" {...p}/>,
    clock: <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 7v5l3 2" {...p}/></>,
    pencil: <><path d="M4 20l4-1 11-11-3-3L5 16l-1 4z" {...p}/></>,
    trash: <><path d="M4 7h16M10 11v6M14 11v6" {...p}/><path d="M6 7l1 13a1 1 0 001 1h8a1 1 0 001-1l1-13M9 7V4h6v3" {...p}/></>,
    upload: <><path d="M12 16V4M8 8l4-4 4 4" {...p}/><path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" {...p}/></>,
    download: <><path d="M12 4v12M8 12l4 4 4-4" {...p}/><path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" {...p}/></>,
    gift: <><rect x="3" y="8" width="18" height="4" {...p}/><path d="M5 12v9h14v-9M12 8v13" {...p}/><path d="M12 8c-2-4-6-2-4 0 2 2 4 0 4 0zM12 8c2-4 6-2 4 0-2 2-4 0-4 0z" {...p}/></>,
    sparkles: <><path d="M12 3l1.5 4L18 8l-4.5 1L12 13l-1.5-4L6 8l4.5-1z" {...p}/><path d="M19 14l.7 1.8L21.5 16l-1.8.7L19 18.5l-.7-1.8L16.5 16l1.8-.7z" {...p}/></>,
    flame: <path d="M12 3s-6 5-6 10a6 6 0 0012 0c0-2-1-3-2-4 0 2-1 3-2 3 0-3-2-6-2-9z" {...p}/>,
    trophy: <><path d="M8 4h8v5a4 4 0 01-8 0V4z" {...p}/><path d="M4 6h4M16 6h4M4 6v2a3 3 0 003 3M20 6v2a3 3 0 01-3 3M9 14v3h6v-3M8 21h8" {...p}/></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" {...p}/><circle cx="12" cy="12" r="3" {...p}/></>,
    lock: <><rect x="5" y="11" width="14" height="10" rx="2" {...p}/><path d="M8 11V7a4 4 0 018 0v4" {...p}/></>,
    menu: <path d="M4 7h16M4 12h16M4 17h16" {...p}/>,
    grid: <><rect x="3" y="3" width="7" height="7" {...p}/><rect x="14" y="3" width="7" height="7" {...p}/><rect x="3" y="14" width="7" height="7" {...p}/><rect x="14" y="14" width="7" height="7" {...p}/></>,
    building: <><rect x="4" y="3" width="16" height="18" {...p}/><path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2" {...p}/></>,
    tag: <><path d="M3 3h8l10 10-8 8L3 11V3z" {...p}/><circle cx="7.5" cy="7.5" r="1.5" {...p}/></>,
    clipboard: <><rect x="6" y="4" width="12" height="17" rx="2" {...p}/><rect x="9" y="2" width="6" height="4" rx="1" {...p}/><path d="M9 11h6M9 15h6" {...p}/></>,
    message: <path d="M4 5h16v11H9l-5 4V5z" {...p}/>,
    sun: <><circle cx="12" cy="12" r="4" {...p}/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6L19 19M5 19l1.4-1.4M17.6 6.4L19 5" {...p}/></>,
    moon: <path d="M20 14A8 8 0 0110 4a8 8 0 1010 10z" {...p}/>,
    globe: <><circle cx="12" cy="12" r="9" {...p}/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" {...p}/></>,
    arrowRight: <path d="M5 12h14M13 6l6 6-6 6" {...p}/>,
    arrowUp: <path d="M12 19V5M6 11l6-6 6 6" {...p}/>,
    target: <><circle cx="12" cy="12" r="9" {...p}/><circle cx="12" cy="12" r="5" {...p}/><circle cx="12" cy="12" r="1.5" fill={color}/></>,
    play: <path d="M7 4l12 8-12 8z" {...p} fill={color}/>,
    megaphone: <><path d="M3 10v4l12 6V4L3 10z" {...p}/><path d="M15 8a4 4 0 010 8" {...p}/></>,
    shield: <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z" {...p}/>,
    rupee: <><path d="M7 5h10M7 9h10M17 5c0 4-3 5-7 5l7 9" {...p} fill="none"/></>,
    focus: <><path d="M4 4h4M4 4v4M20 4h-4M20 4v4M4 20h4M4 20v-4M20 20h-4M20 20v-4" {...p}/><circle cx="12" cy="12" r="3" {...p}/></>,
    heart: <path d="M12 20s-8-5-8-11a4 4 0 018-1 4 4 0 018 1c0 6-8 11-8 11z" {...p}/>,
    alert: <><path d="M12 3l10 18H2L12 3z" {...p}/><path d="M12 10v5M12 18v0.5" {...p}/></>,
    arrowDown: <path d="M12 5v14M6 13l6 6 6-6" {...p}/>,
  };
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" style={{ display: 'inline-block', flexShrink: 0, ...style }}>
      {paths[name] || paths.x}
    </svg>
  );
}

// ─── Button ────────────────────────────────────────────────────────────
function Button({ children, variant = 'primary', size = 'md', leftIcon, rightIcon, block, onClick, style = {}, disabled }) {
  const sizes = {
    sm: { h: 32, px: 12, fs: 13, gap: 6, r: 8 },
    md: { h: 40, px: 16, fs: 14, gap: 8, r: 10 },
    lg: { h: 48, px: 20, fs: 15, gap: 10, r: 12 },
  }[size];
  const variants = {
    primary: { bg: 'var(--accent)', fg: '#fff', border: 'transparent', hover: 'brightness(1.08)' },
    secondary: { bg: 'var(--accent-soft)', fg: 'var(--accent-ink)', border: 'transparent' },
    ghost: { bg: 'transparent', fg: 'var(--text)', border: 'transparent' },
    outline: { bg: 'transparent', fg: 'var(--text)', border: 'var(--border-strong)' },
    danger: { bg: 'var(--gk-danger)', fg: '#fff', border: 'transparent' },
  }[variant];
  return (
    <button onClick={onClick} disabled={disabled} style={{
      height: sizes.h, padding: `0 ${sizes.px}px`, borderRadius: sizes.r,
      fontSize: sizes.fs, fontWeight: 600, fontFamily: 'var(--font-sans)',
      background: variants.bg, color: variants.fg,
      border: `1px solid ${variants.border}`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: sizes.gap, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap',
      width: block ? '100%' : undefined,
      transition: 'filter 150ms, transform 80ms, background 150ms',
      letterSpacing: -0.1,
      ...style,
    }}
      onMouseEnter={e => !disabled && (e.currentTarget.style.filter = 'brightness(0.97)')}
      onMouseLeave={e => e.currentTarget.style.filter = ''}
    >
      {leftIcon && <Icon name={leftIcon} size={sizes.fs + 2} />}
      {children}
      {rightIcon && <Icon name={rightIcon} size={sizes.fs + 2} />}
    </button>
  );
}

// ─── Badge ─────────────────────────────────────────────────────────────
function Badge({ children, tone = 'neutral', size = 'md', style = {} }) {
  const tones = {
    neutral: { bg: 'var(--gk-stone-100)', fg: 'var(--gk-stone-700)' },
    green:   { bg: 'var(--accent-soft)', fg: 'var(--accent-ink)' },
    success: { bg: 'color-mix(in oklch, var(--gk-success) 15%, transparent)', fg: 'oklch(38% 0.13 145)' },
    warn:    { bg: 'color-mix(in oklch, var(--gk-warn) 22%, transparent)', fg: 'oklch(40% 0.12 75)' },
    danger:  { bg: 'color-mix(in oklch, var(--gk-danger) 15%, transparent)', fg: 'oklch(42% 0.15 25)' },
    info:    { bg: 'color-mix(in oklch, var(--gk-info) 12%, transparent)', fg: 'oklch(38% 0.13 230)' },
    lime:    { bg: 'color-mix(in oklch, var(--gk-lime-400) 25%, transparent)', fg: 'oklch(32% 0.12 128)' },
    accent:  { bg: 'var(--accent-soft)', fg: 'var(--accent-ink)' },
  }[tone];
  const sizes = {
    sm: { fs: 11, px: 8, h: 20 },
    md: { fs: 12, px: 10, h: 24 },
    lg: { fs: 13, px: 12, h: 28 },
  }[size];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      height: sizes.h, padding: `0 ${sizes.px}px`,
      borderRadius: 999, fontSize: sizes.fs, fontWeight: 600,
      background: tones.bg, color: tones.fg, letterSpacing: 0.1,
      ...style,
    }}>{children}</span>
  );
}

// ─── Card ──────────────────────────────────────────────────────────────
function Card({ children, padding = 20, style = {}, interactive, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'var(--surface)',
      borderRadius: 'var(--r-xl)',
      border: '1px solid var(--border)',
      padding, cursor: interactive ? 'pointer' : undefined,
      transition: 'box-shadow 200ms, transform 150ms, border-color 150ms',
      ...style,
    }}
      onMouseEnter={e => interactive && (e.currentTarget.style.boxShadow = 'var(--sh-md)', e.currentTarget.style.borderColor = 'var(--border-strong)')}
      onMouseLeave={e => interactive && (e.currentTarget.style.boxShadow = '', e.currentTarget.style.borderColor = 'var(--border)')}
    >
      {children}
    </div>
  );
}

// ─── Avatar ────────────────────────────────────────────────────────────
function Avatar({ name = '?', size = 40, tone }) {
  const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
  // Generate tone from name hash for variety
  const hash = name.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
  const hues = [152, 128, 95, 55, 25, 270, 195, 340];
  const h = tone !== undefined ? tone : hues[hash % hues.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: `oklch(90% 0.06 ${h})`,
      color: `oklch(35% 0.12 ${h})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.38, fontWeight: 700, letterSpacing: -0.2,
      flexShrink: 0, fontFamily: 'var(--font-sans)',
    }}>{initials}</div>
  );
}

// ─── Input ─────────────────────────────────────────────────────────────
function Input({ label, hint, error, leftIcon, rightIcon, ...props }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {label && <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{label}</span>}
      <div style={{ position: 'relative' }}>
        {leftIcon && <div style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}><Icon name={leftIcon} size={18}/></div>}
        <input {...props} style={{
          height: 42, width: '100%',
          padding: `0 ${rightIcon ? 40 : 14}px 0 ${leftIcon ? 38 : 14}px`,
          border: `1px solid ${error ? 'var(--gk-danger)' : 'var(--border)'}`,
          borderRadius: 10, background: 'var(--surface)',
          fontSize: 14, fontFamily: 'var(--font-sans)', color: 'var(--text)',
          outline: 'none', transition: 'border-color 150ms, box-shadow 150ms',
          ...props.style,
        }}
          onFocus={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 0 0 3px var(--ring)'; }}
          onBlur={e => { e.currentTarget.style.borderColor = error ? 'var(--gk-danger)' : 'var(--border)'; e.currentTarget.style.boxShadow = ''; }}
        />
        {rightIcon && <div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-muted)' }}><Icon name={rightIcon} size={18}/></div>}
      </div>
      {hint && !error && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{hint}</span>}
      {error && <span style={{ fontSize: 12, color: 'var(--gk-danger)' }}>{error}</span>}
    </label>
  );
}

// ─── Progress ──────────────────────────────────────────────────────────
function Progress({ value = 0, tone = 'green', height = 8 }) {
  const toneMap = { green: 'var(--accent)', lime: 'var(--gk-lime-500)', warn: 'var(--gk-warn)', danger: 'var(--gk-danger)' };
  return (
    <div style={{ height, borderRadius: height, background: 'var(--gk-stone-100)', overflow: 'hidden' }}>
      <div style={{
        height: '100%', width: `${Math.max(0, Math.min(100, value))}%`,
        background: toneMap[tone], borderRadius: height,
        transition: 'width 500ms var(--ease-out)',
      }}/>
    </div>
  );
}

// ─── Divider w/ optional jali motif ────────────────────────────────────
function JaliDivider({ label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0' }}>
      <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
      <svg width="22" height="22" viewBox="0 0 22 22" style={{ color: 'var(--accent)', opacity: 0.5 }}>
        <g fill="none" stroke="currentColor" strokeWidth="1">
          <circle cx="11" cy="11" r="3"/>
          <path d="M11 2v4M11 16v4M2 11h4M16 11h4M4.5 4.5l3 3M14.5 14.5l3 3M4.5 17.5l3-3M14.5 7.5l3-3"/>
        </g>
      </svg>
      {label && <span style={{ fontSize: 12, color: 'var(--text-muted)', letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 600 }}>{label}</span>}
      <div style={{ flex: 1, height: 1, background: 'var(--border)' }}/>
    </div>
  );
}

// ─── Logo ──────────────────────────────────────────────────────────────
function GurukoolLogo({ size = 28, withWordmark = true, color }) {
  const c = color || 'var(--accent)';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg width={size} height={size} viewBox="0 0 32 32">
        {/* stylized lotus/banyan leaf — 3 leaf forms around center, geometric */}
        <g fill={c}>
          <path d="M16 4 C 22 8, 22 14, 16 16 C 10 14, 10 8, 16 4 Z" opacity="0.9"/>
          <path d="M4 16 C 8 10, 14 10, 16 16 C 14 22, 8 22, 4 16 Z" opacity="0.7"/>
          <path d="M28 16 C 24 22, 18 22, 16 16 C 18 10, 24 10, 28 16 Z" opacity="0.7"/>
        </g>
        <circle cx="16" cy="16" r="2.2" fill="var(--gk-lime-400)"/>
      </svg>
      {withWordmark && (
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: size * 0.7, fontWeight: 600,
          color: 'var(--text)', letterSpacing: -0.5,
        }}>Gurukool</span>
      )}
    </div>
  );
}

// Export
Object.assign(window, { Icon, Button, Badge, Card, Avatar, Input, Progress, JaliDivider, GurukoolLogo });