"use client";

import { Suspense, useEffect, useState, type FormEvent } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useDocumentTitle } from "@/hooks/useDocumentTitle";
import { extractErrorMessage } from "@/lib/api/client";
import { resetPassword } from "@/lib/auth/auth-service";
import { useAuth } from "@/components/providers/AuthProvider";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Spinner } from "@/components/ui/Spinner";

type View = "sign-in" | "sign-up" | "forgot-password";

function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl") || "/";
  const { signInWithGoogle, signInWithEmail, signUpWithEmail, authEnabled } =
    useAuth();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [view, setView] = useState<View>("sign-in");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    if (!authEnabled) {
      router.replace("/");
    }
  }, [authEnabled, router]);

  if (!authEnabled) {
    return (
      <div className="flex h-full items-center justify-center">
        <Spinner size="lg" />
      </div>
    );
  }

  function switchView(next: View) {
    setView(next);
    setError(null);
    setSuccess(null);
  }

  async function handleEmailSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      if (view === "sign-up") {
        await signUpWithEmail(email, password);
      } else {
        await signInWithEmail(email, password);
      }
      router.push(callbackUrl);
    } catch (err) {
      setError(extractErrorMessage(err));
    } finally {
      setSubmitting(false);
    }
  }

  async function handleResetPassword(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setSuccess(null);
    setSubmitting(true);
    try {
      await resetPassword(email);
      setSuccess("Password reset email sent. Check your inbox.");
    } catch (err) {
      setError(extractErrorMessage(err));
    } finally {
      setSubmitting(false);
    }
  }

  async function handleGoogleSignIn() {
    setError(null);
    setSubmitting(true);
    try {
      await signInWithGoogle();
      router.push(callbackUrl);
    } catch (err) {
      setError(extractErrorMessage(err));
    } finally {
      setSubmitting(false);
    }
  }

  if (view === "forgot-password") {
    return (
      <div className="relative z-10 w-full max-w-sm border-engraved bg-surface p-8 animate-fade-in">
        <div className="mb-8 text-center">
          <h1 className="text-xl font-mono text-primary tracking-tight">
            PandaProbe
          </h1>
          <p className="mt-1 text-xs text-text-dim">Reset your password</p>
        </div>

        <form onSubmit={handleResetPassword} className="space-y-4">
          <div>
            <Input
              type="email"
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              autoFocus
            />
          </div>

          {error && <p className="text-xs text-error font-mono">{error}</p>}
          {success && (
            <p className="text-xs text-success font-mono">{success}</p>
          )}

          <Button type="submit" className="w-full" disabled={submitting}>
            {submitting ? <Spinner size="sm" /> : "Send reset link"}
          </Button>
        </form>

        <p className="mt-6 text-center text-xs text-text-muted">
          Remember your password?{" "}
          <button
            type="button"
            onClick={() => switchView("sign-in")}
            className="text-text-dim hover:text-text underline underline-offset-4 transition-colors"
          >
            Back to sign in
          </button>
        </p>
      </div>
    );
  }

  return (
    <div className="relative z-10 w-full max-w-sm border-engraved bg-surface p-8 animate-fade-in">
      <div className="mb-8 text-center">
        <h1 className="text-xl font-mono text-primary tracking-tight">
          PandaProbe
        </h1>
        <p className="mt-1 text-xs text-text-dim">Agent engineering platform</p>
      </div>

      <Button
        variant="secondary"
        className="w-full mb-6"
        onClick={handleGoogleSignIn}
        disabled={submitting}
      >
        {submitting ? (
          <Spinner size="sm" />
        ) : (
          <>
            <svg className="h-4 w-4" viewBox="0 0 24 24">
              <path
                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
                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>
            Continue with Google
          </>
        )}
      </Button>

      <div className="relative mb-6">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t border-border" />
        </div>
        <div className="relative flex justify-center text-xs">
          <span className="bg-surface px-2 text-text-muted">or</span>
        </div>
      </div>

      <form onSubmit={handleEmailSubmit} className="space-y-4">
        <div>
          <Input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            autoComplete="email"
          />
        </div>
        <div>
          <Input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            autoComplete={
              view === "sign-up" ? "new-password" : "current-password"
            }
            minLength={6}
          />
        </div>

        {view === "sign-in" && (
          <div className="flex justify-start">
            <button
              type="button"
              onClick={() => switchView("forgot-password")}
              className="text-xs text-text-muted hover:text-text underline underline-offset-4 transition-colors"
            >
              Forgot password?
            </button>
          </div>
        )}

        {error && <p className="text-xs text-error font-mono">{error}</p>}

        <Button type="submit" className="w-full" disabled={submitting}>
          {submitting ? (
            <Spinner size="sm" />
          ) : view === "sign-up" ? (
            "Create account"
          ) : (
            "Sign in"
          )}
        </Button>
      </form>

      <p className="mt-6 text-center text-xs text-text-muted">
        {view === "sign-up"
          ? "Already have an account?"
          : "Don't have an account?"}{" "}
        <button
          type="button"
          onClick={() => switchView(view === "sign-up" ? "sign-in" : "sign-up")}
          className="text-text-dim hover:text-text underline underline-offset-4 transition-colors"
        >
          {view === "sign-up" ? "Sign in" : "Create one"}
        </button>
      </p>
    </div>
  );
}

export default function LoginPage() {
  useDocumentTitle("Login");
  return (
    <Suspense
      fallback={
        <div className="flex h-full items-center justify-center">
          <Spinner size="lg" />
        </div>
      }
    >
      <LoginForm />
    </Suspense>
  );
}
