import React, { useState } from 'react';
import { Hammer, Lock, ShieldCheck } from "lucide-react";
import { useAuth } from '../context/useAuth';
import { useNavigate } from 'react-router-dom';

export const Login = () => {
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    const { signInWithPassword } = useAuth();
    const navigate = useNavigate();

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

        try {
            const success = await signInWithPassword(password);
            if (success) {
                navigate('/');
            } else {
                setError('Senha incorreta. Acesso negado.');
            }
        } catch (err) {
            setError('Erro ao processar login.');
        } finally {
            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">
                        G
                    </div>
                    <h1 className="text-3xl font-bold text-text-main tracking-tight mb-1">GPI RESTRICT</h1>
                    <p className="text-text-muted text-[10px] font-black uppercase tracking-[0.3em]">Ambiente de Desenvolvimento</p>
                </div>

                {/* Login Form */}
                <div className="w-full bg-surface rounded-[2.5rem] border border-border/40 shadow-2xl shadow-primary/5 p-10 backdrop-blur-sm">
                    <div className="flex items-center gap-3 mb-8 text-primary">
                        <Lock size={20} className="opacity-70" />
                        <h2 className="text-lg font-bold uppercase tracking-tight">Chave de Acesso</h2>
                    </div>

                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div className="space-y-2">
                            <input
                                type="password"
                                placeholder="Digite a senha mestra..."
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="w-full h-14 bg-surface-soft border border-border/40 rounded-2xl px-6 text-sm focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-bold placeholder:font-medium tracking-widest text-center"
                                required
                                autoFocus
                            />
                            {error && <p className="text-error text-[10px] font-bold uppercase text-center mt-2 tracking-wider">{error}</p>}
                        </div>

                        <button
                            type="submit"
                            disabled={loading}
                            className="w-full h-14 bg-primary hover:bg-primary/90 text-white font-black uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-3 active:scale-95 disabled:opacity-50"
                        >
                            {loading ? (
                                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                            ) : (
                                <>
                                    <ShieldCheck size={20} />
                                    Entrar no Sistema
                                </>
                            )}
                        </button>
                    </form>
                </div>

                <div className="mt-8 flex items-center gap-2 text-text-muted/60 text-[10px] font-black uppercase tracking-widest">
                    <Hammer size={12} />
                    <span>Desenvolvimento Ativo</span>
                </div>
            </div>
        </div>
    );
};
