// Views: Archive, Entry, Pipeline + App root

// ─────────────────────────────────────────────
// Archive view
// ─────────────────────────────────────────────
function ArchiveView({ lang, query, onOpen }) {
  const ui = window.UI;
  const days = window.DAYS;
  const [moodFilter, setMoodFilter] = React.useState("all");
  const [bookFilter, setBookFilter] = React.useState("all");

  // Build unique mood and book lists
  const moods = React.useMemo(() => {
    const map = new Map();
    days.forEach(d => {
      const key = d.weather.mood;
      const eng = d.weather.mood_eng;
      if (!map.has(key)) map.set(key, { key, cht: key, eng, count: 0 });
      map.get(key).count++;
    });
    return Array.from(map.values()).sort((a, b) => b.count - a.count);
  }, []);

  const books = React.useMemo(() => {
    const map = new Map();
    days.forEach(d => {
      const key = d.scripture.book_cht;
      const eng = d.scripture.book_eng;
      if (!map.has(key)) map.set(key, { key, cht: key, eng, count: 0 });
      map.get(key).count++;
    });
    return Array.from(map.values()).sort((a, b) => b.count - a.count);
  }, []);

  // Search + filter
  const filtered = React.useMemo(() => {
    let result = days;
    if (moodFilter !== "all") result = result.filter(d => d.weather.mood === moodFilter);
    if (bookFilter !== "all") result = result.filter(d => d.scripture.book_cht === bookFilter);
    if (query.trim()) {
      const q = query.toLowerCase();
      result = result.filter(d => {
        const hay = [
          d.date_cht, d.date_eng, d.iso,
          d.weather.cht, d.weather.eng, d.weather.badge_cht, d.weather.badge_eng,
          d.weather.mood, d.weather.mood_eng,
          d.scripture.cht, d.scripture.niv, d.scripture.ref_cht, d.scripture.ref_eng,
          d.scripture.book_cht, d.scripture.book_eng,
          d.reflection.cht, d.reflection.eng,
          d.history.world.cht, d.history.world.eng, d.history.world.year,
          d.history.birth.cht, d.history.birth.eng, d.history.birth.year,
          d.history.death.cht, d.history.death.eng, d.history.death.year,
          d.history.custom.cht, d.history.custom.eng, d.history.custom.year
        ].join(" ").toLowerCase();
        return hay.includes(q);
      });
    }
    return result;
  }, [moodFilter, bookFilter, query]);

  const today = days[0]; // assume sorted desc by date

  const hasFilters = moodFilter !== "all" || bookFilter !== "all" || query.trim();

  return (
    <div className="page">
      {!query && !hasFilters && (
        <>
          {/* Hero */}
          <section className="archive-hero">
            <div className="ribbon">
              <Icon name="sparkle" size={12} />
              <span>{lang === "cht" ? "Bridge & Build × 每日自動發佈" : "Bridge & Build · Auto-published daily"}</span>
              <Icon name="sparkle" size={12} />
            </div>
            <h1>{lang === "cht" ? "每日靜思" : "A Daily Moment"}</h1>
            <div className="alt-title">{lang === "cht" ? "A Daily Moment" : "每日靜思"}</div>
            <p className="tagline">{ui.tagline[lang]}</p>
            <div className="divider-cross">
              <span className="line"></span>
              <Icon name="cross" size={16} />
              <span className="line"></span>
            </div>
          </section>

          {/* Featured today */}
          <FeaturedToday day={today} lang={lang} onOpen={onOpen} />
        </>
      )}

      {/* Filters + grid */}
      <div className="filters-row">
        <div className="filters-left">
          <h2 className="section-title">{ui.nav_archive[lang]}</h2>
          <span className="section-count">{ui.archive_count[lang](days.length)}</span>
        </div>
      </div>

      <div className="filter-line">
        <span className="filter-group-label">{ui.filter_mood[lang]}</span>
        <button className={"chip" + (moodFilter === "all" ? " active" : "")} onClick={() => setMoodFilter("all")}>
          {ui.filter_all[lang]}<span className="count">{days.length}</span>
        </button>
        {moods.map(m => (
          <button
            key={m.key}
            className={"chip" + (moodFilter === m.key ? " active" : "")}
            onClick={() => setMoodFilter(moodFilter === m.key ? "all" : m.key)}
          >
            {lang === "cht" ? m.cht : m.eng}<span className="count">{m.count}</span>
          </button>
        ))}
      </div>

      <div className="filter-line">
        <span className="filter-group-label">{ui.filter_book[lang]}</span>
        <button className={"chip" + (bookFilter === "all" ? " active" : "")} onClick={() => setBookFilter("all")}>
          {ui.filter_all[lang]}<span className="count">{days.length}</span>
        </button>
        {books.map(b => (
          <button
            key={b.key}
            className={"chip" + (bookFilter === b.key ? " active" : "")}
            onClick={() => setBookFilter(bookFilter === b.key ? "all" : b.key)}
          >
            {lang === "cht" ? b.cht : b.eng}<span className="count">{b.count}</span>
          </button>
        ))}
        {hasFilters && (
          <button className="clear-filters" onClick={() => { setMoodFilter("all"); setBookFilter("all"); }}>
            {ui.filter_clear[lang]}
          </button>
        )}
      </div>

      <div style={{ marginTop: 6, marginBottom: 14, fontSize: 12.5, color: "var(--ink-muted)", letterSpacing: "0.04em" }}>
        {ui.filtered_count[lang](filtered.length, days.length)}
      </div>

      {filtered.length === 0 ? (
        <div className="empty">
          <div className="icon"><Icon name="info" size={28} /></div>
          <div>{ui.empty[lang]}</div>
        </div>
      ) : (
        <div className="grid">
          {filtered.map(d => (
            <article key={d.iso} className="card" onClick={() => onOpen(d.iso)}>
              <div className="card-thumb">
                {d.has_real_infographic ? (
                  <>
                    <span className="real-tag">{lang === "cht" ? "原圖" : "Original"}</span>
                    <img src={"assets/days/" + d.iso + "/infographic-" + lang + ".png"} alt="" loading="lazy" />
                  </>
                ) : (
                  <MiniInfographic day={d} lang={lang} />
                )}
              </div>
              <div className="card-body">
                <div className="card-date">{lang === "cht" ? d.date_cht : d.date_eng}</div>
                <div className="card-ref">{lang === "cht" ? d.scripture.ref_cht : d.scripture.ref_eng}</div>
                <div className="card-mood">{lang === "cht" ? d.weather.mood : d.weather.mood_eng}</div>
              </div>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}

// Featured today block
function FeaturedToday({ day, lang, onOpen }) {
  const ui = window.UI;
  const m = moodFor(day);
  return (
    <section className="featured" onClick={() => onOpen(day.iso)} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter") onOpen(day.iso); }}>
      <div className="featured-image">
        {day.has_real_infographic ? (
          <img src={"assets/days/" + day.iso + "/infographic-" + lang + ".png"} alt="" />
        ) : (
          <MiniInfographic day={day} lang={lang} />
        )}
      </div>
      <div className="featured-body">
        <div className="featured-eyebrow">
          <span className="dot"></span>
          <span>{ui.today_label[lang]}</span>
        </div>
        <div className="featured-date">{lang === "cht" ? day.date_cht : day.date_eng}</div>

        <div className="featured-scripture">
          <div className="verse">
            {lang === "cht" ? `「${day.scripture.cht}」` : `"${day.scripture.niv}"`}
          </div>
          <div className="ref">— {lang === "cht" ? day.scripture.ref_cht : day.scripture.ref_eng}</div>
        </div>

        <div className="featured-meta">
          <span className="meta-chip">
            <span className="ico"><Icon name={m.icon} size={14} /></span>
            {lang === "cht" ? day.weather.badge_cht : day.weather.badge_eng}
          </span>
          <span className="meta-chip">
            <span className="ico"><Icon name="leaf" size={14} /></span>
            {lang === "cht" ? day.reflection.cht : day.reflection.eng}
          </span>
        </div>

        <a className="featured-cta">
          <span>{ui.read_today[lang]}</span>
          <Icon name="arrow-right" size={16} />
        </a>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// Entry view
// ─────────────────────────────────────────────
function EntryView({ iso, lang, onNav, onOpen }) {
  const ui = window.UI;
  const days = window.DAYS;
  const idx = days.findIndex(d => d.iso === iso);
  const day = days[idx];
  if (!day) return null;
  const prev = days[idx + 1]; // older
  const next = days[idx - 1]; // newer
  const m = moodFor(day);

  // Admin preview override — when admin uploads a day and clicks Preview,
  // it stashes blob URLs here so the entry shows the freshly-uploaded images.
  const previewUrls = (window.__ADMIN_PREVIEW_URLS && window.__ADMIN_PREVIEW_URLS[iso]) || null;
  const imageSrc = previewUrls
    ? (lang === "cht" ? previewUrls.cht : previewUrls.eng)
    : ("assets/days/" + day.iso + "/infographic-" + lang + ".png");

  // Whether a standalone HTML article exists for this language (loaded via iframe)
  const hasArticle = day.articles && day.articles[lang];
  const articleSrc = hasArticle ? `data/days/${day.iso}/article-${lang}.html` : null;
  // Optional in-page preview from admin (Blob URL)
  const articlePreviewUrl = (window.__ADMIN_PREVIEW_ARTICLES && window.__ADMIN_PREVIEW_ARTICLES[iso] && window.__ADMIN_PREVIEW_ARTICLES[iso][lang]) || null;
  const finalArticleSrc = articlePreviewUrl || articleSrc;

  const [lightbox, setLightbox] = React.useState(false);

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [iso]);

  return (
    <div className="page">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
        <button className="entry-back" onClick={() => onNav("archive")}>
          <Icon name="arrow-left" size={14} />
          <span>{ui.back_to_archive[lang]}</span>
        </button>
        <div className="day-stepper">
          <button onClick={() => prev && onOpen(prev.iso)} disabled={!prev} aria-label="Previous day" title={ui.prev_day[lang]}>
            <Icon name="chevron-left" size={16} />
          </button>
          <span className="label">{lang === "cht" ? day.date_cht.split("，")[0] : day.date_eng}</span>
          <button onClick={() => next && onOpen(next.iso)} disabled={!next} aria-label="Next day" title={ui.next_day[lang]}>
            <Icon name="chevron-right" size={16} />
          </button>
        </div>
      </div>

      <div className="entry">
        {lightbox && (
          <div className="lightbox-overlay" onClick={() => setLightbox(false)}>
            <button className="lightbox-close" onClick={() => setLightbox(false)} aria-label="Close">
              <Icon name="x" size={22} />
            </button>
            <img src={imageSrc} alt="" className="lightbox-img" onClick={e => e.stopPropagation()} />
          </div>
        )}
        <div className="entry-image-col">
          <div className="entry-image-frame" style={{ cursor: (day.has_real_infographic || previewUrls) ? "zoom-in" : "default" }}
            onClick={() => { if ((day.has_real_infographic || previewUrls) && imageSrc) setLightbox(true); }}>
            {(day.has_real_infographic || previewUrls) && imageSrc ? (
              <img src={imageSrc} alt={lang === "cht" ? "資訊圖" : "Infographic"} />
            ) : (
              <MiniInfographic day={day} lang={lang} />
            )}
          </div>
          <div className="entry-image-actions">
            <button className="image-action">
              <Icon name="download" size={14} />
              <span>{ui.download_image[lang]}</span>
            </button>
            <button className="image-action">
              <Icon name="share" size={14} />
              <span>{ui.share[lang]}</span>
            </button>
          </div>
        </div>

        <article className="article-col">
          {finalArticleSrc ? (
            <div className="article-iframe-wrap">
              <div className="article-iframe-bar">
                <div className="article-iframe-meta">
                  <span className="dot-light"></span>
                  <span>{lang === "cht" ? "完整文章" : "Full article"}</span>
                  <span className="sep">·</span>
                  <span className="article-iframe-date">{lang === "cht" ? day.date_cht : day.date_eng}</span>
                </div>
                <div className="article-iframe-actions">
                  <a className="iframe-action" href={finalArticleSrc} target="_blank" rel="noopener" title={lang === "cht" ? "在新分頁開啟" : "Open in new tab"}>
                    <Icon name="share" size={13} />
                    <span>{lang === "cht" ? "新分頁" : "New tab"}</span>
                  </a>
                </div>
              </div>
              <iframe
                key={finalArticleSrc}
                src={finalArticleSrc}
                className="article-iframe"
                title={(lang === "cht" ? day.date_cht : day.date_eng) + " — full article"}
                loading="lazy"
              />
            </div>
          ) : (
            <>
              <h2 className="article-title">{lang === "cht" ? "每日靜思" : "A Daily Moment"}</h2>
              <div className="article-date">{lang === "cht" ? day.date_cht : day.date_eng}</div>
              <div className="article-no-html-note">
                {lang === "cht"
                  ? "此語言的完整文章尚未提供。以下顯示結構化內容。"
                  : "Full article for this language not yet available — showing structured content below."}
              </div>
              <div className="article-divider"></div>

              <section className="article-section">
                <div className="article-section-eyebrow">{ui.weather_today[lang]}</div>
                <div className="weather-card">
                  <span className="badge-pill">
                    <Icon name={m.icon} size={13} />
                    {lang === "cht" ? day.weather.badge_cht : day.weather.badge_eng}
                  </span>
                  <div className="article-body">
                    <p>{lang === "cht" ? day.weather.cht : day.weather.eng}</p>
                    <p style={{ fontSize: 13, color: "var(--ink-muted)", marginTop: 12 }}>
                      <Icon name="leaf" size={12} /> {day.history.custom.year} — {lang === "cht" ? day.history.custom.cht : day.history.custom.eng}
                    </p>
                  </div>
                </div>
              </section>

              <section className="article-section">
                <div className="article-section-eyebrow">{lang === "cht" ? "歷史上的今天" : "On this day"}</div>
                <div className="history-rows">
                  <div className="history-card">
                    <div className="icon">🌍</div>
                    <div className="label">{ui.world_event[lang]}</div>
                    <div className="year">{day.history.world.year}</div>
                    <div className="text">{lang === "cht" ? day.history.world.cht : day.history.world.eng}</div>
                  </div>
                  <div className="history-card">
                    <div className="icon">🎂</div>
                    <div className="label">{ui.born_today[lang]}</div>
                    <div className="year">{day.history.birth.year}</div>
                    <div className="text">{lang === "cht" ? day.history.birth.cht : day.history.birth.eng}</div>
                  </div>
                  <div className="history-card">
                    <div className="icon">🕊</div>
                    <div className="label">{ui.passed_today[lang]}</div>
                    <div className="year">{day.history.death.year}</div>
                    <div className="text">{lang === "cht" ? day.history.death.cht : day.history.death.eng}</div>
                  </div>
                </div>
              </section>

              <section className="article-section">
                <div className="scripture-panel">
                  <div className="label">
                    ✝ {lang === "cht" ? "今日金句（和合本）" : "Today's Scripture"}
                  </div>
                  <div className="verse">
                    {lang === "cht" ? `「${day.scripture.cht}」` : `"${day.scripture.niv}"`}
                  </div>
                  <div className="verse-bar"></div>
                  <div className="ref">— {lang === "cht" ? day.scripture.ref_cht : day.scripture.ref_eng}</div>
                </div>
              </section>

              <section className="article-section">
                <div className="article-section-eyebrow">{ui.reflection[lang]}</div>
                <div className="reflection-card">
                  <p className="text">
                    <span className="heart">♥&nbsp;&nbsp;</span>
                    {lang === "cht" ? day.reflection.cht : day.reflection.eng}
                  </p>
                </div>
              </section>

              <div className="article-sources">
                {ui.sources_label[lang]}: {ui.sources_line[lang]}
              </div>
            </>
          )}
        </article>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// About / Reflection view
// ─────────────────────────────────────────────
function AboutView({ lang }) {
  const a = window.ABOUT;
  const paragraphs = lang === "cht" ? a.paragraphs_cht : a.paragraphs_eng;
  return (
    <div className="about-page">
      <div className="about-eyebrow">
        <span className="line"></span>
        <Icon name="cross" size={12} />
        <span>{a.eyebrow[lang]}</span>
        <Icon name="cross" size={12} />
        <span className="line"></span>
      </div>
      <h2 className="about-title">{a.title[lang]}</h2>

      <div className="about-body">
        {paragraphs.map((p, i) => (
          <p key={i} className={"about-para" + (i === paragraphs.length - 1 ? " about-para-final" : "")}>
            {p}
          </p>
        ))}
      </div>

      <a className="rthk-card" href={a.link.href} target="_blank" rel="noopener">
        <div className="rthk-mark">
          <Icon name="info" size={22} />
        </div>
        <div className="rthk-text">
          <div className="rthk-eyebrow">RTHK · Radio 4</div>
          <div className="rthk-title">Reflection</div>
          <div className="rthk-sub">{lang === "cht" ? "每週一至五 · 23:57 · 播出中" : "Monday to Friday · 23:57 · still on air"}</div>
        </div>
        <div className="rthk-cta">
          <span>{lang === "cht" ? a.link.label_cht : a.link.label_eng}</span>
          <Icon name="arrow-right" size={14} />
        </div>
      </a>

      <div className="about-signoff">
        <Icon name="leaf" size={14} />
        <span>{lang === "cht" ? "Bridge & Build × 每日靜思" : "Bridge & Build × A Daily Moment"}</span>
      </div>
    </div>
  );
}

Object.assign(window, { ArchiveView, EntryView, AboutView, FeaturedToday });