"use client";

import { useActionState, useState } from "react";
import { addSshKeyAction } from "@/app/actions/settings";
import type { FormState } from "@/app/actions/types";
import { PlusIcon } from "@/components/icons";
import { TextareaField, TextField } from "@/components/settings-fields";
import { PlateBody, PlateFooter } from "@/components/settings-plate";
import { Alert, Button } from "@/components/ui";

export function AddKeyForm() {
  // A fresh set of fields after each key is added (the textarea keeps its own height state).
  const [round, setRound] = useState(0);
  const [state, action, pending] = useActionState(async (prev: FormState, formData: FormData) => {
    const result = await addSshKeyAction(prev, formData);
    if (result?.success) setRound((n) => n + 1);
    return result;
  }, undefined);

  return (
    <form action={action}>
      <PlateBody key={round} className="max-w-2xl">
        <TextField label="Title" description="Something to recognize the machine by, e.g. “Work laptop”." name="title" maxLength={100} />
        <TextareaField
          label="Key"
          name="key"
          required
          minRows={5}
          spellCheck={false}
          placeholder="Begins with 'ssh-ed25519', 'ssh-rsa', or 'ecdsa-sha2-nistp256'"
          mono
        />
        {state?.error && <Alert>{state.error}</Alert>}
        {state?.success && <Alert kind="success">{state.success}</Alert>}
      </PlateBody>
      <PlateFooter>
        <Button variant="primary" icon={<PlusIcon />} disabled={pending}>
          {pending ? "Adding…" : "Add SSH Key"}
        </Button>
      </PlateFooter>
    </form>
  );
}