"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Mail, Lock, Loader2, Cpu } from "lucide-react";

export default function AdminLoginPage() {
    const [form, setForm] = useState({ email: "", password: "" });
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true); setError("");
        try {
            const res = await fetch("/api/auth/login", { method: "POST", body: JSON.stringify(form), headers: { "Content-Type": "application/json" } });
            const data = await res.json();
            if (res.ok) { window.location.href = "/admin/dashboard"; }
            else { setError(data.error || "Identifiants invalides"); }
        } catch { setError("Erreur de connexion"); }
        finally { setLoading(false); }
    };

    return (
        <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(135deg, #020617 0%, #0f172a 100%)", padding: "2rem" }}>
            <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }}
                style={{ width: "100%", maxWidth: "26rem", background: "rgba(15,23,42,0.9)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: "1.75rem", padding: "3rem 2.5rem", boxShadow: "0 32px 96px rgba(0,0,0,0.5)", backdropFilter: "blur(20px)" }}>
                <div style={{ textAlign: "center", marginBottom: "2.5rem" }}>
                    <div style={{ width: 56, height: 56, background: "var(--primary)", borderRadius: 16, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 1.25rem", boxShadow: "0 8px 24px rgba(37,99,235,0.4)" }}>
                        <Cpu size={28} color="white" />
                    </div>
                    <h1 style={{ color: "#f8fafc", fontFamily: "Outfit", fontSize: "1.75rem", fontWeight: 900, marginBottom: "0.4rem" }}>Espace Admin</h1>
                    <p style={{ color: "#64748b", fontSize: "0.9rem" }}>Meta Lab Africa Portfolio</p>
                </div>

                <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
                    <div>
                        <label style={{ display: "block", marginBottom: "0.5rem", fontSize: "0.8rem", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.1em", color: "#94a3b8" }}>Email</label>
                        <div style={{ position: "relative" }}>
                            <Mail size={17} style={{ position: "absolute", left: "1rem", top: "50%", transform: "translateY(-50%)", color: "#475569" }} />
                            <input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })}
                                style={{ width: "100%", padding: "0.875rem 1rem 0.875rem 2.75rem", background: "rgba(255,255,255,0.06)", border: "1.5px solid rgba(255,255,255,0.1)", borderRadius: "0.75rem", color: "#f8fafc", fontSize: "1rem", outline: "none", transition: "border-color 0.2s", boxSizing: "border-box" }}
                                placeholder="admin@metalab.africa" />
                        </div>
                    </div>

                    <div>
                        <label style={{ display: "block", marginBottom: "0.5rem", fontSize: "0.8rem", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.1em", color: "#94a3b8" }}>Mot de Passe</label>
                        <div style={{ position: "relative" }}>
                            <Lock size={17} style={{ position: "absolute", left: "1rem", top: "50%", transform: "translateY(-50%)", color: "#475569" }} />
                            <input type="password" required value={form.password} onChange={e => setForm({ ...form, password: e.target.value })}
                                style={{ width: "100%", padding: "0.875rem 1rem 0.875rem 2.75rem", background: "rgba(255,255,255,0.06)", border: "1.5px solid rgba(255,255,255,0.1)", borderRadius: "0.75rem", color: "#f8fafc", fontSize: "1rem", outline: "none", transition: "border-color 0.2s", boxSizing: "border-box" }}
                                placeholder="••••••••" />
                        </div>
                    </div>

                    {error && <div style={{ padding: "0.75rem 1rem", background: "rgba(239,68,68,0.12)", border: "1px solid rgba(239,68,68,0.3)", borderRadius: "0.65rem", color: "#f87171", fontSize: "0.875rem", fontWeight: 600 }}>{error}</div>}

                    <button type="submit" disabled={loading}
                        style={{ width: "100%", padding: "0.95rem", background: "var(--primary)", color: "#fff", border: "none", borderRadius: "0.75rem", fontWeight: 900, fontSize: "1rem", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: "0.6rem", marginTop: "0.5rem", boxShadow: "0 8px 24px rgba(37,99,235,0.35)", transition: "all 0.2s" }}>
                        {loading ? <><Loader2 size={20} className="animate-spin" /> Connexion...</> : "Se connecter"}
                    </button>
                </form>
            </motion.div>
        </div>
    );
}