"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

interface OAuthConfig {
  google?: { enabled: boolean };
  github?: { enabled: boolean };
  facebook?: { enabled: boolean };
  discord?: { enabled: boolean };
}

function SignUpContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  const [passwordStrength, setPasswordStrength] = useState<{
    met: boolean;
    missing: string[];
  }>({ met: false, missing: [] });
  const [providers, setProviders] = useState<OAuthConfig>({});
  const [oauthLoading, setOAuthLoading] = useState("");
  const [checking, setChecking] = useState(true);

  // Get redirect URL from query params or default to dashboard
  const redirectUrl = searchParams.get("redirect") || "/account/webinars";

  // Check if user is already authenticated
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const res = await fetch("/api/auth/me");
        const data = await res.json();
        
        if (data.user) {
          window.location.href = redirectUrl;
        }
      } catch (err) {
        console.error("Failed to check auth:", err);
      } finally {
        setChecking(false);
      }
    };
    checkAuth();
  }, [redirectUrl]);

  // Load OAuth provider configuration
  useEffect(() => {
    const loadProviders = async () => {
      try {
        const res = await fetch("/api/public/app-setup");
        const data = await res.json();
        if (data.setup?.data?.oauth) {
          setProviders(data.setup.data.oauth);
        }
      } catch (err) {
        console.error("Failed to load OAuth providers:", err);
      }
    };
    loadProviders();
  }, []);

  // Validate password strength
  useEffect(() => {
    const missing: string[] = [];
    if (password.length < 8 || password.length > 20) missing.push("8-20 characters");
    if (!/[A-Z]/.test(password)) missing.push("uppercase letter");
    if (!/\d/.test(password)) missing.push("number");
    if (/\s/.test(password)) missing.push("no spaces");
    setPasswordStrength({ met: missing.length === 0, missing });
  }, [password]);

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage("");

    try {
      if (!firstName.trim() || !lastName.trim()) {
        setMessage("First and last name are required");
        setLoading(false);
        return;
      }

      if (password !== confirmPassword) {
        setMessage("Passwords do not match");
        setLoading(false);
        return;
      }

      if (!passwordStrength.met) {
        setMessage(`Password must contain: ${passwordStrength.missing.join(", ")}`);
        setLoading(false);
        return;
      }

      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
          password,
          confirmPassword,
        }),
      });

      const data = await res.json();

      if (!data.ok) {
        setMessage(data.message || "Sign up failed");
        setLoading(false);
        return;
      }

      // Redirect to dashboard after successful signup
      setMessage("✅ Account created! Redirecting...");
      setTimeout(() => {
        window.location.href = redirectUrl;
      }, 1500);
    } catch (err: any) {
      setMessage(err?.message || "Sign up failed. Please try again.");
      setLoading(false);
    }
  };

  const handleOAuthSignUp = async (provider: "google" | "github" | "facebook" | "discord") => {
    try {
      setOAuthLoading(provider);
      window.location.href = `/api/auth/${provider}?redirect=${encodeURIComponent(redirectUrl)}`;
    } catch (err: any) {
      setMessage(`${provider} sign up failed. Please try again.`);
      setOAuthLoading("");
    }
  };

  return (
    <>
      {/* Loading State */}
      {checking && (
        <div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
          <div className="text-center">
            <div className="text-6xl mb-4 animate-spin">⏳</div>
            <p className="text-gray-600 dark:text-gray-400">Loading...</p>
          </div>
        </div>
      )}

      {/* Main Content */}
      {!checking && (
        <div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950 py-12">
          <div className="flex w-full max-w-6xl rounded-2xl shadow-2xl overflow-hidden">
            {/* Left Side - Form */}
            <div className="w-full lg:w-1/2 px-8 lg:px-12 py-12 lg:py-16 flex flex-col justify-center bg-white dark:bg-slate-900">
              <div className="max-w-md mx-auto w-full">
                {/* Logo/Header */}
                <div className="mb-8">
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Start your journey</p>
                  <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
                    🚀 Sign Up
                  </h1>
                  <p className="text-gray-600 dark:text-gray-400">
                    Create an account and join our community.
                  </p>
                </div>

                {/* Error/Success Message */}
                {message && (
                  <div
                    className={`p-4 rounded-lg font-semibold text-center mb-6 ${
                      message.includes("error") || message.includes("failed") || message.includes("must") || message.includes("not")
                        ? "bg-red-500/15 text-red-600 dark:bg-red-950/30 dark:text-red-400 border border-red-200/50 dark:border-red-900/50"
                        : "bg-emerald-500/15 text-emerald-600 dark:bg-emerald-950/30 dark:text-emerald-400 border border-emerald-200/50 dark:border-emerald-900/50"
                    }`}
                  >
                    {message}
                  </div>
                )}

                {/* Sign Up Form */}
                <form onSubmit={handleSignUp} className="space-y-4 mb-6">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        First Name
                      </label>
                      <input
                        type="text"
                        placeholder="John"
                        value={firstName}
                        onChange={(e) => setFirstName(e.target.value)}
                        className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:focus:border-blue-500"
                        required
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                        Last Name
                      </label>
                      <input
                        type="text"
                        placeholder="Doe"
                        value={lastName}
                        onChange={(e) => setLastName(e.target.value)}
                        className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:focus:border-blue-500"
                        required
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                      Email
                    </label>
                    <input
                      type="email"
                      placeholder="john@example.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:focus:border-blue-500"
                      required
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                      Password
                    </label>
                    <input
                      type="password"
                      placeholder="••••••••"
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:focus:border-blue-500"
                      required
                    />
                    {password && (
                      <div className="mt-2 p-3 rounded-lg bg-gray-100 dark:bg-slate-800">
                        <p className={`text-xs font-medium ${passwordStrength.met ? "text-emerald-600 dark:text-emerald-400" : "text-amber-600 dark:text-amber-400"}`}>
                          {passwordStrength.met ? "✅ Password is strong" : `❌ Missing: ${passwordStrength.missing.join(", ")}`}
                        </p>
                      </div>
                    )}
                  </div>

                  <div>
                    <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                      Confirm Password
                    </label>
                    <input
                      type="password"
                      placeholder="••••••••"
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:focus:border-blue-500"
                      required
                    />
                  </div>

                  <button
                    type="submit"
                    disabled={loading}
                    className="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 disabled:opacity-60 disabled:cursor-not-allowed text-white font-semibold py-3 rounded-lg transition-all duration-200 text-lg"
                  >
                    {loading ? "⏳ Creating Account..." : "Sign Up"}
                  </button>
                </form>

                {/* OAuth Divider */}
                {Object.values(providers).some((p) => p?.enabled) && (
                  <>
                    <div className="relative mb-6">
                      <div className="absolute inset-0 flex items-center">
                        <div className="w-full border-t border-gray-300 dark:border-slate-600"></div>
                      </div>
                      <div className="relative flex justify-center text-sm">
                        <span className="px-2 bg-white dark:bg-slate-900 text-gray-600 dark:text-gray-400 font-medium">
                          Or sign up with
                        </span>
                      </div>
                    </div>

                    {/* OAuth Buttons */}
                    <div className="grid grid-cols-2 gap-3 mb-6">
                      {providers.google?.enabled && (
                        <button
                          type="button"
                          onClick={() => handleOAuthSignUp("google")}
                          disabled={!!oauthLoading}
                          className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-950/20 dark:hover:border-blue-500 transition-all duration-200 disabled:opacity-60"
                          title="Continue with Google"
                        >
                          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none">
                            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
                            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
                            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
                            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
                          </svg>
                          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Google</span>
                        </button>
                      )}

                      {providers.github?.enabled && (
                        <button
                          type="button"
                          onClick={() => handleOAuthSignUp("github")}
                          disabled={!!oauthLoading}
                          className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-gray-900 dark:hover:border-white hover:bg-gray-50 dark:hover:bg-slate-800 transition-all duration-200 disabled:opacity-60"
                          title="Continue with GitHub"
                        >
                          <svg className="w-4 h-4" viewBox="0 0 24 24">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" fill="#333" />
                          </svg>
                          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">GitHub</span>
                        </button>
                      )}

                      {providers.facebook?.enabled && (
                        <button
                          type="button"
                          onClick={() => handleOAuthSignUp("facebook")}
                          disabled={!!oauthLoading}
                          className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-blue-600 hover:bg-blue-50 dark:hover:bg-blue-950/20 dark:hover:border-blue-600 transition-all duration-200 disabled:opacity-60"
                          title="Continue with Facebook"
                        >
                          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="#1877F2">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                          </svg>
                          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Facebook</span>
                        </button>
                      )}

                      {providers.discord?.enabled && (
                        <button
                          type="button"
                          onClick={() => handleOAuthSignUp("discord")}
                          disabled={!!oauthLoading}
                          className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-gray-300 dark:border-slate-600 rounded-lg hover:border-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950/20 dark:hover:border-indigo-600 transition-all duration-200 disabled:opacity-60"
                          title="Continue with Discord"
                        >
                          <svg className="w-4 h-4" viewBox="0 0 24 24" fill="#5865F2">
                            <path d="M20.317 4.3671a19.8062 19.8062 0 00-4.8851-1.5152.074.074 0 00-.0786.0371c-.211.3667-.4385.8453-.6005 1.2242-.5792-.0869-1.159-.0869-1.7335 0-.1624-.3928-.3957-.8575-.6021-1.2242a.077.077 0 00-.0785-.037 19.7355 19.7355 0 00-4.8852 1.515.0699.0699 0 00-.032.0274C.533 9.046-.32 13.58.0992 18.057a.082.082 0 00.031.0605c1.3143 1.0025 2.5871 1.6095 3.8343 2.0057a.0771.0771 0 00.084-.0271c.46-.6137.87-1.2646 1.225-1.9475a.077.077 0 00-.0422-.1062 12.906 12.906 0 01-1.838-.878.0771.0771 0 00-.008-.1277c.123-.092.246-.189.365-.276a.073.073 0 01.076-.01 19.896 19.896 0 0017.152 0 .073.073 0 01.076.01c.119.087.242.184.365.276a.077.077 0 00-.009.1277 12.823 12.823 0 01-1.838.878.0768.0768 0 00-.042.1062c.356.727.765 1.382 1.225 1.9475a.076.076 0 00.084.027 19.858 19.858 0 003.8343-2.0057.0822.0822 0 00.032-.0605c.464-4.547-.775-8.522-3.282-12.037a.0703.0703 0 00-.031-.0274zM8.02 15.3312c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.9556 2.1575-2.1568 2.1575zm7.9605 0c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.946 2.1575-2.1568 2.1575z" />
                          </svg>
                          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Discord</span>
                        </button>
                      )}
                    </div>
                  </>
                )}

                {/* Sign In Link */}
                <p className="text-center text-gray-600 dark:text-gray-400">
                  Already have an account?{" "}
                  <Link href="/signin" className="text-primary hover:underline font-semibold dark:text-blue-400">
                    Sign In
                  </Link>
                </p>
              </div>
            </div>

            {/* Right Side - Background Image */}
            <div className="hidden lg:block lg:w-1/2 bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-600 relative overflow-hidden">
              <div className="absolute inset-0 opacity-40">
                <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-white/20 rounded-full blur-3xl" />
                <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-300/20 rounded-full blur-3xl" />
              </div>
              <div className="relative h-full flex flex-col items-center justify-center p-12 text-white text-center">
                <div className="text-6xl mb-6">🌟</div>
                <h2 className="text-4xl font-bold mb-4">Join the Community</h2>
                <p className="text-lg text-blue-50">
                  Sign up today and unlock access to exclusive features and content.
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default function SignUpPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin text-4xl mb-4">⏳</div>
          <p>Loading...</p>
        </div>
      </div>
    }>
      <SignUpContent />
    </Suspense>
  );
}