{% extends "admin/base.html" %}

{% block title %}Connect a chat bot — cmdop admin{% endblock %}

{% block content %}
{# Plan 61/2b W3 — chat-bot connection wizard.

   OSS-flavoured: the deploy step generates `docker compose --profile
   <channel> up -d` and tells the user to run it on their own
   machine. The relay does not spawn adapter containers.

   Steps:
     1. Pick a channel (skipped when ?channel= is set)
     2. Create bot on platform (docs + token paste)
     3. Set bot username + confirm
     4. Run adapter on user's server (docker compose snippet)
     5. Test (poll /api/admin/bots/test)
     6. Done
#}
{% from 'admin/components/ui.html' import page_header, card, tooltip %}

<div x-data="chatBotWizard({channelArg: '{{ channel|e }}'})" x-init="init()" class="max-w-3xl mx-auto space-y-6">
  {{ page_header(
    'Connect a chat bot',
    'Hook Telegram, Discord, or Slack into Jarvis for this fleet.',
    eyebrow='Wizards',
    help_anchor='bots'
  ) }}

  {# Stepper. #}
  <div class="card p-4">
    <div class="flex items-center justify-between gap-2 text-[11px] uppercase tracking-wider">
      <template x-for="(label, idx) in stepLabels" :key="idx">
        <div class="flex items-center gap-2 flex-1"
             :class="idx + 1 === step ? 'text-cmdop-300' : (idx + 1 < step ? 'text-emerald-400' : 'text-ink-500')">
          <span class="w-5 h-5 rounded-full border flex items-center justify-center text-[10px] font-semibold"
                :class="idx + 1 === step ? 'border-cmdop-500 bg-cmdop-500/10'
                      : (idx + 1 < step ? 'border-emerald-500 bg-emerald-500/10'
                      : 'border-white/[0.08]')"
                x-text="idx + 1 < step ? '✓' : (idx + 1)"></span>
          <span class="hidden sm:inline" x-text="label"></span>
        </div>
      </template>
    </div>
  </div>

  {# Step 1 — pick a channel. #}
  <div x-show="step === 1" x-cloak class="card p-6 space-y-4">
    <h2 class="text-[14px] font-semibold text-ink-100">Pick a channel</h2>
    <p class="text-[12px] text-ink-500">
      Each channel is one container on your machine. You can connect more than one.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <template x-for="ch in channels" :key="ch.kind">
        <button type="button"
                @click="state.channel = ch.kind; step = 2"
                class="border border-white/[0.08] hover:border-cmdop-500/40 rounded-lg p-4 text-left transition-colors cursor-pointer">
          <div class="flex items-center gap-2 mb-2">
            <i :data-lucide="ch.icon" class="w-4 h-4 text-cmdop-300"></i>
            <span class="text-[13px] font-semibold text-ink-100" x-text="ch.label"></span>
          </div>
          <p class="text-[11px] text-ink-500" x-text="ch.blurb"></p>
        </button>
      </template>
    </div>
  </div>

  {# Step 2 — register bot on platform + paste token. #}
  <div x-show="step === 2" x-cloak class="card p-6 space-y-4">
    <h2 class="text-[14px] font-semibold text-ink-100">
      Register the bot on <span x-text="channelLabel"></span>
    </h2>
    <div class="text-[12px] text-ink-400 space-y-2" x-html="instructions"></div>
    <label class="block">
      <span class="text-[11px] uppercase tracking-wider text-ink-500 flex items-center gap-1">
        Bot token
        {{ tooltip('Bootstrap key — the secret your bot platform issued. Paste it as-is.') }}
      </span>
      <input x-model.trim="state.token"
             type="password"
             autocomplete="off"
             :placeholder="tokenPlaceholder"
             class="input w-full mt-1 font-mono" />
    </label>
    <label class="block">
      <span class="text-[11px] uppercase tracking-wider text-ink-500">
        Bot username (display only)
      </span>
      <input x-model.trim="state.botUsername"
             type="text"
             placeholder="@my-fleet-bot"
             class="input w-full mt-1" />
    </label>
    <div class="flex justify-between">
      <button type="button" class="btn btn-secondary btn-md" @click="goBack()">
        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button"
              class="btn btn-primary btn-md"
              :disabled="!state.token"
              @click="goNext()">
        Continue
        <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 3 — confirm details. #}
  <div x-show="step === 3" x-cloak class="card p-6 space-y-4">
    <h2 class="text-[14px] font-semibold text-ink-100">Confirm</h2>
    <dl class="text-[12px] space-y-2">
      <div class="flex justify-between"><dt class="text-ink-500">Channel</dt><dd class="font-mono text-ink-200" x-text="state.channel"></dd></div>
      <div class="flex justify-between"><dt class="text-ink-500">Bot username</dt><dd class="font-mono text-ink-200" x-text="state.botUsername || '(unset)'"></dd></div>
      <div class="flex justify-between"><dt class="text-ink-500">Token</dt><dd class="font-mono text-ink-200" x-text="state.token ? state.token.slice(0,4) + '…' : '(none)'"></dd></div>
    </dl>
    <p class="text-[11px] text-ink-500">
      We'll register this channel as <span class="font-mono text-ink-300">pending</span>
      and stay here until the adapter posts a heartbeat.
    </p>
    <div class="flex justify-between">
      <button type="button" class="btn btn-secondary btn-md" @click="goBack()">
        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button" class="btn btn-primary btn-md" @click="goNext()">
        Generate deploy snippet
        <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 4 — run adapter on user's server. #}
  <div x-show="step === 4" x-cloak class="card p-6 space-y-4">
    <h2 class="text-[14px] font-semibold text-ink-100">Run the adapter on your server</h2>
    <p class="text-[12px] text-ink-400">
      This step happens on <em>your</em> machine, not in this browser. Copy the
      snippet below, paste it into a terminal on the host that will run the bot.
    </p>
    <div class="relative">
      <pre class="bg-black border border-white/[0.08] rounded-md p-4 text-[12px] font-mono text-ink-200 overflow-x-auto"
           x-text="dockerSnippet"></pre>
      <button type="button"
              class="absolute top-2 right-2 btn btn-secondary btn-sm"
              @click="copySnippet()">
        <i data-lucide="copy" class="w-3 h-3"></i>
        <span x-text="copied ? 'Copied' : 'Copy'"></span>
      </button>
    </div>
    <p class="text-[11px] text-ink-500">
      The container will hit <span class="font-mono">POST /api/bot/heartbeat</span>
      every 30s. As soon as we see the first heartbeat the wizard advances.
    </p>
    <div class="flex justify-between">
      <button type="button" class="btn btn-secondary btn-md" @click="goBack()">
        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button" class="btn btn-primary btn-md" @click="goNext()">
        Test connection
        <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 5 — test (polls). #}
  <div x-show="step === 5" x-cloak class="card p-6 space-y-4">
    <h2 class="text-[14px] font-semibold text-ink-100">Testing the adapter</h2>
    <template x-if="testStatus === 'pending'">
      <div class="text-[12px] text-ink-400 flex items-center gap-2">
        <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
        Waiting for the first heartbeat from <span class="font-mono" x-text="state.channel"></span>…
      </div>
    </template>
    <template x-if="testStatus === 'ok'">
      <div class="text-[12px] text-emerald-300 flex items-center gap-2">
        <i data-lucide="check-circle-2" class="w-4 h-4"></i>
        Heartbeat received. Adapter is live.
      </div>
    </template>
    <template x-if="testStatus === 'error'">
      <div class="text-[12px] text-red-300 flex items-start gap-2">
        <i data-lucide="alert-triangle" class="w-4 h-4 mt-0.5"></i>
        <div>
          <p>No heartbeat yet. <button class="underline" @click="pollTest()">Retry</button>.</p>
          <p class="text-ink-500 mt-1">
            Check <span class="font-mono">docker logs cmdop-bot-<span x-text="state.channel"></span></span> on your server.
          </p>
        </div>
      </div>
    </template>
    <div class="flex justify-between">
      <button type="button" class="btn btn-secondary btn-md" @click="goBack()">
        <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
        Back
      </button>
      <button type="button"
              class="btn btn-primary btn-md"
              :disabled="testStatus !== 'ok'"
              @click="goNext()">
        Finish
        <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
      </button>
    </div>
  </div>

  {# Step 6 — done. #}
  <div x-show="step === 6" x-cloak class="card p-6 space-y-4 text-center">
    <i data-lucide="party-popper" class="w-10 h-10 mx-auto text-emerald-400"></i>
    <h2 class="text-[15px] font-semibold text-ink-100">Connected</h2>
    <p class="text-[12px] text-ink-500">
      Your <span class="font-mono" x-text="state.channel"></span> bot is alive. Open the chat,
      send a message, watch Jarvis reply.
    </p>
    <div class="flex justify-center gap-2">
      <a href="/admin/bots" class="btn btn-secondary btn-md">Manage bots</a>
      <a href="/admin/wizards/chat-bot" class="btn btn-primary btn-md">Add another</a>
    </div>
  </div>

</div>

<script src="/static/admin/wizards/chat-bot.js?v={{ asset_version() }}"></script>
{% endblock %}