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="app-grid-surface app-safe-pad flex h-full items-center justify-center">
      <div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
        <div className="mb-6">
          <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
            SYBIL
          </div>
        </div>

        <div className="mb-5 flex items-start gap-3">
          <div className="rounded-lg border border-cyan-300/25 bg-cyan-400/12 p-2 text-cyan-200">
            <ShieldCheck className="h-4 w-4" />
          </div>
          <div>
            <h1 className="text-lg font-semibold text-violet-50">Sign in to Sybil</h1>
            <p className="mt-1 text-sm text-muted-foreground">Enter your admin token.</p>
          </div>
        </div>

        <form
          className="space-y-3"
          onSubmit={(event) => {
            event.preventDefault();
            const token = authTokenInput.trim();
            if (token) void onSignIn(token);
          }}
        >
          <Input
            type="password"
            autoComplete="off"
            aria-label="Admin token"
            placeholder="ADMIN_TOKEN"
            required
            value={authTokenInput}
            onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
            disabled={isSigningIn}
            className="bg-[hsl(235_48%_6%_/_0.84)] text-violet-50"
          />
          <Button className="w-full" type="submit" disabled={isSigningIn || !authTokenInput.trim()}>
            {isSigningIn ? "Signing in..." : "Sign in"}
          </Button>
        </form>

        {authError ? <p role="alert" className="mt-3 text-sm text-red-600">{authError}</p> : null}
      </div>
    </div>
  );
}