import { useState } from 'react';
import { useAuth } from '../auth/AuthContext';

type Mode = 'login' | 'provision' | 'forgot' | 'reset';

export function LoginPage() {
  const { login, provision, forgotPassword, resetPassword } = useAuth();
  const [mode, setMode] = useState<Mode>('login');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [resetToken, setResetToken] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setMessage('');
    setBusy(true);
    try {
      if (mode === 'login') {
        await login(email, password);
      } else if (mode === 'provision') {
        const msg = await provision(email);
        setMessage(msg);
        setMode('login');
      } else if (mode === 'forgot') {
        const msg = await forgotPassword(email);
        setMessage(msg);
        setMode('reset');
      } else if (mode === 'reset') {
        await resetPassword(resetToken, newPassword);
        setMessage('Đã đặt lại mật khẩu. Vui lòng đăng nhập.');
        setMode('login');
      }
    } catch (err: any) {
      setError(err?.message || 'Có lỗi xảy ra');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-screen">
      <div className="login-card">
        <div className="login-brand">
          <img src="/logo.jpeg" alt="Simple Care" className="brand-logo-img" />
          <div>
            <div className="login-brand-title">Simple Care</div>
            <div className="login-brand-sub">Quản lý giám sát — Rikkei Education</div>
          </div>
        </div>

        <h1 className="login-heading">
          {mode === 'login' && 'Đăng nhập'}
          {mode === 'provision' && 'Truy cập lần đầu'}
          {mode === 'forgot' && 'Quên mật khẩu'}
          {mode === 'reset' && 'Đặt lại mật khẩu'}
        </h1>
        <p className="login-hint">
          {mode === 'provision'
            ? 'Nhập email tổ chức. Hệ thống gửi mật khẩu tạm nếu đuôi email được phép.'
            : 'Chỉ email có đuôi tổ chức được phép truy cập.'}
        </p>

        <form onSubmit={submit} className="login-form">
          {(mode === 'login' || mode === 'provision' || mode === 'forgot') && (
            <label className="login-field">
              <span>Email</span>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required autoComplete="email" />
            </label>
          )}
          {mode === 'login' && (
            <label className="login-field">
              <span>Mật khẩu</span>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required autoComplete="current-password" />
            </label>
          )}
          {mode === 'reset' && (
            <>
              <label className="login-field">
                <span>Mã từ email</span>
                <input value={resetToken} onChange={(e) => setResetToken(e.target.value)} required />
              </label>
              <label className="login-field">
                <span>Mật khẩu mới</span>
                <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
              </label>
            </>
          )}
          {error && <div className="login-error">{error}</div>}
          {message && <div className="login-success">{message}</div>}
          <button type="submit" className="btn btn-primary login-submit" disabled={busy}>
            {busy ? 'Đang xử lý...' : mode === 'login' ? 'Đăng nhập' : mode === 'provision' ? 'Gửi mật khẩu' : mode === 'forgot' ? 'Gửi mã' : 'Đặt lại mật khẩu'}
          </button>
        </form>

        <div className="login-links">
          {mode === 'login' && (
            <>
              <button type="button" className="link-btn" onClick={() => setMode('provision')}>Truy cập lần đầu</button>
              <button type="button" className="link-btn" onClick={() => setMode('forgot')}>Quên mật khẩu?</button>
            </>
          )}
          {mode !== 'login' && (
            <button type="button" className="link-btn" onClick={() => setMode('login')}>← Quay lại đăng nhập</button>
          )}
        </div>
      </div>
    </div>
  );
}
