import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { authAPI } from '../api';
import { FiLock, FiLogIn } from 'react-icons/fi';

export default function Login() {
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();

    const handleLogin = async (e) => {
        e.onChange ? e.preventDefault() : null;
        if (e && e.preventDefault) e.preventDefault();

        setError('');
        setLoading(true);

        try {
            const res = await authAPI.login(password);
            if (res.success && res.token) {
                localStorage.setItem('admin_token', res.token);
                navigate('/');
            }
        } catch (err) {
            setError(err.response?.data?.message || 'Server xatosi');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-950 p-4">
            <div className="w-full max-w-sm bg-gray-900 border border-gray-800 rounded-2xl shadow-xl overflow-hidden">
                <div className="p-8 text-center border-b border-gray-800">
                    <div className="w-16 h-16 bg-blue-600/20 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl">
                        <FiLock />
                    </div>
                    <h2 className="text-2xl font-bold text-white">Xavfsiz Kirish</h2>
                    <p className="text-gray-400 mt-2 text-sm">M-TEXTILE Maxfiylik Tizimi</p>
                </div>

                <form onSubmit={handleLogin} className="p-8 space-y-6">
                    {error && (
                        <div className="bg-red-500/10 border border-red-500/50 text-red-500 text-sm p-3 rounded-lg text-center">
                            {error}
                        </div>
                    )}

                    <div>
                        <label className="block text-sm font-medium text-gray-400 mb-2">Maxfiy Parol</label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            className="w-full bg-gray-950 border border-gray-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 outline-none transition-all"
                            placeholder="••••••••"
                            required
                        />
                    </div>

                    <button
                        type="submit"
                        disabled={loading || !password}
                        className="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {loading ? 'Tekshirilmoqda...' : (
                            <>
                                <FiLogIn /> Kirish
                            </>
                        )}
                    </button>
                </form>
            </div>
        </div>
    );
}