{% extends "base.html" %}

{% block title %}GeoLearnr — Wizard{% endblock %}

{% block navbar_end %}
{% endblock %}

{% block content %}
<div
  x-data="wizard()"
  x-init="init()"
  @config-saved.window="step = 2"
  @url-processed.window="onUrlProcessed($event.detail)"
  @compare-done.window="step = 4"
  @send-chat.window="sendChat($event.detail)"
>

  <!-- Steps indicator -->
  <ul class="steps w-full mb-8">
    <li class="step" :class="step >= 1 ? 'step-primary cursor-pointer' : ''" @click="step = 1">LLM Config</li>
    <li class="step" :class="step >= 2 ? 'step-primary cursor-pointer' : ''" @click="if (step >= 2) step = 2">Maps URL</li>
    <li class="step" :class="step >= 3 ? 'step-primary cursor-pointer' : ''" @click="if (step >= 3) step = 3">Compare</li>
    <li class="step" :class="step >= 4 ? 'step-primary cursor-pointer' : ''" @click="if (step >= 4) step = 4">Analysis</li>
  </ul>

  <!-- ── Step 1: LLM Configuration ── -->
  <section x-show="step === 1" x-transition>
    <div class="card bg-base-200 max-w-lg mx-auto">
      <div class="card-body">
        <h2 class="card-title">Configure LLM</h2>
        {% include "partials/step1_content.html" %}
      </div>
    </div>
  </section>

  <!-- ── Step 2: Google Maps URL ── -->
  <section x-show="step === 2" x-transition>
    <div class="card bg-base-200 max-w-lg mx-auto">
      <div class="card-body">
        <h2 class="card-title">Paste a Google Maps URL</h2>
        {% include "partials/step2_content.html" %}
      </div>
    </div>
  </section>

  <!-- ── Step 3: Compare Countries ── -->
  <section x-show="step === 3" x-transition>
    <div class="card bg-base-200 max-w-2xl mx-auto">
      <div class="card-body">
        <h2 class="card-title">Compare Countries</h2>
        <div id="step3-area">
          <!-- Populated by /api/process-url response -->
        </div>
      </div>
    </div>
  </section>

  <!-- ── Step 4: Analysis + Chat ── -->
  <section x-show="step === 4" x-transition>
    <div class="card bg-base-200 max-w-3xl mx-auto">
      <div class="card-body">
        <h2 class="card-title">Analysis &amp; Chat</h2>

        <div id="step4-area">
          <!-- Populated by /api/compare response; includes #chat-messages and the form -->
        </div>
      </div>
    </div>
  </section>

</div>

<script>
function wizard() {
  return {
    step: 1,
    selectedCountries: [],
    country: '',
    availableCountries: [],

    async init() {
      try {
        const res = await fetch('/api/config');
        const data = await res.json();
        if (data.configured) this.step = 2;
      } catch (_) {}
    },

    onUrlProcessed(detail) {
      this.availableCountries = {};
      for ({id, displayName} of detail.countries) {
        this.availableCountries[id] = displayName
      }
      this.selectedCountries = [detail.detectedCountryId];
      this.step = 3;
    },

    toggleCountry(c) {
      const idx = this.selectedCountries.indexOf(c);
      if (idx >= 0) {
        this.selectedCountries.splice(idx, 1);
      } else if (this.selectedCountries.length < 4) {
        this.selectedCountries.push(c);
      }
    },

    async doCompare(form) {
      const questions = form.querySelector('[name=questions]').value;
      const errorSpan = document.getElementById('compare-error');
      const spinner = document.getElementById('compare-spinner');
      errorSpan.textContent = '';
      spinner.classList.add('htmx-request');
      try {
        const res = await fetch('/api/compare', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ compare_countries: this.selectedCountries, questions }),
        });
        if (res.ok) {
          const html = await res.text();
          const area = document.getElementById('step4-area');
          area.innerHTML = html;
          htmx.process(area);
          window.dispatchEvent(new CustomEvent('compare-done'));
        } else {
          const err = await res.json().catch(() => ({}));
          errorSpan.textContent = err?.detail ?? 'An unexpected error occurred.';
        }
      } catch (e) {
        errorSpan.textContent = 'Request failed: ' + e.message;
      } finally {
        spinner.classList.remove('htmx-request');
      }
    },

    sendChat({ url, message }) {
      const area = document.getElementById('chat-messages');

      // User bubble
      const userBubble = document.createElement('div');
      userBubble.className = 'chat chat-end';
      userBubble.innerHTML = `<div class="chat-bubble chat-bubble-primary">${this._escape(message)}</div>`;
      area.appendChild(userBubble);

      // Response bubble — HTMX SSE swaps in rendered HTML on the 'done' event
      const responseBubble = document.createElement('div');
      responseBubble.className = 'chat chat-start';
      responseBubble.innerHTML = `
        <div class="chat-bubble prose max-w-none"
          hx-ext="sse"
          sse-connect="${url}"
          sse-swap="done"
          hx-swap="innerHTML"
          sse-close="done"
        ><span class="loading loading-dots loading-sm"></span></div>`;
      area.appendChild(responseBubble);
      htmx.process(responseBubble);
      area.scrollTop = area.scrollHeight;

      responseBubble.addEventListener('htmx:sseMessage', () => {
        area.scrollTop = area.scrollHeight;
      }, { once: true });
    },

    _escape(str) {
      return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    },
  };
}
</script>
{% endblock %}