export function EscalationPanel({ escalation }) {
  if (!escalation) {
    return `
      <section class="screen-card">
        <div class="screen-intro">
          <p class="step-label">Escalations</p>
          <h2>No pending escalations</h2>
        </div>
        <div class="button-row compact-actions">
          <button id="flowpilot-back-dashboard" class="ghost-button">Back</button>
        </div>
      </section>
    `;
  }

  const reason = escapeHtml(escalation.reason || "Needs review");
  const source = escapeHtml(escalation.context?.source_email || escalation.context?.email_body || "No email preview available.");
  const issue = escapeHtml(escalation.context?.message || escalation.reason || "FlowPilot paused this action.");
  return `
    <section class="screen-card escalation-card">
      <div class="screen-intro">
        <p class="step-label">Needs your input</p>
        <h2>${reason}</h2>
      </div>
      <div class="escalation-grid">
        <div class="escalation-block">
          <p class="field-label">Original email</p>
          <p>${source}</p>
        </div>
        <div class="escalation-block">
          <p class="field-label">Why it paused</p>
          <p>${issue}</p>
        </div>
      </div>
      <div class="action-row two-up">
        <button id="flowpilot-ask-customer" class="primary-button">Ask customer</button>
        <button id="flowpilot-resolve-escalation" class="ghost-button">Approve anyway</button>
      </div>
      <div class="button-row compact-actions">
        <button id="flowpilot-back-dashboard" class="ghost-button">Back</button>
      </div>
    </section>
  `;
}

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