// EUTPeru — Shared UI Components
const { useState, useEffect, useRef } = React;
const G = window.C;

// ── Typography scale ─────────────────────────────────────────
const T = {
  h1:{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:26, fontWeight:700, color:G.text, textTransform:'uppercase', letterSpacing:1, margin:0 },
  h2:{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:20, fontWeight:600, color:G.text, margin:0 },
  h3:{ fontFamily:"'Barlow Condensed',sans-serif", fontSize:15, fontWeight:600, color:G.text, textTransform:'uppercase', letterSpacing:0.5 },
  body:{ fontFamily:"'Inter',sans-serif", fontSize:13, color:G.text },
  sm:{ fontFamily:"'Inter',sans-serif", fontSize:11, color:G.textSec },
};

// ── Badges ────────────────────────────────────────────────────
function StatusBadge({ status }) {
  const map = {
    vigente:  {label:'Vigente',   bg:'#2a2400',color:'#FFA726'},
    aceptada: {label:'Aceptada',  bg:'#0a2200',color:'#6DBF2E'},
    entregada:{label:'Entregada', bg:'#001822',color:'#29B6F6'},
    rechazada:{label:'Rechazada', bg:'#220000',color:'#E53935'},
    vencida:  {label:'Vencida',   bg:'#1a1200',color:'#666666'},
  };
  const s = map[status]||{label:status,bg:'#1a1a1a',color:'#888'};
  return <span style={{background:s.bg,color:s.color,padding:'2px 8px',borderRadius:3,fontSize:11,fontWeight:600,border:`1px solid ${s.color}44`}}>{s.label}</span>;
}

function DaysBadge({ days }) {
  const color = days < 0 ? G.error : days <= 7 ? G.warning : G.accent;
  const txt = days < 0 ? `Vencido ${Math.abs(days)}d` : `${days}d`;
  return <span style={{background:color+'22',color,padding:'2px 8px',borderRadius:3,fontSize:11,fontWeight:700,border:`1px solid ${color}44`}}>{txt}</span>;
}

function CreditBadge({ days }) {
  const label = days===0 ? 'Contado' : `${days} días`;
  return <span style={{background:'#0a2200',color:G.accent,padding:'2px 8px',borderRadius:3,fontSize:11,fontWeight:600,border:`1px solid ${G.accent}33`}}>{label}</span>;
}

function StockBadge({ stock, minStock }) {
  const st = window.stockStatus(stock, minStock);
  const map = {ok:{c:G.accent,l:'OK'},bajo:{c:G.warning,l:'Bajo'},critico:{c:G.error,l:'Crítico'}};
  const s = map[st];
  return <span style={{background:s.c+'22',color:s.c,padding:'2px 8px',borderRadius:3,fontSize:11,fontWeight:600}}>● {s.l}</span>;
}

function Tag({ label, color }) {
  const c = color||G.accent;
  return <span style={{background:c+'22',color:c,padding:'1px 6px',borderRadius:3,fontSize:10,fontWeight:700,border:`1px solid ${c}33`}}>{label}</span>;
}

// ── KPI Card ──────────────────────────────────────────────────
function KPICard({ label, value, sub, color, icon }) {
  return (
    <div style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:8,padding:'18px 22px',flex:1,minWidth:160}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
        <div style={{flex:1}}>
          <div style={{...T.sm,marginBottom:6,textTransform:'uppercase',letterSpacing:0.5}}>{label}</div>
          <div style={{fontFamily:"'Barlow Condensed',sans-serif",fontSize:26,fontWeight:700,color:color||G.accent,lineHeight:1}}>{value}</div>
          {sub && <div style={{...T.sm,marginTop:5,color:sub.startsWith('+')?G.accent:G.textSec}}>{sub}</div>}
        </div>
        {icon && <div style={{fontSize:24,opacity:0.35,marginLeft:8}}>{icon}</div>}
      </div>
    </div>
  );
}

// ── Bar Chart ─────────────────────────────────────────────────
function BarChart({ data, height=150, showSecondary=false }) {
  const [hov, setHov] = useState(null);
  const maxV = Math.max(...data.map(d=>Math.max(d.v, showSecondary?(d.c||0):0)), 1);
  const n = data.length;
  const pad = 28;
  const W = 600; // viewBox width
  const barW = showSecondary ? (W-pad*2)/(n*2.8) : (W-pad*2)/(n*1.6);
  const slotW = (W-pad*2)/n;
  return (
    <svg viewBox={`0 0 ${W} ${height+20}`} width="100%" preserveAspectRatio="none" style={{overflow:'visible'}}>
      {data.map((d,i)=>{
        const bh = (d.v/maxV)*(height-4);
        const cx = pad + slotW*i + slotW/2;
        const x = showSecondary ? cx - barW : cx - barW/2;
        const active = hov===i;
        return (
          <g key={i} style={{cursor:d.v>0?'pointer':'default'}}
            onMouseEnter={()=>d.v>0&&setHov(i)}
            onMouseLeave={()=>setHov(null)}>
            {showSecondary && <rect x={cx+2} y={height-((d.c/maxV)*(height-4))} width={barW} height={(d.c/maxV)*(height-4)} fill={G.border} rx={2}/>}
            <rect x={x} y={height-bh} width={barW} height={bh} fill={active?G.warning:G.accent} rx={2} opacity={active?1:0.85}/>
            <text x={cx} y={height+16} textAnchor="middle" fill={active?G.accent:G.textSec} fontSize={9} fontFamily="Inter">{d.m}</text>
          </g>
        );
      })}
      {hov!==null && hov<data.length && data[hov].v>0 && (
        <g>
          <rect x={pad+slotW*hov+slotW/2-46} y={Math.max(16,height-(data[hov].v/maxV)*(height-4)-26)} width={92} height={20} rx={3} fill={G.card} stroke={G.accent} strokeWidth={1} opacity={0.96}/>
          <text x={pad+slotW*hov+slotW/2} y={Math.max(26,height-(data[hov].v/maxV)*(height-4)-10)} textAnchor="middle" fill={G.accent} fontSize={10} fontWeight="700" fontFamily="Inter">{'S/ '+data[hov].v.toLocaleString('es-PE',{minimumFractionDigits:2,maximumFractionDigits:2})}</text>
        </g>
      )}
    </svg>
  );
}

// ── Donut Chart ───────────────────────────────────────────────
function DonutChart({ data, size=110 }) {
  const total = data.reduce((s,d)=>s+d.value,0)||1;
  let cum = 0;
  const cx=size/2, cy=size/2, r=size*0.38, ri=size*0.24;
  const slices = data.map(d=>{
    const start=(cum/total)*Math.PI*2-Math.PI/2;
    cum+=d.value;
    const end=(cum/total)*Math.PI*2-Math.PI/2;
    const x1=cx+r*Math.cos(start),y1=cy+r*Math.sin(start);
    const x2=cx+r*Math.cos(end),y2=cy+r*Math.sin(end);
    const xi1=cx+ri*Math.cos(end),yi1=cy+ri*Math.sin(end);
    const xi2=cx+ri*Math.cos(start),yi2=cy+ri*Math.sin(start);
    const lg=end-start>Math.PI?1:0;
    return <path key={d.label} d={`M${x1} ${y1}A${r} ${r} 0 ${lg} 1 ${x2} ${y2}L${xi1} ${yi1}A${ri} ${ri} 0 ${lg} 0 ${xi2} ${yi2}Z`} fill={d.color} opacity={0.9}/>;
  });
  return <svg width={size} height={size}>{slices}<circle cx={cx} cy={cy} r={ri-2} fill={G.card}/></svg>;
}

// ── Modal ─────────────────────────────────────────────────────
function Modal({ title, onClose, children, width=580 }) {
  return (
    <div style={{position:'fixed',inset:0,background:'#000000d0',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center',padding:20}} onClick={onClose}>
      <div style={{background:G.card2,border:`1px solid ${G.border}`,borderRadius:10,width:'100%',maxWidth:width,maxHeight:'88vh',overflow:'auto',boxShadow:'0 20px 60px #00000080'}} onClick={e=>e.stopPropagation()}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 22px',borderBottom:`1px solid ${G.border}`,position:'sticky',top:0,background:G.card2,zIndex:1}}>
          <span style={T.h2}>{title}</span>
          <button onClick={onClose} style={{background:'none',border:'none',color:G.textSec,fontSize:18,cursor:'pointer',lineHeight:1,padding:4}}>✕</button>
        </div>
        <div style={{padding:22}}>{children}</div>
      </div>
    </div>
  );
}

// ── Form controls ─────────────────────────────────────────────
const inputBase = {background:G.bg,border:`1px solid ${G.border}`,borderRadius:5,color:G.text,padding:'7px 11px',fontSize:13,width:'100%',outline:'none',boxSizing:'border-box',fontFamily:"'Inter',sans-serif"};

function FInput({ label, note, ...props }) {
  return (
    <div style={{marginBottom:12}}>
      {label && <div style={{...T.sm,marginBottom:4}}>{label}</div>}
      <input style={inputBase} {...props}/>
      {note && <div style={{...T.sm,marginTop:3,fontSize:10}}>{note}</div>}
    </div>
  );
}

function FSelect({ label, options, ...props }) {
  return (
    <div style={{marginBottom:12}}>
      {label && <div style={{...T.sm,marginBottom:4}}>{label}</div>}
      <select style={{...inputBase,cursor:'pointer'}} {...props}>
        {options.map(o=><option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </div>
  );
}

function FTextarea({ label, rows=3, ...props }) {
  return (
    <div style={{marginBottom:12}}>
      {label && <div style={{...T.sm,marginBottom:4}}>{label}</div>}
      <textarea style={{...inputBase,resize:'vertical',minHeight:60}} rows={rows} {...props}/>
    </div>
  );
}

function Row({ children, gap=12 }) {
  return <div className="eut-row" style={{display:'grid',gridTemplateColumns:`repeat(${React.Children.count(children)},1fr)`,gap}}>{children}</div>;
}

// ── Button ────────────────────────────────────────────────────
function Btn({ children, variant='primary', onClick, style={}, sm=false, disabled=false, type='button' }) {
  const base = {border:'none',borderRadius:5,cursor:disabled?'not-allowed':'pointer',fontFamily:"'Inter',sans-serif",fontWeight:600,fontSize:sm?11:13,padding:sm?'5px 11px':'10px 16px',minHeight:sm?undefined:44,transition:'opacity 0.15s',opacity:disabled?0.45:1,letterSpacing:0.2};
  const vmap = {
    primary:{background:G.accent,color:'#000'},
    secondary:{background:G.card2,color:G.text,border:`1px solid ${G.border}`},
    danger:{background:G.error+'22',color:G.error,border:`1px solid ${G.error}44`},
    ghost:{background:'transparent',color:G.textSec,border:`1px solid ${G.border}`},
    accent:{background:G.accentDark,color:G.text},
  };
  return <button type={type} style={{...base,...(vmap[variant]||vmap.primary),...style}} onClick={disabled?undefined:onClick}>{children}</button>;
}

// ── Table ─────────────────────────────────────────────────────
function Table({ cols, rows, onRow, emptyMsg='Sin registros' }) {
  const th = {padding:'8px 12px',textAlign:'left',color:G.textSec,fontSize:10,fontWeight:700,textTransform:'uppercase',letterSpacing:0.7,borderBottom:`1px solid ${G.border}`,whiteSpace:'nowrap'};
  const td = {padding:'9px 12px',color:G.text,fontSize:13,borderBottom:`1px solid ${G.border}22`,verticalAlign:'middle'};
  return (
    <div className="eut-table-wrap" style={{overflowX:'auto',WebkitOverflowScrolling:'touch'}}>
      <table style={{width:'100%',borderCollapse:'collapse',minWidth:500}}>
        <thead><tr>{cols.map(c=><th key={c.key} style={{...th,width:c.w}}>{c.label}</th>)}</tr></thead>
        <tbody>
          {rows.length===0 && <tr><td colSpan={cols.length} style={{...td,textAlign:'center',color:G.textSec,padding:24}}>{emptyMsg}</td></tr>}
          {rows.map((row,i)=>(
            <tr key={i} style={{cursor:onRow?'pointer':'default'}} onMouseEnter={e=>e.currentTarget.style.background=G.card2} onMouseLeave={e=>e.currentTarget.style.background='transparent'} onClick={()=>onRow&&onRow(row)}>
              {cols.map(c=><td key={c.key} style={td}>{c.render?c.render(row):row[c.key]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ── Card ──────────────────────────────────────────────────────
function Card({ children, style={}, title, action, noPad=false }) {
  return (
    <div style={{background:G.card,border:`1px solid ${G.border}`,borderRadius:8,...style}}>
      {title && <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'12px 18px',borderBottom:`1px solid ${G.border}`}}>
        <span style={T.h3}>{title}</span>{action}
      </div>}
      <div style={{padding:noPad?0:'16px 18px'}}>{children}</div>
    </div>
  );
}

// ── Tabs ──────────────────────────────────────────────────────
function Tabs({ tabs, active, onChange }) {
  return (
    <div style={{display:'flex',borderBottom:`1px solid ${G.border}`,marginBottom:20}}>
      {tabs.map(t=>(
        <button key={t} onClick={()=>onChange(t)} style={{background:'none',border:'none',borderBottom:active===t?`2px solid ${G.accent}`:'2px solid transparent',color:active===t?G.accent:G.textSec,padding:'9px 18px',cursor:'pointer',fontSize:13,fontWeight:600,fontFamily:"'Inter',sans-serif",marginBottom:-1}}>
          {t}
        </button>
      ))}
    </div>
  );
}

// ── Page Header ───────────────────────────────────────────────
function PageHeader({ title, subtitle, action }) {
  return (
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:22,paddingBottom:14,borderBottom:`1px solid ${G.border}`}}>
      <div>
        <h1 style={T.h1}>{title}</h1>
        {subtitle && <div style={{...T.sm,marginTop:4}}>{subtitle}</div>}
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}

// ── Sidebar ───────────────────────────────────────────────────
// perm: permiso requerido (null = libre) | perms: array (cualquiera basta)
const NAV = [
  {id:'dashboard',label:'Dashboard',icon:'▣',single:true},
  {id:'productos',label:'Productos',icon:'◈',children:[
    {id:'catalogo',    label:'Catálogo'},                          // libre
    {id:'almacen',     label:'Almacén'},                          // libre
    {id:'movimientos', label:'Movimientos', perm:'compras'},
  ]},
  {id:'ventas',label:'Ventas',icon:'◎',children:[
    {id:'cotizaciones', label:'Cotizaciones',        perms:['crearCotizacion','cotizaciones']},
    {id:'misventas',    label:'Mis Ventas',           perms:['crearCotizacion','verVentasEquipo']},
    {id:'facturacion',  label:'Facturación',         perm:'facturas'},
    {id:'precios',      label:'Precios Especiales',  perms:['precEsp','precEspAll']},
    {id:'analisis',     label:'Análisis de Ventas',  perm:'cotizaciones'},
  ]},
  {id:'finanzas',label:'Finanzas',icon:'◉',children:[
    {id:'contabilidad', label:'Contabilidad',  perm:'contabilidad'},
    {id:'gastos',       label:'Gastos',        perm:'contabilidad'},
    {id:'compras',      label:'Compras',       perms:['compras','contabilidad']},
  ]},
  {id:'admin',label:'Administración',icon:'◈',children:[
    {id:'contactos',    label:'Contactos',     perm:'contactos'},
    {id:'solicitudes',  label:'Solicitudes',   perms:['usuarios','otorgarCredito','gestionarSolicitudesOperativas'], badge:'creditPending'},
    {id:'usuarios',     label:'Usuarios',      perm:'usuarios'},
    {id:'historial',    label:'Historial',     perm:'historial'},
    {id:'festivos',     label:'Días Festivos', perm:'usuarios'},
  ]},
];

function Sidebar({ active, onNav, collapsed, onToggle, currentUser, onLogout, creditPending, isMobile=false }) {
  const parentOf = id => NAV.find(n=>n.children?.some(c=>c.id===id))?.id||null;
  const [open, setOpen] = useState(()=>parentOf(active));
  const [userMenu, setUserMenu] = useState(false);
  const W = collapsed ? 50 : 218;
  const displayName = currentUser ? (currentUser.apellidos ? `${currentUser.name} ${currentUser.apellidos}` : currentUser.name) : 'Usuario';
  const initials = currentUser ? `${(currentUser.name||'?').charAt(0)}${(currentUser.apellidos||currentUser.name||'').charAt(1)||''}` : 'U';

  const canSee = (item) => {
    if (!currentUser) return false;
    if (currentUser.role === 'Administrador') return true;
    if (!item.perm && !item.perms) return true;
    const p = currentUser.perms || {};
    if (item.perm && p[item.perm]) return true;
    if (item.perms && item.perms.some(k => p[k])) return true;
    return false;
  };

  if (isMobile && collapsed) return null;

  const sidebarStyle = isMobile
    ? {position:'fixed',top:0,left:0,height:'100vh',width:218,background:G.card,borderRight:`1px solid ${G.border}`,display:'flex',flexDirection:'column',overflow:'hidden',flexShrink:0,userSelect:'none',zIndex:300,boxShadow:'4px 0 24px #00000080'}
    : {width:W,minHeight:'100vh',background:G.card,borderRight:`1px solid ${G.border}`,display:'flex',flexDirection:'column',transition:'width 0.2s ease',overflow:'hidden',flexShrink:0,userSelect:'none'};

  return (
    <div style={sidebarStyle}>
      {/* Brand */}
      <div style={{padding:collapsed?'6px 0':'10px 14px',borderBottom:`1px solid ${G.border}`,display:'flex',flexDirection:collapsed?'column':'row',alignItems:'center',gap:collapsed?4:8,minHeight:collapsed?72:62}}>
        {!collapsed && (
          <div style={{flex:1,overflow:'hidden',display:'flex',alignItems:'center'}}>
            <img src="/uploads/EUTPERU-LOGO.png?v=2" style={{width:'100%',height:'auto',objectFit:'contain',display:'block'}} alt="EUTPeru"/>
          </div>
        )}
        {collapsed && (
          <div style={{display:'flex',justifyContent:'center',alignItems:'center',width:'100%',padding:'2px 0'}}>
            <img src="/uploads/LOGO-EUTPERU.png?v=2" style={{height:38,width:38,objectFit:'contain',display:'block'}} alt="EUTPeru"/>
          </div>
        )}
        {/* Toggle button — always visible, below icon when collapsed */}
        <button onClick={onToggle} style={{background:G.card2,border:`1px solid ${G.border}`,borderRadius:4,color:G.accent,cursor:'pointer',fontSize:10,padding:'3px 6px',flexShrink:0,lineHeight:1,alignSelf:collapsed?'center':'auto'}}>
          {collapsed?'▶':'◀'}
        </button>
      </div>

      {/* Nav */}
      <nav style={{flex:1,paddingTop:6,overflowY:'auto'}}>
        {NAV.map(group=>{
          if(group.single){
            if(!canSee(group)) return null;
            const ia = active===group.id;
            return (
              <div key={group.id} onClick={()=>onNav(group.id)} style={{display:'flex',alignItems:'center',gap:9,padding:collapsed?'10px 14px':'10px 18px',cursor:'pointer',background:ia?G.accent+'1a':'transparent',borderLeft:ia?`2px solid ${G.accent}`:'2px solid transparent',color:ia?G.accent:G.textSec,fontSize:13,fontWeight:600,transition:'all 0.1s'}}>
                <span style={{fontSize:15,lineHeight:1}}>{group.icon}</span>
                {!collapsed && <span>{group.label}</span>}
              </div>
            );
          }
          const visibleChildren = (group.children||[]).filter(canSee);
          if(visibleChildren.length === 0) return null;
          const isOpen = open===group.id;
          const hasActive = visibleChildren.some(c=>c.id===active);
          return (
            <div key={group.id}>
              <div onClick={()=>setOpen(isOpen?null:group.id)} style={{display:'flex',alignItems:'center',gap:9,padding:collapsed?'10px 14px':'10px 18px',cursor:'pointer',color:hasActive?G.accent:G.textSec,fontSize:13,fontWeight:600,transition:'color 0.1s'}}>
                <span style={{fontSize:15,lineHeight:1}}>{group.icon}</span>
                {!collapsed && <><span style={{flex:1}}>{group.label}</span><span style={{fontSize:9,opacity:0.6}}>{isOpen?'▲':'▼'}</span></>}
              </div>
              {isOpen && !collapsed && visibleChildren.map(child=>{
                const ca = active===child.id;
                const badgeVal = child.badge==='creditPending' ? creditPending : 0;
                return (
                  <div key={child.id} onClick={()=>onNav(child.id)} style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'7px 18px 7px 40px',cursor:'pointer',background:ca?G.accent+'1a':'transparent',borderLeft:ca?`2px solid ${G.accent}`:'2px solid transparent',color:ca?G.accent:G.textSec,fontSize:12,transition:'all 0.1s'}}>
                    <span>{child.label}</span>
                    {badgeVal>0 && <span style={{background:G.error,color:'#fff',fontSize:9,fontWeight:700,padding:'1px 5px',borderRadius:8,minWidth:16,textAlign:'center'}}>{badgeVal}</span>}
                  </div>
                );
              })}
            </div>
          );
        })}
      </nav>

      {/* Footer */}
      <div style={{padding:collapsed?'10px 8px':'10px 14px',borderTop:`1px solid ${G.border}`,position:'relative'}}>
        <div onClick={()=>setUserMenu(m=>!m)} style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer',borderRadius:6,padding:'6px 8px',background:userMenu?G.card2:'transparent',border:`1px solid ${userMenu?G.border:'transparent'}`}}>
          <div style={{width:26,height:26,borderRadius:'50%',background:G.accent+'33',display:'flex',alignItems:'center',justifyContent:'center',color:G.accent,fontSize:11,fontWeight:700,flexShrink:0}}>{collapsed?initials.charAt(0):initials}</div>
          {!collapsed && (
            <>
              <div style={{flex:1,overflow:'hidden'}}>
                <div style={{color:G.text,fontSize:11,fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{displayName}</div>
                <div style={{color:G.textSec,fontSize:10}}>{currentUser?.role||'Usuario'}</div>
              </div>
              <span style={{color:G.textSec,fontSize:9}}>{userMenu?'▲':'▼'}</span>
            </>
          )}
        </div>
        {userMenu && (
          <div style={{position:'absolute',bottom:'100%',left:8,right:8,background:G.card2,border:`1px solid ${G.border}`,borderRadius:7,boxShadow:'0 -8px 24px #00000060',overflow:'hidden',zIndex:200}}>
            <div style={{padding:'10px 14px',borderBottom:`1px solid ${G.border}`}}>
              <div style={{fontSize:12,fontWeight:600,color:G.text}}>{displayName}</div>
              <div style={{fontSize:10,color:G.textSec}}>{currentUser?.username} · {currentUser?.role}</div>
            </div>
            <div onClick={onLogout} style={{display:'flex',alignItems:'center',gap:8,padding:'10px 14px',cursor:'pointer',color:G.error,fontSize:13,fontWeight:600}} onMouseEnter={e=>e.currentTarget.style.background=G.error+'11'} onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
              <span>⏏</span> Cerrar sesión
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Confirm Dialog ────────────────────────────────────────────
function Confirm({ msg, onYes, onNo }) {
  return (
    <div style={{position:'fixed',inset:0,background:'#000000d0',zIndex:2000,display:'flex',alignItems:'center',justifyContent:'center'}}>
      <div style={{background:G.card2,border:`1px solid ${G.border}`,borderRadius:8,padding:28,maxWidth:360,textAlign:'center'}}>
        <div style={{...T.body,marginBottom:20}}>{msg}</div>
        <div style={{display:'flex',gap:10,justifyContent:'center'}}>
          <Btn variant="danger" onClick={onYes}>Confirmar</Btn>
          <Btn variant="secondary" onClick={onNo}>Cancelar</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  T, StatusBadge, DaysBadge, CreditBadge, StockBadge, Tag,
  KPICard, BarChart, DonutChart,
  Modal, FInput, FSelect, FTextarea, Row, Btn,
  Table, Card, Tabs, PageHeader, Sidebar, Confirm
});