"use client";
import { Gauge } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";
import { api, ApiError } from "@/lib/api";
import { Button, Field, Input } from "@/components/ui";

function LoginForm() {
  const router = useRouter();
  const params = useSearchParams();
  const [pw, setPw] = useState("");
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setErr(null);
    try {
      await api("/api/auth/login", { method: "POST", json: { password: pw } });
      const next = params.get("next");
      router.replace(next && next.startsWith("/") ? next : "/");
    } catch (e) {
      setErr(e instanceof ApiError ? e.message : "login failed");
    } finally {
      setBusy(false);
    }
  }
  return (
    <form onSubmit={submit} className="w-full max-w-sm rounded-lg border border-line bg-bg-elev p-6">
      <div className="mb-5 flex items-center gap-2">
        <Gauge className="h-5 w-5 text-accent" aria-hidden />
        <div>
          <h1 className="text-base font-semibold">ktrade</h1>
          <p className="text-xs text-fg-muted">Kraken quantitative trading terminal — owner access</p>
        </div>
      </div>
      <Field label="Owner password" htmlFor="pw">
        <Input id="pw" type="password" autoComplete="current-password" value={pw} onChange={(e) => setPw(e.target.value)} required autoFocus />
      </Field>
      {err && <p role="alert" className="mt-3 text-xs text-down">{err}</p>}
      <Button type="submit" variant="primary" className="mt-4 w-full" loading={busy}>Sign in</Button>
      <p className="mt-4 text-[11px] text-fg-dim">Sessions are HttpOnly cookies signed server-side. Live trading stays disabled regardless of login.</p>
    </form>
  );
}

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center p-4">
      <Suspense>
        <LoginForm />
      </Suspense>
    </div>
  );
}