"use client";

import { useState, useEffect } from "react";

type AuthModalProps = {
  open: "login" | "register" | null;
  onClose: () => void;
  onSwitch: (mode: "login" | "register") => void;
};

export default function AuthModal({ open, onClose, onSwitch }: AuthModalProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);
  const [passwordStrength, setPasswordStrength] = useState<{
    met: boolean;
    missing: string[];
  }>({ met: false, missing: [] });
  const [providers, setProviders] = useState<{
    google?: boolean;
    github?: boolean;
    facebook?: boolean;
    discord?: boolean;
  }>({});

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handleEscape);
    return () => window.removeEventListener("keydown", handleEscape);
  }, [onClose]);

  useEffect(() => {
    setMsg("");
    setEmail("");
    setPassword("");
    setConfirmPassword("");
    setFirstName("");
    setLastName("");
  }, [open]);

  // 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({
            google: data.setup.data.oauth.google?.enabled,
            github: data.setup.data.oauth.github?.enabled,
            facebook: data.setup.data.oauth.facebook?.enabled,
            discord: data.setup.data.oauth.discord?.enabled,
          });
        }
      } 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();
    setBusy(true);
    setMsg("");

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

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

      if (!passwordStrength.met) {
        setMsg(`Password must contain: ${passwordStrength.missing.join(", ")}`);
        setBusy(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) {
        setMsg(data.message || "Sign up failed");
        setBusy(false);
        return;
      }

      setMsg("✅ Account created! Redirecting...");
      setTimeout(() => {
        window.location.href = "/account/webinars";
      }, 1500);
    } catch (err: any) {
      setMsg(err?.message || "Sign up failed. Please try again.");
      setBusy(false);
    }
  };

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

    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) {
        setMsg(data.message || "Sign in failed");
        setBusy(false);
        return;
      }

      // Redirect based on user role
      const userRole = data.user?.role;
      if (userRole === "ADMIN") {
        window.location.href = "/admin";
      } else {
        window.location.href = "/account/webinars";
      }
    } catch (err: any) {
      setMsg(err?.message || "Sign in failed. Please try again.");
      setBusy(false);
    }
  };

  const handleOAuthSignIn = async (provider: "google" | "github" | "facebook" | "discord") => {
    try {
      setBusy(true);
      // Better Auth OAuth flow: Redirect to /api/auth/{provider}
      // BetterAuth will handle the redirect to the provider's OAuth endpoint
      const redirectUrl = `/api/auth/${provider}`;
      
      // Get the provider's OAuth authorization URL
      const res = await fetch(`${redirectUrl}?action=signin`, {
        method: "GET",
      });
      
      if (!res.ok) {
        throw new Error(`OAuth redirect failed: ${res.statusText}`);
      }
      
      // BetterAuth returns a redirect, follow it
      window.location.href = redirectUrl;
    } catch (err: any) {
      setMsg(`${provider} sign in failed. Please try again.`);
      setBusy(false);
    }
  };

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />

      <div className="relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-8 max-h-[90vh] overflow-y-auto">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none"
        >
          ✕
        </button>

        <h2 className="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
          {open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
        </h2>

        {open === "register" && (
          <>
            <input
              type="text"
              placeholder="First Name"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              className="input-field w-full mb-4"
              disabled={busy}
            />
            <input
              type="text"
              placeholder="Last Name"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              className="input-field w-full mb-4"
              disabled={busy}
            />
          </>
        )}

        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="input-field w-full mb-4"
          disabled={busy}
        />

        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="input-field w-full mb-2"
          disabled={busy}
        />

        {open === "register" && (
          <>
            <div className="mb-4 text-sm">
              {password && (
                <div className="grid grid-cols-2 gap-2">
                  {[
                    { label: "8-20 chars", check: password.length >= 8 && password.length <= 20 },
                    { label: "Uppercase", check: /[A-Z]/.test(password) },
                    { label: "Number", check: /\d/.test(password) },
                    { label: "No spaces", check: !/\s/.test(password) },
                  ].map(({ label, check }) => (
                    <div key={label} className={check ? "text-success" : "text-danger"}>
                      {check ? "✅" : "❌"} {label}
                    </div>
                  ))}
                </div>
              )}
            </div>

            <input
              type="password"
              placeholder="Confirm Password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              className="input-field w-full mb-4"
              disabled={busy}
            />
          </>
        )}

        {msg && (
          <div
            className={`p-4 rounded-lg font-semibold text-center mb-4 ${
              msg.includes("error") || msg.includes("failed") || msg.includes("must") || msg.includes("not")
                ? "bg-danger/15 text-danger dark:bg-danger/25 dark:text-danger-light border-2 border-danger/30"
                : "bg-success/15 text-success dark:bg-success/25 dark:text-success-light border-2 border-success/30"
            }`}
          >
            {msg}
          </div>
        )}

        <button
          className="btn-primary w-full mb-4"
          disabled={busy}
          onClick={open === "login" ? handleSignIn : handleSignUp}
        >
          {busy ? "⏳ Processing…" : open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
        </button>

        {/* OAuth Buttons */}
        {Object.values(providers).some(p => p) && (
          <>
            <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>

            <div className="space-y-2.5 mb-4">
              {providers.google && (
                <button
                  onClick={() => handleOAuthSignIn("google")}
                  disabled={busy}
                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-500 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
                  title="Continue with Google account"
                  aria-label="Continue with Google"
                >
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none">
                    <g clipPath="url(#clip0)">
                      <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"
                      />
                    </g>
                  </svg>
                  <span>Continue with Google</span>
                  {busy && <span className="ml-auto animate-spin">⟳</span>}
                </button>
              )}
              
              {providers.github && (
                <button
                  onClick={() => handleOAuthSignIn("github")}
                  disabled={busy}
                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-gray-900 dark:hover:border-white hover:shadow-md dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
                  title="Continue with GitHub account"
                  aria-label="Continue with GitHub"
                >
                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                    <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.222v 3.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" />
                  </svg>
                  <span>Continue with GitHub</span>
                  {busy && <span className="ml-auto animate-spin">⟳</span>}
                </button>
              )}
              
              {providers.facebook && (
                <button
                  onClick={() => handleOAuthSignIn("facebook")}
                  disabled={busy}
                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-600 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
                  title="Continue with Facebook account"
                  aria-label="Continue with Facebook"
                >
                  <svg className="w-5 h-5" 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>Continue with Facebook</span>
                  {busy && <span className="ml-auto animate-spin">⟳</span>}
                </button>
              )}
              
              {providers.discord && (
                <button
                  onClick={() => handleOAuthSignIn("discord")}
                  disabled={busy}
                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-indigo-500 hover:shadow-md dark:hover:border-indigo-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
                  title="Continue with Discord account"
                  aria-label="Continue with Discord"
                >
                  <svg className="w-5 h-5" 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>Continue with Discord</span>
                  {busy && <span className="ml-auto animate-spin">⟳</span>}
                </button>
              )}
            </div>
          </>
        )}

        <div className="text-center text-sm text-gray-600 dark:text-gray-400">
          {open === "login" ? "Don't have an account? " : "Already have an account? "}
          <button
            onClick={() => onSwitch(open === "login" ? "register" : "login")}
            className="text-primary hover:underline font-semibold"
            disabled={busy}
          >
            {open === "login" ? "Sign up" : "Sign in"}
          </button>
        </div>
      </div>
    </div>
  );
}

