'use client';

/**
 * ============================================
 * PASSWORD RECOVERY PAGE
 * ============================================
 * Equivalent to: account/recover/password.html.twig in Shopware
 */

import { useState } from 'react';
import Link from 'next/link';
import { recoverPassword, getStorefrontUrl } from '@/lib/shopware-api';

export default function RecoverPasswordPage() {
  const [email, setEmail] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await recoverPassword({
        email,
        storefrontUrl: getStorefrontUrl(),
      });
      setSent(true);
    } catch (err: any) {
      setError(err.message || 'Failed to send recovery email. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-[80vh] flex items-center justify-center px-6 py-16">
      <div className="w-full max-w-md">
        {sent ? (
          /* Success state */
          <div className="text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <h1 className="text-2xl font-bold text-surface-900 mb-2">Check your inbox</h1>
            <p className="text-surface-500 mb-2">
              We&apos;ve sent a password reset link to:
            </p>
            <p className="font-semibold text-surface-900 mb-6">{email}</p>
            <p className="text-sm text-surface-400 mb-8">
              Didn&apos;t receive it? Check your spam folder or try again.
            </p>
            <div className="flex flex-col gap-3">
              <button
                onClick={() => { setSent(false); setEmail(''); }}
                className="w-full py-3 border border-surface-200 hover:border-surface-400 text-surface-600 font-semibold rounded-xl transition-colors"
              >
                Try a different email
              </button>
              <Link
                href="/account/login"
                className="w-full py-3 text-center bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition-colors block"
              >
                Back to Login
              </Link>
            </div>
          </div>
        ) : (
          /* Form state */
          <>
            <div className="text-center mb-8">
              <h1 className="text-3xl font-bold text-surface-900">Forgot password?</h1>
              <p className="text-surface-500 mt-2">
                Enter your email and we&apos;ll send you a reset link.
              </p>
            </div>

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

            <form onSubmit={handleSubmit} className="space-y-5">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-surface-700 mb-1.5">
                  Email Address
                </label>
                <input
                  id="email"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  autoComplete="email"
                  className="w-full px-4 py-3 rounded-xl border border-surface-200 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 outline-none transition-all text-surface-900 placeholder-surface-400"
                  placeholder="your@email.com"
                />
              </div>

              <button
                type="submit"
                disabled={submitting}
                className="w-full py-3.5 bg-brand-500 hover:bg-brand-600 disabled:bg-brand-300 text-white font-semibold rounded-xl transition-colors"
              >
                {submitting ? (
                  <span className="flex items-center justify-center gap-2">
                    <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                    </svg>
                    Sending...
                  </span>
                ) : (
                  'Send Reset Link'
                )}
              </button>
            </form>

            <p className="text-center text-sm text-surface-500 mt-6">
              Remember your password?{' '}
              <Link href="/account/login" className="text-brand-600 font-semibold hover:text-brand-700">
                Sign in
              </Link>
            </p>
          </>
        )}
      </div>
    </div>
  );
}