// Shared icons + chrome components
// Inline SVG icons (Lucide-style, 1.5 stroke)

const Icon = ({ name, size = 18, ...rest }) => {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
  switch (name) {
    case "search": return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "x":      return <svg {...p}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case "globe":  return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case "calendar": return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg>;
    case "arrow-left":  return <svg {...p}><path d="m15 6-6 6 6 6"/></svg>;
    case "arrow-right": return <svg {...p}><path d="m9 6 6 6-6 6"/></svg>;
    case "chevron-left":  return <svg {...p}><path d="m15 18-6-6 6-6"/></svg>;
    case "chevron-right": return <svg {...p}><path d="m9 18 6-6-6-6"/></svg>;
    case "download": return <svg {...p}><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M5 21h14"/></svg>;
    case "share":    return <svg {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5 15.4 17.5M15.4 6.5 8.6 10.5"/></svg>;
    case "cloud-rain": return <svg {...p}><path d="M16 14a4 4 0 1 0-4-4"/><path d="M3 14h12a4 4 0 0 0 0-8 6 6 0 0 0-11.6 2"/><path d="M8 18v3M12 19v3M16 18v3"/></svg>;
    case "book":     return <svg {...p}><path d="M4 3h12a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H4z"/><path d="M4 3v17"/></svg>;
    case "clock":    return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "cloud":    return <svg {...p}><path d="M17 18a4 4 0 0 0 0-8 6 6 0 0 0-11.6 2A3.5 3.5 0 0 0 6 18Z"/></svg>;
    case "feather":  return <svg {...p}><path d="M20.5 3.5a5.5 5.5 0 0 0-7.78 0L4 12.22V20h7.78l8.72-8.72a5.5 5.5 0 0 0 0-7.78Z"/><path d="M4 20 21 3M16 8 8 16"/></svg>;
    case "braces":   return <svg {...p}><path d="M8 3a3 3 0 0 0-3 3v3a3 3 0 0 1-2 3 3 3 0 0 1 2 3v3a3 3 0 0 0 3 3"/><path d="M16 3a3 3 0 0 1 3 3v3a3 3 0 0 0 2 3 3 3 0 0 0-2 3v3a3 3 0 0 1-3 3"/></svg>;
    case "image":    return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg>;
    case "upload":   return <svg {...p}><path d="M12 17V3m0 0-4 4m4-4 4 4"/><path d="M5 17v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3"/></svg>;
    case "sun":      return <svg {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5"/></svg>;
    case "wind":     return <svg {...p}><path d="M3 8h13a3 3 0 1 0-3-3"/><path d="M3 12h17a3 3 0 1 1-3 3"/><path d="M3 16h10"/></svg>;
    case "droplets": return <svg {...p}><path d="M7 2.5c-1.5 2.5-4 5.5-4 8a4 4 0 1 0 8 0c0-2.5-2.5-5.5-4-8Z"/><path d="M16 8c-1 1.5-3 4-3 6a3 3 0 1 0 6 0c0-2-2-4.5-3-6Z"/></svg>;
    case "sparkle":  return <svg {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6 7.7 7.7M16.3 16.3l2.1 2.1M5.6 18.4 7.7 16.3M16.3 7.7l2.1-2.1"/></svg>;
    case "info":     return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>;
    case "cross":    return <svg {...p}><path d="M12 3v18M5 8h14"/></svg>;
    case "heart":    return <svg {...p} fill="currentColor" stroke="none"><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9Z"/></svg>;
    case "leaf":     return <svg {...p}><path d="M11 20A7 7 0 0 1 4 13c0-5 5-9 11-9 1 0 2 .2 3 .5 0 5-2 9-6 12"/><path d="M2 21c5-3 7-7 8-12"/></svg>;
    default: return null;
  }
};

// Lang toggle
function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="tablist" aria-label="Language">
      <button className={lang === "cht" ? "active" : ""} onClick={() => setLang("cht")} aria-pressed={lang === "cht"}>繁中</button>
      <button className={lang === "eng" ? "active" : ""} onClick={() => setLang("eng")} aria-pressed={lang === "eng"}>EN</button>
    </div>
  );
}

// Top bar
function TopBar({ lang, setLang, query, setQuery, onNav, view }) {
  const ui = window.UI;
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="brand" onClick={() => onNav("archive")} role="button" tabIndex={0}>
          <div className="brand-mark" aria-hidden="true">
            <img src="assets/dove.svg" width="26" height="26" alt="" />
          </div>
          <div className="brand-text">
            <span className="brand-cht">每日靜思</span>
            <span className="brand-eng">A Daily Moment</span>
          </div>
        </div>

        <div className="searchbar">
          <Icon name="search" size={16} style={{ color: "var(--ink-muted)", flexShrink: 0 }} />
          <input
            type="text"
            value={query}
            onChange={(e) => { setQuery(e.target.value); if (view !== "archive") onNav("archive"); }}
            placeholder={ui.search_placeholder[lang]}
            aria-label={ui.search_placeholder[lang]}
          />
          {query ? (
            <button className="search-clear" onClick={() => setQuery("")} aria-label="Clear">
              <Icon name="x" size={14} />
            </button>
          ) : null}
        </div>

        <div className="topbar-right">
          <button className={"nav-btn" + (view === "about" ? " primary" : "")} onClick={() => onNav("about")}>
            {ui.nav_about[lang]}
          </button>
          <button className={"nav-btn" + (view === "admin" ? " primary" : "")} onClick={() => onNav("admin")} title="Internal upload tool" style={{ display: "none" }}>
            {lang === "cht" ? "管理" : "Admin"}
          </button>
          <LangToggle lang={lang} setLang={setLang} />
        </div>
      </div>
    </header>
  );
}

// Bottom Bridge & Build footer — tri-lingual, click cycles eng → cht → chs
const BB_LANGS = [
  { code: "eng", slogan: "Making creativity, teaching and digital tools truly usable.", rights: "All rights reserved.", next: "cht", nextLabel: "Switch to 繁體中文" },
  { code: "cht", slogan: "讓創意教學與數碼工具真正落地",                                 rights: "版權所有。",            next: "chs", nextLabel: "Switch to 简体中文" },
  { code: "chs", slogan: "让创意教学与数字工具真正落地",                                 rights: "版权所有。",            next: "eng", nextLabel: "Switch to English" }
];
function BBFoot({ lang }) {
  // Pick a sensible default based on the site's current language
  const initialIdx = lang === "cht" ? 1 : 0;
  const [idx, setIdx] = React.useState(initialIdx);
  React.useEffect(() => { setIdx(lang === "cht" ? 1 : 0); }, [lang]);
  const cur = BB_LANGS[idx];
  const cycle = () => setIdx((idx + 1) % BB_LANGS.length);
  const year = new Date().getFullYear();
  return (
    <div className="bb-footer-wrapper">
      <footer className="bb-footer">
        <div className={"bb-footer-inner bb-font-" + cur.code}>
          <a href="https://bridge-n-build.org/" target="_blank" rel="noopener" className="bb-logo-link">
            <img src="assets/bridge-n-build-logo.png" alt="Bridge & Build" className="bb-logo-img" />
            <span className="bb-tip"><span>🌐</span><span>bridge-n-build.org</span></span>
          </a>
          <p className="bb-slogan">{cur.slogan}</p>
          <div className="bb-copy">
            <span>© {year}</span>
            <span className="bb-brand" onClick={() => window.open("https://bridge-n-build.org/", "_blank", "noopener")}>
              Bridge &amp; Build
              <span className="bb-tip"><span>🌐</span><span>bridge-n-build.org</span></span>
            </span>
            <span>.</span>
            <span className="bb-rights" onClick={cycle} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); cycle(); } }}>
              <span>{cur.rights}</span>
              <span className="bb-tip"><span>🌐</span><span>{cur.nextLabel}</span></span>
            </span>
          </div>
        </div>
      </footer>
    </div>
  );
}

// Map weather mood (cht) to a class + icon
const moodMap = {
  "大雨":     { cls: "mood-rain",    icon: "cloud-rain" },
  "雷暴":     { cls: "mood-storm",   icon: "cloud-rain" },
  "短暫陽光": { cls: "mood-sunny",   icon: "sun" },
  "微雨":     { cls: "mood-drizzle", icon: "droplets" },
  "潮濕":     { cls: "mood-humid",   icon: "droplets" },
  "多風":     { cls: "mood-windy",   icon: "wind" },
  "多雲":     { cls: "mood-cloud",   icon: "cloud" },
  "晴朗":     { cls: "mood-sunny",   icon: "sun" }
};
function moodFor(day) {
  return moodMap[day.weather.mood] || { cls: "mood-cloud", icon: "cloud" };
}

// MiniInfographic — small renderable thumbnail for archive grid
function MiniInfographic({ day, lang }) {
  const m = moodFor(day);
  const ui = window.UI;
  return (
    <div className={"mini-info " + m.cls + (lang === "eng" ? " lang-eng" : "")}>
      <div className="mini-header">
        <div className="mini-title">{lang === "cht" ? "每日靜思" : "A Daily Moment"}</div>
        <div className="mini-date">{lang === "cht" ? day.date_cht : day.date_eng}</div>
        <div className="mini-cross"></div>
      </div>
      <div className="mini-weather">
        <div className="badge">{lang === "cht" ? day.weather.badge_cht : day.weather.badge_eng}</div>
      </div>
      <div className="mini-history">
        <div className="mini-h">
          <div className="icon">🌍</div>
          <div className="year">{day.history.world.year}</div>
        </div>
        <div className="mini-h">
          <div className="icon">🎂</div>
          <div className="year">{day.history.birth.year}</div>
        </div>
        <div className="mini-h">
          <div className="icon">🕊</div>
          <div className="year">{day.history.death.year}</div>
        </div>
      </div>
      <div className="mini-scripture-panel">
        <div className="label">✝ {lang === "cht" ? "今日金句" : "Today's Scripture"}</div>
        <div className="verse">
          {(lang === "cht" ? day.scripture.cht : day.scripture.niv).slice(0, 38)}
          {(lang === "cht" ? day.scripture.cht : day.scripture.niv).length > 38 ? "…" : ""}
        </div>
        <div className="ref">{lang === "cht" ? day.scripture.ref_cht : day.scripture.ref_eng}</div>
      </div>
      <div className="mini-reflection">
        <span className="heart">♥</span> {lang === "cht" ? day.reflection.cht : day.reflection.eng}
      </div>
      <div className="mini-foot">
        <div className="brand">Bridge &amp; Build</div>
      </div>
    </div>
  );
}

// Make everything global
Object.assign(window, { Icon, LangToggle, TopBar, BBFoot, MiniInfographic, moodFor });