import { WorkflowCard } from "./WorkflowCard.js";

export function WorkflowPicker({ task, selectedOption, current, total }) {
  if (!task) {
    return `
      <section class="screen-card">
        <div class="screen-intro">
          <p class="step-label">Step 4</p>
          <h2>No workflow selected</h2>
        </div>
        <div class="button-row compact-actions">
          <button id="flowpilot-back-button" class="ghost-button">Back</button>
        </div>
      </section>
    `;
  }

  return `
    <section class="screen-card">
      <div class="screen-intro">
        <p class="step-label">Step 4</p>
        <h2>${escapeHtml(task.name)}</h2>
      </div>
      <div class="section-topline"><span class="metric-badge">${current}/${total}</span></div>
      <div class="workflow-grid">
        ${WorkflowCard(task.id, "A", "Full Auto", ["Runs the task end to end", "Updates records automatically", "Sends the final customer reply"], "No review", selectedOption)}
        ${WorkflowCard(task.id, "B", "Review First", ["Prepares the work for you", "Waits for a quick approval", "Sends only after review"], "One approval", selectedOption)}
        ${WorkflowCard(task.id, "C", "Log Only", ["Captures request details", "Stores the context for later", "Leaves the customer reply to you"], "Manual reply", selectedOption)}
      </div>
      <div class="button-row compact-actions">
        <button id="flowpilot-back-button" class="ghost-button">Back</button>
      </div>
    </section>
  `;
}

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