const { useState } = React;

window.LoginView = function({ setView, setProfile, hasUsers, allUsers }) {
    const [email, setEmail] = useState('');
    const [pass, setPass] = useState('');
    const [name, setName] = useState('');
    const [error, setError] = useState('');
    const isSetup = !hasUsers;

    const handleLogin = async (e) => {
        e.preventDefault();
        if (isSetup) {
            const admin = { 
                name, 
                email: email.toLowerCase().trim(), 
                password: pass, 
                role: 'admin', 
                status: 'activo', 
                hiringDate: window.getNICDate(), 
                vacationDaysUsed: 0, 
                overrideCheckOut: false 
            };
            const ref = await db.collection('artifacts').doc(appId).collection('public').doc('data').collection('users').add(admin);
            const p = { id: ref.id, ...admin };
            setProfile(p); 
            localStorage.setItem('shift_v6', JSON.stringify(p)); 
            setView('admin');
        } else {
            const found = allUsers.find(u => u.email === email.toLowerCase().trim() && u.password === pass);
            if (found) {
                if (found.status === 'baja') return setError("Cuenta desactivada por administración.");
                setProfile(found); 
                localStorage.setItem('shift_v6', JSON.stringify(found));
                setView(found.role === 'admin' ? 'admin' : 'dashboard');
            } else setError("Credenciales incorrectas.");
        }
    };

    return (
        <div className="flex items-center justify-center min-h-screen p-6 bg-slate-900">
            <div className="w-full max-w-md bg-white rounded-[3rem] p-10 shadow-2xl border-t-[12px] border-indigo-600 fade-in">
                <div className="text-center mb-8">
                    <Icon name="lock" className="w-12 h-12 text-indigo-600 mx-auto mb-4" />
                    <h1 className="text-3xl font-black text-slate-800 tracking-tighter uppercase">{isSetup ? "Setup Maestro" : "Shift Marcas"}</h1>
                    <p className="text-slate-400 text-[10px] font-black uppercase mt-1">Nicaragua (UTC-6)</p>
                </div>
                <form onSubmit={handleLogin} className="space-y-4">
                    {isSetup && <input type="text" placeholder="Nombre Completo Admin" value={name} onChange={e=>setName(e.target.value)} className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none" required />}
                    <input type="email" placeholder="Email Corporativo" value={email} onChange={e=>setEmail(e.target.value)} className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none" required />
                    <input type="password" placeholder="Contraseña" value={pass} onChange={e=>setPass(e.target.value)} className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none" required />
                    {error && <div className="p-3 bg-red-50 text-red-600 rounded-xl font-bold text-center text-xs">{error}</div>}
                    <button className="w-full py-5 bg-indigo-600 text-white font-black rounded-2xl shadow-xl uppercase text-xs active:scale-95 transition-all">Ingresar</button>
                </form>
            </div>
        </div>
    );
};