// Daily Dhamma page — seven evergreen teachings (no calendar dates)
function DhammaIllustration({ item, compact }) {
  if (!item) return null;
  const src = item.image || (item.weekday ? "/assets/dhamma/" + item.weekday + ".svg" : null);
  if (!src) return null;
  return (
    <img
      src={src}
      alt=""
      loading="lazy"
      aria-hidden="true"
      className="wn-dhamma-illustration"
      style={{
        width: compact ? "100%" : "100%",
        display: "block",
        borderRadius: compact ? "16px" : "20px",
        aspectRatio: "16 / 9",
        objectFit: "cover",
        marginBottom: compact ? 0 : "22px",
        border: "1px solid rgba(198,154,43,0.18)",
        boxShadow: compact ? "none" : "0 12px 32px rgba(43,33,24,0.08)",
      }}
    />
  );
}

function DhammaCard({ eyebrow, title, children, tone = "warm", className = "" }) {
  const tones = {
    warm: { bg: "var(--bg)", border: "rgba(198,154,43,0.22)", accent: "var(--accent)" },
    forest: { bg: "var(--forest-soft)", border: "rgba(82,98,70,0.18)", accent: "var(--forest)" },
    nordic: { bg: "var(--nordic-soft)", border: "rgba(49,90,115,0.16)", accent: "var(--nordic)" },
    quote: { bg: "linear-gradient(180deg, rgba(251,248,241,0.98), rgba(241,234,220,0.92))", border: "rgba(198,154,43,0.28)", accent: "var(--accent-deep)" },
  };
  const t = tones[tone] || tones.warm;

  return (
    <article
      className={"wn-dhamma-card " + className}
      style={{
        background: t.bg,
        border: "1px solid " + t.border,
        borderRadius: "28px",
        padding: "clamp(22px, 5vw, 36px)",
        boxShadow: "0 18px 48px rgba(43,33,24,0.06)",
      }}
    >
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: "11px",
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: t.accent,
          marginBottom: "14px",
        }}
      >
        {eyebrow}
      </div>
      {title && (
        <h2
          className="wn-dhamma-card-title"
          style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(24px, 5vw, 34px)",
            lineHeight: 1.2,
            letterSpacing: "-0.01em",
            margin: "0 0 18px",
            color: "var(--ink)",
          }}
        >
          {title}
        </h2>
      )}
      {children}
    </article>
  );
}

function DhammaSkeleton() {
  const block = {
    background: "linear-gradient(90deg, rgba(43,33,24,0.06), rgba(43,33,24,0.10), rgba(43,33,24,0.06))",
    backgroundSize: "200% 100%",
    animation: "wn-dhamma-shimmer 1.4s ease infinite",
    borderRadius: "12px",
  };
  return (
    <div aria-hidden="true" style={{ display: "grid", gap: "20px" }}>
      <div style={{ ...block, height: "48px" }} />
      <div style={{ ...block, height: "180px" }} />
      <div style={{ ...block, height: "120px" }} />
      <div style={{ ...block, height: "140px" }} />
      <div style={{ ...block, height: "100px" }} />
    </div>
  );
}

function DhammaArticleList({ t, lang }) {
  const copy = t.dailyDhamma.articles;
  const articles = window.DhammaArticles.list(lang);
  const [openId, setOpenId] = useState(null);

  return (
    <section
      className="wn-dhamma-articles"
      aria-labelledby="dhamma-articles-title"
      style={{
        paddingTop: "clamp(48px, 8vw, 72px)",
        paddingBottom: "clamp(64px, 12vw, 120px)",
        background: "var(--bg-deep)",
        borderTop: "1px solid var(--line)",
      }}
    >
      <div className="wn-container" style={{ maxWidth: "760px" }}>
        <header style={{ marginBottom: "clamp(28px, 4vw, 40px)" }}>
          <Eyebrow>{copy.eyebrow}</Eyebrow>
          <h2 id="dhamma-articles-title" className="wn-h2" style={{ margin: "0 0 12px" }}>{copy.title}</h2>
          <p className="wn-lead" style={{ margin: 0 }}>{copy.intro}</p>
        </header>

        <div style={{ display: "grid", gap: "14px" }}>
          {articles.map(function (article) {
            const open = openId === article.id;
            return (
              <article
                key={article.id}
                id={"dhamma-article-" + article.id}
                className="wn-dhamma-article"
                style={{
                  background: "var(--bg)",
                  border: "1px solid var(--line)",
                  borderRadius: "24px",
                  overflow: "hidden",
                }}
              >
                <button
                  type="button"
                  aria-expanded={open}
                  aria-controls={"dhamma-article-body-" + article.id}
                  onClick={function () { setOpenId(open ? null : article.id); }}
                  style={{
                    width: "100%",
                    display: "grid",
                    gridTemplateColumns: "88px minmax(0, 1fr) auto",
                    gap: "16px",
                    alignItems: "center",
                    padding: "clamp(16px, 3vw, 22px)",
                    border: "none",
                    background: open ? "var(--gold-soft)" : "transparent",
                    cursor: "pointer",
                    textAlign: "left",
                  }}
                  className="wn-dhamma-article-toggle"
                >
                  <img
                    src={article.image}
                    alt=""
                    loading="lazy"
                    aria-hidden="true"
                    style={{
                      width: "88px",
                      height: "88px",
                      borderRadius: "14px",
                      objectFit: "cover",
                      border: "1px solid var(--line)",
                    }}
                  />
                  <div style={{ minWidth: 0 }}>
                    <h3
                      style={{
                        fontFamily: "var(--font-display)",
                        fontSize: "clamp(20px, 4vw, 26px)",
                        lineHeight: 1.25,
                        margin: "0 0 6px",
                        color: "var(--ink)",
                      }}
                    >
                      {article.title}
                    </h3>
                    <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.55, color: "var(--muted)", margin: "0 0 8px" }}>
                      {article.subtitle}
                    </p>
                    <span style={{ fontFamily: "var(--font-body)", fontSize: "13px", color: "var(--accent-deep)" }}>
                      {copy.readMinutes.replace("{n}", String(article.readMinutes))}
                    </span>
                  </div>
                  <span
                    aria-hidden="true"
                    style={{
                      fontFamily: "var(--font-body)",
                      fontSize: "14px",
                      color: "var(--accent-deep)",
                      whiteSpace: "nowrap",
                      paddingRight: "4px",
                    }}
                  >
                    {open ? copy.readLess : copy.readMore}
                  </span>
                </button>

                {open && (
                  <div
                    id={"dhamma-article-body-" + article.id}
                    style={{ padding: "0 clamp(16px, 3vw, 28px) clamp(24px, 4vw, 32px)" }}
                  >
                    {article.sections.map(function (sec, i) {
                      return (
                        <div key={i} style={{ marginTop: i === 0 ? "4px" : "24px" }}>
                          <h4
                            style={{
                              fontFamily: "var(--font-display)",
                              fontSize: "clamp(18px, 3.8vw, 22px)",
                              lineHeight: 1.35,
                              margin: "0 0 10px",
                              color: "var(--ink)",
                            }}
                          >
                            {sec.heading}
                          </h4>
                          <p
                            className="wn-dhamma-body"
                            style={{
                              fontFamily: lang === "th" ? "var(--font-display)" : "var(--font-body)",
                              fontSize: "clamp(17px, 3.6vw, 19px)",
                              lineHeight: 1.85,
                              color: "var(--muted)",
                              margin: 0,
                            }}
                          >
                            {sec.body}
                          </p>
                        </div>
                      );
                    })}
                    <div
                      style={{
                        marginTop: "28px",
                        padding: "clamp(18px, 3vw, 24px)",
                        background: "var(--nordic-soft)",
                        borderRadius: "18px",
                        border: "1px solid rgba(49,90,115,0.12)",
                      }}
                    >
                      <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--nordic)", marginBottom: "10px" }}>
                        {copy.practiceLabel}
                      </div>
                      <p style={{ fontFamily: lang === "th" ? "var(--font-display)" : "var(--font-body)", fontSize: "clamp(17px, 3.6vw, 19px)", lineHeight: 1.8, margin: 0, color: "var(--ink)" }}>
                        {article.practice}
                      </p>
                    </div>
                  </div>
                )}
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function DailyDhammaPage({ t }) {
  const lang = t.locale;
  const copy = t.dailyDhamma;
  const dayLabels = t.templeActivities.schedule.days;
  const weekdays = window.DailyDhammaFallback.weekdays;
  const defaultDay = window.DailyDhammaFallback.todayWeekday();
  const [selectedDay, setSelectedDay] = useState(defaultDay);
  const [state, setState] = useState({ loading: true, items: [], reason: null });

  useEffect(function () {
    var active = true;
    setState({ loading: true, items: [], reason: null });

    window.DailyDhammaApi.fetchWeeklyDhamma(lang).then(function (result) {
      if (!active) return;
      setState({
        loading: false,
        items: result.items || [],
        reason: result.reason,
      });
    });

    return function () { active = false; };
  }, [lang]);

  const item = state.items.find(function (row) {
    return row.weekday === selectedDay;
  }) || state.items[0];

  useEffect(function () {
    if (!item) return;

    const desc = item.daily_message.slice(0, 155) + (item.daily_message.length > 155 ? "…" : "");
    const setMeta = function (sel, attr, val) {
      const el = document.querySelector(sel);
      if (el) el.setAttribute(attr, val);
    };
    setMeta('meta[name="description"]', "content", desc);
    setMeta('meta[property="og:description"]', "content", desc);
    setMeta('meta[name="twitter:description"]', "content", desc);

    const scriptId = "wn-daily-dhamma-jsonld";
    let script = document.getElementById(scriptId);
    if (!script) {
      script = document.createElement("script");
      script.id = scriptId;
      script.type = "application/ld+json";
      document.head.appendChild(script);
    }
    script.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      headline: item.title,
      description: item.daily_message,
      inLanguage: item.language === "th" ? "th-TH" : item.language === "no" ? "nb-NO" : "en-GB",
      author: { "@type": "Organization", name: "Wat Thai Norway" },
      publisher: {
        "@type": "Organization",
        name: "Wat Thai Norway",
        logo: { "@type": "ImageObject", url: "https://watthainorway.com/icons/icon-512.png" },
      },
      mainEntityOfPage: "https://watthainorway.com/daily-dhamma",
    });

    return function () {
      const el = document.getElementById(scriptId);
      if (el) el.remove();
    };
  }, [item]);

  return (
    <div className="wn-dhamma-page">
      <section
        className="wn-dhamma-hero"
        style={{
          background: "linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%)",
          borderBottom: "1px solid var(--line)",
          paddingTop: "clamp(48px, 10vw, 88px)",
          paddingBottom: "clamp(36px, 8vw, 64px)",
        }}
      >
        <div className="wn-container" style={{ maxWidth: "760px" }}>
          <Eyebrow>{copy.eyebrow}</Eyebrow>
          <h1
            className="wn-dhamma-hero-title"
            style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(36px, 8vw, 56px)",
              lineHeight: 1.08,
              letterSpacing: "-0.02em",
              margin: "16px 0 18px",
              color: "var(--ink)",
            }}
          >
            {copy.title}
          </h1>
          <p
            style={{
              fontFamily: "var(--font-body)",
              fontSize: "clamp(16px, 3.8vw, 18px)",
              lineHeight: 1.75,
              color: "var(--muted)",
              maxWidth: "38em",
              margin: 0,
            }}
          >
            {copy.intro}
          </p>
        </div>
      </section>

      <section style={{ paddingTop: "clamp(32px, 7vw, 56px)", paddingBottom: "clamp(64px, 12vw, 120px)" }}>
        <div className="wn-container wn-dhamma-stack" style={{ maxWidth: "760px", display: "grid", gap: "clamp(20px, 4vw, 28px)" }}>
          {state.loading && <DhammaSkeleton />}

          {!state.loading && !state.items.length && (
            <DhammaCard eyebrow={copy.emptyEyebrow} title={copy.emptyTitle} tone="nordic">
              <p className="wn-dhamma-body" style={{ margin: 0, color: "var(--muted)" }}>
                {state.reason === "not_configured" ? copy.emptyConfig : copy.emptyBody}
              </p>
            </DhammaCard>
          )}

          {!state.loading && state.items.length > 0 && (
            <>
              <div
                className="wn-dhamma-days"
                role="tablist"
                aria-label={copy.dayPickerAria}
                style={{
                  display: "flex",
                  flexWrap: "wrap",
                  gap: "8px",
                }}
              >
                {weekdays.map(function (day) {
                  const active = day === selectedDay;
                  return (
                    <button
                      key={day}
                      type="button"
                      role="tab"
                      aria-selected={active}
                      className={"wn-dhamma-day-btn" + (active ? " is-active" : "")}
                      onClick={function () { setSelectedDay(day); }}
                      style={{
                        fontFamily: "var(--font-body)",
                        fontSize: "14px",
                        lineHeight: 1.3,
                        padding: "12px 16px",
                        minHeight: "48px",
                        borderRadius: "999px",
                        border: active ? "1px solid var(--accent-deep)" : "1px solid var(--line)",
                        background: active ? "var(--gold-soft)" : "var(--bg)",
                        color: active ? "var(--accent-deep)" : "var(--ink)",
                        cursor: "pointer",
                        fontWeight: active ? 600 : 400,
                      }}
                    >
                      {dayLabels[day]}
                    </button>
                  );
                })}
              </div>

              {item && (
                <>
                  <DhammaCard eyebrow={dayLabels[item.weekday] || copy.sections.teaching} title={item.title} tone="warm" className="wn-dhamma-featured">
                    <DhammaIllustration item={item} />
                    <p
                      className="wn-dhamma-message"
                      style={{
                        fontFamily: "var(--font-display)",
                        fontSize: "clamp(22px, 5.2vw, 30px)",
                        lineHeight: 1.85,
                        letterSpacing: lang === "th" ? "0.01em" : "0",
                        color: "var(--ink)",
                        margin: 0,
                      }}
                    >
                      {item.daily_message}
                    </p>
                  </DhammaCard>

                  <DhammaCard eyebrow={copy.sections.quote} tone="quote">
                    <blockquote
                      className="wn-dhamma-quote"
                      style={{
                        margin: 0,
                        padding: 0,
                        border: "none",
                        fontFamily: "var(--font-display)",
                        fontSize: "clamp(20px, 4.8vw, 28px)",
                        lineHeight: 1.7,
                        fontStyle: "italic",
                        color: "var(--accent-deep)",
                      }}
                    >
                      {item.quote}
                    </blockquote>
                  </DhammaCard>

                  <DhammaCard eyebrow={copy.sections.sutta} tone="forest">
                    <p
                      className="wn-dhamma-body"
                      style={{
                        fontFamily: "var(--font-body)",
                        fontSize: "clamp(17px, 4vw, 19px)",
                        lineHeight: 1.85,
                        color: "var(--ink)",
                        margin: 0,
                      }}
                    >
                      {item.short_sutta}
                    </p>
                  </DhammaCard>

                  <DhammaCard eyebrow={copy.sections.practice} tone="nordic">
                    <p
                      className="wn-dhamma-practice"
                      style={{
                        fontFamily: lang === "th" ? "var(--font-display)" : "var(--font-body)",
                        fontSize: "clamp(18px, 4.2vw, 22px)",
                        lineHeight: 1.8,
                        color: "var(--ink)",
                        margin: 0,
                      }}
                    >
                      {item.practice_today}
                    </p>
                  </DhammaCard>

                  <div
                    style={{
                      textAlign: "center",
                      paddingTop: "12px",
                      fontFamily: "var(--font-body)",
                      fontSize: "13px",
                      lineHeight: 1.6,
                      color: "var(--muted)",
                    }}
                  >
                    <Ornament width={64} color="var(--accent)" />
                    <p style={{ margin: "18px 0 0" }}>{copy.closing}</p>
                  </div>
                </>
              )}
            </>
          )}
        </div>
      </section>

      <DhammaArticleList t={t} lang={lang} />
    </div>
  );
}