// Factor Activo — design tokens & shared primitives
const FA = {
  // palette
  ink:       '#0a1628',
  inkSoft:   '#334155',
  muted:     '#64748b',
  hairline:  '#e6eef7',
  bg:        '#ffffff',
  bgSoft:    '#f6f9fc',
  bgTint:    '#eef5fc',
  blue:      '#2563eb',  // primary action
  sky:       '#38bdf8',  // accent light
  skyDeep:   '#0ea5e9',
  skySoft:   '#e0f2fe',
  // semantic
  ok:        '#10b981',
  warn:      '#f59e0b',
  danger:    '#ef4444',
  // gradients
  heroGrad:  'linear-gradient(160deg, #0ea5e9 0%, #2563eb 58%, #1e40af 100%)',
  chipGrad:  'linear-gradient(140deg, #e0f2fe 0%, #dbeafe 100%)',
  // type
  sans:      '"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif',
  mono:      '"Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// USD formatter — tabular figures
const fmtUSD = (n, opts = {}) => {
  const { sign = false, compact = false } = opts;
  const s = compact && Math.abs(n) >= 1000
    ? new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(n)
    : new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(n);
  return (sign && n > 0 ? '+' : '') + '$' + s;
};

// Pretty date — Spanish short
const fmtDateES = (d) => {
  const months = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
  return `${d.getDate()} ${months[d.getMonth()]}`;
};

// Shared icon set (24x24 strokes)
const Icon = ({ name, size = 22, color = 'currentColor', strokeWidth = 1.8 }) => {
  const p = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    wallet: <g {...p}><path d="M3 7a2 2 0 0 1 2-2h13a1 1 0 0 1 1 1v2"/><path d="M3 7v11a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2z"/><circle cx="17" cy="14.5" r="1.2" fill={color} stroke="none"/></g>,
    docs:   <g {...p}><path d="M7 3h8l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M9 13h8M9 16.5h5"/></g>,
    cal:    <g {...p}><rect x="3.5" y="5" width="17" height="15.5" rx="2.2"/><path d="M3.5 10h17M8 3.5v3M16 3.5v3"/><circle cx="8" cy="14" r="1" fill={color} stroke="none"/></g>,
    gear:   <g {...p}><circle cx="12" cy="12" r="3"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8L6 18M18 6l1.8-1.8"/></g>,
    bell:   <g {...p}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2.5h-15L6 16z"/><path d="M10 20a2 2 0 0 0 4 0"/></g>,
    chev:   <g {...p}><path d="M9 5l7 7-7 7"/></g>,
    plus:   <g {...p}><path d="M12 5v14M5 12h14"/></g>,
    arrUp:  <g {...p}><path d="M7 14l5-5 5 5"/></g>,
    arrDown:<g {...p}><path d="M7 10l5 5 5-5"/></g>,
    arrUpRight: <g {...p}><path d="M7 17L17 7M8 7h9v9"/></g>,
    check:  <g {...p}><path d="M5 12.5l4.5 4.5L19 7.5"/></g>,
    filter: <g {...p}><path d="M4 5h16M7 12h10M10 19h4"/></g>,
    search: <g {...p}><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></g>,
    back:   <g {...p}><path d="M15 5l-7 7 7 7"/></g>,
    close:  <g {...p}><path d="M6 6l12 12M18 6l-12 12"/></g>,
    pen:    <g {...p}><path d="M14 5l5 5L9.5 19.5 4 21l1.5-5.5L14 5z"/></g>,
    shield: <g {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></g>,
    logout: <g {...p}><path d="M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5"/><path d="M14 8l4 4-4 4M8 12h10"/></g>,
    download: <g {...p}><path d="M12 4v12M7 11l5 5 5-5M5 20h14"/></g>,
    user:   <g {...p}><circle cx="12" cy="8" r="4"/><path d="M4.5 20c1.2-3.8 4.3-6 7.5-6s6.3 2.2 7.5 6"/></g>,
    help:   <g {...p}><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.8.4-1 1-1 2"/><circle cx="12" cy="17" r=".6" fill={color} stroke="none"/></g>,
    lock:   <g {...p}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></g>,
    globe:  <g {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18"/></g>,
    trend:  <g {...p}><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></g>,
    dot:    <g><circle cx="12" cy="12" r="3" fill={color}/></g>,
    sparkle:<g {...p}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>{paths[name]}</svg>;
};

// Status badge (active | pending | closed | overdue)
function Badge({ kind, children }) {
  const styles = {
    active:  { bg: '#dcfce7', fg: '#166534', dot: '#16a34a' },
    pending: { bg: '#fef3c7', fg: '#92400e', dot: '#d97706' },
    closed:  { bg: '#f1f5f9', fg: '#475569', dot: '#94a3b8' },
    overdue: { bg: '#fee2e2', fg: '#991b1b', dot: '#dc2626' },
    info:    { bg: '#dbeafe', fg: '#1e40af', dot: '#2563eb' },
    decide:  { bg: '#fff3e0', fg: '#c2410c', dot: '#ea580c' },
  }[kind] || { bg: '#f1f5f9', fg: '#475569', dot: '#94a3b8' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 9px 3px 8px', borderRadius: 999,
      background: styles.bg, color: styles.fg,
      fontSize: 11, fontWeight: 600, letterSpacing: 0.1,
      fontFamily: FA.sans,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: styles.dot }}/>
      {children}
    </span>
  );
}

// Smooth-area line chart — path + area fill + optional grid + dot
function LineChart({
  points, width = 340, height = 140,
  stroke = FA.blue, gradId = 'g1',
  showGrid = true, highlight = null, min, max, padY = 14,
}) {
  const xs = points.map((_, i) => (i / (points.length - 1)) * (width - 16) + 8);
  const ymin = min ?? Math.min(...points);
  const ymax = max ?? Math.max(...points);
  const range = ymax - ymin || 1;
  const ys = points.map(v => padY + (1 - (v - ymin) / range) * (height - padY * 2));

  // smooth via cubic-ish
  let path = `M ${xs[0]} ${ys[0]}`;
  for (let i = 1; i < xs.length; i++) {
    const cx1 = xs[i - 1] + (xs[i] - xs[i - 1]) / 2;
    const cx2 = cx1;
    path += ` C ${cx1} ${ys[i - 1]}, ${cx2} ${ys[i]}, ${xs[i]} ${ys[i]}`;
  }
  const area = `${path} L ${xs[xs.length - 1]} ${height} L ${xs[0]} ${height} Z`;

  return (
    <svg width={width} height={height} style={{ display: 'block', overflow: 'visible' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={stroke} stopOpacity="0.25"/>
          <stop offset="100%" stopColor={stroke} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {showGrid && [0.25, 0.5, 0.75].map(t => (
        <line key={t} x1="0" y1={padY + t * (height - padY * 2)}
              x2={width} y2={padY + t * (height - padY * 2)}
              stroke="rgba(148,163,184,0.15)" strokeDasharray="2 4"/>
      ))}
      <path d={area} fill={`url(#${gradId})`}/>
      <path d={path} fill="none" stroke={stroke} strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round"/>
      {highlight !== null && highlight !== undefined && (
        <g>
          <line x1={xs[highlight]} y1={padY} x2={xs[highlight]} y2={height - padY}
                stroke={stroke} strokeOpacity="0.25" strokeDasharray="2 3"/>
          <circle cx={xs[highlight]} cy={ys[highlight]} r="8" fill={stroke} fillOpacity="0.15"/>
          <circle cx={xs[highlight]} cy={ys[highlight]} r="4" fill="#fff" stroke={stroke} strokeWidth="2"/>
        </g>
      )}
    </svg>
  );
}

Object.assign(window, { FA, fmtUSD, fmtDateES, Icon, Badge, LineChart });