// Wordra non-game screens: Home, Result, Daily
const { useState: useStateScr, useEffect: useEffectScr, useMemo: useMemoScr } = React;

// ============================================================
// HOME
// ============================================================
function WordraHome({ onPlay, onDaily, lang, onToggleLang, bestScore, dailyDone, inventory, onSettings, onProfile }) {
  const t = (en, th) => (lang === "th" ? th : en);
  const items = (window.WORDRA_ITEMS || []);
  const inv = inventory || { shuffle: 2, time: 1, hint: 3, lock: 1 };
  return (
    <div className="wh-root">
      {/* ambient gradient */}
      <div className="wh-ambient"/>
      <div className="wh-grain"/>

      {/* lang toggle pill */}
      <button className="wh-lang" onClick={onToggleLang}>
        <span className={lang === "en" ? "on" : ""}>EN</span>
        <span className={lang === "th" ? "on" : ""}>TH</span>
      </button>

      {/* top-right utility cluster */}
      <div className="wh-util">
        <button className="wh-util-btn" onClick={onProfile} aria-label="Profile">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
        </button>
        <button className="wh-util-btn" onClick={onSettings} aria-label="Settings">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        </button>
      </div>

      {/* logo */}
      <div className="wh-logo">
        <div className="wh-logo-tiles">
          {"WORDRA".split("").map((ch, i) => (
            <span key={i} className={"wh-tile " + (i % 3 === 1 ? "alt " : "")} style={{ animationDelay: (i * 80) + "ms" }}>{ch}</span>
          ))}
        </div>
        <div className="wh-tagline">{t("swipe · spell · combo", "ลาก · สะกด · คอมโบ")}</div>
      </div>

      {/* mini stats */}
      <div className="wh-stats">
        <div className="wh-stat">
          <span className="wh-stat-num">{bestScore.toLocaleString()}</span>
          <span className="wh-stat-lbl">{t("BEST", "ดีที่สุด")}</span>
        </div>
        <div className="wh-stat-divider"/>
        <div className="wh-stat">
          <span className="wh-stat-num">60s</span>
          <span className="wh-stat-lbl">{t("ROUND", "รอบ")}</span>
        </div>
        <div className="wh-stat-divider"/>
        <div className="wh-stat">
          <span className="wh-stat-num">×5</span>
          <span className="wh-stat-lbl">{t("COMBO", "คอมโบ")}</span>
        </div>
      </div>

      {/* CTAs */}
      <div className="wh-ctas">
        <button className="wh-cta primary" onClick={onPlay}>
          <span className="wh-cta-arrow">▶</span>
          <span className="wh-cta-label">{t("PLAY", "เล่น")}</span>
          <span className="wh-cta-sub">{t("solo · 60s", "เดี่ยว · 60 วิ")}</span>
        </button>
        <button className="wh-cta secondary" onClick={onDaily}>
          <span className="wh-cta-arrow">★</span>
          <span className="wh-cta-label">{t("DAILY", "ประจำวัน")}</span>
          <span className="wh-cta-sub">{dailyDone ? t("done · view board", "เล่นแล้ว · ดูบอร์ด") : t("one board · everyone", "หนึ่งบอร์ด · ทุกคน")}</span>
        </button>
      </div>

      {/* INVENTORY */}
      <div className="wh-inv">
        <div className="wh-inv-head">
          <span>{t("ITEMS", "ไอเทม")}</span>
          <span className="wh-inv-hint">{t("earn 1+ per round", "ได้รับเพิ่มทุกรอบ")}</span>
        </div>
        <div className="wh-inv-row">
          {items.map(it => (
            <div key={it.id} className="wh-inv-cell" style={{ "--item-color": it.color }}>
              <span className="wh-inv-icon">{it.icon}</span>
              <span className="wh-inv-name">{lang === "th" ? it.nameTh : it.nameEn}</span>
              <span className="wh-inv-count">×{inv[it.id] || 0}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="wh-foot">
        <span className="wh-dot"/>
        <span>v1.0.0 · {t("prototype", "ต้นแบบ")}</span>
      </div>
    </div>
  );
}

// ============================================================
// RESULT
// ============================================================
function WordraResult({ score, best, words, newWords, lang, onReplay, onHome, isDaily, dailyNo, rank, itemsUsed, reward, bonusReward }) {
  const t = (en, th) => (lang === "th" ? th : en);
  const items = (window.WORDRA_ITEMS || []);
  const itemsByID = window.WORDRA_ITEMS_BY_ID || {};
  const usedList = items.filter(it => (itemsUsed || {})[it.id] > 0);
  const totalUsed = Object.values(itemsUsed || {}).reduce((a, b) => a + b, 0);
  const isNewBest = score >= best && score > 0;
  const [shareCopied, setShareCopied] = useStateScr(false);

  // Animated score count-up
  const [shown, setShown] = useStateScr(0);
  useEffectScr(() => {
    let raf, start = null;
    const dur = 900;
    const step = (ts) => {
      if (start === null) start = ts;
      const p = Math.min(1, (ts - start) / dur);
      const ease = 1 - Math.pow(1 - p, 3);
      setShown(Math.round(score * ease));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [score]);

  // top word by length
  const topWord = useMemoScr(() => {
    if (!words || words.length === 0) return null;
    return [...words].sort((a, b) => b.length - a.length)[0];
  }, [words]);

  const shareText = isDaily
    ? `Wordra #${dailyNo}\nScore: ${score}\n🔥 ${words.length} words`
    : `Wordra Solo\nScore: ${score}\n🔥 ${words.length} words`;

  // Three-tier share: Web Share with image > Web Share text-only > clipboard.
  // Each tier degrades gracefully so the button always does something useful.
  const handleShare = async () => {
    let via = "clipboard";
    try {
      const blob = window.getShareCardBlob
        ? await window.getShareCardBlob({ score, words, dailyNo, isDaily })
        : null;
      const file = blob ? new File([blob], "wordra.png", { type: "image/png" }) : null;
      const shareData = { title: "Wordra", text: shareText, url: location.origin };
      if (file && navigator.canShare && navigator.canShare({ files: [file] })) {
        await navigator.share({ ...shareData, files: [file] });
        via = "web-share-image";
      } else if (navigator.share) {
        await navigator.share(shareData);
        via = "web-share-text";
      } else {
        await navigator.clipboard?.writeText(shareText);
      }
    } catch (err) {
      // user cancelled the share sheet OR share failed → fall back to clipboard
      try { await navigator.clipboard?.writeText(shareText); } catch (_) {}
    }
    setShareCopied(true);
    setTimeout(() => setShareCopied(false), 1600);
    try {
      const ana = window.WordraAnalytics;
      ana && ana.track("share_click", {
        score, word_count: words.length, daily: !!isDaily, daily_no: dailyNo || null, via,
      });
    } catch (_) {}
  };

  return (
    <div className="wr-root">
      <div className="wr-ambient"/>
      {isNewBest && <div className="wr-confetti">
        {Array.from({ length: 30 }).map((_, i) => (
          <span key={i} className="wr-conf" style={{
            left: (Math.random() * 100) + "%",
            animationDelay: (Math.random() * 1) + "s",
            background: ["#7C5CFF", "#FFD84D", "#FF8A3D", "#22C55E"][i % 4]
          }}/>
        ))}
      </div>}

      <button className="wr-close" onClick={onHome} aria-label="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>

      <div className="wr-tag">
        {isDaily ? `WORDRA #${dailyNo}` : t("SOLO ROUND", "รอบเดี่ยว")}
      </div>
      {isNewBest && <div className="wr-newbest">{t("NEW BEST", "ดีที่สุดใหม่")}</div>}

      <div className="wr-score">
        <div className="wr-score-num">{shown.toLocaleString()}</div>
        <div className="wr-score-row">
          <span>{t("BEST", "ดีที่สุด")} {Math.max(best, score).toLocaleString()}</span>
          {isDaily && rank && <span className="wr-rank">#{rank}</span>}
        </div>
      </div>

      <div className="wr-stats">
        <div className="wr-stat">
          <div className="wr-stat-num">{words.length}</div>
          <div className="wr-stat-lbl">{t("words", "คำ")}</div>
        </div>
        <div className="wr-stat">
          <div className="wr-stat-num">{topWord ? topWord.length : 0}</div>
          <div className="wr-stat-lbl">{t("longest", "ยาวสุด")}</div>
        </div>
        <div className="wr-stat">
          <div className="wr-stat-num">{words.length > 0 ? Math.round(score / words.length) : 0}</div>
          <div className="wr-stat-lbl">{t("avg pts", "คะแนนเฉลี่ย")}</div>
        </div>
      </div>

      {topWord && (
        <div className="wr-top">
          <span className="wr-top-lbl">{t("TOP WORD", "คำเด่น")}</span>
          <span className="wr-top-word">{topWord.toUpperCase()}</span>
        </div>
      )}

      {newWords > 0 && (
        <div className="wr-new-words">
          <span className="wr-new-words-icon">✨</span>
          <span className="wr-new-words-num">{newWords}</span>
          <span className="wr-new-words-lbl">
            {newWords === 1
              ? t("NEW WORD added to your collection", "คำใหม่ในคลังคำของคุณ")
              : t("NEW WORDS added to your collection", "คำใหม่ในคลังคำของคุณ")}
          </span>
        </div>
      )}

      <div className="wr-words">
        {words.slice(0, 12).map((w, i) => (
          <span key={i} className="wr-word">{w}</span>
        ))}
        {words.length > 12 && <span className="wr-word more">+{words.length - 12}</span>}
      </div>

      {/* ITEMS USED */}
      {totalUsed > 0 && (
        <div className="wr-items-used">
          <span className="wr-items-used-lbl">{t("ITEMS USED", "ไอเทมที่ใช้")}</span>
          <div className="wr-items-used-row">
            {usedList.map(it => (
              <span key={it.id} className="wr-item-pill" style={{ "--item-color": it.color }}>
                <span>{it.icon}</span>
                <span>×{itemsUsed[it.id]}</span>
              </span>
            ))}
          </div>
        </div>
      )}

      {/* REWARD */}
      {reward && itemsByID[reward] && (
        <div className="wr-reward">
          <div className="wr-reward-head">{t("REWARD EARNED", "ของรางวัล")}</div>
          <div className="wr-reward-row">
            <div className="wr-reward-card" style={{ "--item-color": itemsByID[reward].color }}>
              <span className="wr-reward-icon">{itemsByID[reward].icon}</span>
              <div className="wr-reward-meta">
                <div className="wr-reward-name">{lang === "th" ? itemsByID[reward].nameTh : itemsByID[reward].nameEn}</div>
                <div className="wr-reward-plus">+1</div>
              </div>
            </div>
            {bonusReward && itemsByID[bonusReward] && (
              <div className="wr-reward-card bonus" style={{ "--item-color": itemsByID[bonusReward].color }}>
                <span className="wr-reward-icon">{itemsByID[bonusReward].icon}</span>
                <div className="wr-reward-meta">
                  <div className="wr-reward-name">{lang === "th" ? itemsByID[bonusReward].nameTh : itemsByID[bonusReward].nameEn}</div>
                  <div className="wr-reward-plus">+1 <span className="wr-reward-bonus">{t("BONUS", "โบนัส")}</span></div>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      <div className="wr-cta-row">
        <button className="wr-cta secondary" onClick={handleShare}>
          {shareCopied ? (
            <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>{t("COPIED", "คัดลอกแล้ว")}</>
          ) : (
            <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></svg>{t("SHARE", "แชร์")}</>
          )}
        </button>
        <button className="wr-cta primary" onClick={onReplay}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
          {t("PLAY AGAIN", "เล่นอีก")}
        </button>
      </div>
    </div>
  );
}

// ============================================================
// DAILY
// ============================================================
function WordraDaily({ onPlay, onHome, lang, dailyScore, leaderboard }) {
  const t = (en, th) => (lang === "th" ? th : en);
  const E = window.WordraEngine;
  const dayNo = E.todayLabel();

  return (
    <div className="wd-root">
      <div className="wd-ambient"/>
      <div className="wd-topbar">
        <button className="wd-back" onClick={onHome}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <span className="wd-title">{t("DAILY", "ประจำวัน")}</span>
        <span className="wd-spacer"/>
      </div>

      <div className="wd-card">
        <div className="wd-card-head">
          <div>
            <div className="wd-no">WORDRA #{dayNo}</div>
            <div className="wd-date">{new Date().toLocaleDateString(lang === "th" ? "th-TH" : "en-US", { weekday: "long", month: "short", day: "numeric" })}</div>
          </div>
          <div className="wd-badge">{dailyScore > 0 ? t("PLAYED", "เล่นแล้ว") : t("NEW", "ใหม่")}</div>
        </div>

        {dailyScore > 0 ? (
          <div className="wd-myscore">
            <div className="wd-myscore-num">{dailyScore.toLocaleString()}</div>
            <div className="wd-myscore-lbl">{t("YOUR SCORE", "คะแนนของคุณ")}</div>
          </div>
        ) : (
          <div className="wd-empty">{t("Same board for everyone today.", "บอร์ดเดียวกันสำหรับทุกคนวันนี้")}</div>
        )}

        <button className="wd-play" onClick={onPlay} disabled={dailyScore > 0}>
          {dailyScore > 0 ? t("COME BACK TOMORROW", "กลับมาพรุ่งนี้") : t("PLAY DAILY", "เล่นประจำวัน")}
        </button>
      </div>

      <div className="wd-lb">
        <div className="wd-lb-head">
          <span>{t("LEADERBOARD", "อันดับ")}</span>
          <span className="wd-lb-time">{t("today", "วันนี้")}</span>
        </div>
        {leaderboard.map((row, i) => (
          <div key={i} className={"wd-row " + (row.you ? "you " : "")}>
            <span className="wd-rank">{i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : `#${i + 1}`}</span>
            <span className="wd-name">{row.you ? t("YOU", "คุณ") : row.name}</span>
            <span className="wd-pts">{row.score.toLocaleString()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.WordraHome = WordraHome;
window.WordraResult = WordraResult;
window.WordraDaily = WordraDaily;