// screens/vocab.jsx — Flash-card vocabulary screen.
// Lists every word the user has captured, with sort + search + detail modal.
// Reads/writes through window.WordraVocab (which is itself local-first +
// Firestore-sync). Definitions are fetched lazily from dictionaryapi.dev when
// a row is opened and persisted back into the vocab service.

// Aliased hooks to avoid colliding with gameplay.jsx's bare names — Babel
// scripts share the document global scope.
const { useState: useStateVcb, useEffect: useEffectVcb, useMemo: useMemoVcb } = React;

const SORT_OPTIONS_VCB = [
  { v: "count-desc", labelEn: "MOST PLAYED",  labelTh: "เล่นบ่อยสุด" },
  { v: "recent",     labelEn: "RECENT",       labelTh: "ล่าสุด" },
  { v: "newest",     labelEn: "NEW WORDS",    labelTh: "คำใหม่" },
  { v: "longest",    labelEn: "LONGEST",      labelTh: "ยาวสุด" },
  { v: "az",         labelEn: "A → Z",        labelTh: "ก → ฮ" },
];

function _vcbTimeAgo(ts, lang) {
  if (!ts) return "—";
  const s = Math.floor((Date.now() - ts) / 1000);
  if (s < 60)     return lang === "th" ? `${s} วิ`   : `${s}s`;
  if (s < 3600)   return lang === "th" ? `${Math.floor(s/60)} นาที`  : `${Math.floor(s/60)}m`;
  if (s < 86400)  return lang === "th" ? `${Math.floor(s/3600)} ชม.` : `${Math.floor(s/3600)}h`;
  return lang === "th" ? `${Math.floor(s/86400)} วัน` : `${Math.floor(s/86400)}d`;
}

function WordraVocabScreen({ lang, onBack }) {
  const t = (en, th) => (lang === "th" ? th : en);
  const v = window.WordraVocab;

  const [q,         setQ]         = useStateVcb("");
  const [sort,      setSort]      = useStateVcb("count-desc");
  const [langFilter,setLangFilter]= useStateVcb("all");
  const [selected,  setSelected]  = useStateVcb(null);
  const [tick,      setTick]      = useStateVcb(0); // forces re-list after modal updates

  // Pull through the service. Reads localStorage every time — cheap.
  const rows = useMemoVcb(() => {
    if (!v) return [];
    return v.list({ sort, q, lang: langFilter === "all" ? null : langFilter });
  }, [v, sort, q, langFilter, tick]);

  const unique = v ? v.countUnique() : 0;
  const total  = v ? v.countTotal()  : 0;

  return (
    <div className="wpr-root wvb-root">
      <div className="wpr-topbar">
        <button className="wpr-back" onClick={onBack} aria-label="Back">
          <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="wpr-title">{t("VOCAB", "คลังคำ")}</span>
        <span className="wpr-spacer"/>
      </div>

      <div className="wvb-stats">
        <div className="wvb-stat">
          <div className="wvb-stat-num">{unique.toLocaleString()}</div>
          <div className="wvb-stat-lbl">{t("UNIQUE", "ไม่ซ้ำ")}</div>
        </div>
        <div className="wvb-stat">
          <div className="wvb-stat-num">{total.toLocaleString()}</div>
          <div className="wvb-stat-lbl">{t("PLAYS", "ครั้ง")}</div>
        </div>
        <div className="wvb-stat">
          <div className="wvb-stat-num">{rows[0] ? rows[0].count : 0}</div>
          <div className="wvb-stat-lbl">{t("TOP COUNT", "สูงสุด")}</div>
        </div>
      </div>

      <div className="wvb-tools">
        <div className="wvb-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          <input
            type="text"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder={t("Search…", "ค้นหา…")}
            spellCheck="false"
            autoCapitalize="off"
            autoComplete="off"
          />
          {q && (
            <button className="wvb-search-clear" onClick={() => setQ("")} aria-label="Clear">×</button>
          )}
        </div>
        <div className="wvb-sort">
          {SORT_OPTIONS_VCB.map(o => (
            <button
              key={o.v}
              className={"wvb-sort-pill " + (sort === o.v ? "on" : "")}
              onClick={() => setSort(o.v)}
            >
              {lang === "th" ? o.labelTh : o.labelEn}
            </button>
          ))}
        </div>
      </div>

      <div className="wvb-list">
        {rows.length === 0 ? (
          <div className="wvb-empty">
            <div className="wvb-empty-icon">📖</div>
            <div className="wvb-empty-title">
              {q ? t("No matches", "ไม่พบ") : t("No words yet", "ยังไม่มีคำ")}
            </div>
            <div className="wvb-empty-sub">
              {q
                ? t("Try a different search.", "ลองค้นด้วยคำอื่น")
                : t("Play a round to start your collection.", "เล่นสักรอบเพื่อเริ่มสะสมคำ")}
            </div>
          </div>
        ) : (
          rows.slice(0, 200).map((row) => (
            <button
              key={row.lang + "_" + row.word}
              className="wvb-row"
              onClick={() => setSelected(row)}
            >
              <span className="wvb-row-word">{row.word.toUpperCase()}</span>
              <span className="wvb-row-meta">
                <span className="wvb-row-count">×{row.count}</span>
                {row.longestCombo >= 2 && (
                  <span className="wvb-row-combo" title={t("Best combo with this word","คอมโบสูงสุดของคำนี้")}>×{row.longestCombo}🔥</span>
                )}
                <span className="wvb-row-time">{_vcbTimeAgo(row.lastSeenAt, lang)}</span>
              </span>
            </button>
          ))
        )}
        {rows.length > 200 && (
          <div className="wvb-more">{t(`+${rows.length - 200} more — refine your search`, `เพิ่มอีก ${rows.length - 200} — กรองให้แคบลง`)}</div>
        )}
      </div>

      {selected && (
        <WordraVocabDetail
          row={selected}
          lang={lang}
          onClose={() => setSelected(null)}
          onDefinitionFetched={() => setTick(t => t + 1)}
        />
      )}
    </div>
  );
}

function WordraVocabDetail({ row, lang, onClose, onDefinitionFetched }) {
  const t = (en, th) => (lang === "th" ? th : en);
  const [def, setDef]       = useStateVcb(row.definition || null);
  const [loading, setLoading] = useStateVcb(false);
  const [error, setError]   = useStateVcb(null);

  useEffectVcb(() => {
    if (def || loading) return;
    if (row.lang !== "en") return; // dictionaryapi.dev is EN-only
    setLoading(true);
    fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${encodeURIComponent(row.word)}`)
      .then((r) => r.ok ? r.json() : Promise.reject(new Error("not found")))
      .then((arr) => {
        if (!Array.isArray(arr) || !arr.length) throw new Error("empty");
        const first = arr[0];
        const meaning = (first.meanings && first.meanings[0]) || {};
        const partOfSpeech = meaning.partOfSpeech || "";
        const definitions = (meaning.definitions || []).slice(0, 2).map(d => d.definition);
        const example = (meaning.definitions || []).find(d => d.example);
        const payload = {
          partOfSpeech,
          definitions,
          example: example ? example.example : null,
          phonetic: first.phonetic || (first.phonetics && first.phonetics[0] && first.phonetics[0].text) || "",
        };
        setDef(payload);
        try { window.WordraVocab && window.WordraVocab.setDefinition(row.word, row.lang, payload); } catch (_) {}
        onDefinitionFetched && onDefinitionFetched();
      })
      .catch((err) => setError(err.message || "lookup failed"))
      .finally(() => setLoading(false));
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="wvb-modal-root">
      <div className="wvb-modal-backdrop" onClick={onClose}/>
      <div className="wvb-modal-card">
        <button className="wvb-modal-close" onClick={onClose} aria-label="Close">
          <svg width="18" height="18" 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="wvb-modal-word">{row.word.toUpperCase()}</div>
        {def && def.phonetic && <div className="wvb-modal-phon">{def.phonetic}</div>}

        <div className="wvb-modal-stats">
          <div className="wvb-modal-stat">
            <div className="wvb-modal-stat-num">{row.count}</div>
            <div className="wvb-modal-stat-lbl">{t("plays", "ครั้ง")}</div>
          </div>
          <div className="wvb-modal-stat">
            <div className="wvb-modal-stat-num">×{row.longestCombo || 1}</div>
            <div className="wvb-modal-stat-lbl">{t("best combo", "คอมโบสูงสุด")}</div>
          </div>
          <div className="wvb-modal-stat">
            <div className="wvb-modal-stat-num">{row.highestGained || 0}</div>
            <div className="wvb-modal-stat-lbl">{t("best score", "คะแนนสูงสุด")}</div>
          </div>
        </div>

        <div className="wvb-modal-times">
          <span><strong>{t("First", "ครั้งแรก")}:</strong> {_vcbTimeAgo(row.firstSeenAt, lang)} {t("ago","ที่ผ่านมา")}</span>
          <span><strong>{t("Latest", "ล่าสุด")}:</strong> {_vcbTimeAgo(row.lastSeenAt, lang)} {t("ago","ที่ผ่านมา")}</span>
        </div>

        <div className="wvb-modal-def">
          {loading && <div className="wvb-modal-def-loading">{t("Looking up…", "กำลังหา…")}</div>}
          {!loading && row.lang !== "en" && (
            <div className="wvb-modal-def-empty">{t("Definitions available in English only for now.", "ความหมายมีเฉพาะภาษาอังกฤษในตอนนี้")}</div>
          )}
          {!loading && error && row.lang === "en" && (
            <div className="wvb-modal-def-empty">{t("No definition found.", "ไม่พบความหมาย")}</div>
          )}
          {def && (
            <div>
              {def.partOfSpeech && <div className="wvb-modal-pos">{def.partOfSpeech}</div>}
              {(def.definitions || []).map((d, i) => (
                <div key={i} className="wvb-modal-def-line">{i + 1}. {d}</div>
              ))}
              {def.example && (
                <div className="wvb-modal-example">"{def.example}"</div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.WordraVocabScreen = WordraVocabScreen;