// ─────────────────────────────────────────
//  PANTALLA DE LOGIN
// ─────────────────────────────────────────
function Login({onLogin,onAdmin,dm}){
  const C=dm?DK:LT;
  const[user,setUser]=useState("");
  const[pass,setPass]=useState("");
  const[adminPass,setAdminPass]=useState("");
  const[err,setErr]=useState("");
  const[loading,setLoading]=useState(false);
  const[showAdmin,setShowAdmin]=useState(false);
  const[logoTaps,setLogoTaps]=useState(0);
  const handleLogoTap=()=>{
    const next=logoTaps+1;
    if(next>=5){setShowAdmin(true);setLogoTaps(0);setErr("");}
    else{setLogoTaps(next);setTimeout(()=>setLogoTaps(0),3000);}
  };

  const inp2={width:"100%",background:C.inp,border:`1px solid ${C.border}`,borderRadius:8,color:C.text,padding:"12px 14px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",fontWeight:400};

  const doLogin=async()=>{
    if(!user.trim()||!pass.trim()){setErr("Completa usuario y contraseña");return;}
    setLoading(true);setErr("");
    try{
      const data=await NexusFirebase.login(user.trim(),pass.trim());
      if(data.ok){
        const s={usuario:user.trim(),pass:pass.trim(),negocio:data.negocio,tipo:data.tipo||"General",rol:data.rol||"propietario",sheetUrl:data.sheetUrl,empresaId:data.empresaId||""};
        onLogin(s);
      } else if(data.bloqueado){
        setErr("⛔ Acceso suspendido. Contacta a tu proveedor.");
      } else {
        setErr(data.error||"Usuario o contraseña incorrectos");
      }
    }catch(e){
      setErr("Error de conexión. Verifica tu internet.");
    }finally{setLoading(false);}
  };

  const doAdmin=()=>{
    if(adminPass===ADMIN_PASS){saveSession({rol:"admin_nexus",usuario:"admin"});onAdmin();}
    else setErr("Contraseña de administrador incorrecta");
  };

  return(
    <div style={{minHeight:"100vh",background:C.bg,display:"flex",alignItems:"center",justifyContent:"center",padding:20}}>
      <style>{`@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}`}</style>
      <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:18,padding:"40px 32px",maxWidth:400,width:"100%",boxShadow:C.shadow,backgroundImage:dm?"linear-gradient(135deg,#0d1b2e 0%,#0a1628 100%)":"none"}}>
        <div style={{display:"flex",flexDirection:"column",alignItems:"center",marginBottom:24}}>
          <div onClick={handleLogoTap} style={{cursor:"default",userSelect:"none"}}><Logo size={72}/></div>
          <div style={{fontWeight:700,fontSize:30,color:C.accent||"#f59e0b",marginTop:10,letterSpacing:5,fontFamily:"'Inter',system-ui,sans-serif"}}>NEXUS</div>
          <div style={{fontSize:13,color:C.text,letterSpacing:3,fontWeight:500,marginTop:1,opacity:.7}}>DIGITAL SOLUTIONS</div>
          <div style={{width:"60%",height:1,background:"linear-gradient(to right,transparent,#22d3ee,transparent)",margin:"10px 0"}}></div>
          <div style={{fontSize:13,color:C.muted,letterSpacing:1}}>Automation & Digital Innovation | FL</div>
        </div>

        {!showAdmin?(
          <>
            <div style={{display:"grid",gap:12,marginBottom:16}}>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:5,fontWeight:500}}>Usuario</label>
                <input type="text" placeholder="Ej. elparche" value={user}
                  onChange={e=>setUser(e.target.value.toLowerCase().replace(/\s/g,""))}
                  onKeyDown={e=>e.key==="Enter"&&doLogin()}
                  style={inp2}/>
              </div>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:5,fontWeight:500}}>Contraseña</label>
                <input type="password" placeholder="••••••••" value={pass}
                  onChange={e=>setPass(e.target.value)}
                  onKeyDown={e=>e.key==="Enter"&&doLogin()}
                  style={inp2}/>
              </div>
            </div>
            {err&&<div style={{color:C.red,fontSize:14,marginBottom:12,padding:"10px 14px",background:C.redBg,border:`1px solid ${C.redBd}`,borderRadius:7,animation:"shake .3s"}}>{err}</div>}
            <button onClick={doLogin} disabled={loading}
              style={{background:"linear-gradient(135deg,#f59e0b,#d97706)",color:"#fff",border:"none",borderRadius:8,padding:"14px",fontSize:16,fontWeight:500,cursor:"pointer",width:"100%",opacity:loading?.7:1,fontFamily:"'Inter',system-ui,sans-serif"}}>
              {loading?"Verificando...":"Ingresar"}
            </button>
          </>
        ):(
          <>
            <div style={{fontWeight:600,fontSize:19,color:C.text,marginBottom:12}}>🔐 Panel Administrador</div>
            <input type="password" placeholder="Contraseña admin..." value={adminPass}
              onChange={e=>setAdminPass(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&doAdmin()}
              style={{...inp2,marginBottom:10}}/>
            {err&&<div style={{color:C.red,fontSize:14,marginBottom:10,padding:"10px 14px",background:C.redBg,border:`1px solid ${C.redBd}`,borderRadius:7}}>{err}</div>}
            <button onClick={doAdmin}
              style={{background:C.text,color:C.bg,border:"none",borderRadius:8,padding:"13px",fontSize:16,fontWeight:500,cursor:"pointer",width:"100%",marginBottom:10,fontFamily:"'Inter',system-ui,sans-serif"}}>
              Entrar como admin
            </button>
            <button onClick={()=>{setShowAdmin(false);setErr("");}}
              style={{background:"none",border:`1px solid ${C.border}`,borderRadius:8,padding:"11px",fontSize:16,cursor:"pointer",width:"100%",color:C.muted,fontFamily:"'Inter',system-ui,sans-serif"}}>
              ← Volver al login
            </button>
          </>
        )}
        <div style={{marginTop:20,textAlign:"center",fontSize:13,color:C.muted}}>
          Nexus Digital Solutions · Est. 2026
        </div>
      </div>
    </div>
  );
}