'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { Icon } from '../../lib/icons';
import { useGo } from '../../lib/router';
import { requestPasswordReset } from '../../lib/actions';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button className="btn btn-red btn-block btn-lg" type="submit" disabled={pending} style={pending ? { opacity: 0.7 } : undefined}>
      {pending ? 'Envoi…' : 'Envoyer le lien'}
    </button>
  );
}

export default function ForgotPasswordPage() {
  const { go } = useGo();
  const [state, action] = useActionState<{ ok?: boolean }, FormData>(
    async (_p, fd) => requestPasswordReset(fd),
    {}
  );
  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, background: 'var(--bg)' }}>
      <div className="auth-card">
        <img src="/assets/darsouk-logo.png" alt="Darsouk" style={{ height: 26, marginBottom: 22, cursor: 'pointer' }} onClick={() => go('home')} />
        <h1 className="h1" style={{ fontSize: 28 }}>Mot de passe oublié</h1>
        <p className="body" style={{ marginTop: 6 }}>Entrez votre e-mail, nous vous enverrons un lien de réinitialisation.</p>
        {state.ok ? (
          <div className="row gap8" style={{ marginTop: 22, padding: '14px 16px', background: 'var(--teal-tint)', color: 'var(--teal)', borderRadius: 'var(--r-md)', fontWeight: 600, fontSize: 14 }}>
            <Icon name="checkCircle" size={18} />Si un compte existe pour cet e-mail, un lien vient d’être envoyé.
          </div>
        ) : (
          <form action={action} style={{ marginTop: 20 }}>
            <div className="field">
              <span className="label">E-mail</span>
              <div className="input"><Icon name="mail" size={17} /><input name="email" type="email" placeholder="vous@email.com" required /></div>
            </div>
            <div style={{ marginTop: 18 }}><SubmitButton /></div>
          </form>
        )}
        <p className="small" style={{ textAlign: 'center', marginTop: 22 }}>
          <a style={{ color: 'var(--red-dark)', fontWeight: 700, cursor: 'pointer' }} onClick={() => go('auth', { mode: 'login' })}>
            Retour à la connexion
          </a>
        </p>
      </div>
    </div>
  );
}