/**
 * Forgot password form — direct API call.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import React, { useState } from 'react';
import { forgotPassword } from '../../lib/authApi';

export interface ForgotPasswordFormProps {
  onSuccess?: () => void;
  onBackToLogin?: () => void;
}

type Step = 'email' | 'email_sent';

export function ForgotPasswordForm({ onSuccess, onBackToLogin }: ForgotPasswordFormProps): JSX.Element {
  const [step, setStep] = useState<Step>('email');
  const [{{ username_field }}, set{{ username_field_capitalized }}] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const handleSubmitEmail = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      await forgotPassword({{ username_field }});
      setStep('email_sent');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to send reset email');
    } finally {
      setLoading(false);
    }
  };

  if (step === 'email_sent') {
    return (
      <div className="w-full max-w-md mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-8 text-center">
          <h2 className="text-2xl font-bold text-nordic-800 mb-4">Check Your Email</h2>
          <p className="text-nordic-600 mb-6">
            If an account exists for <strong>{{ '{' }}{{ username_field }}{{ '}' }}</strong>, we&apos;ve sent a password reset link.
            Please check your inbox and follow the instructions.
          </p>
          {onBackToLogin && (
            <button
              onClick={onBackToLogin}
              className="text-sm text-nordic-600 hover:text-nordic-800 underline"
            >
              Back to login
            </button>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="w-full max-w-md mx-auto">
      <div className="bg-white rounded-lg shadow-lg p-8">
        <h2 className="text-2xl font-bold text-nordic-800 mb-2 text-center">Forgot Password</h2>
        <p className="text-sm text-nordic-600 text-center mb-6">
          Enter your {{ username_field }} and we&apos;ll send you a link to reset your password.
        </p>

        {error && (
          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
            <p className="text-sm text-red-800">{error}</p>
          </div>
        )}

        <form onSubmit={handleSubmitEmail} className="space-y-4">
          <div>
            <label htmlFor="recovery-{{ username_field }}" className="block text-sm font-medium text-nordic-700 mb-1">
              {{ username_field_title }}
            </label>
            <input
              type="{{ input_type }}"
              id="recovery-{{ username_field }}"
              value={{ '{' }}{{ username_field }}{{ '}' }}
              onChange={(e) => set{{ username_field_capitalized }}(e.target.value)}
              required
              disabled={loading}
              className="w-full px-3 py-2 border border-nordic-200 rounded-md focus:outline-none focus:ring-2 focus:ring-nordic-500 disabled:bg-nordic-50 disabled:cursor-not-allowed"
              placeholder="Enter your {{ username_field }}"
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-nordic-600 text-white py-2 px-4 rounded-md hover:bg-nordic-700 focus:outline-none focus:ring-2 focus:ring-nordic-500 focus:ring-offset-2 disabled:bg-nordic-300 disabled:cursor-not-allowed transition-colors"
          >
            {loading ? 'Sending...' : 'Send Reset Link'}
          </button>
        </form>

        {onBackToLogin && (
          <div className="mt-6 text-center">
            <button
              type="button"
              onClick={onBackToLogin}
              className="text-sm text-nordic-600 hover:text-nordic-800 font-medium underline"
            >
              Back to login
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
