// Login Page Component
const LoginPage = ({ onLogin }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const handleLogin = (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');
        Papa.parse(CSV_URL_LOGIN, {
            download: true, header: false,
            complete: (results) => {
                setLoading(false);
                const userFound = results.data.find(row => row[0] && row[0].toString().trim() === username && row[1] && row[1].toString().trim() === password);
                if (userFound) { onLogin({ username, role: userFound[2] ? userFound[2].toString().trim() : 'User' }); } else { setError('Username atau Password salah.'); }
            },
            error: (err) => { setLoading(false); setError('Gagal terhubung ke database login.'); }
        });
    };

    return (
        <div className="min-h-screen flex items-center justify-center p-4 bg-[#0f172a]">
            <div className="bg-white rounded-3xl shadow-2xl p-8 w-full max-w-md animate-fade-in border border-white/10 relative overflow-hidden">
                <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-10 pointer-events-none"><div className="absolute -top-24 -right-24 w-64 h-64 bg-blue-600 rounded-full blur-3xl animate-float"></div><div className="absolute top-1/2 -left-24 w-48 h-48 bg-purple-600 rounded-full blur-3xl"></div></div>
                <div className="relative z-10">
                    <div className="text-center mb-8"><div className="inline-flex p-4 bg-blue-50 rounded-2xl mb-4 shadow-sm"><img src={LOGO_URL} alt="Logo" className="h-12 w-auto" /></div><h1 className="text-2xl font-bold text-slate-800">Sistem Monitoring</h1><p className="text-slate-500 text-sm">Putus Sekolah Kab. Tanah Bumbu</p></div>
                    <form onSubmit={handleLogin} className="space-y-5">
                        <div><label className="block text-xs font-bold text-slate-500 uppercase mb-2">Username</label><input type="text" required className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 outline-none text-slate-700" placeholder="Masukkan username" value={username} onChange={e => setUsername(e.target.value)} /></div>
                        <div><label className="block text-xs font-bold text-slate-500 uppercase mb-2">Password</label><input type="password" required className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 outline-none text-slate-700" placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} /></div>
                        {error && <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm font-medium flex items-center gap-2"><Icon name="AlertTriangle" size={16} /> {error}</div>}
                        <button type="submit" disabled={loading} className="w-full py-3.5 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold shadow-lg transition-all flex justify-center items-center gap-2">{loading ? 'Memproses...' : <><Icon name="Lock" size={18} /> Masuk Sistem</>}</button>
                    </form>
                    <div className="mt-6 text-center text-xs text-slate-400">&copy; 2025 Dinas Pendidikan Kab. Tanah Bumbu</div>
                </div>
            </div>
        </div>
    );
};