/* global React */
const { useState, useMemo, Fragment } = React;

// -------- tiny utils
const cn = (...xs) => xs.filter(Boolean).join(' ');

// -------- Icon set (inline SVG, stroke 1.75, rounded — matches reference)
const I = ({d, c='w-4 h-4', children, ...rest}) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75"
       strokeLinecap="round" strokeLinejoin="round" className={c} {...rest}>
    {children || <path d={d} />}
  </svg>
);
const Icon = {
  home:    (p)=><I c={p.c}><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M10 21v-6h4v6"/></I>,
  inbox:   (p)=><I c={p.c}><path d="M21 12H15l-1 3h-4l-1-3H3"/><path d="M5.5 5h13L21 12v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6L5.5 5Z"/></I>,
  wfs:     (p)=><I c={p.c}><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/><path d="M7 11v2a2 2 0 0 0 2 2h4"/></I>,
  heart:   (p)=><I c={p.c}><path d="M12 21s-7-4.5-7-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-7 11-7 11z"/></I>,
  pill:    (p)=><I c={p.c}><g transform="rotate(-45 12 12)"><rect x="3" y="10" width="18" height="4" rx="2"/><path d="M12 10v4"/></g></I>,
  doc:     (p)=><I c={p.c}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></I>,
  chart:   (p)=><I c={p.c}><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-8"/><path d="M22 20H2"/></I>,
  act:     (p)=><I c={p.c}><path d="M22 12h-5l-2 5-4-14-2 9H2"/></I>,
  settings:(p)=><I c={p.c}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8a2 2 0 1 1-2.8 2.8a1.7 1.7 0 0 0-1.8-.3a1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0a1.7 1.7 0 0 0-1.1-1.5a1.7 1.7 0 0 0-1.8.3a2 2 0 1 1-2.8-2.8a1.7 1.7 0 0 0 .3-1.8a1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1a1.7 1.7 0 0 0-.3-1.8a2 2 0 1 1 2.8-2.8a1.7 1.7 0 0 0 1.8.3a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0a1.7 1.7 0 0 0 1 1.5a1.7 1.7 0 0 0 1.8-.3a2 2 0 1 1 2.8 2.8a1.7 1.7 0 0 0-.3 1.8a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></I>,
  user:    (p)=><I c={p.c}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></I>,
  bell:    (p)=><I c={p.c}><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></I>,
  search:  (p)=><I c={p.c}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></I>,
  plus:    (p)=><I c={p.c}><path d="M12 5v14M5 12h14"/></I>,
  chevR:   (p)=><I c={p.c}><path d="m9 6 6 6-6 6"/></I>,
  chevL:   (p)=><I c={p.c}><path d="m15 6-6 6 6 6"/></I>,
  chevD:   (p)=><I c={p.c}><path d="m6 9 6 6 6-6"/></I>,
  refresh: (p)=><I c={p.c}><path d="M3 12a9 9 0 0 1 15.3-6.4L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15.3 6.4L3 16"/><path d="M3 21v-5h5"/></I>,
  alert:   (p)=><I c={p.c}><circle cx="12" cy="12" r="10"/><path d="M12 7v5"/><path d="M12 17h.01"/></I>,
  check:   (p)=><I c={p.c}><path d="m5 12 5 5L20 7"/></I>,
  clock:   (p)=><I c={p.c}><circle cx="12" cy="12" r="10"/><path d="M12 7v5l3 2"/></I>,
  shield:  (p)=><I c={p.c}><path d="M12 2s7 7.5 7 12a7 7 0 1 1-14 0c0-4.5 7-12 7-12Z"/></I>,
  msg:     (p)=><I c={p.c}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></I>,
  ext:     (p)=><I c={p.c}><path d="M14 3h7v7"/><path d="M21 3 10 14"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></I>,
  layers:  (p)=><I c={p.c}><path d="m12 2 9 5-9 5-9-5 9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></I>,
  clip:    (p)=><I c={p.c}><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M6 4h2"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></I>,
  // Extended set — matches reference demo vocabulary
  droplet: (p)=><I c={p.c}><path d="M12 2s7 7.5 7 12a7 7 0 1 1-14 0c0-4.5 7-12 7-12Z"/></I>,
  pulse:   (p)=><I c={p.c}><path d="M22 12h-5l-2 5-4-14-2 9H2"/></I>,
  syringe: (p)=><I c={p.c}><path d="m18 2 4 4M20 4l-9 9"/><path d="m14 6 4 4"/><path d="M7.5 11.5 3 16l5 5 4.5-4.5"/><path d="m6.5 10.5 7 7"/></I>,
  phone:   (p)=><I c={p.c}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.7.6 2.5a2 2 0 0 1-.4 2.1l-1.3 1.3a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.6.5 2.5.6a2 2 0 0 1 1.7 2Z"/></I>,
  mail:    (p)=><I c={p.c}><rect x="2.5" y="4.5" width="19" height="15" rx="2.5"/><path d="m3 7 9 6 9-6"/></I>,
  users:   (p)=><I c={p.c}><circle cx="9" cy="8" r="3.5"/><path d="M3 21a6 6 0 0 1 12 0"/><path d="M17 11a3.5 3.5 0 0 0 0-7"/><path d="M21 21a6 6 0 0 0-6-6"/></I>,
  bot:     (p)=><I c={p.c}><rect x="4" y="8" width="16" height="12" rx="3"/><path d="M12 4v4"/><circle cx="9" cy="14" r="1"/><circle cx="15" cy="14" r="1"/><path d="M10 18h4"/></I>,
  flag:    (p)=><I c={p.c}><path d="M5 21V5"/><path d="M5 5h12l-2 4 2 4H5"/></I>,
  dot:     (p)=><I c={p.c}><circle cx="12" cy="12" r="3"/></I>,
  filter:  (p)=><I c={p.c}><path d="M3 5h18l-7 9v5l-4 2v-7Z"/></I>,
  steth:   (p)=><I c={p.c}><path d="M6 3v7a5 5 0 0 0 10 0V3"/><path d="M5 3h2M15 3h2"/><path d="M11 15a4 4 0 0 0 8 0v-2"/><circle cx="19" cy="11" r="2"/></I>,
  build:   (p)=><I c={p.c}><path d="M3 21h18"/><path d="M6 21V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14"/><path d="M10 9h1M13 9h1M10 13h1M13 13h1M10 17h1M13 17h1"/></I>,
  route:   (p)=><I c={p.c}><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M6 16V8a4 4 0 0 1 4-4h4"/><path d="M18 8v4a4 4 0 0 1-4 4h-4"/></I>,
  eye:     (p)=><I c={p.c}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></I>,
  more:    (p)=><I c={p.c}><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></I>,
  link:    (p)=><I c={p.c}><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 1 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 1 0 7 7l1-1"/></I>,
  play:    (p)=><I c={p.c}><path d="M6 4l15 8-15 8V4Z"/></I>,
  calendar:(p)=><I c={p.c}><rect x="3" y="4.5" width="18" height="17" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></I>,
  map:     (p)=><I c={p.c}><path d="M3 6.5 9 4l6 3 6-2v15l-6 2-6-3-6 2Z"/><path d="M9 4v16M15 7v15"/></I>,
  stack:   (p)=><I c={p.c}><path d="M12 3 2 9l10 6 10-6Z"/><path d="m2 15 10 6 10-6M2 12l10 6 10-6"/></I>,
  zap:     (p)=><I c={p.c}><path d="M13 2 3 14h8l-1 8 10-12h-8l1-8Z"/></I>,
  lock:    (p)=><I c={p.c}><rect x="4.5" y="11" width="15" height="10" rx="2"/><path d="M8 11V7a4 4 0 1 1 8 0v4"/></I>,
  tag:     (p)=><I c={p.c}><path d="M20 12 12 20l-9-9V3h8Z"/><circle cx="7.5" cy="7.5" r="1.2"/></I>,
  download:(p)=><I c={p.c}><path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M4 19h16"/></I>,
  close:   (p)=><I c={p.c}><path d="M6 6l12 12M18 6 6 18"/></I>,
  sparkle: (p)=><I c={p.c}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5 5l3 3M16 16l3 3M5 19l3-3M16 8l3-3"/></I>,
  branch:  (p)=><I c={p.c}><circle cx="6" cy="5" r="2.5"/><circle cx="6" cy="19" r="2.5"/><circle cx="18" cy="12" r="2.5"/><path d="M6 7v10"/><path d="M6 12c0-2.2 1.8-4 4-4h4a4 4 0 0 1 4 4"/></I>,
  beaker:  (p)=><I c={p.c}><path d="M9 3v6l-5 9a3 3 0 0 0 3 4h10a3 3 0 0 0 3-4l-5-9V3"/><path d="M8 3h8"/><path d="M7 14h10"/></I>,
  clipboard:(p)=><I c={p.c}><rect x="6" y="4" width="12" height="17" rx="2"/><rect x="9" y="2" width="6" height="4" rx="1"/><path d="M9 11h6M9 15h6"/></I>,
  whatsapp:(p)=><I c={p.c}><path d="M3 21l1.8-5.2A8 8 0 1 1 8 20Z"/><path d="M8.5 9c0 2.5 2 5 4.5 5M8.5 9V8m0 1c0-.3 0-.7.2-1m4.3 6c.3-.2.7-.2 1-.2m-1 .2h1"/></I>,
  sun:     (p)=><I c={p.c}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></I>,
  file:    (p)=><I c={p.c}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></I>,
  money:   (p)=><I c={p.c}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 10v0M6 14v0M18 10v0M18 14v0"/></I>,
  briefcase:(p)=><I c={p.c}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></I>,
};

// -------- tone map (matches reference toneBg)
const toneBg = {
  helios:'bg-helios-50 text-helios-700 ring-helios-200',
  teal2: 'bg-[#3ABFC4]/10 text-[#0E8287] ring-[#3ABFC4]/30',
  sun:   'bg-[#EEA028]/10 text-[#D28513] ring-[#EEA028]/30',
  rose2: 'bg-[#D94D70]/10 text-[#B63558] ring-[#D94D70]/30',
  danger:'bg-[#E04B4B]/10 text-[#B93535] ring-[#E04B4B]/30',
  warn:  'bg-[#EEA028]/10 text-[#D28513] ring-[#EEA028]/30',
  ok:    'bg-[#2EA571]/10 text-[#1E8057] ring-[#2EA571]/30',
  slate: 'bg-slate-100 text-slate-600 ring-slate-200',
};
const toneDot = {
  helios:'bg-helios-500', teal2:'bg-[#23A6AB]', sun:'bg-[#EEA028]', rose2:'bg-[#D94D70]',
  danger:'bg-[#E04B4B]', warn:'bg-[#EEA028]', ok:'bg-[#2EA571]', slate:'bg-slate-400',
};

// -------- Badge
function Badge({tone='slate', size='md', dot, children, className}) {
  return <span className={cn(
    'inline-flex items-center gap-1.5 rounded-full ring-1 ring-inset font-medium',
    size==='sm'?'px-2 py-0.5 text-[10.5px]':'px-2.5 py-1 text-[11.5px]',
    toneBg[tone]||toneBg.slate, className)}>
    {dot && <span className={cn('w-1.5 h-1.5 rounded-full animate-pulse', toneDot[tone])}/>}
    {children}
  </span>;
}

// -------- StatePill / RiskPill
const STATE_MAP = {
  'Alta':'helios','Receta vigente':'teal2','Adherencia':'danger','Dispensa':'sun',
  'Consolidación doc.':'warn','Reglas económicas':'slate','Legajo armado':'helios','Facturado':'ok'
};
const StatePill = ({estado}) => <Badge tone={STATE_MAP[estado]||'slate'} size="sm" dot>{estado}</Badge>;
const RiskPill = ({score}) => {
  const t = score>=80?'danger':score>=60?'sun':score>=40?'warn':'ok';
  return <Badge tone={t} size="sm" dot>{score}</Badge>;
};

// -------- Button
function Button({variant='primary', size='md', icon, iconRight, children, onClick, className, disabled}) {
  const base='inline-flex items-center gap-1.5 font-medium rounded-lg transition-all';
  const sizes={sm:'text-[12px] px-2.5 py-1.5',md:'text-[12.5px] px-3 py-2',lg:'text-[13.5px] px-4 py-2.5'};
  const variants={
    primary:'bg-helios-600 text-white hover:bg-helios-700',
    ghost:'text-ink-700 hover:bg-slate-100',
    outline:'ring-1 ring-slate-200 text-ink-700 bg-white hover:bg-slate-50 hover:ring-slate-300',
    danger:'bg-[#E04B4B] text-white hover:bg-[#B93535]',
    soft:'bg-helios-50 text-helios-700 hover:bg-helios-100',
  };
  return <button type="button" disabled={disabled} onClick={onClick}
    style={variant==='primary'?{boxShadow:'0 6px 16px -8px rgba(27,118,144,0.35)'}:undefined}
    className={cn(base, sizes[size], variants[variant], disabled&&'opacity-50 cursor-not-allowed', className)}>
    {icon}{children}{iconRight}
  </button>;
}

// -------- Card
function Card({title, subtitle, action, children, className, footer, noPad}) {
  return <div className={cn('bg-white rounded-2xl border border-slate-100 flex flex-col', className)}
    style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03)'}}>
    {(title||action) && <div className="px-5 pt-5 pb-3 flex items-start justify-between gap-3">
      <div className="min-w-0">
        {title && <h3 className="text-[14px] font-semibold text-ink-800 leading-tight font-display">{title}</h3>}
        {subtitle && <p className="text-[12px] text-ink-400 mt-0.5 leading-snug">{subtitle}</p>}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>}
    <div className={cn(noPad?'':'px-5 pb-5','flex-1')}>{children}</div>
    {footer && <div className="px-5 pb-4 pt-2 border-t border-slate-100 text-[12px] text-ink-500">{footer}</div>}
  </div>;
}

// -------- Avatar
function Avatar({name='', size='md', tone='helios'}) {
  const initials = name.split(' ').filter(Boolean).slice(0,2).map(p=>p[0]||'').join('').toUpperCase();
  const sz = size==='sm'?'w-7 h-7 text-[11px]':size==='lg'?'w-11 h-11 text-sm':'w-9 h-9 text-[12px]';
  const tones={helios:'bg-helios-100 text-helios-700', sun:'bg-[#EEA028]/20 text-[#D28513]',
    ok:'bg-[#2EA571]/20 text-[#1E8057]', rose2:'bg-[#D94D70]/20 text-[#B63558]', slate:'bg-slate-200 text-slate-700'};
  return <div className={cn('rounded-full font-semibold flex items-center justify-center ring-1 ring-white shadow-sm font-display', sz, tones[tone]||tones.helios)}>{initials||'—'}</div>;
}

// -------- ProgressBar
function ProgressBar({value=0, max=100, tone='helios'}) {
  const pct = Math.max(0, Math.min(100, (value/max)*100));
  const color = {helios:'bg-helios-500', ok:'bg-[#2EA571]', sun:'bg-[#EEA028]', danger:'bg-[#E04B4B]', teal2:'bg-[#23A6AB]'}[tone] || 'bg-slate-400';
  return <div className="w-full rounded-full bg-slate-100 overflow-hidden h-1.5"><div className={cn(color,'h-1.5 rounded-full transition-all')} style={{width:`${pct}%`}}/></div>;
}

// -------- KpiTile
function KpiTile({label, value, delta, deltaTone='ok', sub, icon, iconTone='helios'}) {
  const iconTones = {
    helios:{bg:'rgba(27,118,144,.14)',fg:'#0B4A5F'},
    sun:   {bg:'rgba(238,160,40,.18)',fg:'#8A5A10'},
    teal2: {bg:'rgba(58,191,196,.18)',fg:'#0A5F63'},
    danger:{bg:'rgba(224,75,75,.15)',fg:'#8F2424'},
  };
  const t = iconTones[iconTone] || iconTones.helios;
  return <div className="bg-white rounded-2xl border border-slate-100 p-4 relative overflow-hidden"
    style={{boxShadow:'0 1px 2px rgba(15,23,42,0.04)'}}>
    <div className="absolute inset-0 opacity-60 pointer-events-none"
      style={{background:'radial-gradient(at 12% 8%, rgba(38,138,166,0.08), transparent 50%), radial-gradient(at 88% 12%, rgba(35,166,171,0.06), transparent 55%)'}}/>
    {icon && <span className="absolute top-3 right-3 w-[30px] h-[30px] rounded-[9px] flex items-center justify-center overflow-hidden"
      style={{background:t.bg, color:t.fg}}>{icon}</span>}
    <p className="relative text-[11px] text-ink-400 uppercase tracking-wide font-medium pr-10">{label}</p>
    <p className="relative font-display font-extrabold text-[26px] text-ink-800 tabular-nums leading-none mt-1.5">{value}</p>
    {delta && <div className="relative mt-2.5"><Badge tone={deltaTone} size="sm">{delta}</Badge></div>}
    {sub && <p className="relative text-[10.5px] text-ink-400 mt-1.5">{sub}</p>}
  </div>;
}

// Export for other babel scripts
Object.assign(window, {cn, Icon, Badge, StatePill, RiskPill, Button, Card, Avatar, ProgressBar, KpiTile});