"use client";

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

export default function DeleteMatchButton({ matchId, hasEvents }: { matchId: string; hasEvents: boolean }) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);

  async function handleDelete() {
    setLoading(true);
    const res = await fetch(`/api/matches/${matchId}`, {
      method: "DELETE",
    });
    
    if (res.ok) {
      router.refresh();
    } else {
      const data = await res.json();
      alert(data.error || "خطا در حذف");
    }
    setLoading(false);
    setShowConfirm(false);
  }

  return (
    <>
      <button onClick={() => setShowConfirm(true)}
        className="bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm hover:bg-red-700 transition">
        حذف
      </button>
      
      {showConfirm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowConfirm(false)}>
          <div className="bg-white rounded-2xl p-6 max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
            <h3 className="text-lg font-bold mb-3">حذف بازی</h3>
            <p className="text-gray-600 mb-2">آیا مطمئن هستید که می‌خواهید این بازی را حذف کنید؟</p>
            {hasEvents && (
              <p className="text-red-600 text-sm mb-4">⚠️ این بازی دارای {hasEvents} رویداد است که همگی حذف خواهند شد.</p>
            )}
            <div className="flex gap-3">
              <button onClick={handleDelete} disabled={loading}
                className="flex-1 bg-red-600 text-white py-2 rounded-xl font-bold hover:bg-red-700 transition disabled:opacity-50">
                {loading ? "در حال حذف..." : "بله، حذف شود"}
              </button>
              <button onClick={() => setShowConfirm(false)}
                className="flex-1 bg-gray-200 text-gray-700 py-2 rounded-xl font-bold hover:bg-gray-300 transition">
                انصراف
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
