import { SignedIn, SignedOut, SignIn, SignUp, useAuth } from "@clerk/clerk-react";
import { useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import "./Auth.css";

const AuthPage = () => {
  const navigate = useNavigate();
  const { isSignedIn } = useAuth();
  const [searchParams] = useSearchParams();
  const mode = searchParams.get("mode"); // "signup" or null (signin)

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const redirectUrl = params.get("redirect");
    const next = redirectUrl || "/app";
    if (!isSignedIn) return;
    if (window.location.pathname.startsWith("/auth")) {
      navigate(next);
    }
  }, [isSignedIn, navigate]);

  return (
    <div className="auth-page">
      {/* Background */}
      <div className="auth-background">
        <div className="auth-gradient-orb orb-1"></div>
        <div className="auth-gradient-orb orb-2"></div>
        <div className="auth-gradient-orb orb-3"></div>
      </div>

      {/* Content */}
      <div className="auth-container">
        {/* Left Side - Branding */}
        <div className="auth-branding">
          <div className="auth-logo" onClick={() => navigate("/")}>
            <svg width="48" height="48" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="32" height="32" rx="8" fill="url(#authGradient)" />
              <path d="M10 16L14 20L22 12" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
              <defs>
                <linearGradient id="authGradient" x1="0" y1="0" x2="32" y2="32">
                  <stop stopColor="#6366f1" />
                  <stop offset="1" stopColor="#8b5cf6" />
                </linearGradient>
              </defs>
            </svg>
            <span>BasicNotion</span>
          </div>
          <h1 className="auth-title">
            {mode === "signup" ? "Start your journey" : "Welcome back"}
          </h1>
          <p className="auth-subtitle">
            {mode === "signup"
              ? "Create your account and start organizing your thoughts today."
              : "Sign in to continue to your notes and ideas."}
          </p>
          <div className="auth-features">
            <div className="auth-feature">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M22 4L12 14.01l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>Quick capture thoughts</span>
            </div>
            <div className="auth-feature">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M22 4L12 14.01l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>Sync across all devices</span>
            </div>
            <div className="auth-feature">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M22 4L12 14.01l-3-3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>AI-powered assistant</span>
            </div>
          </div>
        </div>

        {/* Right Side - Auth Form */}
        <div className="auth-form-container">
          <SignedOut>
            {mode === "signup" ? (
              <SignUp
                appearance={{
                  elements: {
                    rootBox: "clerk-root-box",
                    card: "clerk-card",
                    headerTitle: "clerk-header-title",
                    headerSubtitle: "clerk-header-subtitle",
                    socialButtonsBlockButton: "clerk-social-btn",
                    formFieldInput: "clerk-input",
                    formButtonPrimary: "clerk-primary-btn",
                    footerActionLink: "clerk-footer-link",
                  },
                  variables: {
                    colorPrimary: "#6366f1",
                    colorBackground: "#ffffff",
                    colorText: "#111827",
                    colorTextSecondary: "#6b7280",
                    colorInputBackground: "#f9fafb",
                    colorInputText: "#111827",
                    borderRadius: "12px",
                  },
                }}
                routing="path"
                path="/auth"
                signInUrl="/auth"
                fallbackRedirectUrl="/app"
              />
            ) : (
              <SignIn
                appearance={{
                  elements: {
                    rootBox: "clerk-root-box",
                    card: "clerk-card",
                    headerTitle: "clerk-header-title",
                    headerSubtitle: "clerk-header-subtitle",
                    socialButtonsBlockButton: "clerk-social-btn",
                    formFieldInput: "clerk-input",
                    formButtonPrimary: "clerk-primary-btn",
                    footerActionLink: "clerk-footer-link",
                  },
                  variables: {
                    colorPrimary: "#6366f1",
                    colorBackground: "#ffffff",
                    colorText: "#111827",
                    colorTextSecondary: "#6b7280",
                    colorInputBackground: "#f9fafb",
                    colorInputText: "#111827",
                    borderRadius: "12px",
                  },
                }}
                routing="path"
                path="/auth"
                signUpUrl="/auth?mode=signup"
                fallbackRedirectUrl="/app"
              />
            )}
          </SignedOut>
          <SignedIn>
            <div className="auth-signed-in">
              <div className="auth-signed-in-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M22 4L12 14.01l-3-3" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <h2>You're signed in!</h2>
              <p>You're already logged in to your account.</p>
              <button
                type="button"
                className="auth-go-to-app"
                onClick={() => navigate("/app")}
              >
                Go to Dashboard
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.167 10h11.666M10 4.167L15.833 10 10 15.833" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </div>
          </SignedIn>
        </div>
      </div>

      {/* Back to Landing */}
      <button className="auth-back-btn" onClick={() => navigate("/")}>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.833 10H4.167M10 15.833L4.167 10 10 4.167" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        Back to home
      </button>
    </div>
  );
};

export default AuthPage;
