"use client";

import { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { api } from "@/lib/api";
import { useSession } from "@/lib/store";
import { Button, Input, Skeleton } from "@/components/ui";

function safeNext(raw: string | null): string {
  if (!raw || !raw.startsWith("/") || raw.startsWith("//")) return "/";
  return raw;
}

function LoginForm() {
  const router = useRouter();
  const params = useSearchParams();
  const next = safeNext(params.get("next"));
  const expired = params.get("reason") === "expired";
  const refresh = useSession((s) => s.refresh);
  const status = useSession((s) => s.status);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (status === "authenticated" && !busy) router.replace(next);
  }, [status, busy, next, router]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    setError(null);
    try {
      await api("/api/auth/login", { json: { username: username.trim().toLowerCase(), password } });
      await refresh();
      router.push(next);
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Invalid username or password.");
      setBusy(false);
    }
  };

  return (
    <div className="surface rounded-xl p-6 sm:p-8">
      <div className="mb-6">
        <div className="eyebrow mb-2">Sign in</div>
        <h1 className="text-2xl font-semibold tracking-tight">Welcome back.</h1>
        <p className="mt-1.5 text-sm text-fg-3">Your credits, streak and progress are exactly where you left them.</p>
      </div>

      {expired ? (
        <p className="mb-4 rounded-md border border-line-2 bg-surface-2 px-4 py-3 text-sm text-fg-2" role="status">
          Your session expired. Sign in to continue.
        </p>
      ) : null}

      <form onSubmit={submit} className="space-y-4" noValidate>
        <Input label="Username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" autoCapitalize="none" autoCorrect="off" spellCheck={false} placeholder="your username" required />
        <Input label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" placeholder="your password" required />
        {error ? (
          <p className="rounded-md border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger" role="alert">
            {error}
          </p>
        ) : null}
        <Button type="submit" size="lg" className="w-full" loading={busy} disabled={!username || !password}>
          Sign in
        </Button>
      </form>

      <div className="mt-6 flex flex-col items-center gap-2 text-sm text-fg-3">
        <Link href="/recover" className="tap inline-flex h-9 min-h-0 items-center font-medium text-fg-2 underline-offset-4 hover:underline">
          Forgot your password? Use your recovery code
        </Link>
        <p>
          New to Spinza?{" "}
          <Link href={next !== "/" ? `/register?next=${encodeURIComponent(next)}` : "/register"} className="font-medium text-accent-2 underline-offset-4 hover:underline">
            Create a free account
          </Link>
        </p>
      </div>
    </div>
  );
}

export default function LoginPage() {
  return (
    <Suspense
      fallback={
        <div className="surface rounded-xl p-6 sm:p-8" aria-busy>
          <Skeleton className="h-7 w-40" />
          <Skeleton className="mt-6 h-12 w-full" />
          <Skeleton className="mt-4 h-12 w-full" />
          <Skeleton className="mt-4 h-12 w-full" />
        </div>
      }
    >
      <LoginForm />
    </Suspense>
  );
}