import React, { useState, useEffect } from 'react';
import { useTranslation } from '../i18n';
import './ResetPasswordView.css';

function ResetPasswordView({ token, onReset }) {
  const { t } = useTranslation();
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (!token) setError(t('reset.invalidToken'));
  }, [token, t]);

  async function handleSubmit(e) {
    e.preventDefault();
    if (password.length < 8) {
      setError(t('login.passwordError'));
      return;
    }
    if (password !== confirm) {
      setError(t('reset.passwordsDontMatch'));
      return;
    }
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/auth/reset-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, password }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || t('reset.error'));
        return;
      }
      setSuccess(true);
    } catch {
      setError(t('login.networkError'));
    } finally {
      setLoading(false);
    }
  }

  if (success) {
    return (
      <div className="reset-container">
        <div className="reset-card">
          <div className="reset-icon">✅</div>
          <h2>{t('reset.successTitle')}</h2>
          <p>{t('reset.successText')}</p>
          <button type="button" className="reset-btn" onClick={onReset}>
            {t('reset.goToLogin')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="reset-container">
      <div className="reset-card">
        <h2>{t('reset.title')}</h2>
        <p className="reset-sub">{t('reset.subtitle')}</p>
        <form onSubmit={handleSubmit} noValidate>
          <div className="reset-field">
            <label htmlFor="reset-password">{t('reset.newPassword')}</label>
            <input
              id="reset-password"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="new-password"
              disabled={loading}
              minLength={8}
              placeholder="········"
            />
          </div>
          <div className="reset-field">
            <label htmlFor="reset-confirm">{t('reset.confirmPassword')}</label>
            <input
              id="reset-confirm"
              type="password"
              value={confirm}
              onChange={e => setConfirm(e.target.value)}
              autoComplete="new-password"
              disabled={loading}
              minLength={8}
              placeholder="········"
            />
          </div>
          {error && <p className="reset-error">{error}</p>}
          <button
            type="submit"
            className="reset-btn"
            disabled={loading || !password || !confirm}
          >
            {loading ? t('reset.saving') : t('reset.saveBtn')}
          </button>
        </form>
      </div>
    </div>
  );
}

export default ResetPasswordView;