"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { toast } from "react-toastify";
import axios from "axios";
import LoadingSpinner from "@/src/components/reusables/ui/LoadingSpinner";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { FiMenu, FiX } from "react-icons/fi";

export default function ForgotPasswordPage() {
  const [forgotEmail, setForgotEmail] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();

  const handleForgotPassword = async (e: any) => {
    e.preventDefault();

    try {
      setIsLoading(true);
      const apiUrl = process.env["NEXT_PUBLIC_DEV_URL"];

      const response = await axios.post(`${apiUrl}/forgot-password`, {
        email: forgotEmail,
      });

      if (response.data?.status === "success") {
        toast.success(response.data?.message || "Password reset link sent!");
      } else {
        toast.error(
          response.data?.errors?.email?.[0] || "Something went wrong."
        );
      }
    } catch (error: any) {
      toast.error(
        error.response.data?.errors?.email?.[0] ||
          "An error occurred. Please try again later."
      );
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <header className="w-full header flex flex-col gap-y-6 text-white font-inter">
      <div className="absolute inset-0 bg-black/30 z-0 pointer-events-none" />

      <div className="h-32 flex items-center justify-between px-6 md:px-12 z-20 relative">
        <section className="w-full h-full flex items-center justify-between">
          {/* Logo */}
          <div className="flex items-center gap-2">
            <div className="relative aspect-square h-12 w-12 md:h-16 md:w-16">
              <Image
                src="/images/logo.svg"
                fill
                style={{ objectFit: "contain" }}
                alt="logo"
              />
            </div>
            <Link href="/">
              <div className="text-xl md:text-2xl whitespace-nowrap font-jaini">
                Happy Homes Creators
              </div>
            </Link>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex gap-x-8 items-center">
            <Link href="#about">About Us</Link>
            <Link href="/user/contact">Contact Us</Link>
          </nav>

          {/* Hamburger Menu */}
          <button
            className="md:hidden text-3xl"
            onClick={() => setIsOpen(!isOpen)}
            aria-label="Toggle Menu"
          >
            {isOpen ? <FiX className="text-black" /> : <FiMenu />}
          </button>
        </section>
      </div>

      {/* Mobile Sidebar */}
      <div
        className={`fixed top-0 right-0 h-full w-3/4 bg-white text-black shadow-md transform transition-transform duration-300 z-50 ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <button
          className="absolute right-6 top-6"
          onClick={() => setIsOpen(false)}
        >
          <FiX className="text-black" size={20} />
        </button>

        <div className="flex flex-col gap-6 p-6 pt-20 text-sm">
          <Link
            href="#about"
            onClick={() => setIsOpen(false)}
            className="hover:text-red-400  ease-in-out"
          >
            About Us
          </Link>
          <Link
            href="/user/contact"
            onClick={() => setIsOpen(false)}
            className="hover:text-red-400  ease-in-out"
          >
            Contact Us
          </Link>
        </div>
      </div>

      <div
        className="flex lg:flex-row flex-col lg:gap-x-5 lg:gap-y-0 gap-y-12 items-center my-8 z-[10] px-12"
        id="join_now"
      >
        <section className="lg:w-[50%] w-full flex flex-col justify-start items-start">
          <div className="w-full lg:max-w-[80%] max-w-[100%]  text-left flex flex-col gap-y-6">
         <div className="md:w-[550px] lg:min-h-[410px] md:h-[201px] flex flex-col gap-[20px]">
              <h1 className="font-semibold font-inter md:text-[42px] text-[40px] leading-[55px]">
                Discover Your Perfect Partner
              </h1>
              <h1 className="font-semibold font-inter sm:text-[24px] text-[18px]">
                Uncover the Love Story You Deserve
              </h1>
              <p className="font-inter text-base leading-7">
              Welcome to Happy Home Creators! We're not just another dating site; we're a community built on shared values and genuine intentions. Our advanced matchmaking algorithm and personalized approach help you discover compatible partners, not just profiles.
              </p>
            </div>
          </div>
        </section>

        <section className="lg:w-[40%] w-full flex flex-col lg:items-center md:items-start justify-center items-center">
          <form
            onSubmit={handleForgotPassword}
            action=""
            className="flex flex-col gap-y-4 bg-white lg:min-h-[500px] md:min-h-[400px] min-h-[350px] w-[95%] text-black rounded-md shadow shadow-[#000000] md:px-16 px-8 py-12 md:w-3/4"
          >
            <div className="flex flex-col gap-y-3 w-full">
              <h1 className="text-lg mb-3 font-[600]">Password Recovery</h1>
              <p className="text-sm mb-4">
                Enter your registered email to receive a password reset link.
              </p>
            </div>

            <div className="w-full flex flex-col gap-y-4">
              <>
                {/* Email */}
                <div className="my-1 flex flex-col gap-y-1">
                  <Input
                    id="mail"
                    className={`border p-2 md:!text-[12px] !text-[14px] font-[600] ${"border-[#D9D9D9]"}`}
                    type="email"
                    value={forgotEmail}
                    placeholder="Enter Email"
                    onChange={(e) => setForgotEmail(e.target.value)}
                  />
                </div>
              </>
            </div>

            {/* Submit Button */}
            <Button
              type="submit"
              disabled={isLoading}
              className="bg-[#EF2424] hover:bg-[#EF2424]/85 p-[10px] cursor-pointer"
            >
              {isLoading ? (
                <div className="flex items-center gap-2">
                  <LoadingSpinner />
                </div>
              ) : (
                "Get Link"
              )}
            </Button>
          </form>
        </section>
      </div>
    </header>
  );
}
