import React, { useState } from "react";
import { Hammer } from "lucide-react";
import { useAuth } from "../context/useAuth";
import { getBaseUrl } from "../services/api";

const API_URL = getBaseUrl();

export const Login = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [errorMsg, setErrorMsg] = useState("");
    const [loading, setLoading] = useState(false);
    
    const { login } = useAuth();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setErrorMsg("");
        setLoading(true);

        try {
            const response = await fetch(`${API_URL}/auth/login`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ email, password })
            });

            const data = await response.json();

            if (!response.ok) {
                setErrorMsg(data.error || "Erro ao efetuar login");
                setLoading(false);
                return;
            }

            login(data.token, data.user);
        } catch (err) {
            setErrorMsg("Falha na conexão com o servidor.");
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen w-full flex items-center justify-center bg-surface-soft relative overflow-hidden">
            {/* Background decorative elements */}
            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/10 rounded-full blur-[120px] animate-pulse" />
            <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px]" />

            <div className="relative z-10 w-full max-w-md px-6 flex flex-col items-center">
                {/* Logo Area */}
                <div className="mb-8 flex flex-col items-center text-center">
                    <div className="w-16 h-16 rounded-2xl bg-primary flex items-center justify-center text-white font-bold text-3xl shadow-2xl shadow-primary/40 mb-4 animate-in zoom-in duration-700">
                        G
                    </div>
                    <h1 className="text-3xl font-bold text-text-main tracking-tight mb-1">GPI</h1>
                    <p className="text-text-muted text-sm font-medium uppercase tracking-widest">Gestão de Pintura Industrial</p>
                </div>

                {/* Custom Login Form */}
                <div className="w-full bg-surface rounded-[2rem] border border-border/40 shadow-2xl shadow-primary/5 p-8 animate-in slide-in-from-bottom-8 duration-1000">
                    <h2 className="text-xl font-bold text-text-main mb-6 text-center">Entrar na sua conta</h2>
                    
                    {errorMsg && (
                        <div className="mb-4 p-3 rounded-lg bg-error/10 border border-error/20 text-error text-sm text-center">
                            {errorMsg}
                        </div>
                    )}

                    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
                        <div className="flex flex-col gap-2">
                            <label className="text-sm font-semibold text-text-secondary" htmlFor="email">Email</label>
                            <input 
                                id="email"
                                type="email" 
                                required
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                className="bg-surface-soft border border-border/40 focus:ring-2 focus:ring-primary/20 focus:border-primary rounded-xl px-4 py-3 text-text-main outline-none transition-all"
                                placeholder="seu@email.com"
                            />
                        </div>

                        <div className="flex flex-col gap-2">
                            <div className="flex justify-between items-center">
                                <label className="text-sm font-semibold text-text-secondary" htmlFor="password">Senha</label>
                            </div>
                            <input 
                                id="password"
                                type="password" 
                                required
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="bg-surface-soft border border-border/40 focus:ring-2 focus:ring-primary/20 focus:border-primary rounded-xl px-4 py-3 text-text-main outline-none transition-all"
                                placeholder="••••••••"
                            />
                        </div>

                        <button 
                            type="submit" 
                            disabled={loading}
                            className="mt-4 bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-primary/20 disabled:opacity-70 disabled:cursor-not-allowed"
                        >
                            {loading ? "Entrando..." : "Entrar"}
                        </button>
                    </form>
                </div>

                <div className="mt-8 flex items-center gap-2 text-text-muted/60 text-xs font-medium">
                    <Hammer size={14} />
                    <span>© 2026 GPI - Eficiência Industrial</span>
                </div>
            </div>
        </div>
    );
};
