---
import WorkflowIcon from "./WorkflowIcon.astro";
---

<section class="process-guide" data-process-guide>
  <header class="guide-intro">
    <h1>Cuéntame cómo funciona tu proceso</h1>
    <p>Explícalo como se lo contarías a alguien de tu equipo. Yo haré las preguntas necesarias y construiré el mapa contigo.</p>
  </header>

  <div class="guide-workspace">
    <section class="conversation-panel" aria-label="Conversación para entender el proceso">
      <div class="conversation-scroll" data-conversation-scroll data-lenis-prevent>
        <ol class="message-list" data-message-list aria-live="polite">
          <li class="message-row agent">
            <span class="agent-mark" aria-hidden="true">
              <img src="/favicon.svg" alt="" />
            </span>
            <div class="message-bubble">
              <p>Cuéntame qué proceso te gustaría mejorar. Para empezar, ¿qué lo inicia?</p>
            </div>
          </li>
        </ol>
        <div class="thinking-row" data-thinking hidden>
          <span class="agent-mark" aria-hidden="true"><img src="/favicon.svg" alt="" /></span>
          <span class="thinking-dots" aria-label="Blocksy está pensando"><i></i><i></i><i></i></span>
        </div>
      </div>

      <div class="composer-wrap">
        <form class="composer" data-composer>
          <label class="sr-only" for="guide-message">Escribe tu respuesta</label>
          <textarea id="guide-message" data-message-input rows="1" placeholder="Escribe tu respuesta…" required></textarea>
          <button type="button" class="icon-button mic-button" data-mic aria-label="Dictar respuesta" title="Dictar respuesta">
            <WorkflowIcon name="mic" class="composer-icon" />
          </button>
          <button type="submit" class="icon-button send-button" data-send aria-label="Enviar respuesta">
            <WorkflowIcon name="send" class="composer-icon" />
          </button>
        </form>
        <div class="composer-meta">
          <button type="button" class="direct-link" data-direct-mode>Prefiero explicarlo todo de una vez</button>
          <span data-composer-status aria-live="polite"></span>
        </div>
      </div>
    </section>

    <section class="map-panel" aria-label="Mapa del proceso en construcción">
      <header class="map-heading">
        <div>
          <span>Mapa en construcción</span>
          <h2 data-map-title>Tu proceso aparecerá aquí</h2>
          <p>Se actualiza con cada respuesta</p>
        </div>
        <p class="map-progress" data-map-progress><strong>0</strong> hallazgos · <strong>1</strong> pregunta pendiente</p>
      </header>

      <div class="map-canvas" data-map-canvas data-lenis-prevent>
        <div class="map-empty" data-map-empty>
          <span><WorkflowIcon name="map" class="empty-icon" /></span>
          <strong>Empecemos por el principio</strong>
          <p>Cuando describas el primer paso, lo verás aparecer en este espacio.</p>
        </div>
        <div class="map-flow" data-map-flow hidden></div>
      </div>

      <div class="fact-rail">
        <article>
          <span class="fact-icon"><WorkflowIcon name="send" class="fact-svg" /></span>
          <div><small>Entrada</small><strong data-fact-entry>Por descubrir</strong></div>
        </article>
        <article>
          <span class="fact-icon"><WorkflowIcon name="integration" class="fact-svg" /></span>
          <div><small>Herramientas</small><strong data-fact-tools>Por descubrir</strong></div>
        </article>
        <article>
          <span class="fact-icon pending"><WorkflowIcon name="shield-check" class="fact-svg" /></span>
          <div><small>Pendiente</small><strong data-fact-pending>Entender el proceso</strong></div>
        </article>
      </div>

      <div class="guide-complete" data-guide-complete hidden>
        <div>
          <span>Primera lectura terminada</span>
          <strong>Ya tenemos una base para diseñar la automatización.</strong>
        </div>
        <a href="/evaluacion">Continuar con la evaluación</a>
      </div>
    </section>
  </div>
</section>

<style>
  .process-guide {
    width: min(1460px, calc(100% - 32px));
    margin: 0 auto 110px;
    padding-top: 48px;
    color: #18181b;
  }

  .guide-intro { margin: 0 10px 34px; }
  .guide-intro h1 {
    font-size: clamp(2.35rem, 3.1vw, 3.35rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.055em;
  }
  .guide-intro p {
    max-width: 920px;
    margin-top: 13px;
    color: #656a73;
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.5;
  }

  .guide-workspace {
    display: grid;
    grid-template-columns: minmax(390px, 0.76fr) minmax(0, 1.34fr);
    min-height: 610px;
    overflow: hidden;
    border: 1px solid #ced1d7;
    border-radius: 28px;
    background: #fff;
  }

  .conversation-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid #ced1d7;
  }
  .conversation-scroll {
    min-height: 0;
    flex: 1;
    padding: 30px 26px 18px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .message-list { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
  .message-list :global(.message-row) { display: flex; gap: 13px; align-items: flex-start; }
  .message-list :global(.message-row.user) { justify-content: flex-end; padding-left: 44px; }
  .message-list :global(.agent-mark), .thinking-row .agent-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
  }
  .message-list :global(.agent-mark img), .thinking-row .agent-mark img { width: 28px; height: 28px; object-fit: contain; }
  .message-list :global(.message-bubble) {
    max-width: min(390px, calc(100% - 44px));
    padding: 17px 19px;
    border: 1px solid #e0e2e6;
    border-radius: 16px;
    background: #fafafa;
  }
  .message-list :global(.message-row.user .message-bubble) {
    border-color: rgb(61 139 255 / 18%);
    background: rgb(61 139 255 / 9%);
    color: #1262dc;
  }
  .message-list :global(.message-bubble p) { font-size: 0.93rem; line-height: 1.55; }

  .thinking-row { display: flex; gap: 13px; align-items: center; margin-top: 24px; }
  .thinking-row[hidden] { display: none; }
  .thinking-dots { display: flex; gap: 5px; padding: 14px 17px; border: 1px solid #e0e2e6; border-radius: 15px; background: #fafafa; }
  .thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9ca0a8; animation: think 900ms infinite ease-in-out; }
  .thinking-dots i:nth-child(2) { animation-delay: 120ms; }
  .thinking-dots i:nth-child(3) { animation-delay: 240ms; }
  @keyframes think { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

  .composer-wrap { padding: 0 20px 22px; }
  .composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 48px;
    gap: 8px;
    align-items: end;
    padding: 9px 10px 9px 16px;
    border: 1px solid #aeb2ba;
    border-radius: 16px;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .composer:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgb(61 139 255 / 10%); }
  .composer textarea {
    width: 100%;
    min-height: 44px;
    max-height: 146px;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #18181b;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 11px 0 8px;
  }
  .composer textarea::placeholder { color: #a1a5ae; }
  .icon-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #bfc2c8;
    border-radius: 50%;
    background: #fff;
    color: #18181b;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease;
  }
  .icon-button:hover { transform: translateY(-1px); }
  .send-button { width: 48px; height: 48px; border-color: var(--green); background: var(--green); color: #fff; }
  .mic-button.is-listening { border-color: #ef5e47; background: #fff3f0; color: #d9432e; animation: pulse 1.2s infinite; }
  :global(.composer-icon) { width: 21px; height: 21px; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgb(239 94 71 / 10%); } }
  .composer-meta { display: flex; min-height: 25px; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 4px 0; }
  .direct-link { border: 0; background: transparent; color: var(--green); font: inherit; font-size: 0.76rem; text-decoration: underline; cursor: pointer; }
  .composer-meta > span { color: #777b84; font-size: 0.68rem; text-align: right; }

  .map-panel { display: flex; min-width: 0; flex-direction: column; padding: 30px 34px 26px; }
  .map-heading { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; }
  .map-heading > div > span { color: #656a73; font-size: 0.68rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
  .map-heading h2 { margin-top: 5px; font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
  .map-heading > div > p { margin-top: 5px; color: #777b84; font-size: .82rem; }
  .map-progress { flex: 0 0 auto; padding-top: 5px; color: #555963; font-size: .72rem; white-space: nowrap; }
  .map-progress strong { color: var(--green); font-weight: 500; }

  .map-canvas { display: flex; min-height: 360px; flex: 1; align-items: center; overflow-x: auto; padding: 32px 4px 25px; scrollbar-width: thin; }
  .map-empty { display: grid; width: min(390px, 100%); margin: auto; place-items: center; text-align: center; }
  .map-empty > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #cfd2d8; border-radius: 50%; color: var(--green); }
  :global(.empty-icon) { width: 28px; height: 28px; }
  .map-empty strong { margin-top: 18px; font-size: 1rem; font-weight: 500; }
  .map-empty p { max-width: 310px; margin-top: 7px; color: #777b84; font-size: .78rem; line-height: 1.5; }
  .map-flow[hidden], .map-empty[hidden], .guide-complete[hidden] { display: none; }
  .map-flow { display: flex; width: max-content; min-width: 100%; align-items: center; justify-content: center; padding: 55px 8px 82px; }
  .map-flow :global(.guide-node-wrap) { position: relative; display: flex; align-items: center; }
  .map-flow :global(.guide-node) {
    position: relative;
    display: flex;
    width: 124px;
    min-height: 132px;
    flex: 0 0 124px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border: 1px solid #aeb2ba;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    animation: node-in 280ms ease both;
  }
  .map-flow :global(.guide-node.is-active) { border-color: var(--green); color: #1262dc; box-shadow: 0 0 0 3px rgb(61 139 255 / 6%); }
  .map-flow :global(.guide-node.is-pending) { border-style: dashed; color: #777b84; }
  .map-flow :global(.node-icon) { display: grid; width: 36px; height: 36px; place-items: center; color: currentColor; }
  .map-flow :global(.node-icon svg) { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .map-flow :global(.guide-node strong) { margin-top: 9px; font-size: .73rem; font-weight: 500; line-height: 1.25; }
  .map-flow :global(.guide-node small) { margin-top: 5px; color: #898d95; font-size: .59rem; line-height: 1.25; }
  .map-flow :global(.guide-connector) { position: relative; width: 30px; height: 1px; flex: 0 0 30px; background: #9da1a9; }
  .map-flow :global(.guide-connector::after) { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 1px solid #777b84; border-right: 1px solid #777b84; transform: rotate(45deg); }
  .map-flow :global(.exception-card) { position: absolute; top: calc(100% + 46px); left: 50%; width: 145px; padding: 11px 12px; border: 1px solid #f0644c; border-radius: 12px; background: #fff; color: #d9442f; transform: translateX(-50%); }
  .map-flow :global(.exception-card::before) { content: ""; position: absolute; bottom: 100%; left: 50%; height: 46px; border-left: 1px dashed #f0644c; }
  .map-flow :global(.exception-card strong) { display: block; margin: 0; font-size: .66rem; }
  .map-flow :global(.exception-card small) { display: block; margin-top: 3px; color: #d9442f; font-size: .56rem; }
  @keyframes node-in { from { opacity: 0; transform: translateY(7px); } }

  .fact-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #ced1d7; }
  .fact-rail article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; padding: 18px 10px; }
  .fact-rail article + article { border-left: 1px solid #ced1d7; padding-left: 24px; }
  .fact-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #b9c9e5; border-radius: 11px; color: var(--green); }
  .fact-icon.pending { border-color: #efae9f; color: #e34d35; }
  :global(.fact-svg) { width: 21px; height: 21px; }
  .fact-rail small { display: block; color: #777b84; font-size: .61rem; }
  .fact-rail strong { display: block; margin-top: 3px; overflow: hidden; font-size: .68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

  .guide-complete { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #191921; color: #fff; }
  .guide-complete span { display: block; color: #86b5ff; font-size: .59rem; text-transform: uppercase; letter-spacing: .09em; }
  .guide-complete strong { display: block; margin-top: 4px; font-size: .72rem; font-weight: 500; }
  .guide-complete a { flex: 0 0 auto; padding: 11px 14px; border-radius: 9px; background: var(--green); color: #fff; font-size: .68rem; text-decoration: none; }

  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid rgb(61 139 255 / 24%); outline-offset: 3px; }

  @media (max-width: 1100px) {
    .guide-workspace { grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); }
    .map-panel { padding-inline: 24px; }
    .map-flow { justify-content: flex-start; }
    .map-flow :global(.guide-node) { width: 112px; flex-basis: 112px; }
    .map-flow :global(.guide-connector) { width: 22px; flex-basis: 22px; }
  }

  @media (max-width: 820px) {
    .process-guide { padding-top: 32px; }
    .guide-workspace { display: flex; min-height: 0; flex-direction: column; overflow: visible; }
    .conversation-panel { min-height: 560px; border-right: 0; border-bottom: 1px solid #ced1d7; }
    .map-panel { min-height: 560px; }
    .map-canvas { min-height: 330px; }
  }

  @media (max-width: 560px) {
    .process-guide { width: min(100% - 20px, 1460px); margin-bottom: 70px; padding-top: 24px; }
    .guide-intro { margin-inline: 3px; margin-bottom: 24px; }
    .guide-intro h1 { font-size: 2.15rem; }
    .guide-workspace { border-radius: 22px; }
    .conversation-panel { min-height: 530px; }
    .conversation-scroll { padding: 24px 16px 18px; }
    .composer-wrap { padding-inline: 12px; }
    .composer { grid-template-columns: minmax(0, 1fr) 42px 46px; padding-left: 12px; }
    .icon-button { width: 42px; height: 42px; }
    .send-button { width: 46px; height: 46px; }
    .composer-meta { display: block; }
    .composer-meta > span { display: block; margin-top: 6px; text-align: left; }
    .map-panel { min-height: 535px; padding: 24px 16px 20px; }
    .map-heading { display: block; }
    .map-progress { margin-top: 10px; }
    .map-canvas { min-height: 310px; margin-inline: -4px; }
    .map-flow { justify-content: flex-start; padding-right: 20px; padding-left: 4px; }
    .fact-rail { grid-template-columns: 1fr; }
    .fact-rail article { padding: 12px 4px; }
    .fact-rail article + article { border-top: 1px solid #e2e4e8; border-left: 0; padding-left: 4px; }
    .guide-complete { display: block; }
    .guide-complete a { display: inline-flex; margin-top: 13px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .thinking-dots i, .mic-button.is-listening, .map-flow :global(.guide-node) { animation: none; }
    * { scroll-behavior: auto !important; }
  }
</style>

<script>
  type GuideMessage = { role: "user" | "assistant"; content: string };
  type GuideNode = { id: string; label: string; detail: string; type: string; status: "active" | "complete" | "pending" };
  type GuideReply = {
    reply: string;
    processTitle: string;
    nodes: GuideNode[];
    exception: { parentId: string; label: string; detail: string } | null;
    facts: { entry: string; tools: string; pending: string };
    complete: boolean;
  };

  const iconPaths: Record<string, string> = {
    entry: '<path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z"/><path d="M8 8h8M8 12h5"/>',
    validation: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/>',
    task: '<path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h6M8 17h4"/>',
    tool: '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>',
    output: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M8 13h8M8 17h5"/>',
    human: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
    pending: '<circle cx="12" cy="12" r="7" stroke-dasharray="3 3"/>'
  };

  function setupProcessGuide() {
    const root = document.querySelector<HTMLElement>("[data-process-guide]");
    if (!root || root.dataset.ready === "true") return;
    root.dataset.ready = "true";

    const form = root.querySelector<HTMLFormElement>("[data-composer]");
    const input = root.querySelector<HTMLTextAreaElement>("[data-message-input]");
    const messageList = root.querySelector<HTMLOListElement>("[data-message-list]");
    const scroll = root.querySelector<HTMLElement>("[data-conversation-scroll]");
    const thinking = root.querySelector<HTMLElement>("[data-thinking]");
    const send = root.querySelector<HTMLButtonElement>("[data-send]");
    const mic = root.querySelector<HTMLButtonElement>("[data-mic]");
    const status = root.querySelector<HTMLElement>("[data-composer-status]");
    const flow = root.querySelector<HTMLElement>("[data-map-flow]");
    const empty = root.querySelector<HTMLElement>("[data-map-empty]");
    const completePanel = root.querySelector<HTMLElement>("[data-guide-complete]");
    if (!form || !input || !messageList || !scroll || !thinking || !send || !mic || !status || !flow || !empty || !completePanel) return;

    const messages: GuideMessage[] = [{ role: "assistant", content: "Cuéntame qué proceso te gustaría mejorar. Para empezar, ¿qué lo inicia?" }];
    let current: GuideReply = {
      reply: "",
      processTitle: "Tu proceso aparecerá aquí",
      nodes: [],
      exception: null,
      facts: { entry: "Por descubrir", tools: "Por descubrir", pending: "Entender el proceso" },
      complete: false
    };
    let directMode = false;
    let listening = false;

    const setText = (selector: string, value: string) => {
      const element = root.querySelector<HTMLElement>(selector);
      if (element) element.textContent = value;
    };

    const addMessage = (role: "user" | "assistant", content: string) => {
      const row = document.createElement("li");
      row.className = `message-row ${role === "assistant" ? "agent" : "user"}`;
      if (role === "assistant") {
        const mark = document.createElement("span");
        mark.className = "agent-mark";
        mark.setAttribute("aria-hidden", "true");
        const image = document.createElement("img");
        image.src = "/favicon.svg";
        image.alt = "";
        mark.append(image);
        row.append(mark);
      }
      const bubble = document.createElement("div");
      bubble.className = "message-bubble";
      const paragraph = document.createElement("p");
      paragraph.textContent = content;
      bubble.append(paragraph);
      row.append(bubble);
      messageList.append(row);
      requestAnimationFrame(() => { scroll.scrollTop = scroll.scrollHeight; });
    };

    const makeNode = (node: GuideNode) => {
      const wrap = document.createElement("div");
      wrap.className = "guide-node-wrap";
      wrap.dataset.nodeId = node.id;
      const article = document.createElement("article");
      article.className = `guide-node is-${node.status}`;
      const icon = document.createElement("span");
      icon.className = "node-icon";
      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute("viewBox", "0 0 24 24");
      svg.setAttribute("aria-hidden", "true");
      svg.innerHTML = iconPaths[node.type] || iconPaths.task;
      icon.append(svg);
      const title = document.createElement("strong");
      title.textContent = node.label;
      const detail = document.createElement("small");
      detail.textContent = node.detail;
      article.append(icon, title, detail);
      wrap.append(article);

      if (current.exception?.parentId === node.id) {
        const exception = document.createElement("div");
        exception.className = "exception-card";
        const exceptionTitle = document.createElement("strong");
        exceptionTitle.textContent = current.exception.label;
        const exceptionDetail = document.createElement("small");
        exceptionDetail.textContent = current.exception.detail;
        exception.append(exceptionTitle, exceptionDetail);
        wrap.append(exception);
      }
      return wrap;
    };

    const renderMap = () => {
      setText("[data-map-title]", current.processTitle);
      setText("[data-fact-entry]", current.facts.entry);
      setText("[data-fact-tools]", current.facts.tools);
      setText("[data-fact-pending]", current.facts.pending);
      const pending = current.complete ? 0 : 1;
      const progress = root.querySelector<HTMLElement>("[data-map-progress]");
      if (progress) {
        progress.replaceChildren();
        const found = document.createElement("strong");
        found.textContent = String(Math.max(current.nodes.length - 1, 0));
        const pendingCount = document.createElement("strong");
        pendingCount.textContent = String(pending);
        progress.append(found, " hallazgos · ", pendingCount, pending === 1 ? " pregunta pendiente" : " preguntas pendientes");
      }

      flow.replaceChildren();
      empty.hidden = current.nodes.length > 0;
      flow.hidden = current.nodes.length === 0;
      current.nodes.forEach((node, index) => {
        flow.append(makeNode(node));
        if (index < current.nodes.length - 1) {
          const connector = document.createElement("span");
          connector.className = "guide-connector";
          connector.setAttribute("aria-hidden", "true");
          flow.append(connector);
        }
      });
      completePanel.hidden = !current.complete;
    };

    const extractTools = (source: string) => {
      const candidates = ["WhatsApp", "Excel", "Sheets", "CRM", "ERP", "correo", "Monday", "HubSpot", "Salesforce"];
      return candidates.filter((tool) => source.toLowerCase().includes(tool.toLowerCase()));
    };

    const inferEntry = (source: string) => {
      const text = source.toLowerCase();
      if (text.includes("whatsapp")) return "WhatsApp";
      if (text.includes("correo") || text.includes("email")) return "Correo";
      if (text.includes("formulario")) return "Formulario";
      if (text.includes("archivo") || text.includes("excel")) return "Archivo recibido";
      if (text.includes("llamada")) return "Llamada";
      return "Solicitud";
    };

    const inferTitle = (source: string) => {
      const text = source.toLowerCase();
      if (text.includes("cotiz")) return "Cotización de clientes";
      if (text.includes("entrevista") || text.includes("candidato")) return "Preselección de personal";
      if (text.includes("inspecci")) return "Inspección y reporte";
      if (text.includes("propiedad") || text.includes("inmueble")) return "Gestión de propiedades";
      if (text.includes("factura") || text.includes("pago")) return "Solicitud y aprobación de pagos";
      if (text.includes("lead") || text.includes("prospect")) return "Seguimiento comercial";
      return "Proceso descrito";
    };

    const inferTask = (source: string) => {
      const text = source.toLowerCase();
      if (text.includes("precio") || text.includes("excel")) return "Buscar información";
      if (text.includes("valid")) return "Validar datos";
      if (text.includes("asign")) return "Asignar responsable";
      if (text.includes("revis")) return "Revisar solicitud";
      if (text.includes("entrevist")) return "Evaluar respuestas";
      if (text.includes("reporte") || text.includes("informe")) return "Preparar reporte";
      return "Procesar solicitud";
    };

    const inferOutput = (source: string) => {
      const text = source.toLowerCase();
      if (text.includes("cotiz")) return "Generar cotización";
      if (text.includes("reporte") || text.includes("informe")) return "Generar reporte";
      if (text.includes("candidato") || text.includes("entrevista")) return "Crear evaluación";
      if (text.includes("factura") || text.includes("pago")) return "Registrar pago";
      return "Entregar resultado";
    };

    const inferException = (source: string) => {
      const text = source.toLowerCase();
      if (text.includes("rfc")) return "Falta RFC";
      if (text.includes("falt") || text.includes("incomplet")) return "Dato incompleto";
      if (text.includes("error")) return "Dato incorrecto";
      if (text.includes("autoriza") || text.includes("aproba")) return "Aprobación pendiente";
      if (text.includes("tarda") || text.includes("espera")) return "Respuesta tardía";
      return "Excepción por definir";
    };

    const localReply = (allMessages: GuideMessage[]): GuideReply => {
      const userMessages = allMessages.filter((message) => message.role === "user").map((message) => message.content);
      const source = userMessages.join(" ");
      const turn = userMessages.length;
      const entry = inferEntry(source);
      const tools = extractTools(source);
      const title = inferTitle(source);
      const task = inferTask(source);
      const output = inferOutput(source);
      const hasException = /falta|incomplet|error|tarda|espera|rfc|aproba|autoriza/i.test(source);
      const nodes: GuideNode[] = [
        { id: "entry", label: "Solicitud recibida", detail: entry, type: "entry", status: turn <= 1 ? "active" : "complete" },
        { id: "review", label: "Revisar información", detail: turn >= 2 ? "Paso identificado" : "Por confirmar", type: "validation", status: turn === 2 ? "active" : turn > 2 ? "complete" : "pending" }
      ];
      if (turn >= 2 || directMode) nodes.push({ id: "task", label: task, detail: tools.length ? tools.join(" + ") : "Actividad del equipo", type: tools.length ? "tool" : "task", status: turn === 2 && !directMode ? "active" : "complete" });
      if (turn >= 3 || directMode) nodes.push({ id: "output", label: output, detail: turn >= 4 || directMode ? "Resultado esperado" : "Por confirmar", type: "output", status: turn >= 4 || directMode ? "complete" : "pending" });
      if ((turn >= 4 || directMode) && /persona|equipo|gerente|supervisor|aproba|autoriza/i.test(source)) nodes.push({ id: "human", label: "Revisión humana", detail: "Criterio conservado", type: "human", status: turn >= 5 || directMode ? "complete" : "active" });
      nodes.push({ id: "next", label: "Siguiente paso", detail: turn >= 5 ? "Listo para diseñar" : "Aún por descubrir", type: "pending", status: "pending" });

      let reply = "Perfecto. Ya identifiqué cómo comienza. ¿Qué hace el equipo inmediatamente después?";
      let pending = "Qué ocurre después";
      if (turn === 2) { reply = "Ya veo el trabajo principal. ¿Qué ocurre cuando falta un dato o aparece una excepción?"; pending = "Manejo de excepciones"; }
      if (turn === 3) { reply = "Eso aclara el principal punto de fricción. ¿Qué resultado debe quedar listo al final?"; pending = "Resultado esperado"; }
      if (turn === 4) { reply = "El resultado ya está claro. ¿En qué momento debe revisar o decidir una persona?"; pending = "Decisión humana"; }
      if (turn >= 5) { reply = "Listo. Organicé lo que me contaste en un primer mapa. Dejé marcado lo que todavía conviene validar antes de construir."; pending = "Confirmar reglas y responsables"; }
      if (directMode && turn === 1) { reply = "Ya tengo una primera lectura completa. Solo necesito aclarar una cosa: ¿qué excepción no debería resolver el sistema sin consultar a una persona?"; pending = "Excepción sensible"; }

      return {
        reply,
        processTitle: title,
        nodes,
        exception: hasException ? { parentId: "review", label: inferException(source), detail: "Por resolver" } : null,
        facts: { entry, tools: tools.length ? tools.join(", ") : "Por confirmar", pending },
        complete: turn >= 5 || (directMode && turn >= 2)
      };
    };

    const requestReply = async () => {
      try {
        const response = await fetch("/api/process-guide", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ messages, current, directMode })
        });
        if (!response.ok) throw new Error("demo-mode");
        const data = await response.json();
        if (!data?.reply || !Array.isArray(data.nodes)) throw new Error("invalid-response");
        return data as GuideReply;
      } catch {
        return localReply(messages);
      }
    };

    const autosize = () => {
      input.style.height = "auto";
      input.style.height = `${Math.min(input.scrollHeight, 146)}px`;
    };
    input.addEventListener("input", autosize);
    input.addEventListener("keydown", (event) => {
      if (event.key === "Enter" && !event.shiftKey) {
        event.preventDefault();
        form.requestSubmit();
      }
    });

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const content = input.value.trim();
      if (!content || send.disabled) return;
      messages.push({ role: "user", content });
      addMessage("user", content);
      input.value = "";
      autosize();
      send.disabled = true;
      input.disabled = true;
      thinking.hidden = false;
      status.textContent = "Construyendo el mapa…";
      scroll.scrollTop = scroll.scrollHeight;

      current = await requestReply();
      messages.push({ role: "assistant", content: current.reply });
      thinking.hidden = true;
      addMessage("assistant", current.reply);
      renderMap();
      send.disabled = false;
      input.disabled = false;
      status.textContent = current.complete ? "Mapa inicial listo" : "";
      input.focus();
    });

    root.querySelector<HTMLButtonElement>("[data-direct-mode]")?.addEventListener("click", () => {
      directMode = true;
      input.rows = 4;
      input.placeholder = "Cuéntame el proceso completo: qué lo inicia, qué hace el equipo, dónde se atora y qué resultado debe producir…";
      input.style.height = "118px";
      const prompt = "Perfecto. Cuéntamelo completo y sin preocuparte por el orden; yo separaré los pasos, herramientas, decisiones y excepciones.";
      messages.push({ role: "assistant", content: prompt });
      addMessage("assistant", prompt);
      status.textContent = "Modo explicación completa";
      input.focus();
    });

    mic.addEventListener("click", () => {
      const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
      if (!SpeechRecognition) {
        status.textContent = "El dictado no está disponible en este navegador.";
        return;
      }
      if (listening) return;
      const recognition = new SpeechRecognition();
      recognition.lang = "es-MX";
      recognition.interimResults = true;
      recognition.continuous = false;
      const original = input.value;
      recognition.onstart = () => {
        listening = true;
        mic.classList.add("is-listening");
        mic.setAttribute("aria-label", "Escuchando");
        status.textContent = "Escuchando…";
      };
      recognition.onresult = (event: any) => {
        const transcript = Array.from(event.results).map((result: any) => result[0].transcript).join(" ");
        input.value = `${original}${original ? " " : ""}${transcript}`;
        autosize();
      };
      recognition.onerror = () => { status.textContent = "No pude escuchar. Puedes escribir tu respuesta."; };
      recognition.onend = () => {
        listening = false;
        mic.classList.remove("is-listening");
        mic.setAttribute("aria-label", "Dictar respuesta");
        if (status.textContent === "Escuchando…") status.textContent = input.value ? "Dictado listo para enviar" : "";
        input.focus();
      };
      recognition.start();
    });
  }

  document.addEventListener("astro:page-load", setupProcessGuide);
  setupProcessGuide();
</script>