// shaiAcademy — Shared UI primitives
// Export all to window for use across files

const Icon = ({ name, size = 16, stroke = 1.5 }) => {
  const paths = {
    home: <><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9v12h14V9"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><path d="M2 20c0-3.5 3-6 7-6s7 2.5 7 6"/><circle cx="17" cy="9" r="3"/><path d="M15 14c3 0 6 2 6 5"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></>,
    whistle: <><circle cx="9" cy="14" r="5"/><path d="M14 13l6-3M14 16l6 3M9 14l3-3"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    check: <path d="M4 12l5 5L20 6"/>,
    plus: <path d="M12 5v14M5 12h14"/>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></>,
    chart: <><path d="M3 21h18"/><path d="M7 16V9M12 16V5M17 16v-4"/></>,
    money: <><rect x="3" y="7" width="18" height="12" rx="2"/><circle cx="12" cy="13" r="2.5"/><path d="M7 7V5h10v2"/></>,
    clipboard: <><rect x="6" y="4" width="12" height="18" rx="2"/><path d="M9 4v-1h6v1"/><path d="M9 10h6M9 14h4"/></>,
    star: <path d="M12 3l2.5 6 6.5.5-5 4.5 1.5 6.5L12 17l-5.5 3.5L8 14 3 9.5 9.5 9z"/>,
    apple: <><path d="M12 8c0-2 1-4 3-4 0 2-1 4-3 4zM7 10c-2 0-4 2.5-4 6s2 6 4 7c1 0 1.5-.5 2.5-.5s1.5.5 2.5.5c2-1 4-3.5 4-7s-2-6-4-6c-1 0-1.5.5-2.5.5s-1.5-.5-2.5-.5z"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0v4l2 3H4l2-3V8z"/><path d="M10 18a2 2 0 0 0 4 0"/></>,
    chevron: <path d="M9 6l6 6-6 6"/>,
    arrow_right: <path d="M5 12h14M13 6l6 6-6 6"/>,
    arrow_down: <path d="M12 5v14M6 13l6 6 6-6"/>,
    arrow_up: <path d="M12 19V5M6 11l6-6 6 6"/>,
    x: <path d="M6 6l12 12M18 6l-6 6-6 6"/>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></>,
    menu: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    file: <><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/></>,
    download: <><path d="M12 3v13M6 11l6 6 6-6"/><path d="M4 21h16"/></>,
    share: <><circle cx="18" cy="5" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="19" r="2"/><path d="M8 11l8-5M8 13l8 5"/></>,
    qr: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3M20 14v7M14 17v4h3M17 20h4"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></>,
    pin: <><path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{flex: 'none'}}>
      {paths[name] || null}
    </svg>
  );
};

const Badge = ({ children, tone = 'default' }) => (
  <span className={`badge ${tone !== 'default' ? 'badge-' + tone : ''}`}>{children}</span>
);

const Avatar = ({ name = '', variant = '', size = '' }) => {
  const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('');
  const variants = ['', 'avatar-a', 'avatar-b', 'avatar-c'];
  const v = variant || variants[(name.charCodeAt(0) || 0) % 4];
  return <span className={`avatar ${v} ${size}`}>{initials}</span>;
};

const Placeholder = ({ label, style = {} }) => (
  <div className="ph" style={style}>{label}</div>
);

const Stat = ({ label, value, sub, trend }) => (
  <div className="stat">
    <div className="stat-label">{label}</div>
    <div className="stat-value">{value}</div>
    {sub && <div className="stat-sub"><span className={trend === 'up' ? 'trend-up' : trend === 'dn' ? 'trend-dn' : ''}>{sub}</span></div>}
  </div>
);

const SectionMarker = ({ num, children }) => (
  <div className="section-marker">
    <span className="section-marker-num">{num}</span>
    <h2 className="section-marker-title">{children}</h2>
  </div>
);

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

// Radar chart — custom SVG (editorial, oversized)
const Radar = ({ skills, size = 320, compare = null, accent = 'var(--accent)' }) => {
  const center = size / 2;
  const radius = size * 0.4;
  const levels = 5;
  const angleStep = (Math.PI * 2) / skills.length;
  const pt = (i, v) => {
    const a = i * angleStep - Math.PI / 2;
    const r = (v / 10) * radius;
    return [center + Math.cos(a) * r, center + Math.sin(a) * r];
  };
  const poly = (values) => values.map((v, i) => pt(i, v).join(',')).join(' ');
  return (
    <svg width={size} height={size} style={{overflow: 'visible'}}>
      {/* grid rings */}
      {[...Array(levels)].map((_, l) => {
        const r = (radius * (l + 1)) / levels;
        const pts = skills.map((_, i) => {
          const a = i * angleStep - Math.PI / 2;
          return [center + Math.cos(a) * r, center + Math.sin(a) * r].join(',');
        }).join(' ');
        return <polygon key={l} points={pts} fill="none" stroke="var(--rule)" strokeWidth="1"/>;
      })}
      {/* axes */}
      {skills.map((s, i) => {
        const [x, y] = pt(i, 10);
        return <line key={i} x1={center} y1={center} x2={x} y2={y} stroke="var(--rule)" strokeWidth="1"/>;
      })}
      {/* compare (ghost) */}
      {compare && <polygon points={poly(compare)} fill="var(--ink)" fillOpacity="0.06" stroke="var(--ink-3)" strokeWidth="1" strokeDasharray="3,3"/>}
      {/* current */}
      <polygon points={poly(skills.map(s => s.value))} fill={accent} fillOpacity="0.18" stroke={accent} strokeWidth="2"/>
      {/* dots */}
      {skills.map((s, i) => {
        const [x, y] = pt(i, s.value);
        return <circle key={i} cx={x} cy={y} r="4" fill={accent}/>;
      })}
      {/* labels */}
      {skills.map((s, i) => {
        const a = i * angleStep - Math.PI / 2;
        const lr = radius + 22;
        const x = center + Math.cos(a) * lr;
        const y = center + Math.sin(a) * lr;
        return (
          <g key={i}>
            <text x={x} y={y - 5} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.1em" fill="var(--ink-3)" style={{textTransform: 'uppercase'}}>{s.name}</text>
            <text x={x} y={y + 10} textAnchor="middle" fontFamily="var(--font-display)" fontSize="16" fontWeight="500" fill="var(--ink)">{s.value}</text>
          </g>
        );
      })}
    </svg>
  );
};

// Sparkline
const Sparkline = ({ data, height = 40, width = 120, accent = 'var(--ink)' }) => {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const step = width / (data.length - 1);
  const y = (v) => height - ((v - min) / (max - min || 1)) * height;
  const d = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${i * step} ${y(v)}`).join(' ');
  return (
    <svg width={width} height={height} style={{overflow: 'visible'}}>
      <path d={d} fill="none" stroke={accent} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx={(data.length - 1) * step} cy={y(data[data.length - 1])} r="3" fill={accent}/>
    </svg>
  );
};

// Bar chart for attendance
const BarChart = ({ data, height = 140, width = 400 }) => {
  const max = 100;
  const bw = width / data.length * 0.6;
  const gap = width / data.length * 0.4;
  return (
    <svg width={width} height={height} style={{overflow: 'visible'}}>
      {data.map((d, i) => {
        const x = i * (bw + gap) + gap / 2;
        const presentH = (d.presente / max) * (height - 20);
        const lateH = (d.tardanza / max) * (height - 20);
        const absentH = (d.falta / max) * (height - 20);
        let y = height - 20;
        return (
          <g key={i}>
            <rect x={x} y={y - presentH} width={bw} height={presentH} fill="var(--ink)"/>
            <rect x={x} y={y - presentH - lateH} width={bw} height={lateH} fill="var(--warn)"/>
            <rect x={x} y={y - presentH - lateH - absentH} width={bw} height={absentH} fill="var(--danger)"/>
            <text x={x + bw/2} y={height - 4} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)" style={{textTransform: 'uppercase'}}>{d.label}</text>
          </g>
        );
      })}
    </svg>
  );
};

// Line chart for skill evolution
const LineChart = ({ series, height = 180, width = 560 }) => {
  const max = 10; const min = 0;
  const n = series[0].data.length;
  const step = (width - 40) / (n - 1);
  const y = (v) => height - 30 - ((v - min) / (max - min)) * (height - 50);
  return (
    <svg width={width} height={height} style={{overflow: 'visible'}}>
      {/* Y axis rule */}
      <line x1="30" y1="20" x2="30" y2={height - 30} stroke="var(--rule)"/>
      <line x1="30" y1={height - 30} x2={width} y2={height - 30} stroke="var(--rule)"/>
      {[2, 4, 6, 8, 10].map(v => (
        <g key={v}>
          <text x="22" y={y(v) + 3} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">{v}</text>
          <line x1="30" y1={y(v)} x2={width} y2={y(v)} stroke="var(--rule)" strokeDasharray="2,4"/>
        </g>
      ))}
      {series.map((s, si) => {
        const d = s.data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${30 + i * step} ${y(v)}`).join(' ');
        return (
          <g key={si}>
            <path d={d} fill="none" stroke={s.color} strokeWidth="2"/>
            {s.data.map((v, i) => <circle key={i} cx={30 + i * step} cy={y(v)} r="3" fill={s.color}/>)}
          </g>
        );
      })}
      {/* x labels */}
      {['ENE','FEB','MAR','ABR','MAY','JUN'].map((m, i) => (
        <text key={i} x={30 + i * step} y={height - 12} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">{m}</text>
      ))}
    </svg>
  );
};

Object.assign(window, { Icon, Badge, Avatar, Placeholder, Stat, SectionMarker, Eyebrow, Radar, Sparkline, BarChart, LineChart });