{% extends "base.html" %}
{% block title %}{{ profile.name }} — SimpleX Manager{% endblock %}

{% block head %}
<style>
  .qr-wrap { text-align: center; padding: 16px; }
  .qr-wrap canvas { border-radius: 8px; }
  .contact-row td:first-child { font-weight: 600; }
</style>
{% endblock %}

{% block content %}
<div class="flex-between" style="margin-bottom: 20px;">
  <div class="flex gap-8">
    <a href="/" class="muted" style="text-decoration:none;">← Profiles</a>
    <span class="muted">/</span>
    <strong>{{ profile.name }}</strong>
    <span class="tag">{{ profile.bot_type }}</span>
    <span class="badge {% if profile.running %}badge-green{% else %}badge-red{% endif %}" id="status-badge">
      {% if profile.running %}running{% else %}stopped{% endif %}
    </span>
  </div>
  <div class="flex gap-8">
    {% if profile.running %}
    <button class="btn btn-danger"
            hx-post="/api/profiles/{{ profile.id }}/stop"
            hx-swap="none"
            hx-on::after-request="location.reload()">Stop</button>
    {% else %}
    <button class="btn btn-success"
            hx-post="/api/profiles/{{ profile.id }}/start"
            hx-swap="none"
            hx-on::after-request="location.reload()">Start</button>
    {% endif %}
    <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
  </div>
</div>

<div class="grid-2">
  <!-- Left column -->
  <div>
    <!-- Address / QR -->
    <div class="card">
      <h2>Address</h2>
      {% if profile.address %}
      <div class="monospace muted" style="word-break:break-all; margin-bottom:12px;">{{ profile.address }}</div>
      <div class="qr-wrap">
        <canvas id="qr-canvas"></canvas>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
      <script>
        QRCode.toCanvas(document.getElementById('qr-canvas'), {{ profile.address | tojson }}, {width: 200}, () => {})
      </script>
      {% else %}
      <p class="muted">Start the bot to generate an address.</p>
      {% endif %}
    </div>

    <!-- Config -->
    <div class="card">
      <h2>Config</h2>
      <table>
        <tr><th>Key</th><th>Value</th></tr>
        {% for k, v in profile.config.items() %}
        <tr><td>{{ k }}</td><td>{{ v }}</td></tr>
        {% else %}
        <tr><td colspan="2" class="muted">No config set.</td></tr>
        {% endfor %}
      </table>
    </div>
  </div>

  <!-- Right column -->
  <div>
    <!-- Send message -->
    <div class="card">
      <h2>Send Message</h2>
      <form id="send-form">
        <div class="field">
          <label>To (contact or group name)</label>
          <input type="text" name="to" placeholder="Alice" list="contact-list">
          <datalist id="contact-list">
            {% for c in contacts %}<option value="{{ c.localDisplayName }}">{% endfor %}
            {% for g in groups %}<option value="{{ g.groupInfo.groupProfile.displayName }}">{% endfor %}
          </datalist>
        </div>
        <div class="field">
          <label>Message</label>
          <textarea name="text" rows="3" placeholder="Hello…"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send</button>
        <span id="send-result" class="muted" style="margin-left:10px;"></span>
      </form>
    </div>

    <!-- Contacts -->
    <div class="card">
      <h2>Contacts ({{ contacts | length }})</h2>
      {% if contacts %}
      <table>
        <tr><th>Name</th><th>ID</th></tr>
        {% for c in contacts %}
        <tr class="contact-row">
          <td>{{ c.localDisplayName }}</td>
          <td class="muted monospace">{{ c.contactId }}</td>
        </tr>
        {% endfor %}
      </table>
      {% else %}
      <p class="muted">No contacts yet.</p>
      {% endif %}
    </div>

    <!-- Groups -->
    <div class="card">
      <h2>Groups ({{ groups | length }})</h2>
      {% if groups %}
      <table>
        <tr><th>Name</th><th>Members</th></tr>
        {% for g in groups %}
        <tr>
          <td>{{ g.groupInfo.groupProfile.displayName }}</td>
          <td class="muted">{{ g.members | length }}</td>
        </tr>
        {% endfor %}
      </table>
      {% else %}
      <p class="muted">No groups yet.</p>
      {% endif %}
    </div>

    <!-- Event log -->
    <div class="card">
      <div class="flex-between" style="margin-bottom:10px;">
        <h2 style="margin:0;">Event Log</h2>
        <button class="btn btn-ghost" style="font-size:12px;padding:4px 10px;"
                hx-get="/api/profiles/{{ profile.id }}/status"
                hx-swap="none"
                hx-on::after-request="refreshLog(event)">Refresh</button>
      </div>
      <div class="log-box" id="log-box">{% for line in log_lines %}{{ line }}
{% endfor %}</div>
    </div>
  </div>
</div>

<script>
document.getElementById('send-form').addEventListener('submit', async (e) => {
  e.preventDefault()
  const fd = new FormData(e.target)
  const result = document.getElementById('send-result')
  result.textContent = 'Sending…'
  const token = document.cookie.match(/(?:^|;\s*)token=([^;]+)/)?.[1] || ''
  const resp = await fetch('/api/profiles/{{ profile.id }}/send', {
    method: 'POST',
    headers: {'Content-Type': 'application/json', 'X-Token': token},
    body: JSON.stringify({to: fd.get('to'), text: fd.get('text')})
  })
  const data = await resp.json()
  result.textContent = data.ok ? '✓ Sent' : '✗ Failed'
  setTimeout(() => result.textContent = '', 3000)
})

function refreshLog(event) {
  try {
    const data = JSON.parse(event.detail.xhr.responseText)
    document.getElementById('log-box').textContent = data.log.join('\n')
    document.getElementById('status-badge').textContent = data.running ? 'running' : 'stopped'
    document.getElementById('status-badge').className = 'badge ' + (data.running ? 'badge-green' : 'badge-red')
  } catch(e) {}
}

function confirmDelete() {
  if (!confirm('Delete this profile? This cannot be undone.')) return
  const token = document.cookie.match(/(?:^|;\s*)token=([^;]+)/)?.[1] || ''
  fetch('/api/profiles/{{ profile.id }}', {
    method: 'DELETE',
    headers: {'X-Token': token}
  }).then(() => location.href = '/')
}

// Auto-refresh log every 10s if running
{% if profile.running %}
setInterval(() => {
  document.querySelector('[hx-get="/api/profiles/{{ profile.id }}/status"]')?.click()
}, 10000)
{% endif %}
</script>
{% endblock %}