// Ejecutora — Design System Components
const EJ = {
  cyan: '#00C2CB', navy: '#1A1F6E', violet: '#7B5CF5',
  cyanLight: '#E8FFFE', bgApp: '#F5F9FF', pink: '#FF6B8A',
  white: '#FFFFFF', body: '#2A2A3A', secondary: '#5A5A72',
  muted: '#9898B0', border: '#E0E8FF', cyanDark: '#00A8B0',
  violetLight: '#EDE8FF', pinkLight: '#FFE8EE',
  green: '#22C55E', greenLight: '#F0FFF4',
};

// ── Badge ──────────────────────────────────────────────────────
function Badge({ children, variant = 'cyan', style }) {
  const variants = {
    cyan:   { background: EJ.cyanLight,   color: EJ.cyanDark },
    violet: { background: EJ.violetLight, color: EJ.violet },
    pink:   { background: EJ.pinkLight,   color: EJ.pink },
    navy:   { background: EJ.navy,        color: '#fff' },
    soft:   { background: EJ.bgApp,       color: EJ.navy },
    green:  { background: EJ.greenLight,  color: EJ.green },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontSize: 11, fontWeight: 600, borderRadius: 50,
      padding: '4px 12px', fontFamily: 'Nunito Sans, sans-serif',
      ...variants[variant], ...style,
    }}>{children}</span>
  );
}

// ── Button ─────────────────────────────────────────────────────
function Btn({ children, variant = 'primary', size = 'md', onClick, style, disabled }) {
  const sizes = {
    xs: { fontSize: 11, padding: '6px 14px' },
    sm: { fontSize: 13, padding: '9px 20px' },
    md: { fontSize: 15, padding: '13px 28px' },
    lg: { fontSize: 17, padding: '17px 40px' },
  };
  const variants = {
    primary:   { background: EJ.cyan,   color: '#fff', boxShadow: '0 4px 20px rgba(0,194,203,0.28)' },
    secondary: { background: EJ.pink,   color: '#fff', boxShadow: '0 4px 20px rgba(255,107,138,0.28)' },
    navy:      { background: EJ.navy,   color: '#fff', boxShadow: '0 4px 20px rgba(26,31,110,0.18)' },
    violet:    { background: EJ.violet, color: '#fff', boxShadow: '0 4px 20px rgba(123,92,245,0.28)' },
    outline:   { background: 'transparent', color: EJ.cyan, border: `2px solid ${EJ.cyan}` },
    ghost:     { background: 'transparent', color: EJ.navy, border: 'none' },
    danger:    { background: 'transparent', color: EJ.pink, border: `2px solid ${EJ.pink}` },
  };
  const [hover, setHover] = React.useState(false);
  const hoverMap = { primary: EJ.cyanDark, secondary: '#e8567a', navy: '#2D3399', violet: '#6a4ee0' };
  return (
    <button
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        fontFamily: 'Nunito, sans-serif', fontWeight: 700, borderRadius: 50,
        border: variants[variant].border || 'none', cursor: disabled ? 'not-allowed' : 'pointer',
        transition: 'all 0.2s ease', opacity: disabled ? 0.5 : 1,
        ...sizes[size], ...variants[variant], ...style,
        background: hover && hoverMap[variant] ? hoverMap[variant] : variants[variant].background,
      }}
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >{children}</button>
  );
}

// ── Card ───────────────────────────────────────────────────────
function Card({ children, soft, style, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        background: soft ? EJ.cyanLight : EJ.white,
        borderRadius: 24, padding: 24,
        boxShadow: soft ? 'none' : '0 4px 20px rgba(26,31,110,0.08)',
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
    >{children}</div>
  );
}

// ── Input ──────────────────────────────────────────────────────
function Input({ label, placeholder, type = 'text', error, value, onChange, style }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, ...style }}>
      {label && <label style={{ fontSize: 13, fontWeight: 600, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>{label}</label>}
      <input
        type={type} placeholder={placeholder} value={value} onChange={onChange}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          fontFamily: 'Nunito Sans, sans-serif', fontSize: 14, color: EJ.body,
          background: EJ.white, borderRadius: 16, padding: '11px 16px',
          border: `1.5px solid ${error ? '#EF4444' : focus ? EJ.cyan : EJ.border}`,
          boxShadow: focus ? '0 0 0 3px rgba(0,194,203,0.18)' : 'none',
          outline: 'none', transition: 'all 0.2s', width: '100%', boxSizing: 'border-box',
        }}
      />
      {error && <span style={{ fontSize: 11, color: '#EF4444', fontFamily: 'Nunito Sans, sans-serif' }}>{error}</span>}
    </div>
  );
}

// ── Select ─────────────────────────────────────────────────────
function Select({ label, value, onChange, options, style }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, ...style }}>
      {label && <label style={{ fontSize: 13, fontWeight: 600, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>{label}</label>}
      <select
        value={value} onChange={onChange}
        style={{
          fontFamily: 'Nunito Sans, sans-serif', fontSize: 14, color: EJ.body,
          background: EJ.white, borderRadius: 16, padding: '11px 16px',
          border: `1.5px solid ${EJ.border}`, outline: 'none', cursor: 'pointer',
          width: '100%', boxSizing: 'border-box', appearance: 'none',
        }}
      >
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </div>
  );
}

// ── Textarea ───────────────────────────────────────────────────
function Textarea({ label, placeholder, value, onChange, rows = 3 }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {label && <label style={{ fontSize: 13, fontWeight: 600, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>{label}</label>}
      <textarea
        placeholder={placeholder} value={value} onChange={onChange} rows={rows}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          fontFamily: 'Nunito Sans, sans-serif', fontSize: 14, color: EJ.body,
          background: EJ.white, borderRadius: 16, padding: '11px 16px',
          border: `1.5px solid ${focus ? EJ.cyan : EJ.border}`,
          boxShadow: focus ? '0 0 0 3px rgba(0,194,203,0.18)' : 'none',
          outline: 'none', transition: 'all 0.2s', width: '100%',
          boxSizing: 'border-box', resize: 'vertical',
        }}
      />
    </div>
  );
}

// ── Stat Card ──────────────────────────────────────────────────
function StatCard({ label, value, change, positive = true, icon, color }) {
  const c = color || EJ.cyan;
  return (
    <Card style={{ minWidth: 140 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
        <div style={{ fontSize: 11, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</div>
        {icon && <div style={{ fontSize: 18 }}>{icon}</div>}
      </div>
      <div style={{ fontSize: 26, fontWeight: 500, color: c, fontFamily: 'JetBrains Mono, monospace', marginBottom: 4 }}>{value}</div>
      {change && <div style={{ fontSize: 11, color: positive ? EJ.green : EJ.pink, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif' }}>{positive ? '↑' : '↓'} {change}</div>}
    </Card>
  );
}

// ── Progress Bar ───────────────────────────────────────────────
function ProgressBar({ value, label, color, sublabel }) {
  const c = color || EJ.cyan;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <div>
          <span style={{ fontSize: 13, fontWeight: 600, color: EJ.navy, fontFamily: 'Nunito Sans, sans-serif' }}>{label}</span>
          {sublabel && <span style={{ fontSize: 11, color: EJ.muted, marginLeft: 8, fontFamily: 'Nunito Sans, sans-serif' }}>{sublabel}</span>}
        </div>
        <span style={{ fontSize: 12, color: EJ.muted, fontFamily: 'JetBrains Mono, monospace' }}>{value}%</span>
      </div>
      <div style={{ background: EJ.border, borderRadius: 50, height: 7 }}>
        <div style={{ background: c, width: `${value}%`, height: 7, borderRadius: 50, transition: 'width 0.6s ease' }}></div>
      </div>
    </div>
  );
}

// ── Avatar ─────────────────────────────────────────────────────
function Avatar({ src, name, size = 36 }) {
  const initials = name ? name.split(' ').map(w => w[0]).join('').substring(0, 2).toUpperCase() : '?';
  return src
    ? <img src={src} width={size} height={size} style={{ borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0 }} alt={name} />
    : <div style={{ width: size, height: size, borderRadius: '50%', background: EJ.cyanLight, color: EJ.cyan, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.35, fontWeight: 700, fontFamily: 'Nunito, sans-serif', flexShrink: 0 }}>{initials}</div>;
}

// ── Sidebar Item ───────────────────────────────────────────────
function SidebarItem({ icon, label, active, onClick, badge }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px',
        borderRadius: 12, cursor: 'pointer', transition: 'all 0.15s',
        background: active ? EJ.cyanLight : hover ? EJ.bgApp : 'transparent',
        color: active ? EJ.cyanDark : EJ.secondary,
        fontFamily: 'Nunito Sans, sans-serif', fontSize: 13, fontWeight: 600,
      }}
    >
      <span style={{ fontSize: 16, flexShrink: 0 }}>{icon}</span>
      <span style={{ flex: 1 }}>{label}</span>
      {badge && <span style={{ background: EJ.pink, color: '#fff', borderRadius: 50, fontSize: 10, fontWeight: 700, padding: '2px 7px', fontFamily: 'Nunito, sans-serif' }}>{badge}</span>}
      {active && !badge && <div style={{ width: 6, height: 6, borderRadius: '50%', background: EJ.cyan, flexShrink: 0 }}></div>}
    </div>
  );
}

// ── Checkbox ───────────────────────────────────────────────────
function Checkbox({ checked, onChange, label, style }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', ...style }} onClick={onChange}>
      <div style={{
        width: 18, height: 18, borderRadius: 6, border: `2px solid ${checked ? EJ.cyan : EJ.border}`,
        background: checked ? EJ.cyan : 'transparent', display: 'flex', alignItems: 'center',
        justifyContent: 'center', flexShrink: 0, transition: 'all 0.15s',
      }}>
        {checked && (
          <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
            <path d="M1 4l3 3 5-6" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        )}
      </div>
      {label && <span style={{ fontSize: 13, fontFamily: 'Nunito Sans, sans-serif', color: checked ? EJ.muted : EJ.body, textDecoration: checked ? 'line-through' : 'none' }}>{label}</span>}
    </div>
  );
}

// ── Modal ──────────────────────────────────────────────────────
function Modal({ open, onClose, title, children, width = 520 }) {
  if (!open) return null;
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(26,31,110,0.18)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
      backdropFilter: 'blur(2px)',
    }} onClick={onClose}>
      <div style={{
        background: EJ.white, borderRadius: 24, padding: 28, width, maxWidth: '90vw',
        boxShadow: '0 20px 60px rgba(26,31,110,0.18)',
        maxHeight: '90vh', overflowY: 'auto',
      }} onClick={e => e.stopPropagation()}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <h3 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 18, color: EJ.navy }}>{title}</h3>
          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 20, color: EJ.muted, lineHeight: 1 }}>×</button>
        </div>
        {children}
      </div>
    </div>
  );
}

// ── Pill Tabs ──────────────────────────────────────────────────
function PillTabs({ tabs, active, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 4, background: EJ.bgApp, borderRadius: 50, padding: 4 }}>
      {tabs.map(t => (
        <button
          key={t.id}
          onClick={() => onChange(t.id)}
          style={{
            fontFamily: 'Nunito, sans-serif', fontWeight: 700, fontSize: 13,
            padding: '7px 18px', borderRadius: 50, border: 'none', cursor: 'pointer',
            background: active === t.id ? EJ.white : 'transparent',
            color: active === t.id ? EJ.navy : EJ.muted,
            boxShadow: active === t.id ? '0 2px 8px rgba(26,31,110,0.10)' : 'none',
            transition: 'all 0.2s',
          }}
        >{t.label}</button>
      ))}
    </div>
  );
}

// ── Section Header ─────────────────────────────────────────────
function SectionHeader({ title, subtitle, action }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 20 }}>
      <div>
        <h3 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 20, color: EJ.navy }}>{title}</h3>
        {subtitle && <p style={{ margin: '4px 0 0', fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>{subtitle}</p>}
      </div>
      {action}
    </div>
  );
}

// ── Semáforo ───────────────────────────────────────────────────
function Semaforo({ value }) {
  const colors = { rojo: '#EF4444', amarillo: '#F59E0B', verde: EJ.green };
  const labels = { rojo: '🔴 Atención', amarillo: '🟡 En proceso', verde: '🟢 Al día' };
  return (
    <span style={{
      fontSize: 11, fontWeight: 600, fontFamily: 'Nunito Sans, sans-serif',
      color: colors[value] || EJ.muted,
    }}>{labels[value] || value}</span>
  );
}

Object.assign(window, {
  EJ, Badge, Btn, Card, Input, Select, Textarea,
  StatCard, ProgressBar, Avatar, SidebarItem,
  Checkbox, Modal, PillTabs, SectionHeader, Semaforo,
});