function PageSettings({pushToast, theme, onTheme}){
  const I = window.Icons;
  const [tab, setTab] = React.useState('general');

  return (
    <>
      <div className="page-head">
        <h1 className="page-title">Configuración</h1>
        <p className="page-sub">Preferencias de la cuenta, equipo, notificaciones y seguridad.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'220px 1fr',gap:24}}>
        <div style={{display:'flex',flexDirection:'column',gap:2}}>
          {[
            {id:'general',label:'General',icon:'Cog'},
            {id:'org',label:'Organización',icon:'Globe'},
            {id:'notifications',label:'Notificaciones',icon:'Bell'},
            {id:'security',label:'Seguridad',icon:'Lock'},
            {id:'billing',label:'Facturación',icon:'Tag'},
            {id:'api',label:'API & Webhooks',icon:'Hash'},
            {id:'ai',label:'FLUX Copilot',icon:'Sparkles'},
          ].map(t=>{
            const Ic = I[t.icon];
            return (
              <button key={t.id} className={`nav-item ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>
                <Ic className="nav-icon"/>{t.label}
              </button>
            );
          })}
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          {tab==='general' && (
            <>
              <div className="card">
                <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>Preferencias generales</div>
                <Field label="Idioma" value="Español (México)"/>
                <Field label="Zona horaria" value="América/Ciudad de México (UTC-6)"/>
                <Field label="Formato de moneda" value="MXN — $1,234.56"/>
                <ToggleField label="Modo oscuro" desc="Cambia el tema de la interfaz" value={theme==='dark'} onChange={onTheme}/>
                <ToggleField label="Animaciones" desc="Activa transiciones suaves" value={true}/>
              </div>
            </>
          )}
          {tab==='org' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>Organización</div>
              <Field label="Nombre de la organización" value="Cadena Retail México SA de CV"/>
              <Field label="RFC" value="CRM240101AB1"/>
              <Field label="Sector" value="Retail multicategoría"/>
              <Field label="Plan" value="Enterprise — $4,800 USD/mes"/>
            </div>
          )}
          {tab==='notifications' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>Notificaciones</div>
              <ToggleField label="Alertas críticas por email" desc="Quiebres de stock, fallas de integración" value={true}/>
              <ToggleField label="Resumen diario" desc="Cada día a las 9:00 AM" value={true}/>
              <ToggleField label="Notificaciones push" desc="En navegador" value={false}/>
              <ToggleField label="Slack: canal #flux-alertas" desc="Conectado vía integración" value={true}/>
              <ToggleField label="Sugerencias proactivas de Claude" desc="Recibir insights automáticos del Copilot" value={true}/>
            </div>
          )}
          {tab==='security' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>Seguridad</div>
              <ToggleField label="Autenticación de dos factores" desc="Vía app autenticadora" value={true}/>
              <ToggleField label="SSO con Microsoft" desc="Inicio de sesión corporativo" value={true}/>
              <Field label="Tiempo de sesión" value="8 horas"/>
              <Field label="IP permitidas" value="Cualquier IP"/>
              <button className="btn" style={{marginTop:8}}><I.Eye size={13}/> Ver registro de auditoría</button>
            </div>
          )}
          {tab==='billing' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>Facturación</div>
              <Field label="Plan actual" value="Enterprise"/>
              <Field label="Próxima factura" value="$4,800 USD · 12 jun 2026"/>
              <Field label="Método de pago" value="Visa •••• 4421"/>
              <Field label="Email de facturación" value="finanzas@flux.mx"/>
            </div>
          )}
          {tab==='api' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14}}>API & Webhooks</div>
              <Field label="API Key" value="flux_sk_live_••••••••••••••••3ab2"/>
              <Field label="Webhook URL" value="https://api.cadena-retail.mx/flux/events"/>
              <Field label="Llamadas (24h)" value="48,920 / 100,000"/>
              <button className="btn"><I.Refresh size={13}/> Rotar API Key</button>
            </div>
          )}
          {tab==='ai' && (
            <div className="card">
              <div style={{fontSize:15,fontWeight:700,marginBottom:14,display:'flex',alignItems:'center',gap:8}}><I.Sparkles size={18}/> FLUX Copilot · Powered by Claude</div>
              <ToggleField label="Asistente conversacional" desc="Habilitar chat flotante en toda la plataforma" value={true}/>
              <ToggleField label="Generación de reportes con IA" desc="Crear reportes desde lenguaje natural" value={true}/>
              <ToggleField label="Recomendaciones proactivas" desc="Insights automáticos en el dashboard" value={true}/>
              <ToggleField label="Pronósticos con Claude Forecast v2.4" desc="Modelo de demanda con MAPE 4.8%" value={true}/>
              <Field label="Modelo" value="claude-haiku-4.5"/>
              <Field label="Tokens usados (mes)" value="2.4M / 10M"/>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

function Field({label, value}){
  return (
    <div style={{display:'grid',gridTemplateColumns:'200px 1fr',gap:14,padding:'12px 0',borderBottom:'1px solid var(--line-2)',alignItems:'center'}}>
      <div style={{fontSize:13,color:'var(--ink-2)',fontWeight:500}}>{label}</div>
      <div style={{fontSize:13,color:'var(--ink)',fontWeight:500}}>{value}</div>
    </div>
  );
}
function ToggleField({label, desc, value, onChange}){
  return (
    <div style={{display:'flex',gap:14,padding:'12px 0',borderBottom:'1px solid var(--line-2)',alignItems:'center'}}>
      <div style={{flex:1}}>
        <div style={{fontSize:13.5,color:'var(--ink)',fontWeight:600}}>{label}</div>
        {desc && <div style={{fontSize:12,color:'var(--ink-3)',marginTop:1}}>{desc}</div>}
      </div>
      <button onClick={onChange} style={{width:38,height:22,borderRadius:99,background:value?'var(--amber)':'var(--line)',border:'none',padding:2,cursor:'pointer',position:'relative',transition:'all .15s'}}>
        <span style={{display:'block',width:18,height:18,borderRadius:99,background:'#fff',transform:value?'translateX(16px)':'translateX(0)',transition:'transform .15s',boxShadow:'0 1px 3px rgba(0,0,0,.2)'}}/>
      </button>
    </div>
  );
}
window.PageSettings = PageSettings;