import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useForm } from 'react-hook-form';
import { useAuth } from '../contexts/AuthContext';
import { useTheme } from '../contexts/ThemeContext';
import { Shield, Eye, EyeOff } from 'lucide-react';

const AdminLogin = () => {
  const { adminLogin } = useAuth();
  const { config } = useTheme();
  const navigate = useNavigate();
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm({
    defaultValues: {
      login: config.admin.login,
      password: '',
    }
  });

  const onSubmit = async (data) => {
    setIsLoading(true);
    const result = await adminLogin(data);
    setIsLoading(false);
    
    if (result.success) {
      navigate('/admin/dashboard');
    } else {
      setError('password', { message: result.error });
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-md w-full"
      >
        <div className="bg-white rounded-2xl shadow-xl p-8">
          <div className="text-center mb-8">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: 'spring' }}
              className="inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-4"
            >
              <Shield size={40} className="text-red-600" />
            </motion.div>
            <h2 className="text-3xl font-bold text-gray-900">Панель администратора</h2>
            <p className="text-gray-600 mt-2">{config.name}</p>
          </div>

          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
            <p className="text-sm text-blue-800">
              <strong>Для входа используйте:</strong><br />
              Логин: <code className="bg-blue-100 px-1 rounded">{config.admin.login}</code><br />
              Пароль: <code className="bg-blue-100 px-1 rounded">{config.admin.password}</code>
            </p>
          </div>

          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Логин администратора
              </label>
              <input
                type="text"
                {...register('login', {
                  required: 'Введите логин',
                })}
                className="input-field"
                placeholder="admin"
              />
              {errors.login && (
                <p className="error-message">{errors.login.message}</p>
              )}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Пароль администратора
              </label>
              <div className="relative">
                <input
                  type={showPassword ? 'text' : 'password'}
                  {...register('password', {
                    required: 'Введите пароль',
                  })}
                  className="input-field pr-10"
                  placeholder="Пароль"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                >
                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                </button>
              </div>
              {errors.password && (
                <p className="error-message">{errors.password.message}</p>
              )}
            </div>

            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              type="submit"
              disabled={isLoading}
              className="w-full bg-red-600 text-white px-6 py-3 rounded-lg font-medium 
                       hover:bg-red-700 transition-all duration-200 
                       transform hover:scale-105 active:scale-95
                       shadow-lg hover:shadow-xl flex items-center justify-center space-x-2"
            >
              {isLoading ? (
                <motion.div
                  animate={{ rotate: 360 }}
                  transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                  className="w-5 h-5 border-2 border-white border-t-transparent rounded-full"
                />
              ) : (
                <>
                  <Shield size={20} />
                  <span>Войти в админ панель</span>
                </>
              )}
            </motion.button>
          </form>

          <div className="mt-6 text-center">
            <Link
              to="/login"
              className="text-gray-500 hover:text-gray-700 transition-colors text-sm"
            >
              ← Вернуться к обычному входу
            </Link>
          </div>
        </div>
      </motion.div>
    </div>
  );
};

export default AdminLogin;