// ─── Shared UI Components ───────────────────────────────────────────────────

function Btn({ children, variant='primary', size='md', onClick, type='button', disabled=false, icon, className='' }) {
  const base = 'inline-flex items-center gap-2 font-semibold rounded-lg transition-all duration-150 cursor-pointer border-0 outline-none';
  const sizes = { sm: 'px-3 py-1.5 text-xs', md: 'px-4 py-2 text-sm', lg: 'px-5 py-2.5 text-sm' };
  const variants = {
    primary:   'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800',
    secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200 active:bg-slate-300',
    danger:    'bg-red-50 text-red-600 hover:bg-red-100 active:bg-red-200',
    ghost:     'bg-transparent text-slate-500 hover:bg-slate-100 active:bg-slate-200',
    success:   'bg-emerald-50 text-emerald-700 hover:bg-emerald-100',
  };
  return (
    <button type={type} onClick={onClick} disabled={disabled} className={`${base} ${sizes[size]} ${variants[variant]} ${disabled?'opacity-50 cursor-not-allowed':''} ${className}`}
      style={{fontFamily:'inherit'}}>
      {icon && <Icon name={icon} size={14} />}
      {children}
    </button>
  );
}

function Input({ label, value, onChange, placeholder='', type='text', required=false, hint='', disabled=false, className='' }) {
  return (
    <div className={`flex flex-col gap-1 ${className}`}>
      {label && <label style={{fontSize:12,fontWeight:600,color:'#64748b',textTransform:'uppercase',letterSpacing:'0.05em'}}>{label}{required&&<span style={{color:'#ef4444'}}> *</span>}</label>}
      <input
        type={type} value={value || ''} onChange={e => onChange(e.target.value)}
        placeholder={placeholder} required={required} disabled={disabled}
        style={{fontFamily:'inherit',fontSize:14,padding:'8px 12px',border:'1.5px solid #e2e8f0',borderRadius:8,outline:'none',background:disabled?'#f8fafc':'#fff',color:disabled?'#94a3b8':'#0f172a',transition:'border-color 0.15s',cursor:disabled?'not-allowed':'text'}}
        onFocus={e => !disabled && (e.target.style.borderColor='#2563eb')}
        onBlur={e => e.target.style.borderColor='#e2e8f0'}
      />
      {hint && <span style={{fontSize:11,color:'#94a3b8'}}>{hint}</span>}
    </div>
  );
}

function Textarea({ label, value, onChange, placeholder='', rows=3, className='' }) {
  return (
    <div className={`flex flex-col gap-1 ${className}`}>
      {label && <label style={{fontSize:12,fontWeight:600,color:'#64748b',textTransform:'uppercase',letterSpacing:'0.05em'}}>{label}</label>}
      <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={rows}
        style={{fontFamily:'inherit',fontSize:14,padding:'8px 12px',border:'1.5px solid #e2e8f0',borderRadius:8,outline:'none',background:'#fff',color:'#0f172a',resize:'vertical',transition:'border-color 0.15s'}}
        onFocus={e => e.target.style.borderColor='#2563eb'}
        onBlur={e => e.target.style.borderColor='#e2e8f0'}
      />
    </div>
  );
}

function Select({ label, value, onChange, options=[], placeholder='Seleccionar...', required=false, className='' }) {
  return (
    <div className={`flex flex-col gap-1 ${className}`}>
      {label && <label style={{fontSize:12,fontWeight:600,color:'#64748b',textTransform:'uppercase',letterSpacing:'0.05em'}}>{label}{required&&<span style={{color:'#ef4444'}}> *</span>}</label>}
      <select value={value} onChange={e => onChange(e.target.value)}
        style={{fontFamily:'inherit',fontSize:14,padding:'8px 12px',border:'1.5px solid #e2e8f0',borderRadius:8,outline:'none',background:'#fff',color: value?'#0f172a':'#94a3b8',appearance:'auto',transition:'border-color 0.15s'}}
        onFocus={e => e.target.style.borderColor='#2563eb'}
        onBlur={e => e.target.style.borderColor='#e2e8f0'}
      >
        <option value="">{placeholder}</option>
        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </div>
  );
}

function Modal({ open=true, onClose, title, children, width=560 }) {
  if (open === false) return null;
  return (
    <div style={{position:'fixed',inset:0,zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}
      onClick={e => e.target===e.currentTarget && onClose()}>
      <div style={{position:'absolute',inset:0,background:'rgba(15,23,42,0.5)',backdropFilter:'blur(4px)'}} onClick={onClose} />
      <div style={{position:'relative',background:'#fff',borderRadius:16,width:'100%',maxWidth:width,maxHeight:'90vh',overflowY:'auto',boxShadow:'0 25px 50px rgba(0,0,0,0.25)',animation:'modalIn 0.18s ease'}}>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'20px 24px 0'}}>
          <h2 style={{margin:0,fontSize:17,fontWeight:700,color:'#0f172a'}}>{title}</h2>
          <button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',padding:4,borderRadius:6,color:'#94a3b8',display:'flex'}}
            onMouseEnter={e=>e.currentTarget.style.background='#f1f5f9'}
            onMouseLeave={e=>e.currentTarget.style.background='none'}>
            <Icon name="x" size={18} />
          </button>
        </div>
        <div style={{padding:'20px 24px 24px'}}>{children}</div>
      </div>
    </div>
  );
}

function Badge({ label, color='slate' }) {
  const colors = {
    slate:   { bg:'#f1f5f9', text:'#475569' },
    blue:    { bg:'#eff6ff', text:'#2563eb' },
    green:   { bg:'#f0fdf4', text:'#16a34a' },
    yellow:  { bg:'#fefce8', text:'#ca8a04' },
    red:     { bg:'#fef2f2', text:'#dc2626' },
    purple:  { bg:'#faf5ff', text:'#9333ea' },
    orange:  { bg:'#fff7ed', text:'#ea580c' },
  };
  const c = colors[color] || colors.slate;
  return (
    <span style={{display:'inline-flex',alignItems:'center',padding:'2px 10px',borderRadius:999,fontSize:11,fontWeight:700,background:c.bg,color:c.text,letterSpacing:'0.03em',whiteSpace:'nowrap'}}>
      {label}
    </span>
  );
}

function Card({ children, style={}, className='' }) {
  return (
    <div className={className} style={{background:'#fff',borderRadius:12,border:'1px solid #e2e8f0',boxShadow:'0 1px 3px rgba(0,0,0,0.05)',overflow:'hidden',...style}}>
      {children}
    </div>
  );
}

function Toast({ message, type='success', onDone }) {
  const { useEffect } = React;
  useEffect(() => {
    const t = setTimeout(onDone, 2400);
    return () => clearTimeout(t);
  }, []);
  const colors = { success:'#10b981', error:'#ef4444', info:'#2563eb' };
  return (
    <div style={{position:'fixed',bottom:24,right:24,zIndex:2000,background:'#0f172a',color:'#fff',padding:'12px 18px',borderRadius:10,fontSize:13,fontWeight:600,display:'flex',alignItems:'center',gap:10,boxShadow:'0 8px 24px rgba(0,0,0,0.3)',animation:'slideUp 0.2s ease'}}>
      <span style={{width:8,height:8,borderRadius:'50%',background:colors[type],flexShrink:0,display:'inline-block'}} />
      {message}
    </div>
  );
}

function EmptyState({ icon, title, desc, action }) {
  return (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:'64px 24px',gap:12,textAlign:'center'}}>
      <div style={{width:56,height:56,background:'#f1f5f9',borderRadius:16,display:'flex',alignItems:'center',justifyContent:'center',color:'#94a3b8'}}>
        <Icon name={icon || 'alert'} size={24} />
      </div>
      <div style={{fontWeight:700,fontSize:15,color:'#0f172a'}}>{title}</div>
      {desc && <div style={{fontSize:13,color:'#94a3b8',maxWidth:280}}>{desc}</div>}
      {action}
    </div>
  );
}

function AnyDeskBadge({ id, onCopy }) {
  const [copied, setCopied] = React.useState(false);
  function handleCopy(e) {
    e.stopPropagation();
    navigator.clipboard.writeText(id.replace(/\s/g,'')).then(() => {
      setCopied(true);
      if (onCopy) onCopy();
      setTimeout(() => setCopied(false), 1800);
    });
  }
  return (
    <button onClick={handleCopy}
      style={{display:'inline-flex',alignItems:'center',gap:6,padding:'4px 10px',borderRadius:8,border:'1.5px solid #e0e7ff',background:copied?'#eff6ff':'#f8faff',cursor:'pointer',fontFamily:'monospace',fontSize:13,fontWeight:700,color:copied?'#2563eb':'#374151',transition:'all 0.15s'}}>
      <span style={{width:6,height:6,borderRadius:'50%',background:'#2563eb',flexShrink:0}} />
      {id}
      <Icon name={copied?'check':'copy'} size={12} color={copied?'#2563eb':'#94a3b8'} />
    </button>
  );
}

function ConfirmDialog({ open, title, message, onConfirm, onCancel }) {
  if (!open) return null;
  return (
    <div style={{position:'fixed',inset:0,zIndex:1100,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div style={{position:'absolute',inset:0,background:'rgba(15,23,42,0.5)',backdropFilter:'blur(4px)'}} onClick={onCancel} />
      <div style={{position:'relative',background:'#fff',borderRadius:14,padding:24,maxWidth:360,width:'100%',boxShadow:'0 25px 50px rgba(0,0,0,0.25)'}}>
        <div style={{fontSize:16,fontWeight:700,color:'#0f172a',marginBottom:8}}>{title}</div>
        <div style={{fontSize:13,color:'#64748b',marginBottom:20}}>{message}</div>
        <div style={{display:'flex',justifyContent:'flex-end',gap:8}}>
          <Btn variant="secondary" onClick={onCancel}>Cancelar</Btn>
          <Btn variant="danger" onClick={onConfirm}>Eliminar</Btn>
        </div>
      </div>
    </div>
  );
}

// Aliases compatibles con paneles de Sistema (auth.jsx, extras.jsx)
function Field(props) {
  return <Input {...props} />;
}
function Selector(props) {
  return <Select {...props} />;
}

Object.assign(window, { Btn, Input, Field, Textarea, Select, Selector, Modal, Badge, Card, Toast, EmptyState, AnyDeskBadge, ConfirmDialog });