"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { useAppTheme } from "@/components/ThemeProvider";
import { Input } from "@/components/ui/input";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Eye, EyeOff, Loader2, X, CheckCircle2 } from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { registerSchema, verifyOtpSchema, type RegisterInput, type VerifyOtpInput } from "@/lib/schema/auth";
import { toast } from "sonner";

interface SignupDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSignupSuccess?: () => void;
  onSwitchToLogin?: (email?: string) => void;
}

type Step = "signup" | "verify";

export function SignupDialog({ open, onOpenChange, onSignupSuccess, onSwitchToLogin }: SignupDialogProps) {
  const { theme } = useAppTheme();
  const isDark = theme === "dark";
  const { register, verifyOtp, registerMutation, verifyOtpMutation, resendOtpMutation } = useAuth();
  const [step, setStep] = useState<Step>("signup");
  const [registeredEmail, setRegisteredEmail] = useState("");
  const [signupData, setSignupData] = useState<RegisterInput>({
    first_name: "",
    last_name: "",
    email: "",
    phone_number: "",
    password: "",
    password2: "",
  });
  const [otpData, setOtpData] = useState<VerifyOtpInput>({
    email: "",
    otp: "",
  });
  const [showPassword, setShowPassword] = useState(false);
  const [showPassword2, setShowPassword2] = useState(false);

  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // Validate form
    const validation = registerSchema.safeParse(signupData);
    if (!validation.success) {
      const firstError = validation.error.issues[0];
      toast.error(firstError.message);
      return;
    }
    
    try {
      const result = await register(signupData);
      
      // Always switch to OTP verification step after successful registration
      const email = signupData.email;
      setRegisteredEmail(email);
      setOtpData({ email: email, otp: "" });
      
      // Clear signup form
      setSignupData({
        first_name: "",
        last_name: "",
        email: "",
        phone_number: "",
        password: "",
        password2: "",
      });
      
      // Switch to verify step
      setStep("verify");
      toast.success("Registration successful! Please check your email for OTP verification.");
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Signup failed. Please try again.";
      toast.error(errorMessage);
    }
  };

  const handleVerifyOtp = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const emailToVerify = registeredEmail || otpData.email;
    if (!emailToVerify) {
      toast.error("Email is required");
      return;
    }
    
    const validation = verifyOtpSchema.safeParse({
      email: emailToVerify,
      otp: otpData.otp,
    });
    
    if (!validation.success) {
      const firstError = validation.error.issues[0];
      toast.error(firstError.message);
      return;
    }
    
    try {
      const result = await verifyOtp({
        email: emailToVerify,
        otp: otpData.otp,
      });
      
      if (result.message) {
        toast.success("Email verified successfully! Please log in.");
        // Close signup dialog and open login dialog with email
        const emailToPass = emailToVerify;
        onOpenChange(false);
        // Call onSwitchToLogin with email to open login dialog with pre-filled email
        if (onSwitchToLogin) {
          onSwitchToLogin(emailToPass);
        }
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "OTP verification failed. Please try again.";
      toast.error(errorMessage);
    }
  };

  const handleResendOtp = async () => {
    const emailToResend = registeredEmail || otpData.email;
    if (!emailToResend) {
      toast.error("Email is required");
      return;
    }
    
    try {
      await resendOtpMutation.mutateAsync({ email: emailToResend, context: "registration" });
      toast.success("OTP resent successfully! Please check your email.");
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Failed to resend OTP";
      toast.error(errorMessage);
    }
  };

  const handleOtpChange = (field: keyof VerifyOtpInput, value: string) => {
    setOtpData((prev) => ({ ...prev, [field]: value }));
  };

  // Reset step when dialog closes
  const handleDialogChange = (isOpen: boolean) => {
    if (!isOpen) {
      setStep("signup");
      setRegisteredEmail("");
      setOtpData({ email: "", otp: "" });
      setSignupData({
        first_name: "",
        last_name: "",
        email: "",
        phone_number: "",
        password: "",
        password2: "",
      });
    }
    onOpenChange(isOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleDialogChange}>
      <DialogContent 
        showCloseButton={false}
        className={`max-w-md max-h-[90vh] overflow-hidden flex flex-col p-0 ${isDark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}
      >
        {/* Header with Close Button - Fixed */}
        <div className="flex items-start justify-between p-6 pb-4 flex-shrink-0 border-b border-gray-200 dark:border-gray-700">
          <DialogHeader className="flex-1 pr-2">
            <DialogTitle className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent">
              {step === "signup" && "Create an account"}
              {step === "verify" && "Verify your email"}
            </DialogTitle>
            <DialogDescription className={`text-sm sm:text-base mt-1 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
              {step === "signup" && "Sign up to complete your booking"}
              {step === "verify" && "Enter the verification code sent to your email"}
            </DialogDescription>
          </DialogHeader>
          {/* Close Button */}
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={() => handleDialogChange(false)}
            className={`flex-shrink-0 w-8 h-8 rounded-full ${isDark ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}
            aria-label="Close"
          >
            <X className="w-5 h-5" />
          </Button>
        </div>

        {/* Scrollable Content */}
        <div className="overflow-y-auto flex-1 px-6">
          {/* Signup Form */}
          {step === "signup" && (
            <form className="space-y-4 sm:space-y-5 py-4 sm:py-6" onSubmit={handleSignup}>
              {/* First Name Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-firstName" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  First Name *
                </label>
                <Input
                  id="signup-firstName"
                  type="text"
                  placeholder="John"
                  value={signupData.first_name}
                  onChange={(e) => setSignupData({ ...signupData, first_name: e.target.value })}
                  className={`h-11 sm:h-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                  required
                />
              </div>

              {/* Last Name Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-lastName" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Last Name *
                </label>
                <Input
                  id="signup-lastName"
                  type="text"
                  placeholder="Doe"
                  value={signupData.last_name}
                  onChange={(e) => setSignupData({ ...signupData, last_name: e.target.value })}
                  className={`h-11 sm:h-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                  required
                />
              </div>

              {/* Email Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Email address *
                </label>
                <Input
                  id="signup-email"
                  type="email"
                  placeholder="Email address"
                  value={signupData.email}
                  onChange={(e) => setSignupData({ ...signupData, email: e.target.value })}
                  className={`h-11 sm:h-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                  required
                />
              </div>

              {/* Phone Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-phone" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Phone Number (Optional)
                </label>
                <Input
                  id="signup-phone"
                  type="tel"
                  placeholder="+1 (555) 123-4567"
                  value={signupData.phone_number || ""}
                  onChange={(e) => setSignupData({ ...signupData, phone_number: e.target.value })}
                  className={`h-11 sm:h-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                />
              </div>

              {/* Password Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-password" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Password *
                </label>
                <div className="relative">
                  <Input
                    id="signup-password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Password (min 8 characters)"
                    value={signupData.password}
                    onChange={(e) => setSignupData({ ...signupData, password: e.target.value })}
                    className={`h-11 sm:h-12 pr-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    onClick={() => setShowPassword(!showPassword)}
                    className={`absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 h-auto w-auto p-0 ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'}`}
                    aria-label={showPassword ? "Hide password" : "Show password"}
                  >
                    {showPassword ? (
                      <EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
                    ) : (
                      <Eye className="w-4 h-4 sm:w-5 sm:h-5" />
                    )}
                  </Button>
                </div>
              </div>

              {/* Confirm Password Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label htmlFor="signup-password2" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Confirm Password *
                </label>
                <div className="relative">
                  <Input
                    id="signup-password2"
                    type={showPassword2 ? "text" : "password"}
                    placeholder="Confirm password"
                    value={signupData.password2}
                    onChange={(e) => setSignupData({ ...signupData, password2: e.target.value })}
                    className={`h-11 sm:h-12 pr-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    onClick={() => setShowPassword2(!showPassword2)}
                    className={`absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 h-auto w-auto p-0 ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-700'}`}
                    aria-label={showPassword2 ? "Hide password" : "Show password"}
                  >
                    {showPassword2 ? (
                      <EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
                    ) : (
                      <Eye className="w-4 h-4 sm:w-5 sm:h-5" />
                    )}
                  </Button>
                </div>
              </div>

              {/* Submit Button */}
              <Button
                type="submit"
                disabled={registerMutation.isPending}
                className="w-full h-11 sm:h-12 text-sm sm:text-base font-semibold bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-4 sm:mt-6"
              >
                {registerMutation.isPending ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Creating account...
                  </>
                ) : (
                  "Sign up"
                )}
              </Button>

              {/* Switch to Login */}
              <p className={`text-xs sm:text-sm text-center pt-2 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                Already have an account?{" "}
                <Button
                  type="button"
                  variant="link"
                  onClick={() => {
                    handleDialogChange(false);
                    if (onSwitchToLogin) {
                      onSwitchToLogin();
                    }
                  }}
                  className={`h-auto p-0 font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
                >
                  Log in
                </Button>
              </p>
            </form>
          )}

          {/* OTP Verification Form */}
          {step === "verify" && (
            <form className="space-y-4 sm:space-y-5 py-4 sm:py-6" onSubmit={handleVerifyOtp}>
              <div className={`p-3 sm:p-4 rounded-lg border ${isDark ? 'bg-blue-900/20 border-blue-800' : 'bg-blue-50 border-blue-200'}`}>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className={`w-5 h-5 mt-0.5 flex-shrink-0 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
                  <div>
                    <p className={`text-sm font-medium ${isDark ? 'text-blue-200' : 'text-blue-900'}`}>
                      Check your email
                    </p>
                    <p className={`text-xs sm:text-sm mt-1 ${isDark ? 'text-blue-300' : 'text-blue-700'}`}>
                      We've sent a 6-digit verification code to {registeredEmail || otpData.email || "your email address"}.
                    </p>
                  </div>
                </div>
              </div>

              {/* Email Field (if not set) */}
              {!registeredEmail && (
                <div className="space-y-1.5 sm:space-y-2">
                  <label htmlFor="verify-email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                    Email address *
                  </label>
                  <Input
                    id="verify-email"
                    type="email"
                    placeholder="Email address"
                    value={otpData.email}
                    onChange={(e) => handleOtpChange("email", e.target.value)}
                    className={`h-11 sm:h-12 text-sm sm:text-base ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'}`}
                    required
                  />
                </div>
              )}

              {/* OTP Field */}
              <div className="space-y-1.5 sm:space-y-2">
                <label className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
                  Verification Code *
                </label>
                <div className="flex justify-center">
                  <InputOTP
                    maxLength={6}
                    value={otpData.otp}
                    onChange={(value) => handleOtpChange("otp", value)}
                  >
                    <InputOTPGroup className="gap-2 sm:gap-3">
                      <InputOTPSlot index={0} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                      <InputOTPSlot index={1} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                      <InputOTPSlot index={2} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                      <InputOTPSlot index={3} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                      <InputOTPSlot index={4} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                      <InputOTPSlot index={5} className="h-12 w-12 sm:h-14 sm:w-14 text-lg sm:text-xl font-semibold" />
                    </InputOTPGroup>
                  </InputOTP>
                </div>
              </div>

              {/* Resend OTP */}
              <div className="text-center">
                <Button
                  type="button"
                  variant="link"
                  onClick={handleResendOtp}
                  disabled={resendOtpMutation?.isPending}
                  className={`h-auto p-0 text-xs sm:text-sm font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
                >
                  {resendOtpMutation?.isPending ? "Sending..." : "Didn't receive the code? Resend"}
                </Button>
              </div>

              {/* Submit Button */}
              <Button
                type="submit"
                disabled={verifyOtpMutation.isPending}
                className="w-full h-11 sm:h-12 text-sm sm:text-base font-semibold bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-4 sm:mt-6"
              >
                {verifyOtpMutation.isPending ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Verifying...
                  </>
                ) : (
                  "Verify Email"
                )}
              </Button>

              {/* Back to signup */}
              <div className="text-center">
                <Button
                  type="button"
                  variant="link"
                  onClick={() => {
                    setStep("signup");
                    setOtpData({ email: "", otp: "" });
                  }}
                  className={`h-auto p-0 text-xs sm:text-sm font-medium ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-600 hover:text-gray-700'}`}
                >
                  ← Back to signup
                </Button>
              </div>
            </form>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}