// Shared small components for Estudia con Carol UI kit.
// All exposed on window so other Babel scripts can use them.

const { useState, useEffect, useRef } = React;

// ----- Icon helpers (inline Lucide-style SVGs, stroke 1.5) -----
const ICONS = {
  book:     <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></>,
  folder:   <><path d="M4 20h16a2 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 2v13c0 1.1.9 2 2 2z"/></>,
  file:     <><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></>,
  pencil:   <><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></>,
  check:    <><path d="M20 6 9 17l-5-5"/></>,
  star:     <><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.123 2.123 0 0 0 1.597-1.16z"/></>,
  flame:    <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5"/></>,
  search:   <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
  user:     <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  lock:     <><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
  chevron:  <><path d="m9 18 6-6-6-6"/></>,
  chevronL: <><path d="m15 18-6-6 6-6"/></>,
  chevronD: <><path d="m6 9 6 6 6-6"/></>,
  plus:     <><path d="M5 12h14M12 5v14"/></>,
  upload:   <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></>,
  download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></>,
  calendar: <><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
  clock:    <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
  msg:      <><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></>,
  sitemap:  <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="3" width="6" height="6" rx="1"/><rect x="9" y="15" width="6" height="6" rx="1"/><path d="M6 9v3h12V9M12 12v3"/></>,
  more:     <><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></>,
  arrow:    <><path d="M5 12h14M13 5l7 7-7 7"/></>,
  bookmark: <><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></>,
};

function Icon({ name, size = 18, color, strokeWidth = 1.5, style }) {
  const path = ICONS[name];
  if (!path) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color || 'currentColor'} strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, ...style }}>
      {path}
    </svg>
  );
}

// ----- Button -----
function Button({ variant = 'primary', size = 'md', icon, iconRight, children, onClick, disabled, type = 'button', style }) {
  const styles = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: size === 'sm' ? '5px 10px' : '9px 14px',
    borderRadius: 'var(--r-md)',
    font: size === 'sm' ? 'var(--type-ui-sm)' : 'var(--type-ui)',
    cursor: disabled ? 'not-allowed' : 'pointer',
    border: '1px solid transparent',
    transition: 'all var(--t-fast) var(--ease)',
    opacity: disabled ? 0.4 : 1,
    ...(variant === 'primary'   && { background: 'var(--terracotta)', color: '#fff' }),
    ...(variant === 'secondary' && { background: 'var(--bg-surface)', color: 'var(--ink)', borderColor: 'var(--line)' }),
    ...(variant === 'dark'      && { background: 'var(--forest)', color: '#FBF8F0' }),
    ...(variant === 'ghost'     && { background: 'transparent', color: 'var(--ink)' }),
    ...style,
  };
  return (
    <button type={type} className={`ecc-btn ecc-btn--${variant}`} onClick={onClick} disabled={disabled} style={styles}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === 'sm' ? 14 : 16} />}
    </button>
  );
}

// ----- Chip (subject) -----
function Chip({ subject, active, onClick, count }) {
  const data = (window.ECC_DATA.SUBJECTS).find(s => s.id === subject);
  if (!data) return null;
  const filled = active;
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 'var(--r-pill)',
      font: 'var(--type-ui-sm)',
      border: `1px solid ${data.color}`,
      background: filled ? data.color : 'var(--bg-surface)',
      color: filled ? '#fff' : data.color,
      cursor: onClick ? 'pointer' : 'default',
      transition: 'all var(--t-fast) var(--ease)',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: filled ? '#fff' : data.color }} />
      {data.short}
      {count != null && <span style={{ opacity: 0.7, marginLeft: 4 }}>· {count}</span>}
    </button>
  );
}

// ----- Badge -----
function Badge({ kind, children }) {
  const map = {
    'new':         { fg: 'var(--terracotta-deep)', bg: 'var(--terracotta-soft)' },
    'in-progress': { fg: 'var(--warning)',          bg: '#F7E6CB' },
    'done':        { fg: 'var(--success)',          bg: '#E5EDD8' },
    'danger':      { fg: 'var(--danger)',           bg: '#F2D8D2' },
    'default':     { fg: 'var(--ink-2)',            bg: 'var(--bg-muted)' },
  };
  const c = map[kind] || map.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 8px', borderRadius: 'var(--r-sm)',
      font: 'var(--type-ui-sm)', color: c.fg, background: c.bg,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'currentColor' }} />
      {children}
    </span>
  );
}

// ----- Avatar -----
function Avatar({ initials, size = 28, color = 'var(--forest)' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: color, color: '#FBF8F0',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      font: 'var(--fw-medium) ' + Math.round(size * 0.42) + 'px/1 var(--font-mono)',
      flexShrink: 0,
    }}>{initials}</div>
  );
}

// ----- Label -----
function Label({ children, style }) {
  return <span style={{
    font: 'var(--type-label)',
    letterSpacing: 'var(--tracking-label)',
    textTransform: 'uppercase',
    color: 'var(--ink-3)',
    ...style,
  }}>{children}</span>;
}

// ----- KindIcon (returns icon name for a material kind) -----
function kindIcon(kind) {
  const k = window.ECC_DATA.KINDS[kind];
  return k ? k.icon : 'file';
}

Object.assign(window, { Icon, Button, Chip, Badge, Avatar, Label, kindIcon });