import { useState } from "react";

import { FormActions } from "@/client/components/ui/form-actions";
import { Input } from "@/client/components/ui/input";

export interface InviteFormValues {
  email: string;
  days: number;
}

interface InviteFormProps {
  pending: boolean;
  error?: string | null;
  onDismissError?: () => void;
  onSubmit: (values: InviteFormValues) => Promise<void>;
  onCancel: () => void;
}

export const InviteForm = ({ pending, error, onDismissError, onSubmit, onCancel }: InviteFormProps) => {
  const [email, setEmail] = useState("");
  const [days, setDays] = useState(7);

  const trimmedEmail = email.trim();
  const canSubmit = trimmedEmail.length > 0 && days >= 1 && days <= 90;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (pending || !canSubmit) return;
    await onSubmit({ email: trimmedEmail, days });
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <Input
        label="Email"
        helper="The invite is bound to this address; the recipient must use it to sign up."
        type="email"
        required
        autoFocus
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <Input
        label="Expires in (days)"
        type="number"
        min={1}
        max={90}
        value={days}
        onChange={(e) => setDays(Number(e.target.value))}
      />
      <FormActions
        pending={pending}
        error={error}
        onDismissError={onDismissError}
        submitLabel="Mint invite"
        onCancel={onCancel}
        submitDisabled={!canSubmit}
      />
    </form>
  );
};