"use client";

import { useEffect, useState, useActionState, startTransition, ReactNode } from "react";
import { useFormStatus } from "react-dom";
import Image from "next/image";
import Link from "next/link";
import { X, ChevronRight, ChevronLeft, Megaphone, Clock3, CalendarDays, Loader2, Vote, BrainCircuit, Trophy, Gamepad2, BadgeCheck, LogIn, Smartphone, Download, Share2, PlusSquare, Sparkles } from "lucide-react";
import { g2j, J_MONTHS, WEEKDAYS, faNum } from "@/lib/jalali";
import { verifyNationalCode, submitSurveyResponse, submitRiddleAnswer } from "@/lib/actions";

/* ---------------- PWA ---------------- */
let deferredPromptEvent: any = null;

export function PWARegister() {
  useEffect(() => {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("/sw.js").catch(() => {});
    }
    const handler = (e: Event) => {
      e.preventDefault();
      deferredPromptEvent = e;
      window.dispatchEvent(new Event("pwa-prompt-available"));
    };
    window.addEventListener("beforeinstallprompt", handler);
    return () => window.removeEventListener("beforeinstallprompt", handler);
  }, []);
  return null;
}

export function InstallAppButton({ className = "" }: { className?: string }) {
  const [modalOpen, setModalOpen] = useState(false);
  const [canDirectInstall, setCanDirectInstall] = useState(false);

  useEffect(() => {
    if (deferredPromptEvent) setCanDirectInstall(true);
    const onPrompt = () => setCanDirectInstall(true);
    window.addEventListener("pwa-prompt-available", onPrompt);
    return () => window.removeEventListener("pwa-prompt-available", onPrompt);
  }, []);

  const handleClick = async () => {
    if (deferredPromptEvent) {
      try {
        deferredPromptEvent.prompt();
        const choice = await deferredPromptEvent.userChoice;
        if (choice.outcome === "accepted") {
          deferredPromptEvent = null;
          setCanDirectInstall(false);
          return;
        }
      } catch {
        // Fallback to modal
      }
    }
    setModalOpen(true);
  };

  return (
    <>
      <button
        onClick={handleClick}
        className={`inline-flex items-center gap-2 rounded-full border-2 border-emerald-800 bg-white px-4 py-2 text-xs font-black text-emerald-950 shadow-md transition hover:bg-emerald-50 active:scale-[0.97] ${className}`}
        title="نصب اپلیکیشن مدرسه روی گوشی"
      >
        <Smartphone size={16} className="text-emerald-700" />
        <span>نصب در گوشی (PWA)</span>
      </button>

      {modalOpen && <PwaInstallModal onClose={() => setModalOpen(false)} />}
    </>
  );
}

export function PwaInstallBanner() {
  const [visible, setVisible] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    // Only show banner if not already installed as standalone
    const isStandalone = window.matchMedia("(display-mode: standalone)").matches || (window.navigator as any).standalone;
    if (!isStandalone && !sessionStorage.getItem("hide_pwa_banner")) {
      setVisible(true);
    }
  }, []);

  if (!visible) return null;

  return (
    <>
      <div className="fixed bottom-3 right-3 left-3 z-[70] mx-auto max-w-lg anim-pop">
        <div className="flex items-center justify-between gap-3 rounded-2xl border-2 border-emerald-700 bg-white p-3.5 shadow-2xl shadow-emerald-950/30">
          <div className="flex items-center gap-2.5">
            <div className="grid size-11 place-items-center rounded-xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300 shadow">
              <Smartphone size={22} />
            </div>
            <div>
              <div className="text-xs font-black text-emerald-950">نصب اپلیکیشن شهید باهنر</div>
              <div className="text-[11px] text-emerald-800/70">دسترسی سریع و بدون نیاز به دانلود از بازار</div>
            </div>
          </div>
          <div className="flex items-center gap-1.5">
            <button
              onClick={() => {
                if (deferredPromptEvent) {
                  deferredPromptEvent.prompt();
                } else {
                  setModalOpen(true);
                }
              }}
              className="rounded-xl bg-emerald-700 px-3 py-2 text-xs font-black text-white shadow hover:bg-emerald-800"
            >
              نصب
            </button>
            <button
              onClick={() => {
                sessionStorage.setItem("hide_pwa_banner", "1");
                setVisible(false);
              }}
              className="grid size-8 place-items-center rounded-lg text-emerald-900/50 hover:bg-emerald-900/5"
            >
              <X size={16} />
            </button>
          </div>
        </div>
      </div>

      {modalOpen && <PwaInstallModal onClose={() => setModalOpen(false)} />}
    </>
  );
}

function PwaInstallModal({ onClose }: { onClose: () => void }) {
  const [tab, setTab] = useState<"android" | "ios">("android");

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-emerald-950/60 p-4 backdrop-blur-sm anim-fade-in" onClick={onClose}>
      <div className="anim-pop w-full max-w-md rounded-3xl bg-white p-6 shadow-2xl" onClick={(e) => e.stopPropagation()} dir="rtl">
        <div className="mb-4 flex items-center justify-between border-b pb-3">
          <div className="flex items-center gap-2">
            <Smartphone size={20} className="text-emerald-700" />
            <h3 className="text-base font-black text-emerald-950">راهنمای نصب اپلیکیشن در گوشی</h3>
          </div>
          <button onClick={onClose} className="grid size-8 place-items-center rounded-full bg-emerald-900/5 text-emerald-900/60 hover:bg-emerald-900/10">
            <X size={16} />
          </button>
        </div>

        {/* انتخاب سیستم عامل */}
        <div className="mb-4 grid grid-cols-2 gap-2">
          <button
            onClick={() => setTab("android")}
            className={`rounded-xl py-2 text-xs font-black transition ${tab === "android" ? "bg-emerald-700 text-white shadow" : "bg-emerald-50 text-emerald-900 hover:bg-emerald-100"}`}
          >
            گوشی‌های اندروید (Chrome / سامسونگ)
          </button>
          <button
            onClick={() => setTab("ios")}
            className={`rounded-xl py-2 text-xs font-black transition ${tab === "ios" ? "bg-emerald-700 text-white shadow" : "bg-emerald-50 text-emerald-900 hover:bg-emerald-100"}`}
          >
            گوشی‌های آیفون (Safari iOS)
          </button>
        </div>

        {tab === "android" ? (
          <div className="space-y-3 text-xs leading-6 text-emerald-950">
            <div className="flex items-start gap-2 rounded-xl bg-emerald-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-emerald-700 text-[11px] font-black text-white">۱</span>
              <p>در بالای صفحه مرورگر کروم، روی <b>منوی سه‌نقطه (⋮)</b> بزنید.</p>
            </div>
            <div className="flex items-start gap-2 rounded-xl bg-emerald-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-emerald-700 text-[11px] font-black text-white">۲</span>
              <p>گزینهٔ <b>«نصب برنامه» (Install app)</b> یا <b>«افزودن به صفحه اصلی» (Add to Home screen)</b> را انتخاب کنید.</p>
            </div>
            <div className="flex items-start gap-2 rounded-xl bg-emerald-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-emerald-700 text-[11px] font-black text-white">۳</span>
              <p>روی <b>Install / افزودن</b> بزنید. آیکون مدرسه مستقیماً روی صفحه گوشی شما قرار می‌گیرد.</p>
            </div>
          </div>
        ) : (
          <div className="space-y-3 text-xs leading-6 text-emerald-950">
            <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-600 text-[11px] font-black text-white">۱</span>
              <p>در مرورگر Safari آیفون، روی دکمهٔ <b>اشتراک‌گذاری (Share <Share2 size={13} className="inline text-sky-600" />)</b> در نوار پایین بزنید.</p>
            </div>
            <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-600 text-[11px] font-black text-white">۲</span>
              <p>صفحه را به پایین بکشید و گزینهٔ <b>«Add to Home Screen» (<PlusSquare size={13} className="inline text-emerald-700" /> افزودن به صفحه اصلی)</b> را لمس کنید.</p>
            </div>
            <div className="flex items-start gap-2 rounded-xl bg-amber-50 p-3">
              <span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-600 text-[11px] font-black text-white">۳</span>
              <p>در گوشه بالا روی <b>Add</b> بزنید. اپلیکیشن مدرسه روی گوشی شما نصب خواهد شد.</p>
            </div>
          </div>
        )}

        <button onClick={onClose} className="mt-5 w-full rounded-xl bg-emerald-700 py-2.5 text-xs font-black text-white hover:bg-emerald-800">
          متوجه شدم
        </button>
      </div>
    </div>
  );
}

/* ---------------- ساعت و تاریخ زنده ---------------- */
export function LiveClock() {
  const [now, setNow] = useState<Date | null>(null);
  useEffect(() => {
    setNow(new Date());
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  if (!now) return <div className="h-12 w-64 animate-pulse rounded-xl bg-white/10" />;
  const [jy, jm, jd] = g2j(now.getFullYear(), now.getMonth() + 1, now.getDate());
  const wd = WEEKDAYS[(now.getDay() + 1) % 7];
  const time = now.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  return (
    <div className="flex flex-wrap items-center gap-2 text-[13px] font-bold text-emerald-50/95">
      <span className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3.5 py-1.5 ring-1 ring-white/15">
        <CalendarDays size={15} className="text-amber-300" />
        {wd}، {faNum(jd)} {J_MONTHS[jm - 1]} {faNum(jy)}
      </span>
      <span className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3.5 py-1.5 ring-1 ring-white/15 tabular-nums" dir="ltr">
        <Clock3 size={15} className="text-amber-300" />
        {faNum(time)}
      </span>
    </div>
  );
}

/* ---------------- نوار اطلاعیه چرخان ---------------- */
export function NewsTicker({ items }: { items: { id: number; title: string; body: string }[] }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (items.length < 2) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % items.length), 4300);
    return () => clearInterval(t);
  }, [items.length]);
  if (!items.length) return null;
  const item = items[idx];
  return (
    <div className="mx-auto -mt-7 mb-8 flex h-12 w-[min(92%,56rem)] items-center gap-3 overflow-hidden rounded-b-2xl border-x border-b border-amber-500/40 bg-amber-50/95 px-4 shadow-lg shadow-amber-900/10 backdrop-blur">
      <span className="grid size-8 shrink-0 place-items-center rounded-full bg-amber-500 text-white anim-pulse-soft">
        <Megaphone size={15} />
      </span>
      <div key={item.id} className="ticker-item min-w-0 flex-1 truncate text-sm font-bold text-amber-900">
        <span className="font-black">{item.title}: </span>
        <span className="font-medium text-amber-800/90">{item.body}</span>
      </div>
      <span className="hidden shrink-0 text-[11px] font-bold text-amber-700/60 sm:block">اطلاعیهٔ {faNum(idx + 1)} از {faNum(items.length)}</span>
    </div>
  );
}

/* ---------------- اسلایدر ---------------- */
export function HeroSlider({ slides }: { slides: { id: number; imageUrl: string; caption: string | null }[] }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (slides.length < 2) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % slides.length), 6000);
    return () => clearInterval(t);
  }, [slides.length]);
  if (!slides.length) return null;
  const cur = slides[idx];
  const go = (n: number) => setIdx((idx + n + slides.length) % slides.length);
  return (
    <div className="group relative">
      <div className="relative aspect-[16/10] overflow-hidden rounded-3xl border border-emerald-900/10 shadow-2xl shadow-emerald-950/20 sm:aspect-[21/9]">
        {/* پس‌زمینه محو */}
        <div className="absolute inset-0">
          <img src={cur.imageUrl} alt="" className="h-full w-full scale-110 object-cover blur-2xl brightness-[0.55] saturate-[1.2]" />
          <div className="absolute inset-0 bg-gradient-to-t from-emerald-950/70 via-transparent to-emerald-950/30" />
        </div>
        {/* تصویر اصلی — کامل نمایش داده می‌شود */}
        <img key={cur.id} src={cur.imageUrl} alt={cur.caption ?? "تصویر مدرسه"} className="anim-slide-zoom relative z-10 h-full w-full object-contain" />
        {/* کپشن */}
        {cur.caption && (
          <div className="absolute bottom-0 right-0 left-0 z-20 bg-gradient-to-t from-emerald-950/85 to-transparent px-6 pt-10 pb-4">
            <p className="text-sm font-extrabold text-white drop-shadow sm:text-lg">{cur.caption}</p>
          </div>
        )}
        {/* فلش‌ها */}
        {slides.length > 1 && (
          <>
            <button onClick={() => go(-1)} aria-label="قبلی" className="absolute top-1/2 right-3 z-30 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white/85 text-emerald-900 opacity-0 shadow backdrop-blur transition group-hover:opacity-100 hover:bg-white">
              <ChevronRight size={20} />
            </button>
            <button onClick={() => go(1)} aria-label="بعدی" className="absolute top-1/2 left-3 z-30 grid size-10 -translate-y-1/2 place-items-center rounded-full bg-white/85 text-emerald-900 opacity-0 shadow backdrop-blur transition group-hover:opacity-100 hover:bg-white">
              <ChevronLeft size={20} />
            </button>
          </>
        )}
      </div>
      {/* نقاط */}
      {slides.length > 1 && (
        <div className="mt-3 flex justify-center gap-1.5">
          {slides.map((s, i) => (
            <button key={s.id} onClick={() => setIdx(i)} aria-label={`اسلاید ${i + 1}`}
              className={`h-1.5 rounded-full transition-all ${i === idx ? "w-7 bg-emerald-700" : "w-2.5 bg-emerald-900/25 hover:bg-emerald-900/40"}`} />
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------------- روابط مشارکت (مدال) ---------------- */
type Item = { id: number; title: string };
type Props = {
  survey: { id: number; title: string; question: string; options: string[] } | null;
  riddle: { id: number; question: string } | null;
  contests: Item[];
  games: Item[];
};
export type ParticipateKind = "survey" | "riddle" | "contest" | "game";

const KIND_META: Record<ParticipateKind, { label: string; icon: ReactNode; hint: string }> = {
  survey: { label: "نظرسنجی", icon: <Vote size={20} />, hint: "نظر خود را ثبت کنید" },
  riddle: { label: "معما", icon: <BrainCircuit size={20} />, hint: "پاسخ معما را بنویسید" },
  contest: { label: "مسابقه", icon: <Trophy size={20} />, hint: "در مسابقهٔ فعال شرکت کنید" },
  game: { label: "بازی", icon: <Gamepad2 size={20} />, hint: "یک بازی آموزشی انجام دهید" },
};

function CodeSubmit() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} className="btn-gold inline-flex w-full items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-black text-white transition active:scale-[0.98] disabled:opacity-60">
      {pending ? <Loader2 size={16} className="animate-spin" /> : <BadgeCheck size={16} />}
      {pending ? "در حال بررسی..." : "تأیید کد ملی"}
    </button>
  );
}

export function ParticipateModal({ kind, data, onClose }: { kind: ParticipateKind; data: Props; onClose: () => void }) {
  const [state, formAction, pending] = useActionState(verifyNationalCode, {} as { ok?: boolean; error?: string; name?: string });
  const [fb, setFb] = useState<{ ok?: boolean; error?: string; msg?: string }>({});
  const meta = KIND_META[kind];

  const answerSurvey = (optionIndex: number) => {
    const fd = new FormData();
    fd.set("surveyId", String(data.survey!.id));
    fd.set("optionIndex", String(optionIndex));
    startTransition(async () => setFb(await submitSurveyResponse({}, fd)));
  };
  const submitRiddle = (fd: FormData) => {
    startTransition(async () => setFb(await submitRiddleAnswer({}, fd)));
  };

  return (
    <div className="fixed inset-0 z-[80] flex items-end justify-center bg-emerald-950/60 p-0 backdrop-blur-sm anim-fade-in sm:items-center sm:p-6" onClick={onClose}>
      <div className="anim-pop max-h-[92vh] w-full max-w-md overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl" onClick={(e) => e.stopPropagation()} dir="rtl">
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <span className="grid size-10 place-items-center rounded-xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300">{meta.icon}</span>
            <div>
              <h3 className="text-lg font-black text-emerald-950">{meta.label}</h3>
              <p className="text-xs text-emerald-800/60">{meta.hint}</p>
            </div>
          </div>
          <button onClick={onClose} className="grid size-9 place-items-center rounded-full bg-emerald-900/5 text-emerald-900/60 transition hover:bg-emerald-900/10"><X size={18} /></button>
        </div>

        {!state.ok ? (
          <form action={formAction} className="space-y-4">
            <p className="rounded-xl bg-emerald-50 px-4 py-3 text-xs leading-6 text-emerald-800">
              برای شرکت در {meta.label}، <b>کد ملی دانش‌آموز</b> را وارد کنید. پاسخ شما در سامانه ذخیره می‌شود.
            </p>
            <input name="code" inputMode="numeric" maxLength={10} required placeholder="کد ملی (۱۰ رقم)"
              className="w-full rounded-xl border border-emerald-900/15 bg-white px-4 py-3 text-center text-lg font-black tracking-[0.3em] text-emerald-950 outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25" dir="ltr" />
            {state.error && <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-bold leading-6 text-red-700">{state.error}</div>}
            <CodeSubmit />
          </form>
        ) : (
          <div className="space-y-4">
            <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-xs font-bold text-emerald-700">
              {state.name} عزیز، خوش آمدی!
            </div>

            {kind === "survey" && data.survey && (
              <div className="space-y-3">
                <p className="text-sm font-extrabold leading-7 text-emerald-950">{data.survey.question}</p>
                <div className="grid gap-2">
                  {data.survey.options.map((op, i) => (
                    <button key={i} onClick={() => answerSurvey(i)} disabled={pending || !!fb.ok}
                      className="rounded-xl border border-emerald-900/12 bg-white px-4 py-3 text-right text-sm font-bold text-emerald-900 transition hover:border-emerald-500 hover:bg-emerald-50 disabled:opacity-50">
                      {op}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {kind === "riddle" && data.riddle && (
              <form action={submitRiddle} className="space-y-3">
                <input type="hidden" name="riddleId" value={data.riddle.id} />
                <p className="rounded-xl bg-amber-50 px-4 py-3 text-sm font-extrabold leading-8 text-amber-900">{data.riddle.question}</p>
                <input name="answer" required placeholder="پاسخ معما را بنویسید..." disabled={!!fb.ok}
                  className="w-full rounded-xl border border-emerald-900/15 px-4 py-3 text-sm font-bold text-emerald-950 outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25" />
                <button disabled={pending || !!fb.ok} className="btn-gold w-full rounded-xl px-5 py-3 text-sm font-black text-white disabled:opacity-60">ثبت پاسخ</button>
              </form>
            )}

            {kind === "contest" && (
              <div className="grid gap-2">
                {data.contests.length === 0 && <p className="rounded-xl bg-emerald-50 px-4 py-6 text-center text-sm text-emerald-800/70">در حال حاضر مسابقهٔ فعالی وجود ندارد.</p>}
                {data.contests.map((c) => (
                  <Link key={c.id} href={`/play/contest/${c.id}`} className="flex items-center justify-between rounded-xl border border-emerald-900/12 px-4 py-3.5 text-sm font-extrabold text-emerald-900 transition hover:border-amber-500 hover:bg-amber-50">
                    <span className="flex items-center gap-2"><Trophy size={16} className="text-amber-600" />{c.title}</span>
                    <ChevronLeft size={16} />
                  </Link>
                ))}
              </div>
            )}

            {kind === "game" && (
              <div className="grid gap-2">
                {data.games.length === 0 && <p className="rounded-xl bg-emerald-50 px-4 py-6 text-center text-sm text-emerald-800/70">در حال حاضر بازی فعالی وجود ندارد.</p>}
                {data.games.map((g) => (
                  <Link key={g.id} href={`/play/game/${g.id}`} className="flex items-center justify-between rounded-xl border border-emerald-900/12 px-4 py-3.5 text-sm font-extrabold text-emerald-900 transition hover:border-emerald-500 hover:bg-emerald-50">
                    <span className="flex items-center gap-2"><Gamepad2 size={16} className="text-emerald-700" />{g.title}</span>
                    <ChevronLeft size={16} />
                  </Link>
                ))}
              </div>
            )}

            {fb.error && <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-bold text-red-700">{fb.error}</div>}
            {fb.ok && <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs font-bold text-emerald-700">{fb.msg ?? "ثبت شد!"}</div>}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------------- دکمه‌های چهارگانه ---------------- */
export function ActionButtons({ data }: { data: Props }) {
  const [kind, setKind] = useState<ParticipateKind | null>(null);
  const buttons: { k: ParticipateKind; label: string; icon: ReactNode; grad: string; enabled: boolean }[] = [
    { k: "survey", label: "نظرسنجی", icon: <Vote size={26} />, grad: "from-sky-600 to-sky-800", enabled: !!data.survey },
    { k: "riddle", label: "معما", icon: <BrainCircuit size={26} />, grad: "from-violet-600 to-violet-800", enabled: !!data.riddle },
    { k: "contest", label: "مسابقه", icon: <Trophy size={26} />, grad: "from-amber-700 to-amber-950", enabled: true },
    { k: "game", label: "بازی", icon: <Gamepad2 size={26} />, grad: "from-emerald-600 to-emerald-800", enabled: true },
  ];
  return (
    <>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
        {buttons.map((b, i) => (
          <button key={b.k} onClick={() => setKind(b.k)}
            className={`anim-fade-up d${i + 1} group relative overflow-hidden rounded-2xl bg-gradient-to-br ${b.grad} p-5 text-white shadow-lg shadow-emerald-950/15 transition hover:-translate-y-1 hover:shadow-xl active:scale-[0.97]`}>
            <div className="absolute -left-4 -top-4 size-20 rounded-full bg-white/10 transition group-hover:scale-150" />
            <div className="relative flex flex-col items-center gap-2.5">
              <span className="grid size-12 place-items-center rounded-2xl bg-white/15 ring-1 ring-white/25 transition group-hover:scale-110">{b.icon}</span>
              <span className="text-base font-black">{b.label}</span>
              {b.enabled && <span className="rounded-full bg-amber-400/90 px-2 py-0.5 text-[10px] font-black text-amber-950">فعال</span>}
            </div>
          </button>
        ))}
      </div>
      {kind && <ParticipateModal kind={kind} data={data} onClose={() => setKind(null)} />}
    </>
  );
}

/* ---------------- پاپ‌آپ خودکار اطلاعیه فعال ---------------- */
export function AutoPopup({ data }: { data: Props }) {
  const [kind, setKind] = useState<ParticipateKind | null>(null);
  const [closed, setClosed] = useState(false);
  useEffect(() => {
    if (closed) return;
    if (sessionStorage.getItem("popupShown")) return;
    const t = setTimeout(() => {
      sessionStorage.setItem("popupShown", "1");
      setKind(data.survey ? "survey" : data.riddle ? "riddle" : null);
    }, 3200);
    const auto = setTimeout(() => setClosed(true), 30000);
    return () => { clearTimeout(t); clearTimeout(auto); };
  }, [closed, data.survey, data.riddle]);
  if (!kind || closed) return null;
  return <ParticipateModal kind={kind} data={data} onClose={() => { setClosed(true); setKind(null); }} />;
}

/* ---------------- دکمه ورود ---------------- */
export function LoginLink() {
  return (
    <Link href="/login" className="inline-flex items-center gap-1.5 rounded-full bg-amber-400 px-4 py-2 text-xs font-black text-emerald-950 shadow-md shadow-amber-900/30 transition hover:brightness-105 active:scale-[0.97]">
      <LogIn size={15} /> ورود به سامانه
    </Link>
  );
}