"use client";

import { useState, useEffect, Suspense } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";
import { Heart, Eye, EyeOff, X, Loader2, CheckCircle2, Mail } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useAppTheme } from "@/components/ThemeProvider";
import { useAuth } from "@/hooks/useAuth";
import { 
  loginSchema, 
  registerSchema, 
  verifyOtpSchema,
  type LoginInput,
  type RegisterInput,
  type VerifyOtpInput 
} from "@/lib/schema/auth";
import { toast } from "sonner";

type Step = "login" | "signup" | "verify";

function LoginContent() {
  const { theme } = useAppTheme();
  const isDark = theme === "dark";
  const [step, setStep] = useState<Step>("login");
  const [showPassword, setShowPassword] = useState(false);
  const [showPassword2, setShowPassword2] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);
  const [registeredEmail, setRegisteredEmail] = useState("");
  const [showResendOtp, setShowResendOtp] = useState(false);
  
  // Login form data
  const [loginData, setLoginData] = useState<LoginInput>({
    email: "",
    password: "",
  });
  
  // Signup form data
  const [signupData, setSignupData] = useState<RegisterInput>({
    first_name: "",
    last_name: "",
    email: "",
    phone_number: "",
    password: "",
    password2: "",
  });
  
  // OTP verification data
  const [otpData, setOtpData] = useState<VerifyOtpInput>({
    email: "",
    otp: "",
  });
  
  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
  const router = useRouter();
  const searchParams = useSearchParams();
  const { 
    login, 
    register, 
    verifyOtp, 
    isAuthenticated,
    isAdmin,
    loginMutation, 
    registerMutation, 
    verifyOtpMutation,
    resendOtpMutation 
  } = useAuth();

  // Check for verify step or email from query parameters
  useEffect(() => {
    const verifyEmail = searchParams.get("verify");
    const emailParam = searchParams.get("email");
    const errorParam = searchParams.get("error");
    
    // Don't show verify step if there's an error indicating OTP sending failed
    if (errorParam && errorParam.toLowerCase().includes("failed to send")) {
      setStep("login");
      return;
    }
    
    if (verifyEmail === "true" && emailParam) {
      // Show verify step if verify=true
      setStep("verify");
      setRegisteredEmail(emailParam);
      setOtpData({ email: emailParam, otp: "" });
    } else if (emailParam && step === "login") {
      // Pre-fill email in login form if email parameter is present
      setLoginData(prev => ({ ...prev, email: emailParam }));
    }
  }, [searchParams, step]);

  // Redirect if already authenticated
  useEffect(() => {
    if (isAuthenticated) {
      // Use a small delay to ensure cookies are set and middleware has processed
      const timer = setTimeout(() => {
        // Always redirect based on user role, ignore redirect parameter if user is admin
        const redirectParam = searchParams.get("redirect");
        const defaultRedirect = isAdmin ? "/admin/dashboard" : "/user/dashboard";
        const finalRedirect = isAdmin ? "/admin/dashboard" : (redirectParam || defaultRedirect);
        
        // Use window.location.href to ensure full page reload and cookie reading
        window.location.href = finalRedirect;
      }, 200);
      return () => clearTimeout(timer);
    }
  }, [isAuthenticated, isAdmin, searchParams]);

  // Handle login
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});

    // Validate form
    const validation = loginSchema.safeParse(loginData);
    if (!validation.success) {
      const fieldErrors: Partial<Record<string, string>> = {};
      validation.error.issues.forEach((err) => {
        if (err.path[0]) {
          fieldErrors[err.path[0] as string] = err.message;
        }
      });
      setErrors(fieldErrors);
      return;
    }

    try {
      const result = await login(loginData);
      
      if (result.tokens && result.user) {
        toast.success("Login successful!");
        // Wait a moment for cookies to be set, then redirect
        // Check if user is admin/staff/superuser - check all possible field names
        const user = result.user as any;
        const isTruthy = (value: any): boolean => {
          if (value === true || value === "true" || value === 1 || value === "1") return true;
          return false;
        };
        
        const userIsAdmin = 
          isTruthy(user.is_admin) || 
          isTruthy(user.isAdmin) ||
          isTruthy(user.is_staff) ||
          isTruthy(user.isStaff) ||
          isTruthy(user.is_superuser) ||
          isTruthy(user.isSuperuser);
        
        // Wait longer for cookies to be set and middleware to process
        setTimeout(() => {
          // Always redirect based on user role, ignore redirect parameter if user is admin
          // This ensures admins always go to admin dashboard
          const defaultRedirect = userIsAdmin ? "/admin/dashboard" : "/user/dashboard";
          
          // Only use redirect parameter if user is NOT admin
          const redirectParam = searchParams.get("redirect");
          const finalRedirect = userIsAdmin ? "/admin/dashboard" : (redirectParam || defaultRedirect);
          
          // Use window.location.href instead of router.push to ensure full page reload
          // This ensures cookies are read correctly by middleware
          window.location.href = finalRedirect;
        }, 300);
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Login failed. Please try again.";
      toast.error(errorMessage);
      
      // Check if error is about email verification
      if (errorMessage.toLowerCase().includes("verify your email") || 
          errorMessage.toLowerCase().includes("email address before logging")) {
        setShowResendOtp(true);
      } else {
        setShowResendOtp(false);
      }
      
      setErrors({});
    }
  };

  // Handle signup
  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});

    // Validate form
    const validation = registerSchema.safeParse(signupData);
    if (!validation.success) {
      const fieldErrors: Partial<Record<string, string>> = {};
      validation.error.issues.forEach((err) => {
        if (err.path[0]) {
          fieldErrors[err.path[0] as string] = err.message;
        }
      });
      setErrors(fieldErrors);
      return;
    }

    try {
      const result = await register(signupData);
      
      // Check if registration was successful (user created)
      // Even if OTP sending failed, we should allow user to proceed to verification
      // and use resend OTP feature
      if (result && result.message) {
        // Registration successful - proceed to OTP verification
        toast.success("Registration successful! Please check your email for OTP verification.");
        setRegisteredEmail(signupData.email);
        setOtpData({ email: signupData.email, otp: "" });
        setStep("verify");
      } else {
        // If no message but no error, still proceed (some APIs might not return message)
        toast.success("Registration successful! Please check your email for OTP verification.");
        setRegisteredEmail(signupData.email);
        setOtpData({ email: signupData.email, otp: "" });
        setStep("verify");
      }
    } catch (error) {
      // Handle different types of errors
      let errorMessage = "Registration failed. Please try again.";
      
      if (error instanceof Error) {
        errorMessage = error.message;
        
        // If OTP sending failed, don't show OTP verification - just show error
        if (errorMessage.toLowerCase().includes("failed to send") || 
            errorMessage.toLowerCase().includes("failed to send otp")) {
          toast.error("Registration failed: OTP could not be sent. Please try again later or contact support.");
          setErrors({});
          return;
        }
        
        // Check if it's an OTP sending error but registration might have succeeded
        if (errorMessage.toLowerCase().includes("otp") || 
            errorMessage.toLowerCase().includes("email") ||
            errorMessage.toLowerCase().includes("send")) {
          // If OTP sending failed but user might be created, allow proceeding to verification
          // User can use resend OTP
          toast.warning("Registration completed, but OTP email could not be sent. You can request a new OTP on the next screen.");
          setRegisteredEmail(signupData.email);
          setOtpData({ email: signupData.email, otp: "" });
          setStep("verify");
          return;
        }
      }
      
      toast.error(errorMessage);
      setErrors({});
    }
  };

  // Handle OTP verification
  const handleVerifyOtp = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrors({});

    // Use registeredEmail if available, otherwise use otpData.email
    const emailToVerify = registeredEmail || otpData.email;
    if (!emailToVerify) {
      setErrors({ email: "Email address is required" });
      return;
    }

    // Prepare OTP data with email
    const otpToVerify = {
      email: emailToVerify,
      otp: otpData.otp,
    };

    // Validate OTP
    const validation = verifyOtpSchema.safeParse(otpToVerify);
    if (!validation.success) {
      const fieldErrors: Partial<Record<string, string>> = {};
      validation.error.issues.forEach((err) => {
        if (err.path[0]) {
          fieldErrors[err.path[0] as string] = err.message;
        }
      });
      setErrors(fieldErrors);
      return;
    }

    try {
      const result = await verifyOtp(otpToVerify);
      
      // If verification is successful, switch to login step
      toast.success("Email verified successfully! You can now login.");
      // Switch to login step and pre-fill email
      setStep("login");
      setLoginData(prev => ({ ...prev, email: emailToVerify }));
      setOtpData({ email: "", otp: "" });
      setRegisteredEmail("");
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "OTP verification failed. Please try again.";
      toast.error(errorMessage);
      setErrors({});
    }
  };

  // Handle resend OTP
  const handleResendOtp = async () => {
    const emailToUse = registeredEmail || otpData.email;
    
    if (!emailToUse) {
      toast.error("Email address is required to resend OTP.");
      return;
    }

    try {
      await resendOtpMutation.mutateAsync({ email: emailToUse, context: "registration" });
      toast.success("OTP resent successfully! Please check your email.");
      // Update registeredEmail if it wasn't set
      if (!registeredEmail) {
        setRegisteredEmail(emailToUse);
      }
    } catch (error) {
      let errorMessage = "Failed to resend OTP. Please try again.";
      
      if (error instanceof Error) {
        errorMessage = error.message;
        
        // Provide more helpful error messages
        if (errorMessage.toLowerCase().includes("ssl") || 
            errorMessage.toLowerCase().includes("certificate")) {
          errorMessage = "Email service is currently unavailable. Please contact support or try again later.";
        } else if (errorMessage.toLowerCase().includes("not found") ||
                   errorMessage.toLowerCase().includes("does not exist")) {
          errorMessage = "Email address not found. Please check your email or register again.";
        }
      }
      
      toast.error(errorMessage);
    }
  };

  // Handle form field changes
  const handleLoginChange = (field: keyof LoginInput, value: string) => {
    setLoginData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: undefined }));
    }
  };

  const handleSignupChange = (field: keyof RegisterInput, value: string) => {
    setSignupData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: undefined }));
    }
  };

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

    return (
    <div className="min-h-screen relative flex items-center justify-center px-4 py-12">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="/woman.jpg"
          alt="Therapy and counseling session with African American clients"
          fill
          className="object-cover object-center"
          priority
          sizes="100vw"
        />
        {/* Overlay for better readability */}
        <div className="absolute inset-0 bg-black/20"></div>
      </div>

      {/* Branding - Top Left */}
      <div className="absolute top-8 left-8 flex items-center gap-3 z-30">
        <Heart className="w-6 h-6 text-white" fill="white" />
        <span className="text-white text-xl font-semibold">Attune Heart Therapy</span>
      </div>

      {/* Centered White Card */}
      <div className={`relative z-20 w-full max-w-md rounded-2xl shadow-2xl p-8 ${isDark ? 'bg-gray-800 border border-gray-700' : 'bg-white'}`}>
        {/* Header with Close Button */}
        <div className="flex items-start justify-between mb-2">
          <div className="flex-1">
            {/* Heading */}
            <h1 className="text-3xl font-bold bg-linear-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent mb-2">
              {step === "login" && "Welcome back"}
              {step === "verify" && "Verify your email"}
            </h1>
            {/* Subtitle */}
            {step === "login" && (
            <p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
              Sign in to access your admin dashboard
            </p>
            )}
            {step === "verify" && registeredEmail && (
              <p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                We've sent a verification code to <strong>{registeredEmail}</strong>
              </p>
            )}
            {step === "verify" && !registeredEmail && (
              <p className={`mb-6 ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>
                Enter the verification code sent to your email
              </p>
            )}
          </div>
          {/* Close Button */}
          <Button
            onClick={() => router.back()}
            variant="ghost"
            size="icon"
            className={`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>

        {/* Login Form */}
        {step === "login" && (
          <form className="space-y-6" onSubmit={handleLogin}>
          {/* Email Field */}
          <div className="space-y-2">
            <label htmlFor="email" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
              Email address
            </label>
            <Input
              id="email"
              type="email"
              placeholder="Email address"
                value={loginData.email}
                onChange={(e) => handleLoginChange("email", e.target.value)}
              className={`h-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.email ? 'border-red-500' : ''}`}
              required
            />
              {errors.email && (
                <p className="text-sm text-red-500">{errors.email}</p>
              )}
          </div>

          {/* Password Field */}
          <div className="space-y-2">
            <label htmlFor="password" className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-black'}`}>
              Your password
            </label>
            <div className="relative">
              <Input
                id="password"
                type={showPassword ? "text" : "password"}
                placeholder="Your password"
                  value={loginData.password}
                  onChange={(e) => handleLoginChange("password", e.target.value)}
                className={`h-12 pr-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.password ? 'border-red-500' : ''}`}
                required
              />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={() => setShowPassword(!showPassword)}
                className={`absolute 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-5 h-5" />
                ) : (
                  <Eye className="w-5 h-5" />
                )}
              </Button>
            </div>
            {errors.password && (
              <p className="text-sm text-red-500">{errors.password}</p>
            )}
          </div>

          {/* Submit Button */}
          <Button
            type="submit"
            disabled={loginMutation.isPending}
              className="w-full h-12 text-base font-semibold bg-linear-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"
          >
            {loginMutation.isPending ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Logging in...
              </>
            ) : (
              "Log in"
            )}
          </Button>

          {/* Resend OTP - Show when email verification error occurs */}
          {showResendOtp && (
            <div className={`p-4 rounded-lg border ${isDark ? 'bg-yellow-900/20 border-yellow-800' : 'bg-yellow-50 border-yellow-200'}`}>
              <div className="flex items-start gap-3">
                <Mail className={`w-5 h-5 mt-0.5 flex-shrink-0 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
                <div className="flex-1">
                  <p className={`text-sm font-medium ${isDark ? 'text-yellow-200' : 'text-yellow-900'}`}>
                    Email verification required
                  </p>
                  <p className={`text-xs sm:text-sm mt-1 ${isDark ? 'text-yellow-300' : 'text-yellow-700'}`}>
                    Please verify your email address before logging in. We can resend the verification code to {loginData.email}.
                  </p>
                  <Button
                    type="button"
                    variant="link"
                    onClick={async () => {
                      if (!loginData.email) {
                        toast.error("Email address is required to resend OTP.");
                        return;
                      }
                      
                      try {
                        await resendOtpMutation.mutateAsync({ 
                          email: loginData.email, 
                          context: "registration" 
                        });
                        toast.success("OTP resent successfully! Please check your email.");
                        setShowResendOtp(false);
                      } catch (err) {
                        const errorMessage = err instanceof Error ? err.message : "Failed to resend OTP. Please try again.";
                        toast.error(errorMessage);
                      }
                    }}
                    disabled={resendOtpMutation.isPending}
                    className={`h-auto p-0 mt-2 text-xs sm:text-sm font-medium ${isDark ? 'text-yellow-400 hover:text-yellow-300' : 'text-yellow-700 hover:text-yellow-800'}`}
                  >
                    {resendOtpMutation.isPending ? (
                      <>
                        <Loader2 className="w-3 h-3 mr-1 animate-spin inline" />
                        Sending...
                      </>
                    ) : (
                      "Resend verification code"
                    )}
                  </Button>
                </div>
              </div>
            </div>
          )}

          {/* Remember Me & Forgot Password */}
          <div className="flex items-center justify-between text-sm">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={rememberMe}
                onChange={(e) => setRememberMe(e.target.checked)}
                className={`w-4 h-4 rounded text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer ${isDark ? 'border-gray-600 bg-gray-700' : 'border-gray-300'}`}
              />
              <span className={isDark ? 'text-gray-300' : 'text-black'}>Remember me</span>
            </label>
              <button
                type="button"
              className={`font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
            >
              Forgot password?
              </button>
            </div>
          </form>
        )}


        {/* OTP Verification Form */}
        {step === "verify" && (
          <form className="space-y-6" onSubmit={handleVerifyOtp}>
            <div className={`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 ${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-sm mt-1 ${isDark ? 'text-blue-300' : 'text-blue-700'}`}>
                    We've sent a 6-digit verification code to your email address.
                  </p>
                </div>
              </div>
            </div>

            {/* Email Field (if not set) */}
            {!registeredEmail && (
              <div className="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-12 ${isDark ? 'bg-gray-700 border-gray-600 text-white placeholder:text-gray-400' : 'bg-white border-gray-300 text-gray-900'} ${errors.email ? 'border-red-500' : ''}`}
                  required
                />
                {errors.email && (
                  <p className="text-sm text-red-500">{errors.email}</p>
                )}
              </div>
            )}

            {/* OTP Field */}
            <div className="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)}
                  aria-invalid={!!errors.otp}
                >
                  <InputOTPGroup>
                    <InputOTPSlot index={0} />
                    <InputOTPSlot index={1} />
                    <InputOTPSlot index={2} />
                    <InputOTPSlot index={3} />
                    <InputOTPSlot index={4} />
                    <InputOTPSlot index={5} />
                  </InputOTPGroup>
                </InputOTP>
              </div>
              {errors.otp && (
                <p className="text-sm text-red-500 text-center">{errors.otp}</p>
              )}
            </div>

            {/* Resend OTP */}
            <div className="text-center">
              <button
                type="button"
                onClick={handleResendOtp}
                disabled={resendOtpMutation.isPending}
                className={`text-sm font-medium ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'} disabled:opacity-50 disabled:cursor-not-allowed`}
              >
                {resendOtpMutation.isPending ? "Sending..." : "Didn't receive the code? Resend"}
              </button>
          </div>

            {/* Submit Button */}
            <Button
              type="submit"
              disabled={verifyOtpMutation.isPending}
              className="w-full h-12 text-base font-semibold bg-linear-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"
            >
              {verifyOtpMutation.isPending ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Verifying...
                </>
              ) : (
                "Verify Email"
              )}
            </Button>

            {/* Back to login */}
            <div className="text-center">
              <button
                type="button"
                onClick={() => {
                  setStep("login");
                  setOtpData({ email: "", otp: "" });
                }}
                className={`text-sm font-medium ${isDark ? 'text-gray-400 hover:text-gray-300' : 'text-gray-600 hover:text-gray-700'}`}
              >
                ← Back to login
              </button>
            </div>
        </form>
        )}
      </div>
    </div>
  );
}

export default function Login() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="w-8 h-8 animate-spin text-rose-600" />
      </div>
    }>
      <LoginContent />
    </Suspense>
  );
}