'use client';
import { Suspense, useActionState, useState } from 'react';
import { useFormStatus } from 'react-dom';
import { useSearchParams } from 'next/navigation';
import { Icon } from '../../lib/icons';
import { useGo } from '../../lib/router';
import { resetPassword } 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 ? 'Enregistrement…' : 'Réinitialiser le mot de passe'}
    </button>
  );
}

function ResetInner() {
  const { go } = useGo();
  const sp = useSearchParams();
  const token = sp?.get('token') || '';
  const [show, setShow] = useState(false);
  const [state, action] = useActionState<{ ok?: boolean; error?: string }, FormData>(
    async (_p, fd) => resetPassword(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 }}>Nouveau mot de passe</h1>
        <p className="body" style={{ marginTop: 6 }}>Choisissez un nouveau mot de passe pour votre compte.</p>
        {!token ? (
          <div className="row gap8" style={{ marginTop: 22, padding: '14px 16px', background: 'var(--red-tint)', color: 'var(--red-dark)', borderRadius: 'var(--r-md)', fontWeight: 600, fontSize: 14 }}>
            <Icon name="info" size={18} />Lien invalide. Refaites une demande de réinitialisation.
          </div>
        ) : (
          <form action={action} style={{ marginTop: 20 }}>
            <input type="hidden" name="token" value={token} />
            <div className="field">
              <span className="label">Nouveau mot de passe</span>
              <div className="input">
                <Icon name="lock" size={17} />
                <input name="new" type={show ? 'text' : 'password'} placeholder="Au moins 6 caractères" required />
                <Icon name="eye" size={17} style={{ cursor: 'pointer' }} onClick={() => setShow((s) => !s)} />
              </div>
            </div>
            {state.error && <div className="tiny" style={{ color: 'var(--red-dark)', marginTop: 10, fontWeight: 600 }}>{state.error}</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>
  );
}

export default function ResetPasswordPage() {
  return (
    <Suspense fallback={null}>
      <ResetInner />
    </Suspense>
  );
}