Enable visual editing

// src/services/sitecoreClient.js - add after fetchLayoutData

export async function fetchEditingData(
  site,
  itemId,
  language,
  { version, layoutKind = "final", editMode = "false" } = {},
) {
  const endpoint = import.meta.env.SITECORE_EDGE_PLATFORM_URL;
  const contextId = import.meta.env.SITECORE_EDGE_CONTEXT_ID;

  const query = `
    query EditingQuery(
      $siteName: String!
      $itemId:   String!
      $language: String!
      $version:  String
      $pageSize: Int = 1000
      $after:    String
    ) {
      item(path: $itemId, language: $language, version: $version) {
        rendered
      }
      site {
        siteInfo(site: $siteName) {
          dictionary(language: $language, first: $pageSize, after: $after) {
            results { key value }
            pageInfo { endCursor hasNext }
          }
        }
      }
    }
  `;

  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-sitecore-contextid": contextId,
      // sc_editMode instructs Edge to return draft content and field metadata.
      // sc_layoutKind selects between final and shared layout variants.
      sc_editMode: editMode,
      sc_layoutKind: layoutKind,
    },
    body: JSON.stringify({
      query,
      variables: { siteName: site, itemId, language, version },
    }),
  });

  const result = await response.json();
  if (result.errors) {
    throw new Error(JSON.stringify(result.errors));
  }

  const item = result?.data?.item;
  if (!item) return null; // item not found

  // Parse the rendered layout data (same structure as the layout query).
  const rendered = item.rendered;
  const layoutData =
    typeof rendered === "string" ? JSON.parse(rendered) : rendered;

  // Collect the first page of dictionary entries.
  // TODO: For sites with large dictionaries, implement pagination using
  // result.data.site.siteInfo.dictionary.pageInfo.hasNext and endCursor.
  const dictionary = {};
  for (const { key, value } of result?.data?.site?.siteInfo?.dictionary
    ?.results ?? []) {
    dictionary[key] = value;
  }

  return { layoutData, dictionary };
}

// editing.go
package main

import (
  "bytes"
  "encoding/json"
  "fmt"
  "net/http"
  "os"
)

const editingQuery = `
query EditingQuery(
  $siteName: String!
  $itemId:   String!
  $language: String!
  $version:  String
  $pageSize: Int = 1000
  $after:    String
) {
  item(path: $itemId, language: $language, version: $version) {
    rendered
  }
  site {
    siteInfo(site: $siteName) {
      dictionary(language: $language, first: $pageSize, after: $after) {
        results { key value }
        pageInfo { endCursor hasNext }
      }
    }
  }
}`

// editingData holds the layout data and site dictionary returned by the
// editing GraphQL query.
type editingData struct {
  LayoutData map[string]any
  Dictionary map[string]string
}

// fetchEditingData retrieves editing layout data and the site dictionary for
// the given item using the Sitecore Edge GraphQL editing query.
//
//   - itemId    - the Sitecore item GUID received as sc_itemid
//   - editMode  - "true" to fetch draft content (edit canvas),
//                 "false" for preview
//   - layoutKind - "final" or "shared"; defaults to "final"
func fetchEditingData(site, itemId, language, version, layoutKind, editMode string) (*editingData, error) {
  endpoint := os.Getenv("SITECORE_EDGE_PLATFORM_URL")
  contextID := os.Getenv("SITECORE_EDGE_CONTEXT_ID")

  payload, err := json.Marshal(map[string]any{
    "query": editingQuery,
    "variables": map[string]any{
      "siteName": site,
      "itemId":   itemId,
      "language": language,
      "version":  version,
    },
  })
  if err != nil {
    return nil, fmt.Errorf("marshal: %w", err)
  }

  req, err := http.NewRequest(http.MethodPost, endpoint, bytes.NewReader(payload))
  if err != nil {
    return nil, fmt.Errorf("new request: %w", err)
  }
  req.Header.Set("Content-Type", "application/json")
  req.Header.Set("x-sitecore-contextid", contextID)

  // sc_editMode instructs Edge to return draft content and field metadata.
  // sc_layoutKind selects between final and shared layout variants.
  req.Header.Set("sc_editMode", editMode)     // "true" or "false"
  req.Header.Set("sc_layoutKind", layoutKind) // "final" or "shared"

  resp, err := http.DefaultClient.Do(req)
  if err != nil {
    return nil, fmt.Errorf("edge editing request: %w", err)
  }
  defer resp.Body.Close()

  var gql struct {
    Data struct {
      Item *struct {
        Rendered json.RawMessage `json:"rendered"`
      } `json:"item"`
      Site *struct {
        SiteInfo *struct {
          Dictionary *struct {
            Results []struct {
              Key   string `json:"key"`
              Value string `json:"value"`
            } `json:"results"`
            PageInfo struct {
              EndCursor string `json:"endCursor"`
              HasNext   bool   `json:"hasNext"`
            } `json:"pageInfo"`
          } `json:"dictionary"`
        } `json:"siteInfo"`
      } `json:"site"`
    } `json:"data"`
    Errors []struct {
      Message string `json:"message"`
    } `json:"errors"`
  }

  if err := json.NewDecoder(resp.Body).Decode(&gql); err != nil {
    return nil, fmt.Errorf("decode editing response: %w", err)
  }
  if len(gql.Errors) > 0 {
    return nil, fmt.Errorf("graphql editing: %s", gql.Errors[0].Message)
  }
  if gql.Data.Item == nil {
    return nil, nil // item not found
  }

  // Parse the rendered layout data (same structure as the layout query).
  raw := gql.Data.Item.Rendered
  var layoutData map[string]any
  if json.Unmarshal(raw, &layoutData) != nil {
    var s string
    if json.Unmarshal(raw, &s) != nil {
      return nil, fmt.Errorf("cannot parse rendered field")
    }
    if err := json.Unmarshal([]byte(s), &layoutData); err != nil {
      return nil, fmt.Errorf("cannot parse rendered string: %w", err)
    }
  }

  // Collect the first page of dictionary entries.
  // TODO: For sites with large dictionaries, implement pagination using
  // gql.Data.Site.SiteInfo.Dictionary.PageInfo.HasNext and EndCursor.
  dictionary := make(map[string]string)
  if gql.Data.Site != nil &&
    gql.Data.Site.SiteInfo != nil &&
    gql.Data.Site.SiteInfo.Dictionary != nil {
    for _, entry := range gql.Data.Site.SiteInfo.Dictionary.Results {
      dictionary[entry.Key] = entry.Value
    }
  }

  return &editingData{LayoutData: layoutData, Dictionary: dictionary}, nil
}

// src/services/editingRenderer.js

const DEFAULT_UID = "00000000-0000-0000-0000-000000000000";

function escHtml(str) {
  return String(str ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

// --- Metadata code blocks ---

function metaOpen(chrometype, id) {
  return `<code type="text/sitecore" chrometype="${chrometype}" class="scpm" kind="open" id="${escHtml(id)}"></code>`;
}

function metaClose(chrometype) {
  return `<code type="text/sitecore" chrometype="${chrometype}" class="scpm" kind="close"></code>`;
}

// metaField wraps rendered field HTML with field-chrome metadata code blocks.
// The Page builder reads these to identify which fields a content author can
// edit inline.
//
// fieldData must be the full field object (the object that contains both
// "value" and, in edit mode, "metadata"). If no "metadata" key is present,
// the rendered HTML is returned unchanged.
export function metaField(fieldData, rendered) {
  const metadata = fieldData?.metadata;
  if (!metadata) return rendered;
  return (
    `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(metadata)}</code>` +
    rendered +
    `<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>`
  );
}

// --- Editing-aware component renderers ---

function renderImageEditing(fields) {
  const f = fields?.Image;
  const img = f?.value ?? f?.jsonValue?.value;
  if (!img?.src) return metaField(f, "");
  const imgTag = `<img src="${escHtml(img.src)}" alt="${escHtml(img.alt ?? "")}" width="${escHtml(img.width ?? "")}" height="${escHtml(img.height ?? "")}" />`;

  // General Link field, with jsonValue as a fallback for direct item queries.
  const linkField = fields?.TargetUrl;
  const link = linkField?.value ?? linkField?.jsonValue?.value;
  const content = link?.href
    ? `<a href="${escHtml(link.href)}"${link.target ? ` target="${escHtml(link.target)}"` : ""}>${imgTag}</a>`
    : imgTag;

  // Plain text caption field.
  const caption = fields?.ImageCaption?.value;
  const html = caption
    ? `<figure>${content}<figcaption>${escHtml(caption)}</figcaption></figure>`
    : `<figure>${content}</figure>`;
  return metaField(f, html);
}

function renderPromoEditing(fields) {
  for (const name of ["PromoText", "PromoText2", "PromoText3"]) {
    const f = fields?.[name];
    if (f?.value) return metaField(f, f.value);
  }
  return "";
}

function renderRichTextEditing(fields) {
  const f = fields?.Text;
  if (!f?.value) return metaField(f, "");
  return metaField(f, `<div>${f.value}</div>`);
}

function renderTitleEditing(fields, params) {
  const f = fields?.heading;
  if (!f?.value) return metaField(f, "");
  const classAttr = params?.cssClass
    ? ` class="${escHtml(params.cssClass)}"`
    : "";
  return metaField(f, `<h1${classAttr}>${escHtml(f.value)}</h1>`);
}

// editingPassthroughComponents is the set of structural wrapper components
// that have no fields of their own and only forward nested placeholders.
// Components registered here in componentMap use a passthrough renderer
// that calls Placeholder. In editing mode that would bypass
// renderPlaceholderEditing, stripping all rendering and field chromes from
// every component nested inside the wrapper.
//
// Add any new passthrough/container components here alongside adding them
// to componentMap.
export const editingPassthroughComponents = new Set([
  "Container",
  "ContainerFullBleed",
  "PartialDesignDynamicPlaceholder",
]);

// editingComponentMap maps Sitecore component names to editing-aware renderer
// functions. Each renderer wraps its field output with metaField so that the
// Page builder can activate inline field editing on click.
//
// ColumnSplitter is handled separately in renderComponentEditing because it
// renders nested placeholders and needs the component's own uid.
const editingComponentMap = {
  Image: renderImageEditing,
  Promo: renderPromoEditing,
  RichText: renderRichTextEditing,
  Title: renderTitleEditing,
};

// renderColumnSplitterEditing mirrors ColumnSplitter.astro but calls
// renderPlaceholderEditing so that nested column placeholders have metadata
// code blocks and accept component drops in the Page builder canvas.
function renderColumnSplitterEditing(fields, params, placeholders, uid) {
  const enabled = params?.EnabledPlaceholders
    ? params.EnabledPlaceholders.split(",").map((s) => s.trim())
    : null;

  const cols = Object.entries(placeholders)
    .map(([key, items]) => {
      const m = key.match(/^column-(\d+)-/);
      if (!m) return null;
      const index = Number(m[1]);
      if (enabled && !enabled.includes(String(index))) return null;
      return { key, items, index };
    })
    .filter(Boolean)
    .sort((a, b) => a.index - b.index);

  let html = `<div data-component="ColumnSplitter" class="${escHtml(params?.GridParameters ?? "")}">`;
  for (const col of cols) {
    const colClass = params?.[`ColumnWidth${col.index}`] ?? "";
    html += `<div data-column="${col.index}" class="${escHtml(colClass)}">`;
    html += renderPlaceholderEditing(col.key, col.items, uid);
    html += "</div>";
  }
  html += "</div>";
  return html;
}

// renderPlaceholderEditing renders a placeholder wrapped in metadata code
// blocks. parentUID is the uid of the route or component that owns this
// placeholder.
export function renderPlaceholderEditing(
  name,
  items,
  parentUID = DEFAULT_UID,
) {
  const phId = `${name}_${parentUID}`;
  return (
    metaOpen("placeholder", phId) +
    `<div data-placeholder="${escHtml(name)}">` +
    (items ?? []).map((item) => renderComponentEditing(item)).join("") +
    "</div>" +
    metaClose("placeholder")
  );
}

// renderComponentEditing renders a single component wrapped in metadata code
// blocks. It delegates field rendering to editingComponentMap (which adds
// field-chrome wrapping), with a fallback to renderMissingComponentEditing
// for any components not listed in editingComponentMap.
export function renderComponentEditing(comp) {
  const componentName = comp?.componentName ?? "";
  const uid = comp?.uid || DEFAULT_UID;
  const fields = comp?.fields ?? {};
  const params = comp?.params ?? {};
  const rawPH = comp?.placeholders ?? {};
  const placeholders = Object.fromEntries(
    Object.entries(rawPH).map(([k, v]) => [k, Array.isArray(v) ? v : []]),
  );

  let inner;
  if (componentName === "ColumnSplitter") {
    // ColumnSplitter renders nested placeholders; it needs the component uid
    // to build correct placeholder IDs for drag-and-drop in the canvas.
    inner = renderColumnSplitterEditing(fields, params, placeholders, uid);
  } else if (editingPassthroughComponents.has(componentName)) {
    // Passthrough components have no fields of their own - they only forward
    // nested placeholders. Delegating to the normal component map would call
    // Placeholder instead of renderPlaceholderEditing, stripping all chromes
    // from every component nested inside the wrapper.
    inner = Object.entries(placeholders)
      .map(([key, items]) => renderPlaceholderEditing(key, items, uid))
      .join("");
  } else if (editingComponentMap[componentName]) {
    inner = editingComponentMap[componentName](fields, params, placeholders);
  } else {
    inner = renderMissingComponentEditing(componentName, placeholders, uid);
  }

  return metaOpen("rendering", uid) + inner + metaClose("rendering");
}

// renderMissingComponentEditing renders unmapped components in editing mode,
// preserving their nested placeholders with metadata wrappers.
export function renderMissingComponentEditing(
  componentName,
  placeholders,
  uid = DEFAULT_UID,
) {
  const inner = Object.entries(placeholders)
    .map(([key, items]) => renderPlaceholderEditing(key, items, uid))
    .join("");
  return `<div data-missing-component="${escHtml(componentName)}">${inner}</div>`;
}

// buildEditingHeadScripts extracts the three categories of editing scripts
// from sitecore.context and returns them as a combined block of <script>
// tags ready to embed in <head>:
//
// 1. clientScripts - JS bundle URLs that the Page builder provides. Loading
// these activates the editing UI overlays inside the canvas iframe.
// 2. hrz-canvas-state - JSON identifying the item, site, language, and mode
// for the canvas. The Page builder reads this on load.
// 3. hrz-canvas-verification-token - token that verifies the communication
// channel between the iframe and the Page builder.
export function buildEditingHeadScripts(ctx) {
  let html = "";

  // 1. Emit a <script src="..."> for each URL in clientScripts.
  for (const url of ctx?.clientScripts ?? []) {
    if (typeof url === "string") {
      html += `<script type="text/javascript" src="${escHtml(url)}"></script>`;
    }
  }

  const clientData = ctx?.clientData ?? {};

  // 2. Emit canvas state and verification token from clientData.
  if (clientData["hrz-canvas-state"] !== undefined) {
    html += `<script id="hrz-canvas-state" type="application/json">${JSON.stringify(clientData["hrz-canvas-state"])}</script>`;
  }

  if (typeof clientData["hrz-canvas-verification-token"] === "string") {
    html += `<script id="hrz-canvas-verification-token" type="application/json">${escHtml(clientData["hrz-canvas-verification-token"])}</script>`;
  }

  return html;
}

// renderLayoutEditing returns a complete HTML editing page string.
//
// headHtml is a string of <link> and <script> tags copied from your Astro
// layout component's <head>. Passing these tags here ensures the editing
// canvas loads with the same styles and scripts as the published site.
// Astro API routes cannot call .astro components directly, so these tags
// must be provided explicitly. Leave headHtml empty if your layout has no
// external assets.
export function renderLayoutEditing(layoutData, headHtml = "") {
  const sitecore = layoutData?.sitecore ?? {};
  const route = sitecore?.route;
  const ctx = sitecore?.context ?? {};
  const editingHeadScripts = buildEditingHeadScripts(ctx);

  if (!route) {
    return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Page not found</title>${headHtml}${editingHeadScripts}</head><body><main><p>Layout data is missing for this route.</p></main><script id="jss-hrz-editing" type="application/json">{}</script></body></html>`;
  }

  const routeUID = route.uid ?? DEFAULT_UID;
  const phs = route.placeholders ?? {};
  const title = escHtml(route.displayName || route.name || "");

  const header = renderPlaceholderEditing(
    "headless-header",
    phs["headless-header"] ?? [],
    routeUID,
  );
  const main = renderPlaceholderEditing(
    "headless-main",
    phs["headless-main"] ?? [],
    routeUID,
  );
  const footer = renderPlaceholderEditing(
    "headless-footer",
    phs["headless-footer"] ?? [],
    routeUID,
  );

  return `<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title}</title>
    ${headHtml}
    ${editingHeadScripts}
</head>
<body>
    <header>${header}</header>
    <main>${main}</main>
    <footer>${footer}</footer>
    <script id="jss-hrz-editing" type="application/json">{}</script>
</body>
</html>`;
}

// src/components/componentMap.js
import PartialDesignDynamicPlaceholder from './PartialDesignDynamicPlaceholder.astro';

export const componentMap = {
  // ...existing entries...
  'ContainerFullBleed': PartialDesignDynamicPlaceholder,
};