"use client";
import { useActionState } from "react";
import { FormMessage, SubmitButton } from "@/components/forms";
import { NarrowCard } from "@/components/narrow-card";
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { approveDevice } from "./actions";

export function DeviceForm({ code, username }: { code: string; username: string }) {
  const [state, action] = useActionState(approveDevice, null);

  if (state && !state.error)
    return <NarrowCard title="T5DE is signed in" description="You can close this page and go back to T5DE." />;

  return (
    <NarrowCard title="Sign T5DE in" description={`Enter the code T5DE shows, to sign it in as ${username}.`}>
      <form action={action}>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="code">Code</FieldLabel>
            <Input
              id="code"
              name="code"
              defaultValue={code}
              placeholder="XXXX-XXXX"
              required
              autoFocus
              autoComplete="off"
              spellCheck={false}
              className="h-11 text-center font-mono text-lg tracking-widest uppercase"
            />
          </Field>
          <FormMessage state={state} />
          <Field>
            <SubmitButton pendingLabel="Signing in…">Sign in</SubmitButton>
            <FieldDescription>Only enter a code you got from T5DE yourself.</FieldDescription>
          </Field>
        </FieldGroup>
      </form>
    </NarrowCard>
  );
}