"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { signInWithGoogle, sendVerificationLink, registerUserWithInvite } from "@/lib/auth";
import { GradientText } from "@/components/ui/gradient-text";
import { GoogleLoginButton } from "@/components/ui/google-login-button";
import { Eye, EyeOff, Mail, PartyPopper } from "lucide-react";
import { isGoogleLoginEnabled } from "@/lib/server-config";
import { fetchSettingByCode } from "@/api/serversetting";
import { useDeviceType } from "@/hooks/useDeviceType";

export default function SignupPage() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [inviteCode, setInviteCode] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formError, setFormError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [agreeToTerms, setAgreeToTerms] = useState(true);
  const [showActivationModal, setShowActivationModal] = useState(false);
  const [resendCooldown, setResendCooldown] = useState(60);
  const [resendLoading, setResendLoading] = useState(false);
  const [resendMessage, setResendMessage] = useState("");
  const [resendError, setResendError] = useState("");
  const [googleLoading, setGoogleLoading] = useState(false);
  const [emailFocused, setEmailFocused] = useState(false);
  const [passwordFocused, setPasswordFocused] = useState(false);
  const [showGoogleLogin, setShowGoogleLogin] = useState(false);
  const [showRedirectModal, setShowRedirectModal] = useState(false);
  const router = useRouter();
  const { isMobile } = useDeviceType();
  // Handle scroll indicator for small screens and load SSO config
  React.useEffect(() => {
    try {
      const url = new URL(window.location.href);
      const codeFromUrl = url.searchParams.get("inviteCode");
      const codeFromSession = sessionStorage.getItem("inviteCode");
      const code = codeFromUrl || codeFromSession || "";
      if (code) {
        setInviteCode(code);
        sessionStorage.setItem("inviteCode", code);
      }
    } catch (err) {}

    // 检查是否启用Google登录
    const checkGoogleLoginStatus = async () => {
      try {
        const enabled = await isGoogleLoginEnabled();
        setShowGoogleLogin(enabled);
      } catch (error) {
        console.error("Failed to check Google login status:", error);
        setShowGoogleLogin(false);
      }
    };

    checkGoogleLoginStatus();

    const handleScroll = () => {
      const scrollableElement = document.querySelector('.signup-form > div:nth-child(2)');
      const formElement = document.querySelector('.signup-form');
      if (scrollableElement && formElement) {
        const hasScroll = scrollableElement.scrollHeight > scrollableElement.clientHeight;
        const isScrolledToBottom = scrollableElement.scrollTop + scrollableElement.clientHeight >= scrollableElement.scrollHeight - 10;

        if (hasScroll && !isScrolledToBottom) {
          formElement.classList.add('has-scroll');
        } else {
          formElement.classList.remove('has-scroll');
        }
      }
    };

    const scrollableElement = document.querySelector('.signup-form > div:nth-child(2)');
    if (scrollableElement) {
      scrollableElement.addEventListener('scroll', handleScroll);
      // Check initially
      handleScroll();

      return () => {
        scrollableElement.removeEventListener('scroll', handleScroll);
      };
    }
  }, []);

  /** Password validation function with English prompts */
  const validatePassword = (password: string): string => {
    if (password.length < 8) {
      return "Password must be at least 8 characters";
    }
    if (password.length > 18) {
      return "Password cannot exceed 18 characters";
    }
    if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^*&\.]{8,18}$/.test(password)) {
      return "Password must contain both letters and numbers";
    }
    return "";
  };

  /** Get quick link to email provider by domain */
  const getEmailProviderLink = (addr: string): string | undefined => {
    const domain = addr.split("@")[1]?.toLowerCase();
    if (!domain) return undefined;
    const map: Record<string, string> = {
      "gmail.com": "https://mail.google.com",
      "outlook.com": "https://outlook.live.com/mail",
      "hotmail.com": "https://outlook.live.com/mail",
      "live.com": "https://outlook.live.com/mail",
      "yahoo.com": "https://mail.yahoo.com",
      "icloud.com": "https://www.icloud.com/mail",
      "qq.com": "https://mail.qq.com",
      "163.com": "https://mail.163.com",
      "126.com": "https://mail.126.com",
      "yeah.net": "https://mail.yeah.net",
    };
    return map[domain];
  };

  /** Handle resend activation email */
  const handleResend = async () => {
    if (resendCooldown > 0 || resendLoading) return;
    try {
      setResendLoading(true);
      setResendMessage("");
      setResendError("");
      await sendVerificationLink(email);
      setResendMessage("Resent. Please check your email.");
      setResendCooldown(60);
    } catch (err: any) {
      setResendError(err?.message || "Sending failed, please try again later");
    } finally {
      setResendLoading(false);
    }
  };

  /** Countdown for resend button */
  React.useEffect(() => {
    if (!showActivationModal) return;
    if (resendCooldown <= 0) return;
    const timer = setInterval(() => {
      setResendCooldown((s) => (s > 0 ? s - 1 : 0));
    }, 1000);
    return () => clearInterval(timer);
  }, [showActivationModal, resendCooldown]);

  /** Handle Terms of Service click */
  const handleTermsClick = () => {
    window.open("/Terms", "_blank");
  };

  /** Handle Privacy Policy click */
  const handlePrivacyClick = () => {
    window.open("/Privacy", "_blank");
  };

  /** 处理密码输入变化 */
  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newPassword = e.target.value;
    setPassword(newPassword);

    if (newPassword) {
      const error = validatePassword(newPassword);
      setPasswordError(error);
    } else {
      setPasswordError("");
    }
  };


  const handleGoogleSignIn = async () => {
    try {
      setGoogleLoading(true);
      setFormError("");
      // signInWithGoogle now returns a promise and may throw errors
      await signInWithGoogle();
    } catch (error: any) {
      console.error("Google sign-in error:", error);
      setFormError(error.message || "Google sign-in failed, please try again");
      setGoogleLoading(false);
    }
  };

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

    // 验证密码
    const passwordValidationError = validatePassword(password);
    if (passwordValidationError) {
      setPasswordError(passwordValidationError);
      return;
    }

    // 验证是否同意条款
    if (!agreeToTerms) {
      setFormError("Please agree to the Terms of Service and Privacy Policy");
      return;
    }

    setIsSubmitting(true);
    setFormError("");

    try {
      // Use new registration API
      const response = await registerUserWithInvite({
        email,
        password,
        invite_code: inviteCode || undefined,
      });
      // Clear inviteCode after successful registration
      try {
        sessionStorage.removeItem("inviteCode");
      } catch {}

      // 根据服务端配置是否展示激活弹窗
      try {
        const showActivation = await fetchSettingByCode<{show: boolean}>("showActivation", {show: true});
        if (showActivation?.show === true) {
          setShowActivationModal(true);
          setResendCooldown(60);
        } else {
          setShowRedirectModal(true);
          setTimeout(() => {
            router.push("/login");
          }, 1500);
        }
      } catch {}
    } catch (error: any) {
      console.error("Signup error:", error);
      setFormError(error.message || "Registration failed, please try again");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
    <div className="min-h-screen relative overflow-hidden">
      {/* Height-responsive container styles */}
      <style jsx>{`
        /* Sticky header/footer layout styles */
        .signup-form {
          border-radius: 1rem;
        }

        @media (max-height: 800px) {
          .signup-container {
            min-height: 100vh;
            min-height: 100dvh; /* Dynamic viewport height for mobile */
            padding: 1rem 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .signup-form {
            margin-top: 2rem;
            margin-bottom: 2rem;
            max-height: calc(100vh - 4rem);
            max-height: calc(100dvh - 4rem);
          }
        }

        @media (max-height: 600px) {
          .signup-container {
            padding: 0.5rem 1rem 1rem;
            align-items: flex-start;
          }
          .signup-form {
            margin-top: 1rem;
            margin-bottom: 1rem;
            max-height: calc(100vh - 2rem);
            max-height: calc(100dvh - 2rem);
          }
          .form-spacing {
            gap: 0.75rem;
          }
          .form-field-spacing {
            margin-bottom: 0.75rem;
          }
        }

        @media (max-height: 480px) {
          .signup-container {
            padding: 0.25rem 0.75rem 0.5rem;
            align-items: flex-start;
          }
          .signup-form {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            max-height: calc(100vh - 1rem);
            max-height: calc(100dvh - 1rem);
            background: rgba(0, 0, 0, 0.6) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
          }
          .form-spacing {
            gap: 0.5rem;
          }
          .form-field-spacing {
            margin-bottom: 0.5rem;
          }
          .compact-header {
            padding: 1rem 1rem 0.5rem !important;
          }
          .compact-header h2 {
            font-size: 1.25rem;
            margin-bottom: 0.25rem;
          }
          .compact-header p {
            font-size: 0.875rem;
          }
          .video-overlay-enhanced {
            background: rgba(0, 0, 0, 0.4) !important;
          }
        }

        /* Enhanced readability for all small screens */
        @media (max-height: 600px) {
          .signup-form {
            background: rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: blur(16px) !important;
          }
          .video-overlay-enhanced {
            background: rgba(0, 0, 0, 0.3) !important;
          }
        }

        /* Ultra-compact mode for very small screens */
        @media (max-height: 400px) {
          .signup-form {
            border-radius: 1rem !important;
          }
          .compact-header {
            padding: 0.75rem 1rem 0.5rem !important;
          }
          .compact-header h2 {
            font-size: 1.125rem;
            margin-bottom: 0.125rem;
          }
          .compact-header p {
            font-size: 0.8125rem;
          }
          .form-spacing {
            gap: 0.375rem;
          }
          .form-field-spacing {
            margin-bottom: 0.375rem;
          }
          input, button {
            padding: 0.625rem 0.75rem !important;
            font-size: 0.875rem !important;
          }
          label {
            font-size: 0.8125rem !important;
            margin-bottom: 0.25rem !important;
          }
        }

        /* Scroll indicator for small screens - now applies to the scrollable middle section */
        @media (max-height: 600px) {
          .signup-form > div:nth-child(2) {
            position: relative;
          }
          .signup-form > div:nth-child(2)::after {
            content: '';
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
          }
          .signup-form.has-scroll > div:nth-child(2)::after {
            opacity: 1;
          }
        }
      `}</style>
      {/* 背景视频 */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
        data-alt="background-video"
      >
        <source src="/assets/login.mp4" type="video/mp4" />
      </video>

      {/* 视频遮罩层 */}
      <div
        className="video-overlay-enhanced absolute inset-0 bg-black/20"
        data-alt="video-overlay"
      ></div>

      {/* Logo */}
      <div
        className="absolute top-8 left-8 z-50"
        data-alt="logo-container"
        onClick={() => router.push("/")}
      >
        <span className="logo-heart cursor-pointer">
          <GradientText
            text="MovieFlow"
            startPercentage={30}
            endPercentage={70}
          />
        </span>
        {/* beta标签 */}
        <span className="inline-flex items-center px-1.5 py-0.5 text-[8px] font-semibold tracking-wider text-[rgb(212 202 202)] border border-[rgba(106,244,249,0.2)] rounded-full shadow-[0_0_10px_rgba(106,244,249,0.1)]">
          Beta
        </span>
      </div>

      {/* 注册框 - 响应式高度显示 */}
      <div className="signup-container relative z-10 flex items-center justify-center min-h-screen p-4">
        <div className="signup-form max-w-md w-full bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl shadow-2xl flex flex-col max-h-[90vh]">
          {/* Fixed Header */}
          <div className="compact-header text-center p-6 pb-4 flex-shrink-0">
            <h2 className="text-2xl font-bold text-white mb-2">
              Sign Up, for free
            </h2>
            <p className="text-gray-300">Start Turning Your Ideas Into Incredible Videos</p>
          </div>

          {/* Scrollable Middle Content */}
          <div className="flex-1 overflow-y-auto px-6 pt-6">
            <form onSubmit={handleSubmit} className="form-spacing space-y-6">
            <div className="form-field-spacing relative">
              <label
                className={`absolute left-3 transition-all duration-200 pointer-events-none ${
                  email || emailFocused
                    ? 'top-0 -translate-y-1/2 text-base text-white bg-[#141400]/30 px-1 rounded'
                    : 'opacity-0'
                }`}
              >
                Email
              </label>
              <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                onFocus={() => setEmailFocused(true)}
                onBlur={() => setEmailFocused(false)}
                required
                className={`w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${isMobile ? 'mobile-input' : ''}`}
              />
            </div>

            <div className="form-field-spacing">
              <div className="relative">
                <label
                  className={`absolute left-3 transition-all duration-200 pointer-events-none z-10 ${
                    password || passwordFocused
                      ? 'top-0 -translate-y-1/2 text-base text-white bg-[#141400]/30 px-1 rounded'
                      : 'opacity-0'
                  }`}
                >
                  Password
                </label>
                <input
                  type={showPassword ? "text" : "password"}
                  placeholder="Password (8-18 characters, letters, numbers and !@#$%^*&.)"
                  value={password}
                  onChange={handlePasswordChange}
                  onFocus={() => setPasswordFocused(true)}
                  onBlur={() => setPasswordFocused(false)}
                  required
                  className={`w-full px-4 py-3 pr-12 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${
                    passwordError ? "border-red-500/50" : "border-white/20"
                  } ${isMobile ? 'mobile-input' : ''}`}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
                  data-alt="toggle-password-visibility"
                >
                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                </button>
              </div>


              {passwordError && (
                <p className="mt-4 text-sm text-red-400">{passwordError}</p>
              )}
            </div>

            {formError && (
              <div className="bg-red-500/20 text-red-300 p-3 rounded-lg border border-red-500/20">
                {formError}
              </div>
            )}

            <div className="flex gap-4 mt-6">
              <Link
                href="/login"
                className="flex-1 py-3 text-center border border-white/20 rounded-lg text-white hover:bg-white/10 transition-colors"
              >
                Back to login
              </Link>
              <button
                type="submit"
                disabled={
                  isSubmitting ||
                  !!passwordError ||
                  !password
                }
                className="flex-1 py-3 rounded-lg cursor-pointer bg-[#C039F6] hover:bg-[#C039F6]/80 text-white font-medium transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
              >
                {isSubmitting ? "Signing up..." : "Sign Up"}
              </button>
            </div>
          </form>
          </div>

          {/* Fixed Footer */}
          <div className="flex-shrink-0 p-6 pt-4">
            {/* Google登录按钮 - 根据服务端配置显示/隐藏 */}
            {showGoogleLogin && (
              <>
                <div className="mb-4 relative flex items-center">
                  <div className="flex-grow border-t border-gray-500/30"></div>
                  <span className="flex-shrink mx-4 text-gray-400">or</span>
                  <div className="flex-grow border-t border-gray-500/30"></div>
                </div>

                <GoogleLoginButton
                  onClick={handleGoogleSignIn}
                  loading={googleLoading}
                  disabled={isSubmitting}
                  variant="outline"
                  size="md"
                  className="w-full"
                  label="Sign up with Google"
                  loadingLabel="Signing up..."
                />
              </>
            )}

            <div className="text-center mt-4">
              <p style={{ color: "rgba(255, 255, 255, 0.6)" }}>
                Already have an account?{" "}
                <Link href="/login" className="text-[#C039F6] hover:text-[#C039F6]/80 transition-colors">
                  Sign in
                </Link>
              </p>
            </div>
            <div className="text-center mt-4">
              <button
                  type="button"
                  onClick={handleTermsClick}
                  className="text-[#C039F6] hover:text-purple-300 underline"
                  data-alt="terms-link"
                >
                  Terms of Service
                </button>{' '}
                <button
                  type="button"
                  onClick={handlePrivacyClick}
                  className="text-[#C039F6] hover:text-[#C039F6]/80 underline"
                  data-alt="privacy-link"
                >
                  Privacy Policy
                </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    {showActivationModal && (
      <div
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
        data-alt="activation-modal-overlay"
      >
        <div
          className="w-full max-w-xl mx-4 relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-xl shadow-2xl"
          data-alt="activation-modal"
        >
          <div className="absolute -inset-px rounded-2xl bg-gradient-to-br from-cyan-400/10 to-purple-600/10 pointer-events-none"></div>
          <div className="relative p-6">
            <div className="flex items-center justify-center mb-4">
              <div className="relative">
                <div className="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-400 to-purple-600 blur-xl opacity-30"></div>
                <Mail className="relative z-10 w-10 h-10 text-cyan-300" />
              </div>
            </div>
            <h3 className="text-xl font-semibold text-white text-center mb-2" data-alt="activation-title">Please verify your email to activate your account</h3>
            <p className="text-gray-300 text-center mb-4" data-alt="activation-desc">
              We have sent an activation email to {email || "your email"}; if you don&apos;t receive it, please check your spam folder or try again later
            </p>

            <div className="flex items-center justify-center mb-4 gap-3">
              {(() => {
                const provider = getEmailProviderLink(email);
                if (!provider) return null;
                const domain = email.split("@")[1] || "email";
                return (
                  <a
                    href={provider}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-white/15 text-gray-100 hover:bg-white/10 transition-colors"
                    data-alt="email-provider-link"
                  >
                    <Mail className="w-4 h-4" />
                    <span>Open {domain}</span>
                  </a>
                );
              })()}
            </div>

            {(resendMessage || resendError) && (
              <div className={`text-sm text-center mb-3 ${resendError ? "text-red-300" : "text-green-300"}`} data-alt="resend-feedback">
                {resendError || resendMessage}
              </div>
            )}

            <div className="grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={handleResend}
                disabled={resendCooldown > 0 || resendLoading}
                className="px-4 py-2 rounded-lg border border-white/15 text-white/90 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                data-alt="resend-button"
              >
                {resendLoading
                  ? "Sending..."
                  : resendCooldown > 0
                  ? `Resend (${resendCooldown}s)`
                  : "Resend"}
              </button>
              <button
                type="button"
                onClick={() => router.push("/login")}
                className="px-4 py-2 rounded-lg bg-[#C039F6] hover:bg-[#C039F6]/80 text-white transition-colors"
                data-alt="go-login-button"
              >
                Confirm Activation and Login
              </button>
            </div>
          </div>
        </div>
      </div>
    )}
    {showRedirectModal && (
      <div
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
        data-alt="redirect-modal-overlay"
      >
        <div
          className="w-full max-w-xl mx-4 relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-xl shadow-2xl"
          data-alt="redirect-modal"
        >
          <div className="absolute -inset-px rounded-2xl bg-gradient-to-br from-cyan-400/10 to-purple-600/10 pointer-events-none"></div>
          <div className="relative p-6">
            <div className="flex items-center justify-center mb-4">
              <div className="relative">
                <div className="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-400 to-purple-600 blur-xl opacity-30"></div>
                <PartyPopper className="relative z-10 w-10 h-10 text-cyan-300" />
              </div>
            </div>
            <h3 className="text-xl font-semibold text-white text-center mb-2" data-alt="redirect-title">Sign up successful</h3>
            <p className="text-gray-300 text-center mb-2" data-alt="redirect-desc">
              Please wait a moment, redirecting to login...
            </p>
          </div>
        </div>
      </div>
    )}
    </>
  );
}