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

export default function LoginPage() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('demo@signalpro.ir');
  const [password, setPassword] = useState('demo1234');
  const [remember, setRemember] = useState(true);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const { data } = await api.post('/auth/login', { email, password });
      if (remember) localStorage.setItem('pendingEmail', email);
      navigate('/verify-otp', { state: { email: data.email || email } });
    } catch (err) {
      if (!err.response) {
        setError('اتصال به سرور برقرار نشد. مطمئن شوید بک‌اند روی پورت 3001 در حال اجراست.');
      } else {
        setError(err.response?.data?.error || 'خطا در ورود');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex">
      <div className="hidden lg:flex flex-1 bg-gradient-to-br from-navy-900 to-accent/30 items-center justify-center p-12">
        <div className="text-center max-w-md">
          <div className="text-8xl mb-6">🐂</div>
          <h2 className="text-3xl font-bold mb-4">SignalPro</h2>
          <p className="text-gray-400">پلتفرم حرفه‌ای سیگنال‌های معاملاتی ارز دیجیتال</p>
          <div className="mt-8 h-32 bg-navy-800/50 rounded-2xl flex items-end justify-center gap-1 p-4">
            {[40, 65, 45, 80, 55, 90, 70].map((h, i) => (
              <div key={i} className="w-4 bg-accent rounded-t" style={{ height: `${h}%` }} />
            ))}
          </div>
        </div>
      </div>
      <div className="flex-1 flex items-center justify-center p-8 bg-navy-950">
        <div className="w-full max-w-md">
          <h1 className="text-2xl font-bold mb-2">ورود به حساب کاربری</h1>
          <p className="text-gray-500 text-sm mb-8">کد تأیید به ایمیل شما ارسال می‌شود</p>
          <form onSubmit={handleSubmit} className="space-y-4">
            {error && <div className="p-3 rounded-xl bg-red-500/20 text-red-400 text-sm">{error}</div>}
            <div>
              <label className="text-sm text-gray-400 mb-1 block">ایمیل / نام کاربری</label>
              <input type="email" className="input-field" value={email} onChange={(e) => setEmail(e.target.value)} required dir="ltr" />
            </div>
            <div>
              <label className="text-sm text-gray-400 mb-1 block">رمز عبور</label>
              <input type="password" className="input-field" value={password} onChange={(e) => setPassword(e.target.value)} required dir="ltr" />
            </div>
            <div className="flex items-center justify-between text-sm">
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} className="rounded" />
                مرا به خاطر بسپار
              </label>
              <a href="#" className="text-accent hover:underline">فراموشی رمز؟</a>
            </div>
            <button type="submit" className="btn-primary" disabled={loading}>
              {loading ? 'در حال ارسال...' : 'ورود'}
            </button>
          </form>
          <p className="text-center text-sm text-gray-500 mt-6">
            حساب ندارید؟{' '}
            <Link to="/register" className="text-accent hover:underline">
              ثبت‌نام
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}
