'use client';

import { useActionState, useState } from 'react';
import { createApiKeyAction } from '@/lib/auth/account-actions';
import { idle } from '@/lib/auth/state';
import { Field, FormMessage, SubmitButton, TextInput } from '@/components/account/form';

export function CreateKeyForm() {
  const [state, action] = useActionState(createApiKeyAction, idle);
  const [copied, setCopied] = useState(false);
  const secret = state.data?.secret as string | undefined;
  return (
    <form action={action} className="space-y-3" noValidate>
      <FormMessage state={state} />
      {secret ? (
        <div className="rounded-md border border-alert/40 bg-alert-bg p-3">
          <p className="mono-num break-all text-xs">{secret}</p>
          <button
            type="button"
            className="mt-2 h-8 rounded-md border border-border bg-elevated px-2.5 text-xs font-medium"
            onClick={async () => {
              await navigator.clipboard.writeText(secret);
              setCopied(true);
            }}
          >
            {copied ? 'Copied' : 'Copy key'}
          </button>
        </div>
      ) : null}
      <Field label="Key name" name="name" error={state.fieldErrors?.name}>
        <TextInput name="name" placeholder="e.g. Research notebook" maxLength={60} required />
      </Field>
      <SubmitButton pendingText="Creating…">Create key</SubmitButton>
    </form>
  );
}