"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { buttonClass } from "@/components/ui";

export default function SendCampaignButton({ campaignId }: { campaignId: string }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleClick() {
    if (!confirm("Queue this campaign for sending? This can't be undone.")) return;
    setLoading(true);
    setError(null);
    const res = await fetch(`/api/campaigns/${campaignId}/send`, { method: "POST" });
    const data = await res.json().catch(() => ({}));
    setLoading(false);
    if (!res.ok) {
      setError(data.error || "Could not queue campaign");
      return;
    }
    router.refresh();
  }

  return (
    <div>
      <button type="button" onClick={handleClick} disabled={loading} className={buttonClass("primary")}>
        {loading ? "Queueing…" : "Send campaign"}
      </button>
      {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
    </div>
  );
}