"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";

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

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

      const response = await axios.post(`${apiUrl}/superadmin/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 (
    <div className="min-h-screen bg-gray-100 px-4 relative overflow-x-hidden">
      {/* Logo top-left */}
      <div className="absolute top-4 left-4">
        <Link
          href="/"
          className="px-4 sm:px-12 h-full flex items-center gap-2 shadow shadow-[#00000040]"
        >
          <div className="relative w-8 h-8 sm:w-10 sm:h-10">
            <Image
              src="/logo.svg"
              fill
              style={{ objectFit: "contain" }}
              alt="logo"
            />
          </div>
          <div className="text-base sm:text-[20px] whitespace-nowrap font-jaini">
            Happy Homes
          </div>
        </Link>
      </div>

      {/* Centered form */}
      <div className="flex justify-center items-center min-h-screen">
        <div className="bg-white rounded-lg p-6 w-full max-w-md shadow-lg text-black">
          <h2 className="text-2xl font-semibold mb-4 text-center">
            Password Recovery
          </h2>
          <p className="text-sm mb-6 text-center">
            Enter your registered email to receive a password reset link.
          </p>

          <Input
            type="email"
            value={forgotEmail}
            onChange={(e) => setForgotEmail(e.target.value)}
            placeholder="Enter your email"
            className="mb-4"
          />

          <Button
            className="bg-[#16166C] hover:bg-[#16166C]/85 p-[10px] w-full cursor-pointer"
            onClick={handleForgotPassword}
            disabled={isLoading}
          >
            {isLoading ? (
              <div className="flex items-center gap-2 justify-center">
                <LoadingSpinner />
              </div>
            ) : (
              "Get Link"
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}
