io

2026-05-03 17:01:46 +03:30
parent b5ad5420b2
commit 9c30295b4b
76 changed files with 7891 additions and 461 deletions
--- a/app/(admin)/admin/quiz/LotteryButton.tsx
+++ b/app/(admin)/admin/quiz/LotteryButton.tsx
@@ -0,0 +1,123 @@
+"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>
+      )}
+    </>
+  );
+}