"use client";

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

type QuizDeleteButtonProps = {
  quizId: string;
  submissionsCount: number;
};

export default function QuizDeleteButton({ quizId, submissionsCount }: QuizDeleteButtonProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleDelete() {
    setLoading(true);
    setError(null);

    const res = await fetch(`/api/admin/quiz/${quizId}`, { method: "DELETE" });
    const data = await res.json();

    if (res.ok) {
      setOpen(false);
      router.refresh();
      return;
    }

    setError(data.error ?? "خطا در حذف کوئیز");
    setLoading(false);
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="text-red-600 hover:underline text-xs"
      >
        حذف
      </button>

      {open && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl">
            <h3 className="text-lg font-bold text-gray-900">حذف کوئیز</h3>
            <p className="mt-2 text-sm leading-6 text-gray-600">
              با حذف کوئیز، تمام سوال‌ها و تمام پاسخ‌های ثبت‌شده‌ی این کوئیز هم پاک می‌شوند.
            </p>

            {submissionsCount > 0 && (
              <div className="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                {submissionsCount} کاربر به این کوئیز پاسخ داده‌اند. آیا از حذف آن مطمئن هستید؟
              </div>
            )}

            {error && <p className="mt-4 text-sm text-red-600">{error}</p>}

            <div className="mt-6 flex justify-end gap-3">
              <button
                type="button"
                onClick={() => {
                  if (loading) return;
                  setOpen(false);
                  setError(null);
                }}
                className="rounded-xl border border-slate-200 px-4 py-2 text-sm text-slate-700 transition hover:bg-slate-50"
              >
                انصراف
              </button>
              <button
                type="button"
                onClick={handleDelete}
                disabled={loading}
                className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-red-500 disabled:opacity-50"
              >
                {loading ? "در حال حذف..." : "حذف نهایی"}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}
