"use client";

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

type LotteryButtonProps = {
  quizId: string;
  goldWinnersCount: number;
  silverWinnersCount: number;
  bronzeWinnersCount: number;
  totalParticipants: number;
  perfectParticipants: number;
};

export default function LotteryButton({
  quizId,
  goldWinnersCount,
  silverWinnersCount,
  bronzeWinnersCount,
  totalParticipants,
  perfectParticipants,
}: LotteryButtonProps) {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<string | null>(null);
  const [open, setOpen] = useState(false);
  const router = useRouter();

  const correctPercentage = totalParticipants > 0
    ? Math.round((perfectParticipants / totalParticipants) * 100)
    : 0;
  const incorrectParticipants = Math.max(totalParticipants - perfectParticipants, 0);
  const totalWinnersCount = goldWinnersCount + silverWinnersCount + bronzeWinnersCount;

  async function run() {
    setLoading(true);

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

    if (res.ok) {
      setResult(`${data.winners.length} برنده انتخاب شد`);
      setOpen(false);
      router.refresh();
    } else {
      setResult(data.error ?? "خطا");
    }

    setLoading(false);
  }

  return (
    <>
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={() => setOpen(true)}
          disabled={loading}
          className="bg-yellow-500 text-black text-xs px-3 py-1 rounded-lg hover:bg-yellow-400 transition disabled:opacity-50"
        >
          {loading ? "..." : "قرعه‌کشی"}
        </button>
        {result && <span className="text-xs text-gray-500">{result}</span>}
      </div>

      {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>

            <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
              <div className="rounded-xl bg-slate-50 p-3">
                <div className="text-slate-500">کل شرکت‌کنندگان</div>
                <div className="mt-1 text-xl font-bold text-slate-900">{totalParticipants}</div>
              </div>

              <div className="rounded-xl bg-emerald-50 p-3">
                <div className="text-emerald-700">واجد دریافت کارت</div>
                <div className="mt-1 text-xl font-bold text-emerald-800">{perfectParticipants} نفر</div>
                <div className="text-xs text-emerald-700">{correctPercentage}%</div>
              </div>

              <div className="rounded-xl bg-rose-50 p-3">
                <div className="text-rose-700">سایر شرکت‌کنندگان</div>
                <div className="mt-1 text-xl font-bold text-rose-800">{incorrectParticipants} نفر</div>
                <div className="text-xs text-rose-700">{Math.max(100 - correctPercentage, 0)}%</div>
              </div>

              <div className="rounded-xl bg-amber-50 p-3">
                <div className="text-amber-700">تعداد برنده</div>
                <div className="mt-1 text-xl font-bold text-amber-800">{totalWinnersCount} نفر</div>
                <div className="text-xs text-amber-700">
                  G:{goldWinnersCount} | S:{silverWinnersCount} | B:{bronzeWinnersCount}
                </div>
              </div>
            </div>

            <div className="mt-6 flex justify-end gap-3">
              <button
                type="button"
                onClick={() => setOpen(false)}
                disabled={loading}
                className="rounded-xl border border-slate-200 px-4 py-2 text-sm text-slate-700 transition hover:bg-slate-50 disabled:opacity-50"
              >
                انصراف
              </button>
              <button
                type="button"
                onClick={run}
                disabled={loading}
                className="rounded-xl bg-yellow-500 px-4 py-2 text-sm font-bold text-black transition hover:bg-yellow-400 disabled:opacity-50"
              >
                {loading ? "در حال اجرا..." : "اعمال قرعه‌کشی"}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}