"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useEffect, useState } from "react";
import { api, ApiError } from "@/lib/api";

function LoginForm() {
  const router = useRouter();
  const params = useSearchParams();
  const [needsSetup, setNeedsSetup] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    api.get<{ needs_setup: boolean; authenticated: boolean }>("/api/auth/status").then((s) => {
      setNeedsSetup(s.needs_setup);
      if (s.authenticated) router.replace(params.get("next") || "/");
    }).catch(() => {});
  }, [router, params]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    if (needsSetup && password !== confirm) return setError("Passwords do not match.");
    setBusy(true);
    try {
      await api.post(needsSetup ? "/api/auth/setup" : "/api/auth/login", { email, password });
      router.replace(params.get("next") || "/");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "Login failed");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="min-h-screen grid place-items-center p-6">
      <form onSubmit={submit} className="card w-full max-w-sm p-7 flex flex-col gap-4">
        <div className="flex items-center gap-2.5 mb-1">
          <div className="h-8 w-8 rounded-lg bg-accent grid place-items-center text-white font-bold">λ</div>
          <div>
            <div className="font-semibold tracking-tight">LLM API</div>
            <div className="text-xs text-ink-3">{needsSetup ? "Create the administrator account" : "Sign in to the console"}</div>
          </div>
        </div>
        <label className="flex flex-col gap-1 text-sm">
          <span className="label">Email</span>
          <input className="input" type="email" autoComplete="username" value={email} onChange={(e) => setEmail(e.target.value)} required />
        </label>
        <label className="flex flex-col gap-1 text-sm">
          <span className="label">Password</span>
          <input className="input" type="password" autoComplete={needsSetup ? "new-password" : "current-password"} value={password} onChange={(e) => setPassword(e.target.value)} required minLength={needsSetup ? 10 : 1} />
        </label>
        {needsSetup && (
          <label className="flex flex-col gap-1 text-sm">
            <span className="label">Confirm password</span>
            <input className="input" type="password" autoComplete="new-password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required />
          </label>
        )}
        {error && <div className="text-sm text-bad">{error}</div>}
        <button className="btn btn-primary h-9" disabled={busy}>{busy ? "…" : needsSetup ? "Create account" : "Sign in"}</button>
        <div className="text-[11px] text-ink-3 text-center">Private system · all access is logged</div>
      </form>
    </div>
  );
}

export default function LoginPage() {
  return <Suspense><LoginForm /></Suspense>;
}