Sybil-2/web/src/components/auth/auth-screen.tsx

import { ShieldCheck } from "lucide-preact";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type Props = {
  authTokenInput: string;
  setAuthTokenInput: (value: string) => void;
  isSigningIn: boolean;
  authError: string | null;
  onSignIn: (tokenCandidate: string | null) => Promise<void>;
};

export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
  return (
    <div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#45215f_0%,#2a183d_45%,#191227_100%)] p-4">
      <div className="w-full max-w-md rounded-2xl border bg-[hsl(276_32%_14%)] p-6 shadow-xl shadow-violet-950/45">
        <div className="mb-5 flex items-start gap-3">
          <div className="rounded-lg bg-violet-200 p-2 text-violet-900">
            <ShieldCheck className="h-4 w-4" />
          </div>
          <div>
            <h1 className="text-lg font-semibold">Sign in to Sybil</h1>
            <p className="mt-1 text-sm text-muted-foreground">Use your backend admin token.</p>
          </div>
        </div>

        <form
          className="space-y-3"
          onSubmit={(event) => {
            event.preventDefault();
            void onSignIn(authTokenInput.trim() || null);
          }}
        >
          <Input
            type="password"
            autoComplete="off"
            placeholder="ADMIN_TOKEN"
            value={authTokenInput}
            onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
            disabled={isSigningIn}
          />
          <Button className="w-full" type="submit" disabled={isSigningIn}>
            {isSigningIn ? "Signing in..." : "Sign in"}
          </Button>
          <Button className="w-full" type="button" variant="secondary" disabled={isSigningIn} onClick={() => void onSignIn(null)}>
            Continue without token
          </Button>
        </form>

        {authError ? <p className="mt-3 text-sm text-red-600">{authError}</p> : null}
        <p className="mt-3 text-xs text-muted-foreground">If `ADMIN_TOKEN` is set in `/server/.env`, token login is required.</p>
      </div>
    </div>
  );
}