"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export function BotStatusToggle({ botId, status }: { botId: string; status: string }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const isActive = status === "ACTIVE";

  async function toggle() {
    setLoading(true);
    await fetch(`/api/bots/${botId}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: isActive ? "DRAFT" : "ACTIVE" }),
    });
    setLoading(false);
    router.refresh();
  }

  return (
    <button
      onClick={toggle}
      disabled={loading}
      className={`flex items-center gap-2.5 px-4 py-2 rounded-xl text-sm font-semibold transition-all disabled:opacity-50 ${
        isActive
          ? "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-red-500/10 hover:border-red-500/20 hover:text-red-400"
          : "bg-amber-500/10 border border-amber-500/20 text-amber-400 hover:bg-emerald-500/10 hover:border-emerald-500/20 hover:text-emerald-400"
      }`}
    >
      <span className={`w-2 h-2 rounded-full ${isActive ? "bg-emerald-400" : "bg-amber-400"} ${loading ? "opacity-50" : "animate-pulse"}`} />
      {loading ? "Se schimba..." : isActive ? "Activ" : "Draft — Activeaza"}
    </button>
  );
}