/* Terminals: a generic shell that boots an (original-styled) AI agent session via `claude`. */

const { ref, computed, onMounted, onUnmounted, watch, nextTick } = Vue;

const wait = (ms) => new Promise((r) => setTimeout(r, ms));
let _lid = 0;
const lid = () => ++_lid;

function bootAgent() {
  return [
    { kind: "welcome", text: "model: opus · cwd: ~/console · branch: " + PROJECT.branch + " · type /exit to leave" },
    { kind: "t", cls: "dim", html: "  I can read, search and edit files in this project. Describe a change to get started." },
  ];
}

function agentSeed() {
  return {
    mode: "agent",
    lines: [
      { id: lid(), kind: "t", html: `<span class="pfx">console</span> <span class="dim">%</span> claude` },
      { id: lid(), kind: "welcome", text: "model: opus · cwd: ~/console · branch: " + PROJECT.branch + " · type /exit to leave" },
      { id: lid(), kind: "t", html: `<span class="ip ag">&gt;</span> add currency + name to the user payload and gate the fillable fields` },
      { id: lid(), kind: "t", html: `<span class="ag">●</span> Read <span class="fp">UserController.php</span>, edited the response array and <span class="fp">onlyFillable()</span>.` },
      {
        id: lid(), kind: "card", ch: "edit · src/Http/Controller/UserController.php",
        rows: [
          { cls: "del", t: "-   'plan' => $user->plan," },
          { cls: "add", t: "+   'plan' => $user->plan->value," },
          { cls: "add", t: "+   'name' => $user->name," },
        ],
      },
      { id: lid(), kind: "t", cls: "ok", html: `<span class="ag">●</span> <span class="ok">Done</span> — updated <span class="fp">UserController.php</span>. Anything else?` },
    ],
  };
}

function shellSeed() {
  return {
    mode: "shell",
    lines: [
      { id: lid(), kind: "t", html: `<span class="pfx">console</span> <span class="dim">%</span> git status -s` },
      ...PROJECT.changes.map((c) => ({
        id: lid(), kind: "t",
        html: `<span style="color:var(--${c.status === 'A' ? 'add' : c.status === 'D' ? 'del' : 'mod'})">${c.status} </span> <span class="fp">${c.path}</span>`,
      })),
    ],
  };
}

const Terminal = {
  props: ["kind", "seed"],
  setup(props) {
    const lines = ref(props.seed.lines);
    const mode = ref(props.seed.mode);
    const input = ref("");
    const busy = ref(false);
    const bodyRef = ref(null);
    const inputRef = ref(null);
    const hist = ref([]);
    const histIx = ref(-1);

    // Auto-scroll on lines/busy change
    watch([lines, busy], () => nextTick(() => {
      const el = bodyRef.value;
      if (el) el.scrollTop = el.scrollHeight;
    }));

    const push = (line) => { lines.value = [...lines.value, { id: lid(), ...line }]; };
    const pushMany = (arr) => { lines.value = [...lines.value, ...arr.map((l) => ({ id: lid(), ...l }))]; };

    async function runAgent(prompt) {
      busy.value = true;
      push({ kind: "agent-think", html: `<span class="ag">●</span> <span class="dim">thinking…</span>` });
      await wait(520);
      lines.value = lines.value.slice(0, -1); // drop the thinking line
      push({ kind: "t", cls: "", html: `<span class="ag">●</span> I'll take a look at the relevant files first.` });
      await wait(380);
      push({ kind: "t", cls: "dim", html: `  <span class="tool">read</span> <span class="fp">src/Http/Controller/UserController.php</span>` });
      await wait(300);
      push({ kind: "t", cls: "dim", html: `  <span class="tool">grep</span> <span class="dim">"balanceFor" → 2 matches</span>` });
      await wait(420);
      push({ kind: "t", cls: "", html: `<span class="ag">●</span> Adding the field and a fillable allow-list. Editing now.` });
      await wait(360);
      push({
        kind: "card", ch: `edit · src/Http/Controller/UserController.php`,
        rows: [
          { cls: "del", t: "-   'plan' => $user->plan," },
          { cls: "add", t: "+   'plan' => $user->plan->value," },
          { cls: "add", t: "+   'currency' => $user->currency," },
        ],
      });
      await wait(450);
      push({ kind: "t", cls: "ok", html: `<span class="ag">●</span> <span class="ok">Done.</span> Updated <span class="fp">UserController.php</span>. Run tests with <span class="fp">composer test</span>.` });
      busy.value = false;
      requestAnimationFrame(() => inputRef.value && inputRef.value.focus());
    }

    function shell(cmd) {
      const [c, ...rest] = cmd.split(/\s+/);
      const arg = rest.join(" ");
      switch (c) {
        case "": return;
        case "claude":
          pushMany(bootAgent());
          mode.value = "agent";
          return;
        case "clear": lines.value = []; return;
        case "help":
          pushMany([
            { kind: "t", cls: "dim", html: "commands: <span style='color:var(--fg-1)'>claude</span>  ls  pwd  cat &lt;file&gt;  git status  git diff  echo  clear" },
          ]); return;
        case "pwd": push({ kind: "t", html: "/Users/dev/console" }); return;
        case "ls":
          push({ kind: "t", html: "<span class='fp'>config</span>  <span class='fp'>public</span>  <span class='fp'>scripts</span>  <span class='fp'>src</span>  <span class='fp'>templates</span>  composer.json  package.json  README.md" });
          return;
        case "echo": push({ kind: "t", html: HL.escapeHtml(arg) }); return;
        case "git":
          if (rest[0] === "status") {
            pushMany([
              { kind: "t", cls: "dim", html: `On branch <span style='color:var(--fg-1)'>${PROJECT.branch}</span>` },
              { kind: "t", cls: "dim", html: "Changes to be committed:" },
              ...PROJECT.changes.map((ch) => ({
                kind: "t",
                html: `  <span style="color:var(--${ch.status === 'A' ? 'add' : ch.status === 'D' ? 'del' : 'mod'})">${ch.status === 'A' ? 'new file' : ch.status === 'D' ? 'deleted ' : 'modified'}</span>   <span class="fp">${ch.path}</span>`,
              })),
            ]);
          } else if (rest[0] === "diff") {
            pushMany([
              { kind: "t", cls: "dim", html: "diff --git a/public/assets/app.js b/public/assets/app.js" },
              { kind: "t", cls: "err", html: "-  const res = await fetch('/api/session');" },
              { kind: "t", cls: "ok", html: "+  const res = await fetch('/api/session', { credentials: 'include' });" },
            ]);
          } else push({ kind: "t", cls: "dim", html: `git: '${rest[0] || ""}' is not handled in this demo` });
          return;
        case "cat": {
          const f = PROJECT.files[arg] || Object.entries(PROJECT.files).find(([p]) => p.endsWith(arg))?.[1];
          if (!f) { push({ kind: "t", cls: "err", html: `cat: ${HL.escapeHtml(arg)}: No such file` }); return; }
          pushMany(f.replace(/\n$/, "").split("\n").slice(0, 24).map((l) => ({ kind: "t", cls: "dim", html: HL.escapeHtml(l) || "&nbsp;" })));
          return;
        }
        default: push({ kind: "t", cls: "err", html: `${HL.escapeHtml(c)}: command not found` });
      }
    }

    function submit() {
      const cmd = input.value.trim();
      if (busy.value) return;
      if (cmd) { hist.value.unshift(cmd); }
      histIx.value = -1;
      if (mode.value === "agent") {
        if (cmd === "/exit" || cmd === "exit") {
          push({ kind: "t", cls: "dim", html: "<span class='ag'>●</span> Session ended." });
          mode.value = "shell"; input.value = ""; return;
        }
        if (cmd === "/clear" || cmd === "clear") { lines.value = []; input.value = ""; return; }
        push({ kind: "t", html: `<span class="ip ag">&gt;</span> ${HL.escapeHtml(cmd).replace(/\n/g, "<br>&nbsp;&nbsp;") || "&nbsp;"}` });
        input.value = "";
        if (cmd) runAgent(cmd);
        return;
      }
      push({ kind: "t", html: `<span class="pfx">console</span> <span class="dim">%</span> ${HL.escapeHtml(cmd) || "&nbsp;"}` });
      input.value = "";
      shell(cmd);
    }

    function onKey(e) {
      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); return; }
      if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !input.value.includes("\n")) {
        e.preventDefault();
        if (e.key === "ArrowUp") {
          if (hist.value.length) {
            histIx.value = Math.min(histIx.value + 1, hist.value.length - 1);
            input.value = hist.value[histIx.value];
          }
        } else {
          if (histIx.value > 0) { histIx.value--; input.value = hist.value[histIx.value]; }
          else { histIx.value = -1; input.value = ""; }
        }
      }
    }

    // agentPaste CustomEvent listener — agent kind only
    let agentPasteHandler = null;
    onMounted(() => {
      if (props.kind !== "agent") return;
      agentPasteHandler = (e) => {
        if (mode.value !== "agent") { pushMany(bootAgent()); mode.value = "agent"; }
        // bracketed-paste semantics: append as a new, UNSUBMITTED line; leave caret on a fresh line
        const base = input.value.replace(/\n+$/, "");
        input.value = (base ? base + "\n" : "") + e.detail + "\n";
        requestAnimationFrame(() => {
          const el = inputRef.value;
          if (el) { el.focus(); const v = el.value.length; el.setSelectionRange(v, v); }
        });
      };
      window.addEventListener("agentPaste", agentPasteHandler);
    });

    onUnmounted(() => {
      if (agentPasteHandler) window.removeEventListener("agentPaste", agentPasteHandler);
    });

    const live = computed(() => mode.value === "agent");

    const inputRows = computed(() => Math.min(8, Math.max(1, input.value.split("\n").length)));

    const inputPlaceholder = computed(() =>
      live.value ? "Ask the agent to change something…" : props.kind === "agent" ? "type 'claude' to start a session" : ""
    );

    return { lines, mode, input, busy, bodyRef, inputRef, live, inputRows, inputPlaceholder, onKey, submit };
  },
  template: `
<div class="term-pane" :style="{ flex: 1, minHeight: 0 }" @mousedown="inputRef && inputRef.focus()">
  <div class="term-head">
    <span :class="'dot' + (live ? ' live' : '')"></span>
    <span class="lbl">{{ live ? 'claude' : kind === 'agent' ? 'claude' : 'zsh' }}</span>
    <span class="tag">{{ live ? 'agent session' : '— bash · ~/console' }}</span>
  </div>
  <div class="term-body" ref="bodyRef">
    <template v-for="l in lines" :key="l.id">
      <div v-if="l.kind === 'card'" class="term-card">
        <div class="ch"><Icon name="diff" :w="11" :h="11" /><span>{{ l.ch }}</span></div>
        <div v-for="(r, i) in l.rows" :key="i" :class="r.cls">{{ r.t }}</div>
      </div>
      <div v-else-if="l.kind === 'welcome'" class="term-card" :style="{ borderColor: 'var(--accent-line)' }">
        <div :style="{ color: 'var(--accent)', fontWeight: 600 }">◇ agent session</div>
        <div class="dim" :style="{ color: 'var(--fg-2)', marginTop: '3px' }">{{ l.text }}</div>
      </div>
      <div v-else :class="'tline ' + (l.cls || '')" v-html="l.html"></div>
    </template>
    <div v-if="busy" class="tline dim"><span class="ag" :style="{ color: '#c98bdb' }">●</span> working<span class="cursor-blink" /></div>
    <div v-if="!busy" class="term-input">
      <span :class="'ip' + (live ? ' ag' : '')">
        <template v-if="live">&gt;</template>
        <template v-else><span class="pfx">console <span :style="{ color: 'var(--fg-3)' }">%</span></span></template>
      </span>
      <textarea
        ref="inputRef"
        class="term-ta"
        v-model="input"
        :spellcheck="false"
        autocomplete="off"
        :rows="inputRows"
        :placeholder="inputPlaceholder"
        @keydown="onKey"
      ></textarea>
    </div>
  </div>
</div>
  `,
};

// Expose globals for app.js and other files
window.wait = wait;
window.lid = lid;
window.bootAgent = bootAgent;
window.agentSeed = agentSeed;
window.shellSeed = shellSeed;

window.HelderComponents = Object.assign(window.HelderComponents || {}, { Terminal });