'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';

type Mode = 'login' | 'register';

type Props = {
  open: boolean;
  onClose: () => void;
  defaultMode?: Mode;
  onSuccess?: (userId: number, nickname?: string) => void;
};

export function LoginModal({ open, onClose, defaultMode = 'login', onSuccess }: Props) {
  const t = useTranslations();
  const router = useRouter();
  const [mode, setMode] = useState<Mode>(defaultMode);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [remember, setRemember] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => { setMode(defaultMode); }, [defaultMode]);
  useEffect(() => { setError(null); }, [mode, open]);

  // ESC 关闭
  useEffect(() => {
    if (!open) return;
    const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [open, onClose]);

  if (!open) return null;

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    if (password.length < 6) {
      setError(t('register.passwordTooShort'));
      return;
    }
    setLoading(true);
    try {
      const url = mode === 'login' ? '/api/auth/login' : '/api/auth/register';
      const body = mode === 'login'
        ? { email, password, remember }
        : { email, password, nickname };
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || t('errors.serverError'));
        return;
      }
      if (mode === 'login') {
        onSuccess?.(data.userId, data.nickname);
        router.refresh();
      } else {
        // 注册成功 — 自动登录
        const loginRes = await fetch('/api/auth/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password, remember }),
        });
        const loginData = await loginRes.json();
        if (loginRes.ok) {
          onSuccess?.(loginData.userId, loginData.nickname);
          router.refresh();
        }
      }
    } catch {
      setError(t('errors.serverError'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal-box">
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>
        <h3 className="modal-title">
          {mode === 'login' ? t('login.title') : t('register.title')}
        </h3>
        <p className="modal-subtitle">
          {mode === 'login' ? t('login.subtitle') : t('register.subtitle')}
        </p>
        {error && <div className="modal-error">{error}</div>}
        <form onSubmit={submit}>
          <div className="form-field">
            <label>{t('login.email')}</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={t('login.emailPlaceholder')}
              required
              autoComplete="email"
            />
          </div>
          {mode === 'register' && (
            <div className="form-field">
              <label>{t('register.nickname')}</label>
              <input
                type="text"
                value={nickname}
                onChange={(e) => setNickname(e.target.value)}
                autoComplete="nickname"
              />
            </div>
          )}
          <div className="form-field">
            <label>{t('login.password')}</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder={t('login.passwordPlaceholder')}
              required
              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
            />
          </div>
          {mode === 'login' && (
            <label className="form-checkbox">
              <input
                type="checkbox"
                checked={remember}
                onChange={(e) => setRemember(e.target.checked)}
              />
              {t('login.remember')}
            </label>
          )}
          <button type="submit" className="submit-btn" disabled={loading}>
            {loading
              ? t('login.loggingIn')
              : (mode === 'login' ? t('login.submit') : t('register.submit'))}
          </button>
        </form>
        <div className="modal-footer">
          {mode === 'login' ? (
            <button
              type="button"
              onClick={() => setMode('register')}
              style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', fontSize: '0.8rem' }}
            >
              {t('login.register')}
            </button>
          ) : (
            <button
              type="button"
              onClick={() => setMode('login')}
              style={{ background: 'none', border: 'none', color: 'var(--accent)', cursor: 'pointer', fontSize: '0.8rem' }}
            >
              {t('register.haveAccount')}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}