// chrome.jsx — shared site header, footer + admin shell + small UI atoms
// Exposes globals on window so other Babel files can reach them.

// === Image map — local repo photos ============================================
// Keys are used throughout pages as photo identifiers.
// Values are paths relative to the repo root served by Vercel.
// Override individual keys via Admin → Media library.
const AM_PHOTOS = (function() {
  const saved = (function() {
    try { const s = localStorage.getItem("am_photos"); return s ? JSON.parse(s) : null; } catch(e) { return null; }
  })();
  const defaults = {
    // 2024 — La Maison Palm Hills
    hero:       "images/projects/202401-la-maison-palm-hills/LMP (1).jpg",
    baan_ext:   "images/projects/202401-la-maison-palm-hills/LMP (1).jpg",
    baan_int1:  "images/projects/202401-la-maison-palm-hills/LMP (5).jpg",
    baan_int2:  "images/projects/202401-la-maison-palm-hills/LMP (10).jpg",
    baan_kit:   "images/projects/202401-la-maison-palm-hills/LMP (15).jpg",
    baan_court: "images/projects/202401-la-maison-palm-hills/LMP (20).jpg",
    baan_bed:   "images/projects/202401-la-maison-palm-hills/LMP (25).jpg",

    // 2023 — Hua Hin Villa
    p_white:    "images/projects/202303-huahin-villa/HH (1).png",
    // 2023 — KO Residence
    p_courtyard:"images/projects/202301-ko-residence/KO (1).jpg",
    // 2023 — ON76 Residence
    p_meadow:   "images/projects/202304-on76-residence/O76 (1).png",
    // 2023 — Ekkachai Residence
    p_pavilion: "images/projects/202302-ekkachai-residence/01.png",

    // 2022 — Muaklek Residence
    p_concrete: "images/projects/202201-muaklek-residence/ML_01.jpg",

    // 2020 — Lomsak Residence
    p_garden:   "images/projects/202001-lomsak-residence/LS001.jpg",
    // 2020 — 291 Garage House
    p_pool:     "images/projects/202003-291-garage-house/291_01.JPG",

    // 2019 — Star Hunter
    p_rocky:    "images/projects/201903-star-hunter/_MG_2492.JPG",
    // 2019 — Botanic Backyard
    p_forest:   "images/projects/201904-botanic-backyard/BB (3).jpg",
    // 2019 — TS House Renovation
    p_dark:     "images/projects/201902-ts-house-renovation/09.jpg",

    // 2018 — Mizu Mori
    sketch:     "images/projects/201802-mizu-mori/2R7A0397.jpg",

    // Process / journal (reuse project photos)
    craft:      "images/projects/202201-muaklek-residence/ML_10.jpg",
    rain:       "images/projects/202201-muaklek-residence/ML_27.jpg",

    // People (no real team photos yet — reuse project imagery as placeholder)
    founder:    "images/projects/202401-la-maison-palm-hills/LMP (2).jpg",
    p2:         "images/projects/202401-la-maison-palm-hills/LMP (3).jpg",
    p3:         "images/projects/202401-la-maison-palm-hills/LMP (4).jpg",
    p4:         "images/projects/202401-la-maison-palm-hills/LMP (6).jpg",
  };
  return saved ? Object.assign({}, defaults, saved) : defaults;
})();

// === Small helpers ===========================================================
const T = (key) => window.t(key, window.AM_LANG || "en");

// Encode a local file path for safe use inside CSS url('...')
// Resolve a photo reference to a usable URL/path.
// Accepts: an AM_PHOTOS key ("baan_ext"), a local path ("images/projects/..."),
// or an absolute URL ("https://...").
function photoSrc(ref) {
  if (!ref) return null;
  if (/^https?:\/\//.test(ref)) return ref;       // absolute URL
  if (ref.indexOf("/") !== -1) return ref;         // already a path
  return AM_PHOTOS[ref] || null;                   // AM_PHOTOS key lookup
}

// Gallery for a project — Sanity gallery URLs win; otherwise every repo image
// in images/projects/<pj.folder> (listed in images/manifest.js).
function projectGallery(pj) {
  if (!pj) return [];
  if (pj.gallery && pj.gallery.length) return pj.gallery;
  if (pj.folder && window.IMAGE_MANIFEST) {
    return window.IMAGE_MANIFEST
      .filter(function(e) { return e.folder === pj.folder; })
      .map(function(e) { return e.path; });
  }
  var cover = photoSrc(pj.photo);
  return cover ? [cover] : [];
}

function encodeImgPath(p) {
  if (!p) return "";
  // Already an absolute URL — pass through unchanged
  if (/^https?:\/\//.test(p)) return p;
  // Encode each path segment (handles spaces, parens, Thai chars, etc.)
  return p.split("/").map(function(seg) { return encodeURIComponent(seg); }).join("/");
}

function Img({ src, alt, h = 280, label, style }) {
  const photo = src || null;
  const safeSrc = photo ? encodeImgPath(photo) : null;
  return (
    <div
      className={"am-img" + (photo ? "" : " empty")}
      data-photo={photo ? "" : null}
      style={{ height: h, backgroundImage: safeSrc ? `url('${safeSrc}')` : "none", ...style }}
      role="img"
      aria-label={alt || ""}
    >
      {label && <span className="am-img-label">{label}</span>}
    </div>
  );
}

// === Public site header =====================================================
function Nav({ active }) {
  const lang = window.AM_LANG || "en";
  const items = [
    { id: "projects", t: "nav_projects",  href: "#projects" },
    { id: "services", t: "nav_services",  href: "#services" },
    { id: "journal",  t: "nav_journal",   href: "#journal"  },
    { id: "about",    t: "nav_about",     href: "#about"    },
    { id: "contact",  t: "nav_contact",   href: "#contact"  },
  ];
  return (
    <nav className="am-nav">
      <div className="am-logo">
        <span className="mark">A·M</span>
        <span className="am-brand-text">
          <span>architecture's</span>
          <span>matter</span>
        </span>
      </div>
      <div className="am-menu">
        {items.map(it => (
          <a key={it.id} href={it.href} style={{ fontWeight: active === it.id ? 700 : 400 }}>
            {T(it.t)}
          </a>
        ))}
      </div>
      <div className="am-right">
        <span className="am-langswitch">
          <span className={"opt" + (lang === "th" ? " on" : "")}>TH</span>
          <span className="sep">|</span>
          <span className={"opt" + (lang === "en" ? " on" : "")}>EN</span>
        </span>
      </div>
    </nav>
  );
}

// === Public site footer ======================================================
function Footer({ minimal }) {
  if (minimal) {
    return (
      <footer className="am-footer">
        <div className="row" style={{ paddingTop: 18 }}>
          <div className="am-mono">{T("footer_copy")}</div>
          <div className="am-mono">{T("footer_legal")}</div>
        </div>
      </footer>
    );
  }
  return (
    <footer className="am-footer">
      <div className="am-footer-grid">
        <div>
          <div className="am-eyebrow" style={{ marginBottom: 10 }}>{T("contact_studio")}</div>
          <div className="am-body lg">{T("footer_addr_l1")}</div>
          <div className="am-body lg">{T("footer_addr_l2")}</div>
          <div className="am-body sm am-muted" style={{ marginTop: 8 }}>{T("footer_remote")}</div>
        </div>
        <div>
          <div className="am-eyebrow" style={{ marginBottom: 10 }}>{T("nav_contact")}</div>
          <div className="am-body">{T("footer_phone")}</div>
          <div className="am-body">{T("footer_email")}</div>
        </div>
        <div>
          <div className="am-eyebrow" style={{ marginBottom: 10 }}>—</div>
          <div className="am-body">{T("nav_projects")}</div>
          <div className="am-body">{T("nav_services")}</div>
          <div className="am-body">{T("nav_journal")}</div>
          <div className="am-body">{T("nav_about")}</div>
        </div>
        <div>
          <div className="am-eyebrow" style={{ marginBottom: 10 }}>—</div>
          <div className="am-body">{T("footer_socials")}</div>
          <div className="am-body am-muted" style={{ marginTop: 6 }}>{T("footer_legal")}</div>
        </div>
      </div>
      <div className="bigmark">
        <span style={{ display: "block" }}>architecture&rsquo;s</span>
        <span style={{ display: "block" }}>matter</span>
      </div>
      <div className="am-footer-bottom">
        <div className="am-mono sm">{T("footer_copy")}</div>
        <div className="am-mono sm">v2026.05 / website</div>
      </div>
    </footer>
  );
}

// === Section label row =======================================================
function SectionLabel({ left, right }) {
  return (
    <div className="am-section-label">
      <div className="l">{left}</div>
      {right && <div className="r">{right}</div>}
    </div>
  );
}

// === Admin shell ============================================================
function AdminShell({ active, crumb, children, lang }) {
  lang = lang || window.AM_LANG || "en";
  const groups = [
    { label: "Content", items: [
      { id: "dash", t: "adm_dash", count: null },
      { id: "projects", t: "adm_projects", count: 12 },
      { id: "journal", t: "adm_journal", count: 24 },
      { id: "pages", t: "adm_pages", count: 6 },
      { id: "media", t: "adm_media", count: 318 },
    ]},
    { label: "Studio", items: [
      { id: "users", t: "adm_users", count: 4 },
      { id: "settings", t: "adm_settings", count: null },
    ]},
  ];
  return (
    <div className="am-admin">
      <aside className="side">
        <div className="brand">
          <span className="mark">A·M</span>
          <span>{T("adm_brand")}</span>
        </div>
        {groups.map(g => (
          <React.Fragment key={g.label}>
            <div className="group">{g.label}</div>
            {g.items.map(it => (
              <div key={it.id} className={"item" + (active === it.id ? " active" : "")}>
                <span>{T(it.t)}</span>
                {it.count != null && <span className="num">{it.count}</span>}
              </div>
            ))}
          </React.Fragment>
        ))}
        <div className="me">
          <div className="av"></div>
          <div>
            <div className="name">Pongsatorn P.</div>
            <div className="role">Founder · Admin</div>
          </div>
        </div>
      </aside>
      <main className="main">
        <div className="topbar">
          <div className="crumb">
            CMS / <b>{crumb || T("adm_" + (active || "dash"))}</b>
          </div>
          <div className="tools">
            <input className="search" placeholder={lang === "th" ? "ค้นหาทุกที่…" : "Search anywhere…"} />
            <span className="pill">⌘K</span>
            <span className="pill">Live site ↗</span>
          </div>
        </div>
        <div className="body">{children}</div>
      </main>
    </div>
  );
}

// === Translation-pair editor (used in CMS) ==================================
function TransPair({ label, en, th, area, tall }) {
  const cls = "ipt" + (area ? " area" : "") + (tall ? " tall" : "");
  return (
    <div className="am-fld" style={{ marginBottom: 18 }}>
      <label>{label}</label>
      <div className="am-trans" style={{ border: "1px solid var(--line-soft)" }}>
        <div>
          <div className="flag">EN</div>
          <div className="am-body" style={{ whiteSpace: "pre-wrap", minHeight: tall ? 140 : (area ? 70 : 24) }}>{en}</div>
        </div>
        <div>
          <div className="flag">TH</div>
          <div className="am-body" style={{ whiteSpace: "pre-wrap", minHeight: tall ? 140 : (area ? 70 : 24), fontFamily: "var(--thai)" }}>{th}</div>
        </div>
      </div>
    </div>
  );
}

// Expose globals
Object.assign(window, {
  AM_PHOTOS, photoSrc, projectGallery, encodeImgPath, T, Img, Nav, Footer, SectionLabel, AdminShell, TransPair,
});