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

{% block title %}Add new machine — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import page_header, card, button, empty_state, badge, tooltip %}

<div x-data="addMachineWizard()" x-init="init()" class="space-y-6">

  {% if member_role == 'member' %}
    {{ page_header(
        title='Add new machine',
        subtitle='Enroll a new host on the cmdop agent network.',
        eyebrow='Wizard',
    ) }}
    {% call card(kind='roomy') %}
      {{ empty_state(
          title='Ask an owner to add a machine',
          description='Adding machines is restricted to fleet owners and admins. Ping your fleet owner; they can run this wizard and share the install command with you.',
          icon='shield-alert',
          action_label='Back to machines',
          action_href='/admin/machines',
      ) }}
    {% endcall %}
  {% else %}
    <template x-if="step === 1">
      <div>
        {{ page_header(
            title='Add new machine',
            subtitle='Tell us about the host you are enrolling.',
            step=1,
            step_total=4,
            eyebrow='Wizard',
            help_anchor='machines',
        ) }}
        {% call card(kind='roomy', title='Machine details') %}
          <form @submit.prevent="startWizard()" class="space-y-4">
            <div>
              <label for="hostname" class="block text-caption text-ink-500">Hostname<span class="text-red-400 ml-0.5">*</span></label>
              <input id="hostname" name="hostname" type="text" required
                     class="input mt-1.5" maxlength="255"
                     x-model="hostname"
                     placeholder="work-mbp">
              <p class="text-footnote mt-1">A short, unique name. We use this to identify the row on /admin/machines.</p>
            </div>
            <div>
              <label class="block text-caption text-ink-500 mb-1.5">Operating system<span class="text-red-400 ml-0.5">*</span></label>
              <div class="grid grid-cols-3 gap-2">
                <template x-for="opt in osOptions" :key="opt.value">
                  <button type="button" @click="os = opt.value"
                          :class="os === opt.value ? 'border-cmdop-500 text-ink-100 bg-cmdop-500/10' : 'border-white/[0.08] text-ink-300 hover:border-white/[0.16]'"
                          class="px-3 py-2.5 rounded-md border text-[13px] font-medium transition-colors flex items-center justify-center gap-2">
                    <i :data-lucide="opt.icon" class="w-4 h-4"></i>
                    <span x-text="opt.label"></span>
                  </button>
                </template>
              </div>
            </div>
            <div class="flex items-center justify-between pt-2">
              <a href="/admin/machines" class="btn btn-ghost btn-md">Cancel</a>
              {{ button(text='Continue', kind='primary', icon='arrow-right', type='submit',
                        attrs=':disabled="!hostname || !os || loading"') }}
            </div>
          </form>
        {% endcall %}
      </div>
    </template>

    <template x-if="step === 2">
      <div>
        {{ page_header(
            title='Install the agent',
            subtitle='Run this one command on the new host. The token expires in 15 min.',
            step=2,
            step_total=4,
            eyebrow='Wizard',
        ) }}
        {% call card(kind='roomy', title='Install command') %}
          <div class="space-y-3">
            <div class="flex items-center gap-2 text-footnote">
              <template x-for="opt in osOptions" :key="opt.value">
                <button type="button" @click="os = opt.value"
                        :class="os === opt.value ? 'border-cmdop-500 text-ink-100' : 'border-white/[0.08] text-ink-500 hover:text-ink-300'"
                        class="px-2.5 py-1 rounded-md border text-[12px]">
                  <span x-text="opt.label"></span>
                </button>
              </template>
            </div>
            <div class="relative">
              <pre class="bg-ink-950 border border-white/[0.06] rounded-md p-3 text-[12px] text-ink-200 font-mono whitespace-pre-wrap break-all" x-text="currentInstallCommand()"></pre>
              <button type="button" @click="copyCommand()" title="Copy"
                      class="absolute top-2 right-2 inline-flex items-center gap-1 px-2 py-1 text-[11px] text-ink-400 hover:text-ink-200 border border-white/[0.08] rounded bg-ink-900/80">
                <i data-lucide="copy" class="w-3 h-3"></i>
                <span x-text="copied ? 'Copied' : 'Copy'"></span>
              </button>
            </div>
            <p class="text-footnote">
              <i data-lucide="info" class="w-3 h-3 inline-block mr-1"></i>
              The script downloads cmdop_go, enrolls under this fleet, and registers the machine.
              Expires <span class="text-ink-300 font-mono" x-text="expiresIn()"></span>.
            </p>
            <div class="flex items-center justify-between pt-2">
              <button type="button" @click="cancel()" class="btn btn-ghost btn-md">Cancel</button>
              {{ button(text='I ran it — wait for connection', kind='primary', icon='loader',
                        attrs='@click="step = 3"') }}
            </div>
          </div>
        {% endcall %}
      </div>
    </template>

    <template x-if="step === 3">
      <div>
        {{ page_header(
            title='Waiting for the agent to connect…',
            subtitle='We poll the relay every 2 seconds. Leave this tab open.',
            step=3,
            step_total=4,
            eyebrow='Wizard',
        ) }}
        {% call card(kind='roomy') %}
          <div class="flex items-center gap-3 py-6 px-2">
            <i data-lucide="loader-2" class="w-6 h-6 text-cmdop-400 animate-spin"></i>
            <div>
              <p class="text-body text-ink-100" x-text="statusLabel()"></p>
              <p class="text-footnote mt-1" x-text="statusHint()"></p>
            </div>
          </div>
          <div class="flex items-center justify-between border-t border-white/[0.06] pt-3">
            <button type="button" @click="cancel()" class="btn btn-ghost btn-md">Cancel</button>
            <button type="button" @click="step = 2" class="btn btn-secondary btn-md">
              <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
              Re-show install command
            </button>
          </div>
        {% endcall %}
      </div>
    </template>

    <template x-if="step === 4">
      <div>
        {{ page_header(
            title='All set',
            subtitle='Your machine is enrolled.',
            step=4,
            step_total=4,
            eyebrow='Wizard',
        ) }}
        {% call card(kind='roomy') %}
          <div class="flex items-center gap-3">
            <i data-lucide="check-circle-2" class="w-8 h-8 text-emerald-400"></i>
            <div class="min-w-0">
              <p class="text-body text-ink-100">
                <span x-text="hostname || 'New machine'"></span> is connected.
              </p>
              <p class="text-footnote mt-1">
                You can open a chat, run a terminal session, or invite teammates to use it.
              </p>
            </div>
          </div>
          <div class="flex items-center gap-2 mt-4">
            <a :href="machineId ? '/admin/machines/' + machineId : '/admin/machines'"
               class="btn btn-primary btn-md">
              <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
              Open machine
            </a>
            <a href="/admin/machines" class="btn btn-secondary btn-md">Back to list</a>
          </div>
        {% endcall %}
      </div>
    </template>
  {% endif %}
</div>

{% if member_role != 'member' %}
<script>
function addMachineWizard() {
  return {
    step: 1,
    loading: false,
    hostname: '',
    os: 'macos',
    osOptions: [
      { value: 'macos',   label: 'macOS',   icon: 'apple' },
      { value: 'linux',   label: 'Linux',   icon: 'monitor' },
      { value: 'windows', label: 'Windows', icon: 'monitor-smartphone' },
    ],
    wizardId: null,
    installCommands: { macos: '', linux: '', windows: '' },
    expiresAt: null,
    pollTimer: null,
    state: 'pending',
    machineId: null,
    copied: false,
    error: null,

    init() {
      this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
      this.$watch('step', (v) => {
        if (v === 3) this.startPolling(); else this.stopPolling();
        this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
      });
    },

    currentInstallCommand() {
      return this.installCommands[this.os] || '';
    },

    expiresIn() {
      if (!this.expiresAt) return '—';
      const ms = new Date(this.expiresAt).getTime() - Date.now();
      if (ms <= 0) return 'expired';
      const m = Math.floor(ms / 60000);
      return `in ${m}m`;
    },

    async startWizard() {
      this.loading = true;
      try {
        const res = await fetch('/api/admin/wizards/add-machine/start', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ os: this.os, hostname: this.hostname }),
        });
        if (!res.ok) {
          const body = await res.json().catch(() => ({}));
          this.error = body.detail || `HTTP ${res.status}`;
          toast(`Couldn't start wizard: ${this.error}`, 'error');
          return;
        }
        const body = await res.json();
        this.wizardId = body.wizard_id;
        this.installCommands = {
          macos:   body.install_command_macos,
          linux:   body.install_command_linux,
          windows: body.install_command_windows,
        };
        this.expiresAt = body.expires_at;
        this.step = 2;
        this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
      } catch (e) {
        this.error = e.message;
        toast(`Network error: ${this.error}`, 'error');
      } finally {
        this.loading = false;
      }
    },

    async copyCommand() {
      try {
        await navigator.clipboard.writeText(this.currentInstallCommand());
        this.copied = true;
        setTimeout(() => { this.copied = false; }, 2000);
      } catch (e) {
        toast(`Couldn't copy: ${e.message}`, 'error');
      }
    },

    async poll() {
      if (!this.wizardId) return;
      try {
        const res = await fetch(`/api/admin/wizards/add-machine/${this.wizardId}/status`);
        if (!res.ok) return;
        const body = await res.json();
        this.state = body.state;
        this.machineId = body.machine_id || null;
        if (body.state === 'connected') {
          this.step = 4;
          this.stopPolling();
        } else if (body.state === 'expired' || body.state === 'cancelled' || body.state === 'error') {
          this.stopPolling();
        }
      } catch (_) {
        /* swallow — next tick retries */
      }
    },

    startPolling() {
      if (this.pollTimer) return;
      this.pollTimer = setInterval(() => this.poll(), 2000);
    },

    stopPolling() {
      if (this.pollTimer) { clearInterval(this.pollTimer); this.pollTimer = null; }
    },

    async cancel() {
      if (this.wizardId) {
        try {
          await fetch(`/api/admin/wizards/add-machine/${this.wizardId}/cancel`, { method: 'POST' });
        } catch (_) { /* best-effort */ }
      }
      this.stopPolling();
      window.location.href = '/admin/machines';
    },

    statusLabel() {
      if (this.state === 'connected') return 'Connected.';
      return 'Waiting for the agent to call home…';
    },

    statusHint() {
      if (this.state === 'expired') return 'The bootstrap token has expired. Start over to mint a fresh one.';
      if (this.state === 'cancelled') return 'Wizard cancelled.';
      if (this.state === 'error') return 'Something went wrong; check /admin/logs.';
      return 'On the new host, run the install command from step 2.';
    },
  };
}

</script>
{% endif %}
{% endblock %}