/**
 * Deterministic, madarX-branded "agent created" HTML card.
 * Rendered when the orchestrator fires `create_agent`, so the user always sees
 * a designed confirmation artifact instead of an LLM-generated paragraph.
 */

function esc(value) {
  return String(value ?? '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

function fileLabel(relPath) {
  const segments = String(relPath || '').split(/[\\/]/).filter(Boolean);
  return segments[segments.length - 1] || relPath || '';
}

export function buildAgentCreatedHtml(agent, files = []) {
  const name = esc(agent?.name || 'madarX Custom Agent');
  const mission = esc(agent?.mission || '');
  const schedule = esc(agent?.schedule || 'on demand');
  const engine = esc(agent?.engine || 'anthropic');
  const model = esc(agent?.model || '');
  const approval = esc(agent?.approval || 'human-in-loop');
  const tools = Array.isArray(agent?.tools) ? agent.tools : [];
  const fileList = Array.isArray(files) ? files : [];
  const confirmPrompt = `Run the ${agent?.name || 'new'} agent now`;

  const toolChips = tools.length
    ? tools.map(t => `<li class="chip">${esc(t)}</li>`).join('')
    : '<li class="chip chip-muted">no tools assigned</li>';

  const fileRows = fileList.length
    ? fileList.map(file => `
        <li class="file">
          <span class="file-name">${esc(fileLabel(file))}</span>
          <span class="file-path">${esc(file)}</span>
        </li>`).join('')
    : '<li class="file file-empty">No workspace files written.</li>';

  return `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>${name} — Agent created</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: #0F0F11;
      color: #E8E8E5;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-feature-settings: 'ss01', 'ss02';
      -webkit-font-smoothing: antialiased;
      padding: 40px clamp(20px, 4vw, 56px) 56px;
      min-height: 100vh;
    }
    .stage {
      max-width: 720px;
      margin: 0 auto;
      display: grid;
      gap: 32px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #C2452A;
    }
    .eyebrow::before {
      content: "";
      width: 6px; height: 6px; border-radius: 50%;
      background: #C2452A;
      box-shadow: 0 0 0 4px rgba(194, 69, 42, 0.18);
    }
    h1 {
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.05;
      margin: 14px 0 0;
      color: #E8E8E5;
    }
    .mission {
      max-width: 620px;
      font-size: 16px;
      line-height: 1.6;
      color: #DCDCD8;
      margin: 14px 0 0;
    }
    .meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1px;
      background: #1A1A1D;
      border: 1px solid #1A1A1D;
      border-radius: 14px;
      overflow: hidden;
    }
    .meta-cell {
      background: #131316;
      padding: 18px 20px;
      display: grid;
      gap: 6px;
    }
    .meta-label {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #6F6F73;
    }
    .meta-value {
      font-size: 14px;
      color: #E8E8E5;
      font-weight: 500;
    }
    .section h2 {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #6F6F73;
      margin: 0 0 14px;
      font-weight: 500;
    }
    .chips {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .chip {
      padding: 7px 13px;
      border-radius: 999px;
      background: #18181B;
      border: 1px solid #25252A;
      color: #DCDCD8;
      font-size: 12.5px;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      letter-spacing: 0.02em;
    }
    .chip-muted {
      color: #6F6F73;
      font-style: italic;
    }
    .files {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 1px;
      background: #1A1A1D;
      border: 1px solid #1A1A1D;
      border-radius: 12px;
      overflow: hidden;
    }
    .file {
      background: #131316;
      padding: 14px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-size: 13px;
    }
    .file-empty {
      color: #6F6F73;
      font-style: italic;
      justify-content: flex-start;
    }
    .file-name {
      color: #E8E8E5;
      font-weight: 500;
    }
    .file-path {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      font-size: 11px;
      color: #6F6F73;
      letter-spacing: 0.01em;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 60%;
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 4px;
    }
    button {
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
      padding: 12px 22px;
      border-radius: 10px;
      cursor: pointer;
      transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
    }
    .btn-primary {
      background: #C2452A;
      color: #FAFAF8;
      border: 1px solid #C2452A;
    }
    .btn-primary:hover {
      background: #D14F33;
      border-color: #D14F33;
      transform: translateY(-1px);
    }
    .btn-ghost {
      background: transparent;
      color: #DCDCD8;
      border: 1px solid #2A2A2F;
    }
    .btn-ghost:hover {
      border-color: #4A4A4D;
      color: #E8E8E5;
    }
    .rule {
      height: 1px;
      background: linear-gradient(to right, #1A1A1D, #25252A 25%, #25252A 75%, #1A1A1D);
      border: none;
      margin: 0;
    }
    .footnote {
      font-size: 12px;
      color: #6F6F73;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      letter-spacing: 0.02em;
    }
  </style>
</head>
<body>
  <main class="stage">
    <header>
      <span class="eyebrow">Agent created</span>
      <h1>${name}</h1>
      ${mission ? `<p class="mission">${mission}</p>` : ''}
    </header>

    <section class="meta">
      <div class="meta-cell">
        <span class="meta-label">Schedule</span>
        <span class="meta-value">${schedule}</span>
      </div>
      <div class="meta-cell">
        <span class="meta-label">Engine</span>
        <span class="meta-value">${engine}${model ? ` <span style="color:#6F6F73">· ${model}</span>` : ''}</span>
      </div>
      <div class="meta-cell">
        <span class="meta-label">Approval</span>
        <span class="meta-value">${approval}</span>
      </div>
    </section>

    <section class="section">
      <h2>Allowed tools</h2>
      <ul class="chips">${toolChips}</ul>
    </section>

    <hr class="rule">

    <section class="section">
      <h2>Workspace files</h2>
      <ul class="files">${fileRows}</ul>
    </section>

    <section class="actions">
      <button class="btn-primary" data-madarx-action="prompt" data-prompt="${esc(confirmPrompt)}">Run now</button>
      <button class="btn-ghost" data-madarx-action="prompt" data-prompt="Show me the skills for ${name}">Review skills</button>
    </section>

    <p class="footnote">Owner-in-loop · external sends, posts, and deployments require approval before execution.</p>
  </main>
</body>
</html>`;
}
