"use client";

import * as React from "react";
import { KeyRound, Lock, ShieldAlert, ShieldCheck } from "lucide-react";
import { Button, Input, Spinner } from "@/components/ui";
import { SpinzaMark } from "@/components/brand/logo";
import { api, ApiClientError } from "@/lib/api";
import { useAdmin } from "./store";
import type { AdminIdentity } from "./types";
import { ErrorState } from "./primitives";

/** Gate: GET /api/admin/me → login form (401), restricted notice (403), or the console. */
export function AdminGate({ children }: { children: React.ReactNode }) {
  const status = useAdmin((s) => s.status);
  const error = useAdmin((s) => s.error);
  const check = useAdmin((s) => s.check);

  React.useEffect(() => {
    void check();
  }, [check]);

  if (status === "loading") {
    return (
      <div className="grid min-h-dvh place-items-center bg-bg text-fg-3">
        <div className="flex items-center gap-3 text-sm">
          <Spinner className="h-4 w-4" /> Checking admin session…
        </div>
      </div>
    );
  }
  if (status === "forbidden") return <Restricted message={error} />;
  if (status === "error") {
    return (
      <Frame>
        <ErrorState title="Admin API unreachable" error={error} onRetry={() => void check()} />
      </Frame>
    );
  }
  if (status === "unauthed") return <LoginScreen />;
  return <>{children}</>;
}

function Frame({ children }: { children: React.ReactNode }) {
  return (
    <div className="grid min-h-dvh place-items-center bg-bg px-4 py-10">
      <div className="w-full max-w-sm">
        <div className="mb-6 flex items-center justify-center gap-2 text-fg">
          <SpinzaMark className="h-7 w-7" />
          <span className="text-lg font-semibold tracking-tight">
            SPIN<span className="text-accent">ZA</span> <span className="ml-1 text-fg-3">Admin</span>
          </span>
        </div>
        {children}
      </div>
    </div>
  );
}

function Restricted({ message }: { message: string | null }) {
  return (
    <Frame>
      <div className="surface rounded-lg px-6 py-10 text-center">
        <div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-danger/10 text-danger">
          <ShieldAlert className="h-6 w-6" />
        </div>
        <h1 className="text-lg font-semibold tracking-tight">Admin access is restricted</h1>
        <p className="mt-2 text-[13px] text-fg-3">{message ?? "This console is only reachable from allow-listed addresses."}</p>
      </div>
    </Frame>
  );
}

function LoginScreen() {
  const signedIn = useAdmin((s) => s.signedIn);
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [totp, setTotp] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const [forbidden, setForbidden] = React.useState<string | null>(null);

  const totpOk = /^\d{6}$/.test(totp);
  const canSubmit = username.trim().length > 0 && password.length > 0 && totpOk && !busy;

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!canSubmit) return;
    setBusy(true);
    setError(null);
    try {
      const r = await api<{ admin: AdminIdentity }>("/api/admin/auth/login", { json: { username: username.trim(), password, totp } });
      signedIn(r.admin);
    } catch (err) {
      if (err instanceof ApiClientError) {
        if (err.status === 403) setForbidden(err.message);
        else if (err.status === 429) setError("Too many attempts. Wait a few minutes and try again.");
        else if (err.status === 401) setError("Invalid credentials.");
        else setError(err.message);
      } else setError("Unexpected error.");
      setPassword("");
      setTotp("");
    } finally {
      setBusy(false);
    }
  }

  if (forbidden) return <Restricted message={forbidden} />;

  return (
    <Frame>
      <form onSubmit={submit} className="surface rounded-lg p-6" noValidate>
        <div className="mb-5 flex items-center gap-2">
          <div className="grid h-8 w-8 place-items-center rounded-md bg-accent-soft text-accent-2">
            <Lock className="h-4 w-4" />
          </div>
          <div>
            <h1 className="text-[15px] font-semibold tracking-tight">Admin sign-in</h1>
            <p className="text-[12px] text-fg-3">Username, password and a 6-digit authenticator code.</p>
          </div>
        </div>
        <div className="space-y-3">
          <Input label="Username" name="username" autoComplete="username" autoCapitalize="none" spellCheck={false} value={username} onChange={(e) => setUsername(e.target.value)} autoFocus />
          <Input label="Password" name="password" type="password" autoComplete="current-password" value={password} onChange={(e) => setPassword(e.target.value)} />
          <Input label="Authenticator code" name="totp" inputMode="numeric" pattern="[0-9]*" maxLength={6} autoComplete="one-time-code" placeholder="000000" className="font-mono tracking-[0.3em]" value={totp} onChange={(e) => setTotp(e.target.value.replace(/\D/g, "").slice(0, 6))} error={totp.length > 0 && !totpOk ? "Enter the 6 digits from your authenticator app." : null} />
        </div>
        {error ? (
          <div role="alert" className="mt-4 flex items-start gap-2 rounded-sm border border-danger/30 bg-danger/10 px-3 py-2 text-[13px] text-danger">
            <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" /> {error}
          </div>
        ) : null}
        <Button type="submit" variant="accent" className="mt-5 w-full" loading={busy} disabled={!canSubmit}>
          <KeyRound className="h-4 w-4" /> Sign in
        </Button>
        <p className="mt-4 flex items-center justify-center gap-1.5 text-[11px] text-fg-4">
          <ShieldCheck className="h-3 w-3" /> Sessions expire after 12 hours. All actions are logged.
        </p>
      </form>
    </Frame>
  );
}