"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Eye, EyeOff, Loader2 } from "lucide-react";

interface LoginDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onLoginSuccess: () => void;
}

// Login Dialog component
export function LoginDialog({ open, onOpenChange, onLoginSuccess }: LoginDialogProps) {
  const [isSignup, setIsSignup] = useState(false);
  const [loginData, setLoginData] = useState({
    email: "",
    password: "",
  });
  const [signupData, setSignupData] = useState({
    fullName: "",
    email: "",
    phone: "",
  });
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);
  const [loginLoading, setLoginLoading] = useState(false);
  const [signupLoading, setSignupLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoginLoading(true);
    setError(null);
    
    try {
      // Simulate login API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      
      // After successful login, close dialog and call success callback
      setShowPassword(false);
      setLoginLoading(false);
      onOpenChange(false);
      onLoginSuccess();
    } catch (err) {
      setError("Login failed. Please try again.");
      setLoginLoading(false);
    }
  };

  const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault();
    setSignupLoading(true);
    setError(null);
    
    try {
      // Simulate signup API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      
      // After successful signup, automatically log in and proceed
      setSignupLoading(false);
      onOpenChange(false);
      onLoginSuccess();
    } catch (err) {
      setError("Signup failed. Please try again.");
      setSignupLoading(false);
    }
  };

  const handleSwitchToSignup = () => {
    setIsSignup(true);
    setError(null);
    setLoginData({ email: "", password: "" });
  };

  const handleSwitchToLogin = () => {
    setIsSignup(false);
    setError(null);
    setSignupData({ fullName: "", email: "", phone: "" });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md bg-white">
        <DialogHeader>
          <DialogTitle className="text-3xl font-bold bg-linear-to-r from-rose-600 via-pink-600 to-rose-600 bg-clip-text text-transparent">
            {isSignup ? "Create an account" : "Welcome back"}
          </DialogTitle>
          <DialogDescription className="text-gray-600">
            {isSignup 
              ? "Sign up to complete your booking" 
              : "Please log in to complete your booking"}
          </DialogDescription>
        </DialogHeader>

        {/* Signup Form */}
        {isSignup ? (
          <form className="space-y-6 mt-4" onSubmit={handleSignup}>
            {error && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                <p className="text-sm text-red-800">{error}</p>
              </div>
            )}

            {/* Full Name Field */}
            <div className="space-y-2">
              <label htmlFor="signup-fullName" className="text-sm font-medium text-black">
                Full Name *
              </label>
              <Input
                id="signup-fullName"
                type="text"
                placeholder="John Doe"
                value={signupData.fullName}
                onChange={(e) => setSignupData({ ...signupData, fullName: e.target.value })}
                className="h-12 bg-white border-gray-300"
                required
              />
            </div>

            {/* Email Field */}
            <div className="space-y-2">
              <label htmlFor="signup-email" className="text-sm font-medium 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-12 bg-white border-gray-300"
                required
              />
            </div>

            {/* Phone Field */}
            <div className="space-y-2">
              <label htmlFor="signup-phone" className="text-sm font-medium text-black">
                Phone Number *
              </label>
              <Input
                id="signup-phone"
                type="tel"
                placeholder="+1 (555) 123-4567"
                value={signupData.phone}
                onChange={(e) => setSignupData({ ...signupData, phone: e.target.value })}
                className="h-12 bg-white border-gray-300"
                required
              />
            </div>

            {/* Submit Button */}
            <Button
              type="submit"
              disabled={signupLoading}
              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"
            >
              {signupLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Creating account...
                </>
              ) : (
                "Sign up"
              )}
            </Button>

            {/* Switch to Login */}
            <p className="text-sm text-gray-600 text-center">
              Already have an account?{" "}
              <button
                type="button"
                onClick={handleSwitchToLogin}
                className="text-blue-600 underline font-medium hover:text-blue-700"
              >
                Log in
              </button>
            </p>
          </form>
        ) : (
          /* Login Form */
          <form className="space-y-6 mt-4" onSubmit={handleLogin}>
          {error && (
            <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
              <p className="text-sm text-red-800">{error}</p>
            </div>
          )}

          {/* Email Field */}
          <div className="space-y-2">
            <label htmlFor="login-email" className="text-sm font-medium text-black">
              Email address
            </label>
            <Input
              id="login-email"
              type="email"
              placeholder="Email address"
              value={loginData.email}
              onChange={(e) => setLoginData({ ...loginData, email: e.target.value })}
              className="h-12 bg-white border-gray-300"
              required
            />
          </div>

          {/* Password Field */}
          <div className="space-y-2">
            <label htmlFor="login-password" className="text-sm font-medium text-black">
              Your password
            </label>
            <div className="relative">
              <Input
                id="login-password"
                type={showPassword ? "text" : "password"}
                placeholder="Your password"
                value={loginData.password}
                onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
                className="h-12 bg-white border-gray-300 pr-12"
                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 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>
          </div>

          {/* Submit Button */}
          <Button
            type="submit"
            disabled={loginLoading}
            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"
          >
            {loginLoading ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Logging in...
              </>
            ) : (
              "Log in"
            )}
          </Button>

          {/* 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 border-gray-300 text-rose-600 focus:ring-2 focus:ring-rose-500 cursor-pointer"
              />
              <span className="text-black">Remember me</span>
            </label>
            <button
              type="button"
              className="text-blue-600 hover:text-blue-700 font-medium"
              onClick={() => onOpenChange(false)}
            >
              Forgot password?
            </button>
          </div>

          {/* Sign Up Prompt */}
          <p className="text-sm text-gray-600 text-center">
            New to Attune Heart Therapy?{" "}
            <button
              type="button"
              onClick={handleSwitchToSignup}
              className="text-blue-600 underline font-medium hover:text-blue-700"
            >
              Sign up
            </button>
          </p>
        </form>
        )}
      </DialogContent>
    </Dialog>
  );
}