"use client";

import { useActionState } from "react";
import { sendTestAction, type SendTestResult } from "@/actions/groups";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

const initial: SendTestResult | null = null;

export function SendTestForm({ groupId }: { groupId: string }) {
  const [state, formAction, isPending] = useActionState(sendTestAction, initial);
  return (
    <form action={formAction} className="space-y-3">
      <input type="hidden" name="groupId" value={groupId} />
      <div>
        <Label htmlFor="text" className="text-sm">
          Message
        </Label>
        <Textarea
          id="text"
          name="text"
          placeholder="What should I send to this group?"
          rows={4}
          required
          maxLength={4000}
          className="mt-1"
        />
      </div>
      {state?.ok === false && (
        <p className="text-sm text-destructive" role="alert">
          {state.error}
        </p>
      )}
      {state?.ok === true && (
        <p className="text-sm text-green-600 dark:text-green-400" role="status">
          {state.message}
        </p>
      )}
      <div className="flex justify-end">
        <Button type="submit" disabled={isPending}>
          {isPending ? "Sending…" : "Send Test"}
        </Button>
      </div>
    </form>
  );
}