/* Santos OS — Login screen */
function Login({ onLogin }) {
  const T = window.T;
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);
  const [showHints, setShowHints] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = () => {
    const u = window.USERS.find(x => x.email.toLowerCase() === email.trim().toLowerCase());
    if (!u || pass !== 'Santos2026!') { setError('Correo o contraseña incorrectos. Verifica tus datos o contacta a RRHH.'); return; }
    onLogin(u);
  };
  const fill = (u) => { setEmail(u.email); setPass('Santos2026!'); setError(''); setShowHints(false); };

  const field = {flex:1, fontFamily:T.font, fontSize:14, color:T.fg1, border:'none', outline:'none', background:'transparent', padding:'12px 0'};
  const inputRow = (focus) => ({display:'flex', alignItems:'center', gap:8, background:T.bg, borderRadius:12, border:`1.5px solid ${T.border}`, padding:'0 12px'});

  return (
    <div style={{position:'absolute', inset:0, background:T.primary, overflowY:'auto', fontFamily:T.font, '--sbcolor':'#fff'}}>
      <div style={{minHeight:'100%', paddingBottom:28}}>
        {/* brand header */}
        <div style={{paddingTop:60, paddingBottom:30, display:'flex', flexDirection:'column', alignItems:'center', gap:6}}>
          <div style={{width:72, height:72, borderRadius:36, background:'rgba(255,255,255,0.15)', border:'2px solid rgba(255,255,255,0.3)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:10, fontSize:26, fontWeight:900, color:'#fff', letterSpacing:2}}>GS</div>
          <div style={{fontSize:20, fontWeight:900, color:'#fff', letterSpacing:2, whiteSpace:'nowrap', lineHeight:1}}>GRUPO SANTOS</div>
          <div style={{fontSize:13, color:'rgba(255,255,255,0.75)', lineHeight:1.2}}>Sistema Operativo</div>
          <div style={{background:'rgba(255,255,255,0.15)', borderRadius:12, padding:'4px 12px', marginTop:4}}><span style={{fontSize:11, color:'rgba(255,255,255,0.8)', fontWeight:600}}>MVP v0.1 · Demo</span></div>
        </div>

        {/* login card */}
        <div style={{background:T.surface, borderRadius:'28px 28px 20px 20px', margin:'0 16px', padding:24, boxShadow:'0 4px 16px rgba(0,0,0,0.12)'}}>
          <div style={{fontSize:20, fontWeight:800, color:T.fg1, marginBottom:4}}>Iniciar sesión</div>
          <div style={{fontSize:12, color:T.fg3, marginBottom:24, lineHeight:1.5}}>Ingresa con tu correo corporativo @gruposantos.hn</div>

          <div style={{marginBottom:16}}>
            <div style={{fontSize:12, fontWeight:700, color:T.fg2, marginBottom:6, letterSpacing:0.3}}>Correo corporativo</div>
            <div style={inputRow()}><span style={{fontSize:16}}>@</span><input style={field} value={email} onChange={e=>{setEmail(e.target.value); setError('');}} placeholder="nombre@gruposantos.hn" /></div>
          </div>
          <div style={{marginBottom:16}}>
            <div style={{fontSize:12, fontWeight:700, color:T.fg2, marginBottom:6, letterSpacing:0.3}}>Contraseña</div>
            <div style={inputRow()}><span style={{fontSize:16}}>*</span><input type={showPass?'text':'password'} style={field} value={pass} onChange={e=>{setPass(e.target.value); setError('');}} placeholder="••••••••" onKeyDown={e=>e.key==='Enter'&&submit()} /><span style={{cursor:'pointer', fontSize:16}} onClick={()=>setShowPass(!showPass)}>{showPass?'○':'⊙'}</span></div>
          </div>

          {error && <div style={{background:T.dangerLight, borderRadius:10, padding:12, marginBottom:16, border:`1px solid ${T.danger}40`}}><span style={{fontSize:13, color:T.danger, fontWeight:600, lineHeight:1.4}}>!  {error}</span></div>}

          <window.Btn variant="primary" full onClick={submit} style={{marginBottom:14}}>Iniciar sesión →</window.Btn>
          <div style={{fontSize:11, color:T.fg3, textAlign:'center', lineHeight:1.5}}>¿Problemas de acceso? Contacta a RRHH · david.santos@gruposantos.hn</div>
        </div>

        {/* demo hint */}
        <div style={{margin:'16px 16px 0'}}>
          <button onClick={()=>setShowHints(!showHints)} style={{width:'100%', background:'rgba(255,255,255,0.12)', borderRadius:12, padding:'10px 16px', border:'1px solid rgba(255,255,255,0.2)', color:'rgba(255,255,255,0.85)', fontSize:12, fontWeight:700, letterSpacing:0.3, cursor:'pointer', fontFamily:T.font}}>*  Credenciales de demo  {showHints?'▲':'▼'}</button>
          {showHints && (
            <div style={{background:T.surface, borderRadius:16, marginTop:8, overflow:'hidden', border:`1px solid ${T.border}`}}>
              {window.USERS.map((u,i) => (
                <div key={u.email} onClick={()=>fill(u)} style={{display:'flex', alignItems:'center', gap:10, padding:'11px 14px', borderBottom:i<window.USERS.length-1?`1px solid ${T.border}`:'none', cursor:'pointer'}}>
                  <span style={{fontSize:20, width:28, textAlign:'center'}}>{u.icon}</span>
                  <div style={{flex:1}}><div style={{fontSize:13, fontWeight:700, color:T.fg1}}>{u.name}</div><div style={{fontSize:11, color:T.fg3, marginTop:1}}>{u.email}</div></div>
                  <span style={{borderRadius:8, padding:'3px 8px', border:`1px solid ${u.color}50`, background:u.color+'20', color:u.color, fontSize:10, fontWeight:700}}>{u.label}</span>
                </div>
              ))}
              <div style={{fontSize:11, color:T.fg3, textAlign:'center', padding:'10px', fontStyle:'italic'}}>Contraseña de demo: Santos2026!</div>
            </div>
          )}
        </div>

        <div style={{padding:'20px 20px 0', textAlign:'center'}}>
          <div style={{fontSize:11, color:'rgba(255,255,255,0.5)'}}>Farmacias Santos · CEDI Santos · Santos Tiendas · Santos Dental</div>
          <div style={{fontSize:10, color:'rgba(255,255,255,0.35)', marginTop:4}}>Powered by Claude AI · Odoo · Supabase</div>
        </div>
      </div>
    </div>
  );
}
window.Login = Login;