'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { startConversationWithVendor, type StartConversationState } from '@/app/account/messages/actions';

const initialState: StartConversationState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
      {pending ? 'Sending…' : 'Send Message'}
    </button>
  );
}

export function StartConversationForm({ vendorId, redirectTo }: { vendorId: number; redirectTo: string }) {
  const [state, formAction] = useFormState(startConversationWithVendor, initialState);
  const errors = state?.errors ?? {};

  return (
    <form action={formAction} className="space-y-3">
      <input type="hidden" name="vendor_id" value={vendorId} />
      <input type="hidden" name="redirect_to" value={redirectTo} />

      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
          <ul className="list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <textarea
        name="message"
        rows={3}
        required
        maxLength={2000}
        placeholder="Hi, I have a question about..."
        className="w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
      />
      <SubmitButton />
    </form>
  );
}