// /app/login/page.tsx
'use test' // Marks this component as a client component
'use client'

import classnames from 'classnames';

import { useEffect, useState } from 'react'

import { Schibsted_Grotesk } from 'next/font/google'
const font = Schibsted_Grotesk({ subsets: ['latin'] })

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [apiUrl, setapiUrl] = useState("");

  useEffect(() => {
    fetch("/api/backendApiUrl")
      .then((res) => res.json())
      .then((data) => {
        setapiUrl(data.apiUrl)
      });
  }, []);

  const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
    e.preventDefault();
    const res = await fetch(`http://${apiUrl}/forgot_password`, {
      method: 'POST',
      headers: { 
            'Content-Type': 'application/json' ,
        },
      body: JSON.stringify({ user: { email } }),
    });

    const data = await res.json();
    if (res.ok || data.errors[0] == 'Email not found') {
      setMessage('If there is an account with this address, a reset link will be sent to your email shortly.');
    } else {
      setMessage(data.errors?.join(', ') || 'An error occurred.');
    }
  };


  return (
    <div
    className="h-full flex flex-col items-center justify-center py-6 mt-10 px-4 sm:px-6 lg:px-8"
    >
        <div className="flex w-full items-center justify-center text-7xl font-bold text-atmosphere">
            Britton Benefits
        </div>
        <div className={classnames("w-md space-y-4", font.className)}>
            <div className="mt-10 text-center text-3xl font-extrabold text-light-bronze border-b-2 border-light-bronze">
                Forgot Password
            </div>
            <form onSubmit={handleSubmit}>  
              <div className="mt-2">
                <div className="rounded-md shadow-sm -space-y-px">
                    <label className="block text-md font-bold text-platinum">Email</label>
                    <input
                      type="email"
                      placeholder="Enter email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="appearance-none relative block w-full px-3 py-2 bg-platinum border border-gray-300 placeholder-bluetang text-deepcove rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                      required
                    />
                </div>
              </div>

              <button
                type="submit"
                className="relative w-full flex justify-center py-2 px-4 mt-6 border-4 border-cobalt font-bold rounded-lg text-lg text-platinum hover:text-light-bronze bg-cobalt hover:bg-deepcove hover:cursor-pointer"
              >
                Send Reset Link
              </button>
            </form>
            {message && <p className="mt-4 text-sm text-center">{message}</p>}
        </div>
    </div>
  )
}