// src/components/auth/LoginModal.tsx

"use client";

import { Dispatch, SetStateAction, useState } from "react";
import Image from "next/image";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import logo from "../../../public/logo.png";
import IconButton from "../icon-button/icon-button";
import { useGuestLogin } from "@/state/auth/auth.action";
import { toast } from "sonner";
import { AxiosError } from "axios";

export function LoginModal({
  isOpen,
  setIsOpen,
  onOtpRequestSuccess,
}: {
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
  onOtpRequestSuccess: (email: string) => void;
}) {
  const [email, setEmail] = useState("");

  // Separate error states per field
  const [emailError, setEmailError] = useState("");

  const { mutate: guestLogin, isPending } = useGuestLogin();

  const validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    let valid = true;
    setEmailError("");

    // ✅ Email validation
    if (!email.trim()) {
      setEmailError("Please enter your email address.");
      valid = false;
    } else if (!validateEmail(email)) {
      setEmailError("Please enter a valid email address.");
      valid = false;
    }

    if (!valid) return;

    // ✅ Submit
    guestLogin(
      { email },
      {
        onError: (err: unknown) => {
          const error = err as AxiosError<{ message: string }>;
          const message =
            error?.response?.data?.message || "Server error occurred.";
          toast.error(message);
        },
        onSuccess: () => {
          onOtpRequestSuccess(email);
          setEmail("");
          setEmailError("");
        },
      }
    );
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent className="sm:max-w-[550px] bg-[#1a1a1a] border-gray-700 text-white border rounded-2xl p-10">
        <DialogHeader className="items-center">
          <div className="flex items-center mb-4">
            <Image src={logo} alt="reelfix logo" />
          </div>
          <DialogTitle className="text-[24px] text-white font-normal text-center mt-5">
            Login to explore more features
          </DialogTitle>
          <DialogDescription className="text-[16px] text-muted-foreground font-normal text-center">
            Login to continue enjoying Unlimited Movies, TV Shows, Web Series
            and more entertainment videos
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            {/* 📧 Email Field */}
            <div className="grid gap-2">
              <label
                htmlFor="email"
                className="text-[16px] text-muted-foreground font-normal"
              >
                Email ID <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                id="email"
                name="email"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                  setEmailError("");
                }}
                className="h-[60px] rounded-md border border-gray-700 bg-[#0A0A0B] px-4 text-white focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Enter your email ID"
                required
              />
              {emailError && (
                <p className="text-sm text-red-500 mt-1">{emailError}</p>
              )}
            </div>
          </div>

          <DialogFooter className="w-full justify-center! mt-[20px]">
            <IconButton
              label={isPending ? "Sending OTP..." : "Login Now"}
              type="submit"
              disabled={isPending}
              iconShow={false}
              className="w-[150px] h-[50px]"
            />
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}