{% extends "base.html" %}
{% block title %}Ageri{% endblock %}

{% block body %}
<div class="flex h-screen overflow-hidden" x-data="chat()" x-init="init()">

  <!-- ── Top-up modal ───────────────────────────────────────────────────────── -->
  <div x-show="showTopup" x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="closeTopup()">
    <div class="bg-panel border border-border rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6" @click.stop>

      <!-- Step 1: pick tier -->
      <template x-if="topupStep === 'pick'">
        <div>
          <h2 class="text-white font-semibold text-base mb-1">Add credits</h2>
          <p class="text-slate-400 text-sm mb-5">Credits are used for AI responses. They never expire.</p>
          <div class="space-y-2">
            <template x-for="pkg in creditPackages" :key="pkg.tier">
              <button
                @click="selectTier(pkg)"
                class="w-full flex items-center justify-between px-4 py-3 rounded-xl border border-border hover:border-accent/60 hover:bg-accent/5 transition-colors text-left"
              >
                <div>
                  <span class="text-white font-medium text-sm" x-text="pkg.credits.toLocaleString() + ' credits'"></span>
                  <span x-show="pkg.bonus" class="ml-2 text-xs text-teal font-medium" x-text="'+' + pkg.bonus + ' bonus'"></span>
                </div>
                <span class="text-slate-300 text-sm font-semibold" x-text="pkg.label"></span>
              </button>
            </template>
          </div>
          <button @click="closeTopup()" class="mt-4 w-full text-center text-xs text-slate-500 hover:text-slate-400">Cancel</button>
        </div>
      </template>

      <!-- Step 2: pick payment method (shown only when VietQR available) -->
      {% if show_vietqr %}
      <template x-if="topupStep === 'method'">
        <div>
          <button @click="topupStep = 'pick'" class="text-xs text-slate-500 hover:text-slate-300 mb-4 flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back
          </button>
          <h2 class="text-white font-semibold text-base mb-1">Choose payment</h2>
          <p class="text-slate-400 text-sm mb-5" x-text="selectedTier && selectedTier.credits.toLocaleString() + ' credits — ' + selectedTier.label"></p>
          <div class="space-y-3">
            <button @click="checkout(selectedTier.priceId)"
              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-border hover:border-accent/60 hover:bg-accent/5 transition-colors text-left">
              <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
              </div>
              <div>
                <div class="text-sm font-medium text-white">Card / PayPal</div>
                <div class="text-xs text-slate-500">Via Paddle — all currencies</div>
              </div>
            </button>
            <button @click="startVietQR()"
              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-border hover:border-teal/60 hover:bg-teal/5 transition-colors text-left">
              <div class="w-8 h-8 rounded-lg bg-teal/10 flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 3.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-7a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v7z"/></svg>
              </div>
              <div>
                <div class="text-sm font-medium text-white">Chuyển khoản VietQR</div>
                <div class="text-xs text-slate-500">Ngân hàng nội địa — <span x-text="selectedTier && (selectedTier.vnd / 1000).toFixed(0) + 'k VND'"></span></div>
              </div>
            </button>
          </div>
          <button @click="closeTopup()" class="mt-4 w-full text-center text-xs text-slate-500 hover:text-slate-400">Huỷ</button>
        </div>
      </template>
      {% endif %}

      <!-- Step 3: VietQR — show QR + poll -->
      <template x-if="topupStep === 'qr'">
        <div>
          <button @click="topupStep = '{% if show_vietqr %}method{% else %}pick{% endif %}'; cancelQRPoll()" class="text-xs text-slate-500 hover:text-slate-300 mb-4 flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Quay lại
          </button>
          <h2 class="text-white font-semibold text-base mb-1">Quét mã QR</h2>
          <p class="text-slate-400 text-sm mb-4" x-text="selectedTier && selectedTier.credits.toLocaleString() + ' credits — ' + (selectedTier.vnd / 1000).toFixed(0) + 'k VND'"></p>

          <!-- QR iframe / loading -->
          <div class="rounded-xl overflow-hidden border border-border bg-white" style="height: 320px;">
            <template x-if="qrLink">
              <iframe :src="qrLink" class="w-full h-full border-0" title="VietQR"></iframe>
            </template>
            <template x-if="!qrLink">
              <div class="flex items-center justify-center h-full">
                <div class="w-6 h-6 border-2 border-teal border-t-transparent rounded-full animate-spin"></div>
              </div>
            </template>
          </div>

          <p class="text-xs text-slate-500 text-center mt-3">Đang chờ xác nhận thanh toán…</p>
          <button @click="closeTopup(); cancelQRPoll()" class="mt-3 w-full text-center text-xs text-slate-500 hover:text-slate-400">Huỷ</button>
        </div>
      </template>

      <!-- Step 4: success -->
      <template x-if="topupStep === 'success'">
        <div class="text-center py-4">
          <div class="w-14 h-14 rounded-full bg-teal/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          </div>
          <h2 class="text-white font-semibold text-base mb-1">Thanh toán thành công</h2>
          <p class="text-slate-400 text-sm mb-5" x-text="'Đã cộng ' + (selectedTier && selectedTier.credits.toLocaleString()) + ' credits'"></p>
          <button @click="closeTopup()" class="w-full py-2.5 rounded-xl bg-teal/20 text-teal text-sm font-medium hover:bg-teal/30 transition-colors">Đóng</button>
        </div>
      </template>

    </div>
  </div>

  <!-- ── Sidebar ─────────────────────────────────────────────────────────── -->
  <aside class="w-64 flex-shrink-0 flex flex-col border-r border-border bg-panel">

    <!-- Logo -->
    <div class="flex items-center gap-3 px-4 py-4 border-b border-border">
      <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-teal flex items-center justify-center flex-shrink-0">
        <span class="text-white font-bold text-sm">A</span>
      </div>
      <span class="text-white font-semibold text-sm">Ageri</span>
    </div>

    <!-- Agent list -->
    <div class="flex-1 overflow-y-auto py-2">
      <div class="px-3 py-2">
        <p class="text-xs font-medium text-slate-500 uppercase tracking-wider mb-1">Agents</p>
      </div>
      {% for profile in profiles %}
      <button
        @click="selectProfile('{{ profile.id }}', '{{ profile.name }}')"
        :class="activeProfileId === '{{ profile.id }}' ? 'bg-accent/15 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg mx-1 transition-colors text-left"
        style="width: calc(100% - 8px)"
      >
        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 text-white font-semibold text-xs"
          style="background: linear-gradient(135deg, #818cf8, #14b8a6)">
          {{ profile.name[0].upper() }}
        </div>
        <div class="min-w-0">
          <div class="text-sm font-medium truncate">{{ profile.name }}</div>
          <div class="text-xs text-slate-500 truncate">{{ profile.archetype or 'Assistant' }}</div>
        </div>
      </button>
      {% endfor %}
    </div>

    <!-- Bottom: credits + user -->
    <div class="border-t border-border px-3 py-3 space-y-2">
      {% if namespace and paddle_client_token %}
      <!-- Credit balance chip -->
      <button
        @click="showTopup = true"
        class="w-full flex items-center justify-between px-3 py-2 rounded-xl bg-surface hover:bg-white/5 transition-colors group"
        title="Add credits"
      >
        <div class="flex items-center gap-2">
          <svg class="w-4 h-4 text-teal flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span class="text-xs text-slate-400">
            <template x-if="credits === null"><span>Credits</span></template>
            <template x-if="credits !== null"><span x-text="credits.toLocaleString() + ' cr'"></span></template>
          </span>
        </div>
        <svg class="w-3.5 h-3.5 text-slate-600 group-hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
      </button>
      {% endif %}
      <!-- User row -->
      <div class="flex items-center gap-2">
        <div class="w-7 h-7 rounded-full bg-slate-700 flex items-center justify-center flex-shrink-0">
          <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
        </div>
        <span class="text-sm text-slate-400 flex-1 truncate">You</span>
        <a href="/logout" class="text-slate-600 hover:text-slate-400 transition-colors" title="Sign out">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
          </svg>
        </a>
      </div>
    </div>
  </aside>

  <!-- ── Chat area ───────────────────────────────────────────────────────── -->
  <main class="flex-1 flex flex-col min-w-0">

    <!-- Header -->
    <div class="flex items-center gap-3 px-6 py-4 border-b border-border flex-shrink-0">
      <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0"
        style="background: linear-gradient(135deg, #818cf8, #14b8a6)">
        <span x-text="activeProfileName[0]"></span>
      </div>
      <div>
        <h1 class="text-sm font-semibold text-white" x-text="activeProfileName"></h1>
        <p class="text-xs text-slate-500" x-show="!thinking">Online</p>
        <p class="text-xs text-teal" x-show="thinking">Thinking…</p>
      </div>
    </div>

    <!-- Messages -->
    <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4" id="messages" x-ref="messages">

      <!-- Empty state -->
      <template x-if="messages.length === 0">
        <div class="flex flex-col items-center justify-center h-full text-center py-20">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-accent to-teal flex items-center justify-center mb-4 opacity-60">
            <span class="text-white font-bold">A</span>
          </div>
          <p class="text-slate-400 text-sm">Say hello to <span class="text-white" x-text="activeProfileName"></span></p>
        </div>
      </template>

      <!-- Message list -->
      <template x-for="msg in messages" :key="msg.id">
        <div :class="msg.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
          <!-- Agent avatar (left side) -->
          <template x-if="msg.role === 'agent'">
            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0 mr-2 mt-0.5 self-start"
              style="background: linear-gradient(135deg, #818cf8, #14b8a6)">
              <span x-text="activeProfileName[0]"></span>
            </div>
          </template>
          <!-- Bubble -->
          <div
            :class="msg.role === 'user'
              ? 'bg-accent/20 text-white rounded-2xl rounded-tr-sm'
              : 'bg-panel border border-border text-slate-200 rounded-2xl rounded-tl-sm'"
            class="max-w-[70%] px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap"
            x-text="msg.text"
          ></div>
        </div>
      </template>

      <!-- Thinking bubble -->
      <template x-if="thinking">
        <div class="flex justify-start">
          <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0 mr-2 mt-0.5"
            style="background: linear-gradient(135deg, #818cf8, #14b8a6)">
            <span x-text="activeProfileName[0]"></span>
          </div>
          <div class="bg-panel border border-border rounded-2xl rounded-tl-sm px-4 py-3">
            <div class="flex gap-1 items-center">
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:0ms"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:150ms"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:300ms"></span>
            </div>
          </div>
        </div>
      </template>

    </div>

    <!-- Input bar -->
    <div class="flex-shrink-0 px-6 py-4 border-t border-border">
      <form @submit.prevent="send()" class="flex items-end gap-3">
        <div class="flex-1 relative">
          <textarea
            x-model="input"
            @keydown.enter.exact.prevent="send()"
            @keydown.shift.enter.stop
            :disabled="thinking"
            placeholder="Message Ageri…"
            rows="1"
            class="w-full bg-panel border border-border rounded-xl px-4 py-3 text-white text-sm placeholder-slate-500 resize-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
            style="min-height: 48px; max-height: 200px"
            x-ref="input"
            @input="autoResize($event.target)"
          ></textarea>
        </div>
        <button
          type="submit"
          :disabled="!input.trim() || thinking"
          class="w-10 h-10 rounded-xl bg-accent hover:bg-indigo-500 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center flex-shrink-0 transition-colors mb-0.5"
        >
          <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
        </button>
      </form>
      <p class="text-xs text-slate-600 mt-2 text-center">Enter to send · Shift+Enter for new line</p>
    </div>

  </main>
</div>

<script>
{% if paddle_client_token %}
Paddle.Setup({
  token: '{{ paddle_client_token }}',
  eventCallback(ev) {
    if (ev.name === 'checkout.completed') {
      // Refresh balance after successful purchase
      setTimeout(() => window._ageriChat && window._ageriChat.loadBalance(), 3000);
    }
  }
});
{% endif %}

function chat() {
  return {
    activeProfileId: '{{ profiles[0].id if profiles else "ageri" }}',
    activeProfileName: '{{ profiles[0].name if profiles else "Ageri" }}',
    messages: [],
    input: '',
    thinking: false,
    ws: null,
    msgCounter: 0,

    // Billing
    credits: null,
    showTopup: false,
    topupStep: 'pick',      // 'pick' | 'method' | 'qr' | 'success'
    selectedTier: null,
    qrLink: null,
    _qrPollTimer: null,
    _qrPollStop: null,
    creditPackages: [
      { tier: 5,  priceId: 'pri_01kny6pv7stafaphtvxmfjpdyn', label: '$5',  credits: 500,  bonus: 0,    vnd: 125000 },
      { tier: 10, priceId: 'pri_01kny8d1fprev73ym1vekeef47', label: '$10', credits: 1100, bonus: 100,  vnd: 250000 },
      { tier: 20, priceId: 'pri_01kny8efztkrdvcj2k87eqbn4g', label: '$20', credits: 2400, bonus: 400,  vnd: 500000 },
      { tier: 50, priceId: 'pri_01kny8fazn1qq6ffqeh7b3gatj', label: '$50', credits: 6500, bonus: 1500, vnd: 1250000 },
    ],

    init() {
      this.connect();
      {% if namespace and paddle_client_token %}
      this.loadBalance();
      window._ageriChat = this;
      {% endif %}
    },

    connect() {
      const proto = location.protocol === 'https:' ? 'wss' : 'ws';
      this.ws = new WebSocket(`${proto}://${location.host}/ws/chat`);

      this.ws.onmessage = (e) => {
        const data = JSON.parse(e.data);
        if (data.type === 'thinking') {
          this.thinking = true;
        } else if (data.type === 'response') {
          this.thinking = false;
          this.addMessage('agent', data.text);
        }
      };

      this.ws.onclose = () => {
        // Reconnect after 2s
        setTimeout(() => this.connect(), 2000);
      };

      this.ws.onerror = () => {
        this.ws.close();
      };
    },

    selectProfile(id, name) {
      this.activeProfileId = id;
      this.activeProfileName = name;
      this.messages = [];
      this.$nextTick(() => this.$refs.input.focus());
    },

    send() {
      const text = this.input.trim();
      if (!text || this.thinking || !this.ws || this.ws.readyState !== WebSocket.OPEN) return;

      this.addMessage('user', text);
      this.input = '';
      this.$nextTick(() => this.autoResize(this.$refs.input));

      this.ws.send(JSON.stringify({
        text,
        profile_id: this.activeProfileId,
      }));
    },

    addMessage(role, text) {
      this.messages.push({ id: ++this.msgCounter, role, text });
      this.$nextTick(() => {
        const el = this.$refs.messages;
        if (el) el.scrollTop = el.scrollHeight;
      });
    },

    autoResize(el) {
      el.style.height = 'auto';
      el.style.height = Math.min(el.scrollHeight, 200) + 'px';
    },

    async loadBalance() {
      try {
        const r = await fetch('/api/billing/balance');
        const data = await r.json();
        this.credits = data.credits ?? null;
      } catch (_) {
        this.credits = null;
      }
    },

    // ── Top-up flow ─────────────────────────────────────────────────────────

    closeTopup() {
      this.showTopup = false;
      this.topupStep = 'pick';
      this.selectedTier = null;
      this.qrLink = null;
      this.cancelQRPoll();
    },

    selectTier(pkg) {
      this.selectedTier = pkg;
      {% if show_vietqr %}
      this.topupStep = 'method';
      {% else %}
      this.checkout(pkg.priceId);
      {% endif %}
    },

    checkout(priceId) {
      {% if paddle_client_token %}
      Paddle.Checkout.open({
        items: [{ priceId, quantity: 1 }],
        settings: { displayMode: 'overlay', theme: 'dark' },
      });
      this.closeTopup();
      {% endif %}
    },

    async startVietQR() {
      this.topupStep = 'qr';
      this.qrLink = null;
      try {
        const r = await fetch(`/api/payment/get_qr_link/${encodeURIComponent('{{ namespace }}')}?tier=${this.selectedTier.tier}`);
        const data = await r.json();
        this.qrLink = data.qr_link || null;
      } catch (_) {
        this.qrLink = null;
      }
      this.startQRPoll();
    },

    startQRPoll() {
      this.cancelQRPoll();
      let attempts = 0;
      const maxAttempts = 60; // 5 min at 5s intervals
      const tier = this.selectedTier?.tier;

      this._qrPollTimer = setInterval(async () => {
        attempts++;
        if (attempts > maxAttempts) { this.cancelQRPoll(); return; }
        try {
          const r = await fetch(`/api/payment/check_complete/${encodeURIComponent('{{ namespace }}')}?tier=${tier}`);
          const data = await r.json();
          if (data.paid) {
            this.cancelQRPoll();
            this.topupStep = 'success';
            setTimeout(() => this.loadBalance(), 500);
          }
        } catch (_) {}
      }, 5000);
    },

    cancelQRPoll() {
      if (this._qrPollTimer) { clearInterval(this._qrPollTimer); this._qrPollTimer = null; }
    },
  }
}
</script>
{% endblock %}