import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ApiService } from '../api';

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await ApiService.dangNhap(username, password);
      // Log login asynchronously without blocking navigation
      ApiService.log('Đăng nhập', `Tài khoản ${username} đăng nhập thành công`).catch(console.error);
      navigate('/');
    } catch (err: any) {
      setError(err.message || 'Đăng nhập thất bại. Vui lòng thử lại.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-900 dark:bg-slate-950 p-4 transition-colors">
      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md p-10 border border-transparent dark:border-slate-700 transition-all">
        <div className="text-center mb-10">
          <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-blue-500/30">
            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A10.003 10.003 0 0012 20a10.003 10.003 0 006.239-2.227l.054.09m-9.34-1.44l.054-.09A10.003 10.003 0 0012 15a10.003 10.003 0 006.239-2.227l.054.09m-9.34-1.44l.054-.09A10.003 10.003 0 0012 10a10.003 10.003 0 006.239-2.227l.054.09M9 7h6M9 4h6m-6 0V3a1 1 0 011-1h4a1 1 0 011 1v1m-6 0h6"/></svg>
          </div>
          <h2 className="text-3xl font-bold text-slate-800 dark:text-white">Đăng nhập Hệ thống</h2>
          <p className="text-slate-500 dark:text-slate-400 mt-2 font-medium">Quản lý hồ sơ hành chính nội bộ</p>
        </div>

        {error && (
          <div className="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 mb-6 animate-in slide-in-from-top duration-300">
            <p className="text-red-700 dark:text-red-400 text-sm font-bold">{error}</p>
          </div>
        )}

        <form onSubmit={handleLogin} className="space-y-6">
          <div>
            <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">Tên đăng nhập</label>
            <input
              type="text"
              required
              className="w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-900 transition-all outline-none"
              placeholder="Username của bạn"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div>
            <label className="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">Mật khẩu</label>
            <input
              type="password"
              required
              className="w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-900 transition-all outline-none"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-xl shadow-blue-500/20 transition-all active:scale-[0.98] disabled:opacity-50"
          >
            {loading ? 'Đang xác thực...' : 'Đăng nhập ngay'}
          </button>
        </form>

      </div>
    </div>
  );
};

export default LoginPage;