"use client";

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

export function DeleteBotButton({ botId }: { botId: string }) {
  const router = useRouter();
  const [confirm, setConfirm] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    setLoading(true);
    await fetch(`/api/bots/${botId}`, { method: "DELETE" });
    router.push("/bots");
  }

  if (confirm) {
    return (
      <div className="flex items-center gap-2">
        <span className="text-sm text-slate-400">Sigur vrei sa stergi?</span>
        <button
          onClick={handleDelete}
          disabled={loading}
          className="text-sm bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-lg transition-colors disabled:opacity-60"
        >
          {loading ? "Se sterge..." : "Da, sterge"}
        </button>
        <button
          onClick={() => setConfirm(false)}
          className="text-sm text-slate-400 hover:text-white px-3 py-1.5 rounded-lg hover:bg-white/[0.06] transition-colors border border-white/[0.06]"
        >
          Anuleaza
        </button>
      </div>
    );
  }

  return (
    <button
      onClick={() => setConfirm(true)}
      className="flex items-center gap-1.5 text-sm text-slate-500 hover:text-red-400 px-3 py-1.5 rounded-lg hover:bg-red-500/10 border border-transparent hover:border-red-500/20 transition-all"
    >
      <Trash2 className="w-4 h-4" />
      Sterge
    </button>
  );
}