'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
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);
    }
  };

  if (submitted) {
    return (
      <div className="text-center">
        <div className="mb-6">
          <Image
            src="/assets/icons/email-orange-icon.svg"
            alt="Email sent"
            width={64}
            height={64}
            className="mx-auto"
          />
        </div>
        <h2 className="text-[24px] font-normal text-[#00293d] font-fractul mb-3">Check Your Email</h2>
        <p className="text-[14px] text-[#00293d]/70 font-serif 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-6 bg-[#e58625] hover:bg-[#d47a1f] text-[#00293d] font-bold text-[20px] font-fractul rounded-[7px] transition-colors text-center"
        >
          Back to Login
        </Link>
        <button
          type="button"
          onClick={() => {
            setSubmitted(false);
            setEmail('');
          }}
          className="block w-full mt-4 text-[14px] text-[#00293d]/70 font-serif hover:text-[#00293d] transition-colors"
        >
          Try a different email
        </button>
      </div>
    );
  }

  return (
    <>
      {/* Forgot Password Heading */}
      <div className="text-center mb-6">
        <h2 className="text-[30px] font-normal text-[#00293d] font-fractul mb-3">Forgot Your Password</h2>
        <p className="text-[14px] text-[#00293d] px-4 leading-[20px] font-fractul">
          Enter your registered email 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-[7px] text-[14px] font-serif">
            {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-[7px] text-[#00293d] text-[14px] font-light font-serif 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-[20px] font-fractul rounded-[7px] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {loading ? 'Sending...' : 'Submit'}
        </button>
      </form>

      {/* Divider */}
      <div className="my-6">
        <div className="h-px bg-[#00293d]/20"></div>
      </div>

      {/* Back to Login */}
      <div className="flex justify-center items-center">
        <Link href="/login" className="flex items-center gap-2 text-[#00293d] text-[14px] font-fractul hover:underline">
          <Image
            src="/assets/icons/arrow-back-icon.svg"
            alt="Back"
            width={20}
            height={20}
          />
          Back to Login
        </Link>
      </div>
    </>
  );
}
