"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 SignInContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");
  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) {
          // User is already authenticated, redirect to dashboard
          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();
  }, []);

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

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

      const data = await res.json();

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

      // Redirect based on user role or to specified redirect URL
      const userRole = data.user?.role;
      if (userRole === "ADMIN") {
        window.location.href = "/admin";
      } else {
        window.location.href = redirectUrl;
      }
    } catch (err: any) {
      setMessage(err?.message || "Sign in failed. Please try again.");
      setLoading(false);
    }
  };

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

  if (checking) {
    return (
      <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>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-white dark:bg-slate-950">
      <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">
              <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
                👤 Sign In
              </h1>
              <p className="text-gray-600 dark:text-gray-400">
                Welcome back! Sign in to access your account.
              </p>
            </div>

            {/* Error/Success Message */}
            {message && (
              <div
                className={`p-4 rounded-lg font-semibold text-center mb-6 ${
                  message.includes("error") || message.includes("failed")
                    ? "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>
            )}

            {/* Email/Password Form */}
            <form onSubmit={handleSignIn} className="space-y-4 mb-6">
              <div>
                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                  Email Address
                </label>
                <input
                  type="email"
                  placeholder="you@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
                  disabled={loading}
                />
              </div>

              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">
                    Password
                  </label>
                  <Link
                    href="/forgot-password"
                    className="text-xs text-primary hover:underline dark:text-blue-400"
                  >
                    Forgot password?
                  </Link>
                </div>
                <input
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
                  disabled={loading}
                />
              </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 ? "⏳ Signing In..." : "Sign In"}
              </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 continue with
                    </span>
                  </div>
                </div>

                {/* OAuth Buttons */}
                <div className="grid grid-cols-2 gap-3 mb-6">
                  {providers.google?.enabled && (
                    <button
                      onClick={() => handleOAuthSignIn("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
                      onClick={() => handleOAuthSignIn("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="currentColor"
                        />
                      </svg>
                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">GitHub</span>
                    </button>
                  )}

                  {providers.facebook?.enabled && (
                    <button
                      onClick={() => handleOAuthSignIn("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">
                        <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" fill="#1877F2" />
                      </svg>
                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Facebook</span>
                    </button>
                  )}

                  {providers.discord?.enabled && (
                    <button
                      onClick={() => handleOAuthSignIn("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">
                        <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" fill="#5865F2" />
                      </svg>
                      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Discord</span>
                    </button>
                  )}
                </div>
              </>
            )}

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

        {/* Right Side - Background Image */}
        <div className="hidden lg:block lg:w-1/2 bg-gradient-to-br from-blue-400 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-blue-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">Welcome Back</h2>
            <p className="text-lg text-blue-50">
              Access your account and explore amazing features designed for your success.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function SignInPage() {
  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>
    }>
      <SignInContent />
    </Suspense>
  );
}