'use client';

import { useState } from 'react';
import Link from 'next/link';
import { authService, AuthService } from '@/services';

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);

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

    try {
      await authService.forgotPassword({ email });
      setSubmitted(true);
    } catch (err) {
      setError(AuthService.getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#c4d9d4] to-[#f0f5fc] py-12 px-4">
      <div className="w-full max-w-[510px]">
        {/* Logo */}
        <div className="text-center mb-4">
          <img
            src="/assets/logo.svg"
            alt="RE-QuestN"
            className="h-8 mx-auto"
          />
        </div>

        {submitted ? (
          /* Success Message */
          <div className="bg-white rounded-[20px] p-8 shadow-sm">
            <div className="text-center">
              <div className="mb-6">
                <svg className="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <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>
              <h2 className="text-[24px] font-normal text-[#00293d] mb-3">Check Your Email</h2>
              <p className="text-sm text-[#00293d]/70 mb-6">
                We've sent a password reset link to <strong>{email}</strong>. Please check your inbox and spam folder.
              </p>
              <Link
                href="/login"
                className="inline-block w-full py-4 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors text-center"
              >
                Back to Login
              </Link>
              <button
                type="button"
                onClick={() => {
                  setSubmitted(false);
                  setEmail('');
                }}
                className="block w-full mt-4 text-sm text-[#00293d]/70 hover:text-[#00293d] transition-colors"
              >
                Try a different email
              </button>
            </div>
          </div>
        ) : (
          <>
            {/* Forgot Password Heading */}
            <div className="text-center mb-6">
              <h2 className="text-[30px] font-normal text-[#00293d] mb-3">Forgot Password</h2>
              <p className="text-sm text-[#00293d] px-4 leading-relaxed">
                Enter your email address and we'll send you a link to reset your password
              </p>
            </div>

            {/* Forgot Password Form */}
            <form onSubmit={handleSubmit} className="space-y-5">
              {error && (
                <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[20px] text-sm">
                  {error}
                </div>
              )}

              {/* Email Input */}
              <div>
                <input
                  type="email"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  className="w-full px-6 py-6 bg-[#f0f5fc] rounded-[20px] text-[#00293d] text-sm font-light placeholder:text-[#00293d] focus:outline-none focus:ring-2 focus:ring-[#00293d]/20 transition-all"
                />
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                disabled={loading}
                className="w-full py-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-sm rounded-[20px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? 'Sending...' : 'Send Reset Link'}
              </button>
            </form>

            {/* Back to Login */}
            <div className="text-center mt-8">
              <Link href="/login" className="text-[#00293d] text-sm font-light hover:underline">
                Back to Login
              </Link>
            </div>
          </>
        )}
      </div>
    </div>
  );
}