(function runCompletedShowcase() {
  const data = globalThis.__ZENITYX_SHOWCASE_DATA__;
  const buildProductPresentation = globalThis.ZenityXShowcaseFilter?.buildProductPresentation;
  const filterProducts = globalThis.ZenityXShowcaseFilter?.filterProducts;
  if (!data || !buildProductPresentation || !filterProducts) return;

  const state = { mission: data.meta.selected_mission };
  const form = document.querySelector("#filters");
  const grid = document.querySelector("#product-grid");
  const count = document.querySelector("#result-count");
  const empty = document.querySelector("#empty-state");

  function unique(field) {
    return [...new Set(data.products.map((item) => item[field]))].sort((a, b) => String(a).localeCompare(String(b)));
  }

  for (const field of ["shape", "color", "clarity", "availability"]) {
    const select = document.querySelector(`#${field}`);
    for (const value of unique(field)) {
      const option = document.createElement("option");
      option.value = value;
      option.textContent = value;
      select.append(option);
    }
  }

  function element(tag, className, text) {
    const node = document.createElement(tag);
    if (className) node.className = className;
    if (text !== undefined) node.textContent = text;
    return node;
  }

  function productCard(product) {
    const card = element("article", "product-card");
    const mission = { id: state.mission, ...data.missions[state.mission] };
    const presentation = buildProductPresentation(product, data.media, mission);
    if (presentation.media.length) {
      const gallery = element("div", "product-media-gallery");
      for (const approvedMedia of presentation.media) {
        const figure = element("figure", "product-media");
        const image = document.createElement("img");
        image.src = `./media/${approvedMedia.file_name}`;
        image.alt = document.documentElement.lang === "th" ? approvedMedia.alt_th : approvedMedia.alt_en;
        figure.append(image, element("figcaption", "concept-label", "CONCEPT MOCKUP · TRAINING ONLY"));
        gallery.append(figure);
      }
      card.append(gallery);
    } else {
      const placeholder = element("div", "product-placeholder");
      placeholder.setAttribute("aria-hidden", "true");
      placeholder.append(element("span", "stone-shape", product.shape.slice(0, 1)));
      card.append(placeholder);
    }

    const body = element("div", "product-body");
    const top = element("div", "product-topline");
    top.append(element("span", "product-id", product.product_id), element("span", `availability availability-${product.availability.toLowerCase()}`, product.availability));
    body.append(top, element("h3", "", product.name));

    const specs = element("dl", "spec-grid");
    for (const [label, value] of [["Shape", product.shape], ["Carat", product.carat.toFixed(2)], ["Color", product.color], ["Clarity", product.clarity]]) {
      const wrapper = element("div");
      wrapper.append(element("dt", "", label), element("dd", "", value));
      specs.append(wrapper);
    }
    body.append(specs);

    if (state.mission === "B2B") {
      body.append(element("p", "product-story", product.capability));
      const commercial = element("div", "commercial-row");
      commercial.append(element("span", "", `MOQ ${product.moq_stones} stones`), element("span", "", `Lead time ${product.lead_time_days} days`));
      body.append(commercial);
    } else {
      body.append(element("p", "product-story", product.approved_story));
      body.append(element("span", "concept-label", "SYNTHETIC COLLECTION STORY"));
    }
    body.append(element("p", "card-cta", presentation.cta));
    card.append(body);
    return card;
  }

  function filters() {
    return Object.fromEntries(new FormData(form).entries());
  }

  function render() {
    const results = filterProducts(data.products, filters());
    grid.replaceChildren(...results.map(productCard));
    count.textContent = `${results.length} / ${data.products.length} รายการ`;
    empty.hidden = results.length !== 0;
    grid.hidden = results.length === 0;
  }

  function renderMission() {
    const mission = data.missions[state.mission];
    document.querySelector("#mission-eyebrow").textContent = `${mission.status.toUpperCase()} · ${mission.eyebrow}`;
    document.querySelector("#mission-story").textContent = mission.story;
    document.querySelector("#mission-cta").textContent = mission.cta;
    const actions = document.querySelector("#mission-actions");
    actions.replaceChildren();
    for (const [id, item] of Object.entries(data.missions)) {
      const button = element("button", `mission-button${id === state.mission ? " is-active" : ""}`, `${id} · ${item.status}`);
      button.type = "button";
      button.setAttribute("aria-pressed", String(id === state.mission));
      button.addEventListener("click", () => {
        state.mission = id;
        renderMission();
        render();
      });
      actions.append(button);
    }
  }

  function reset() {
    form.reset();
    render();
    document.querySelector("#query").focus();
  }

  form.addEventListener("input", render);
  document.querySelector("#reset").addEventListener("click", reset);
  document.querySelector("#empty-reset").addEventListener("click", reset);
  renderMission();
  render();
})();
