import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import toast from 'react-hot-toast';
import { Eye, EyeOff, Moon, Sun } from 'lucide-react';
import { defaultRouteForAppMode } from '../utils/appMode';

export default function Login() {
  const [identifier, setIdentifier] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
  const { login } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('theme', theme);
  }, [theme]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!identifier || !password) { toast.error('لطفاً تمام فیلدها را پر کنید'); return; }
    setLoading(true);
    try {
      await login(identifier, password);
      toast.success('ورود موفقیت‌آمیز');
      navigate(defaultRouteForAppMode(), { replace: true });
    } catch (err) {
      toast.error(err.response?.data?.message || 'خطا در ورود به سامانه');
    } finally { setLoading(false); }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--page-bg)', padding: '1rem', position: 'relative' }}>
      <button
        className="btn btn-sm btn-secondary"
        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
        style={{ position: 'absolute', top: '1rem', left: '1rem', padding: '0.5rem' }}
        title={theme === 'dark' ? 'تم روشن' : 'تم تیره'}
      >
        {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
      </button>
      <div className="card" style={{ maxWidth: 420, width: '100%', padding: '2.5rem' }}>
        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
          <img src="/brand/project-mark.png" alt="" style={{ width: 72, height: 72, objectFit: 'cover', borderRadius: 18, marginBottom: '1rem', boxShadow: '0 12px 30px rgba(14,165,233,.24)' }} />
          <h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: 'var(--gray-900)' }}>ورود به سامانه مدیریت پروژه</h1>
          <p style={{ fontSize: '0.875rem', color: 'var(--gray-500)', marginTop: '0.25rem' }}>برای مدیریت پروژه‌های خود وارد شوید</p>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label className="form-label" htmlFor="login-identifier">نام کاربری یا ایمیل</label>
            <input id="login-identifier" className="form-input" type="text" value={identifier} onChange={e => setIdentifier(e.target.value)} placeholder="نام کاربری یا ایمیل" dir="auto" autoComplete="username" />
          </div>
          <div className="form-group">
            <label className="form-label" htmlFor="login-password">رمز عبور</label>
            <div className="password-input-wrap">
              <input
                id="login-password"
                className="form-input"
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="••••••••"
                autoComplete="current-password"
              />
              <button
                type="button"
                className="password-visibility-toggle"
                onClick={() => setShowPassword((visible) => !visible)}
                aria-label={showPassword ? 'مخفی کردن رمز عبور' : 'نمایش رمز عبور'}
                aria-pressed={showPassword}
                title={showPassword ? 'مخفی کردن رمز عبور' : 'نمایش رمز عبور'}
              >
                {showPassword ? <EyeOff size={19} /> : <Eye size={19} />}
              </button>
            </div>
          </div>
          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', justifyContent: 'center' }} disabled={loading}>
            {loading ? 'در حال ورود...' : 'ورود'}
          </button>
        </form>
      </div>
    </div>
  );
}
