"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { PasswordResetRequestResult } from "@/lib/request-password-reset";
import staticCopy from "@/i18n/staticCopy.json";
import {
    DEFAULT_LOCALE,
    getStoredLocale,
    LOCALE_CHANGE_EVENT,
    type LocaleCode,
} from "@/i18n/localeSwitcher";

const InputItem = ({
    label,
    id,
    type = "text",
    placeholder,
    required,
    value,
    onChange,
}: {
    label: string;
    id: string;
    type?: string;
    placeholder: string;
    required?: boolean;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) => (
    <div>
        <label
            htmlFor={id}
            className="block text-[16px] font-medium text-[#000000] mb-[9px]"
        >
            {label} {required && <span className="text-[#FF0000]">*</span>}
        </label>
        <div className="relative">
            <input
                id={id}
                type={type}
                placeholder={placeholder}
                value={value}
                onChange={onChange}
                className="w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[18px] text-[#000000] placeholder:text-[#999999]"
            />
            <div className="absolute bottom-0 left-[30px] h-[3px] w-[60px] bg-[#053F31] z-10"></div>
        </div>
    </div>
);

const IconArrowRight = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="36"
        height="36"
        viewBox="0 0 36 36"
        fill="none"
    >
        <path
            d="M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z"
            fill="#F7FAF8"
        />
        <path
            d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5"
            stroke="#053F31"
            strokeWidth="2"
        />
    </svg>
);

type ForgotPasswordPageProps = {
    requestPasswordReset: (email: string) => Promise<PasswordResetRequestResult>;
};

export default function ForgotPasswordPage({ requestPasswordReset }: ForgotPasswordPageProps) {
    const router = useRouter();
    const [uiLocale, setUiLocale] = useState<LocaleCode>(DEFAULT_LOCALE);
    const [email, setEmail] = useState("");
    const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
    const [message, setMessage] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);

    useEffect(() => {
        const syncLocale = () => {
            setUiLocale(getStoredLocale());
        };
        syncLocale();
        window.addEventListener("storage", syncLocale);
        window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale);
        return () => {
            window.removeEventListener("storage", syncLocale);
            window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale);
        };
    }, []);

    const t =
        staticCopy.forgotPassword[uiLocale as keyof typeof staticCopy.forgotPassword] ??
        staticCopy.forgotPassword["en-EN"];

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setStatus("idle");
        setMessage("");

        if (!email) {
            setStatus("error");
            setMessage("Please enter your email address.");
            return;
        }

        setIsSubmitting(true);
        try {
            const result = await Promise.race<PasswordResetRequestResult>([
                requestPasswordReset(email),
                new Promise<PasswordResetRequestResult>((resolve) =>
                    setTimeout(() => resolve({ ok: false, message: "Request timed out. Please try again." }), 15000)
                ),
            ]);

            if (!result.ok) {
                setStatus("error");
                setMessage(result.message);
                return;
            }

            setStatus("success");
            setMessage(
                result.message?.trim() ||
                    "If an account exists for this email, we have sent a password reset link."
            );
            setTimeout(() => {
                router.push("/login");
            }, 5000);
        } catch {
            setStatus("error");
            setMessage("Something went wrong. Please try again.");
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <section className="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 font-outfit selection:bg-[#053F31] selection:text-white">
            <div className="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 mb-[50px] xl:mb-[70px]">
                <div className="max-w-[520px] mx-auto bg-[#F7FAF8] border border-gray-200 rounded-2xl p-[25px] sm:p-[40px] shadow-sm">
                    <p className="font-semibold text-[#053F31] mb-[20px] pb-[15px] border-b-2">
                        {t.title}
                    </p>

                    {message && (
                        <div className={`mb-6 p-4 border rounded-lg text-sm ${status === "success"
                            ? "bg-green-100 border-green-200 text-[#053F31]"
                            : "bg-red-50 border-red-200 text-red-700"
                            }`}>
                            {message}
                        </div>
                    )}

                    <form className="space-y-6" onSubmit={handleSubmit}>
                        <div className="mb-[21px]">
                            <InputItem
                                id="forgot-email"
                                label={t.emailLabel}
                                type="email"
                                placeholder={t.emailPlaceholder}
                                required
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                        </div>

                        <div className="pt-[20px]">
                            <button
                                type="submit"
                                disabled={isSubmitting}
                                className="inline-flex items-center justify-center gap-[10px] bg-[#053F31] font-outfit text-[18px] leading-[150%] text-white font-semibold p-[7px_7px_7px_15px] cursor-pointer rounded-full border-2 hover:border-[#0F3F32] hover:bg-[#ffffff] hover:text-[#0F3F32] transition"
                            >
                                {isSubmitting ? t.sending : t.sendResetLink}
                                <IconArrowRight />
                            </button>
                        </div>

                        <p className="text-center text-[18px] text-gray-600 font-light pt-[10px]">
                            {t.rememberPassword}{" "}
                            <Link
                                href="/login"
                                className="text-[#053F31] font-medium hover:underline transition-colors"
                            >
                                {t.signIn}
                            </Link>
                        </p>
                    </form>
                </div>
            </div>
        </section>
    );
}