export function CategorizationScreen({ summary, groups, selectedTaskIds }) {
  return `
    <section class="screen-card">
      <div class="screen-intro">
        <p class="step-label">Step 2</p>
        <h2>Review suggestions</h2>
        <p id="flowpilot-summary" class="screen-copy">${escapeHtml(summary)}</p>
      </div>
      <div class="section-topline"><span class="metric-badge">${selectedTaskIds.length} selected</span></div>
      <div id="flowpilot-categories" class="category-grid">
        ${groups.map((group) => renderGroup(group, selectedTaskIds)).join("")}
      </div>
      <div class="button-row split-actions">
        <button id="flowpilot-back-button" class="ghost-button">Back</button>
        <button id="flowpilot-continue-tasks" class="primary-button">Continue to rules</button>
      </div>
    </section>
  `;
}

function renderGroup(group, selectedTaskIds) {
  return `
    <div class="category-group">
      <div class="group-header">
        <p class="group-title">${escapeHtml(group.title)}</p>
        <span class="group-count">${group.items.length}</span>
      </div>
      <ul class="selection-list">
        ${group.items.length ? group.items.map((task) => `
          <li>
            <label class="selection-tile">
              <input type="checkbox" data-task-id="${escapeHtml(task.id)}" ${selectedTaskIds.includes(task.id) ? "checked" : ""} />
              <span>${escapeHtml(task.name)}</span>
            </label>
          </li>
        `).join("") : `<li class="empty-copy">No suggestions in this category.</li>`}
      </ul>
    </div>
  `;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}