/* global React */
(function(){
const { useState, useRef, useEffect } = React;

/* =============================================================
   FactCheck.jsx — "واقعی یا ساختگی؟"
   Swipe-card fact-check game. Drag left = fake, right = real,
   or use the two big buttons. After answering, reveal panel
   shows correct answer, short explanation, and source chip.
   Tracks score + streak. Mobile-first; large hit targets.
   ============================================================= */

const CARDS = [
  {
    id: 1,
    claim: "اولین مترو تهران در سال ۱۳۷۸ افتتاح شد.",
    img: `radial-gradient(420px at 30% 30%, rgba(75,227,255,.5), transparent 60%),
          radial-gradient(360px at 75% 75%, rgba(154,108,255,.45), transparent 60%),
          linear-gradient(135deg, #0a2236, #15082e)`,
    answer: "real",
    explain: "خط ۱ تهران–کرج در دی‌ماه ۱۳۷۸ به‌طور رسمی به بهره‌برداری رسید.",
    source: "ویکی‌پدیا فارسی",
    difficulty: "آسان",
  },
  {
    id: 2,
    claim: "بلندترین قله ایران، دماوند، یک آتشفشان خاموش نیست — هنوز فعال است.",
    img: `radial-gradient(420px at 70% 30%, rgba(255,138,61,.55), transparent 60%),
          radial-gradient(360px at 25% 80%, rgba(224,85,109,.5), transparent 60%),
          linear-gradient(135deg, #2a1408, #08111e)`,
    answer: "real",
    explain: "دماوند نیمه‌فعال طبقه‌بندی می‌شود؛ آخرین فوران ثبت‌شده حدود ۷۳۰۰ سال پیش بوده اما چشمه‌های گازی و گرمابی هنوز فعال‌اند.",
    source: "سازمان زمین‌شناسی",
    difficulty: "متوسط",
  },
  {
    id: 3,
    claim: "زبان فارسی بیش‌از ۱۰۰ میلیون گویش‌ور بومی در جهان دارد.",
    img: `radial-gradient(420px at 50% 30%, rgba(255,78,168,.5), transparent 60%),
          radial-gradient(360px at 80% 80%, rgba(75,227,255,.4), transparent 60%),
          linear-gradient(135deg, #2a0a1f, #08111e)`,
    answer: "fake",
    explain: "تخمین واقعی حدود ۶۲ تا ۷۰ میلیون گویش‌ور بومی است (ایران، افغانستان، تاجیکستان).",
    source: "Ethnologue 2024",
    difficulty: "سخت",
  },
  {
    id: 4,
    claim: "اولین انیمیشن سینمایی ایرانی «شکار» نام داشت و در دهه ۴۰ ساخته شد.",
    img: `radial-gradient(420px at 30% 30%, rgba(154,108,255,.5), transparent 60%),
          radial-gradient(360px at 75% 75%, rgba(255,138,61,.4), transparent 60%),
          linear-gradient(135deg, #1a0e2e, #18120a)`,
    answer: "fake",
    explain: "اولین انیمیشن کوتاه «ملاّ نصرالدین» (۱۳۳۶) بود؛ اولین فیلم بلند انیمیشن سینمایی ایران «شاهزاده ایرانی» (۱۳۹۰) است.",
    source: "بنیاد سینمایی فارابی",
    difficulty: "سخت",
  },
  {
    id: 5,
    claim: "زعفران ایران حدود ۹۰٪ تولید جهانی این محصول را تشکیل می‌دهد.",
    img: `radial-gradient(420px at 50% 35%, rgba(255,200,90,.55), transparent 60%),
          radial-gradient(360px at 20% 85%, rgba(255,138,61,.5), transparent 60%),
          linear-gradient(135deg, #2a1a06, #18120a)`,
    answer: "real",
    explain: "بر اساس آمار FAO، ایران بین ۸۸ تا ۹۲ درصد تولید جهانی زعفران را در اختیار دارد.",
    source: "FAO 2023",
    difficulty: "آسان",
  },
];

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);

window.FactCheck = function FactCheck({ onRoute }) {
  const [idx, setIdx] = useState(0);
  const [drag, setDrag] = useState(0); // current x offset
  const [dragging, setDragging] = useState(false);
  const [reveal, setReveal] = useState(null); // {correct, choice, cardId}
  const [score, setScore] = useState(0);
  const [streak, setStreak] = useState(0);
  const [bestStreak, setBestStreak] = useState(0);
  const [history, setHistory] = useState([]); // [{correct: bool}]
  const startRef = useRef(null);

  // stack of upcoming cards (active + 2 behind)
  const stack = [];
  for (let k = 0; k < 3; k++) {
    const c = CARDS[idx + k];
    if (c) stack.push({ c, pos: k });
  }
  const card = stack[0]?.c;

  const finished = history.length >= CARDS.length;

  const submit = (choice) => {
    if (reveal || !card) return;
    const correct = choice === card.answer;
    setReveal({ correct, choice, cardId: card.id, card });
    setHistory(h => [...h, { correct }]);
    if (correct) {
      setScore(s => s + (card.difficulty === "سخت" ? 30 : card.difficulty === "متوسط" ? 20 : 10));
      setStreak(s => { const next = s + 1; setBestStreak(b => Math.max(b, next)); return next; });
    } else {
      setStreak(0);
    }
  };

  const advance = () => {
    setReveal(null);
    setDrag(0);
    setIdx(i => i + 1);
  };

  const restart = () => {
    setIdx(0); setScore(0); setStreak(0); setBestStreak(0); setHistory([]); setReveal(null); setDrag(0);
  };

  // ---- Drag handlers (pointer events; works on touch + mouse) ----
  const onDown = (e) => {
    if (reveal) return;
    startRef.current = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
    setDragging(true);
    e.currentTarget.setPointerCapture?.(e.pointerId);
  };
  const onMove = (e) => {
    if (startRef.current == null || reveal) return;
    const x = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
    setDrag(x - startRef.current);
  };
  const onUp = () => {
    setDragging(false);
    if (reveal || startRef.current == null) { startRef.current = null; return; }
    const threshold = 110;
    if (drag > threshold) submit("real");
    else if (drag < -threshold) submit("fake");
    else setDrag(0);
    startRef.current = null;
  };

  // keyboard
  useEffect(() => {
    const h = (e) => {
      if (reveal) { if (e.key === "Enter" || e.key === " ") advance(); return; }
      if (e.key === "ArrowRight") submit("real");
      if (e.key === "ArrowLeft") submit("fake");
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  });

  if (finished && !reveal) {
    const correctCount = history.filter(h => h.correct).length;
    return (
      <div className="kd-fc-page">
        <div className="kd-fc-summary">
          <div className="kd-fc-summary__badge"><Icon name="microscope" size={16} stroke={2} /> پایان دور</div>
          <h1 className="kd-fc-summary__h">{fmtFa(correctCount)}<span>از {fmtFa(history.length)} درست</span></h1>
          <div className="kd-fc-summary__stats">
            <div><strong>{fmtFa(score)}</strong><span>امتیاز</span></div>
            <div><strong>{fmtFa(bestStreak)}</strong><span>بهترین استریک</span></div>
            <div><strong>{Math.round(correctCount/history.length*100)}٪</strong><span>دقت</span></div>
          </div>
          <div className="kd-fc-summary__cta">
            <button className="kd-btn kd-btn--primary kd-btn--lg" onClick={restart}>
              <Icon name="swipe" size={16} stroke={2.2} /> دوباره
            </button>
            <button className="kd-btn kd-btn--ghost kd-btn--lg" onClick={() => onRoute?.("home")}>
              برگشت به خانه
            </button>
          </div>
        </div>
      </div>
    );
  }

  const rot = drag * 0.06;
  const dragOpacity = Math.min(Math.abs(drag) / 140, 1);
  const dragDir = drag > 0 ? "real" : drag < 0 ? "fake" : null;

  return (
    <div className="kd-fc-page">
      {/* ---- Top stat bar ---- */}
      <header className="kd-fc-top">
        <div className="kd-fc-top__col">
          <span className="kd-fc-top__lab">امتیاز</span>
          <strong className="kd-fc-top__val">{fmtFa(score)}</strong>
        </div>
        <div className="kd-fc-top__col kd-fc-top__col--mid">
          <span className="kd-fc-top__lab">پیشرفت</span>
          <div className="kd-fc-top__bar">
            {CARDS.map((_, i) => (
              <span key={i} className={`kd-fc-top__pip ${i < history.length ? (history[i]?.correct ? "is-on" : "is-bad") : ""}`} />
            ))}
          </div>
        </div>
        <div className="kd-fc-top__col">
          <span className="kd-fc-top__lab"><Icon name="flame" size={12} stroke={2.2} /> استریک</span>
          <strong className="kd-fc-top__val">{fmtFa(streak)}</strong>
        </div>
      </header>

      {/* ---- Card stack: stable keys so peek→active animates smoothly ---- */}
      <div className="kd-fc-stage">
        {stack.slice().reverse().map(({ c, pos }) => {
          const isActive = pos === 0;
          const flown = isActive && reveal && reveal.cardId === c.id;
          const flownCls = flown ? `kd-fc-card--flown-${reveal.choice}` : "";
          // Inline drag style ONLY while dragging — release lets CSS class animate back via transition.
          const inlineStyle = isActive && !reveal && dragging
            ? { transform: `translateX(${drag}px) rotate(${rot}deg)`, transition: "none" }
            : undefined;
          return (
            <article
              key={c.id}
              className={`kd-fc-card kd-fc-card--pos${pos} ${flownCls}`}
              style={inlineStyle}
              onPointerDown={isActive && !reveal ? onDown : undefined}
              onPointerMove={isActive && !reveal ? onMove : undefined}
              onPointerUp={isActive && !reveal ? onUp : undefined}
              onPointerCancel={isActive && !reveal ? onUp : undefined}
            >
              <div className="kd-fc-card__img" style={{ background: c.img }}>
                {isActive && (
                  <React.Fragment>
                    <span className={`kd-fc-stamp kd-fc-stamp--real ${dragDir === "real" ? "is-on" : ""}`} style={{ opacity: dragDir === "real" ? dragOpacity : 0 }}>
                      <Icon name="check" size={26} stroke={3} /> واقعی
                    </span>
                    <span className={`kd-fc-stamp kd-fc-stamp--fake ${dragDir === "fake" ? "is-on" : ""}`} style={{ opacity: dragDir === "fake" ? dragOpacity : 0 }}>
                      <Icon name="close" size={26} stroke={3} /> ساختگی
                    </span>
                  </React.Fragment>
                )}
              </div>
              <div className="kd-fc-card__body">
                <div className="kd-fc-card__head">
                  <span className="kd-fc-card__diff">{c.difficulty}</span>
                  {isActive && <span className="kd-fc-card__num">{fmtFa(idx + 1)}/{fmtFa(CARDS.length)}</span>}
                </div>
                <p className="kd-fc-card__claim">{c.claim}</p>
                {isActive && (
                  <p className="kd-fc-card__hint"><Icon name="swipe" size={14} stroke={2} /> بکش راست برای «واقعی»، چپ برای «ساختگی»</p>
                )}
              </div>
            </article>
          );
        })}
      </div>

      {/* ---- Reveal panel ---- */}
      {reveal && (
        <div className={`kd-fc-reveal kd-fc-reveal--${reveal.correct ? "ok" : "bad"}`}>
          <div className="kd-fc-reveal__head">
            <span className="kd-fc-reveal__icon">
              <Icon name={reveal.correct ? "check" : "close"} size={20} stroke={3} />
            </span>
            <strong className="kd-fc-reveal__verdict">
              {reveal.correct ? "درست تشخیص دادی!" : "اشتباه — این "}
              {!reveal.correct && <em>{reveal.card.answer === "real" ? "واقعی" : "ساختگی"}</em>}
              {!reveal.correct && " بود."}
            </strong>
            <span className="kd-fc-reveal__plus">{reveal.correct ? `+${fmtFa(reveal.card.difficulty === "سخت" ? 30 : reveal.card.difficulty === "متوسط" ? 20 : 10)}` : ""}</span>
          </div>
          <p className="kd-fc-reveal__explain">{reveal.card.explain}</p>
          <div className="kd-fc-reveal__foot">
            <span className="kd-fc-source"><Icon name="microscope" size={13} stroke={2} /> منبع: {reveal.card.source}</span>
            <button className="kd-btn kd-btn--primary" onClick={advance}>
              کارت بعدی <Icon name="back" size={14} stroke={2.4} />
            </button>
          </div>
        </div>
      )}

      {/* ---- Big choice buttons (mobile-friendly fallback) ---- */}
      {!reveal && (
        <div className="kd-fc-choices">
          <button className="kd-fc-choice kd-fc-choice--fake" onClick={() => submit("fake")} aria-label="ساختگی">
            <Icon name="close" size={22} stroke={2.6} />
            <span>ساختگی</span>
          </button>
          <button className="kd-fc-choice kd-fc-choice--skip" onClick={advance} aria-label="رد کن">
            <Icon name="chevron" size={20} stroke={2.4} />
          </button>
          <button className="kd-fc-choice kd-fc-choice--real" onClick={() => submit("real")} aria-label="واقعی">
            <Icon name="check" size={22} stroke={2.6} />
            <span>واقعی</span>
          </button>
        </div>
      )}
    </div>
  );
};
})();