{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="mobile-only">

  <!-- Quick Actions -->
  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// QUICK ACTIONS</div>
    <div class="quick-grid">
      <a href="/voice/button" class="quick-btn voice">&#x1F3A4; Voice</a>
      <a href="/swarm/task/create" class="quick-btn">&#x2795; Task</a>
      <a href="/swarm/live" class="quick-btn">&#x1F4CA; Swarm</a>
      <a href="/marketplace/ui" class="quick-btn">&#x1F3EA; Market</a>
    </div>
  </div>

  <!-- Chat -->
  <div class="card mc-panel mobile-chat-wrap">
    <div class="card-header mc-panel-header">// TIMMY</div>
    <div class="mobile-chat-log" id="mobile-chat">
      <div class="mobile-chat-msg timmy">
        <div class="meta">TIMMY</div>
        <div class="bubble">Sir, Timmy here. Ready for your command.</div>
      </div>
    </div>
    <form onsubmit="sendMobileMessage(event)" class="mobile-chat-input">
      <input type="text" id="mobile-message" placeholder="Message Timmy..." required autocomplete="off" />
      <button type="submit">SEND</button>
    </form>
  </div>

  <!-- Agents -->
  <div class="card mc-panel">
    <div class="card-header mc-panel-header">// YOUR AGENTS</div>
    <div class="mobile-agents-list">
      {% if agents %}
        {% for agent in agents[:3] %}
        <div class="agent-card">
          <div class="agent-avatar">{{ agent.name[0] }}</div>
          <div class="agent-info">
            <div class="agent-name">{{ agent.name }}</div>
            <div class="agent-meta">
              <span class="badge badge-{{ 'success' if agent.status == 'active' else 'warning' if agent.status == 'busy' else 'danger' }}">
                {{ agent.status }}
              </span>
            </div>
          </div>
        </div>
        {% endfor %}
      {% else %}
        <div style="color: var(--text-dim); text-align: center; padding: 20px; font-size: 12px; letter-spacing: 0.08em;">
          NO AGENTS YET
        </div>
      {% endif %}
    </div>
  </div>

</div>

<!-- Desktop fallback -->
<div class="desktop-message" style="text-align: center; padding: 60px;">
  <p style="font-size: 3rem; margin-bottom: 20px;">&#x1F4F1;</p>
  <h2 style="margin-bottom: 16px; color: var(--text-bright);">Mobile Dashboard</h2>
  <p style="color: var(--text-dim);">
    This page is optimized for mobile devices.<br>
    Please visit on your iPhone or use the desktop dashboard.
  </p>
  <a href="/" class="btn btn-primary" style="margin-top: 20px;">
    Go to Desktop Dashboard
  </a>
</div>

<script>
async function sendMobileMessage(event) {
    event.preventDefault();
    const input = document.getElementById('mobile-message');
    const message = input.value.trim();
    if (!message) return;

    const chat = document.getElementById('mobile-chat');

    // Add user message
    const userDiv = document.createElement('div');
    userDiv.className = 'mobile-chat-msg user';
    const userMeta = document.createElement('div');
    userMeta.className = 'meta';
    userMeta.textContent = 'YOU';
    const userBubble = document.createElement('div');
    userBubble.className = 'bubble';
    userBubble.textContent = message;
    userDiv.appendChild(userMeta);
    userDiv.appendChild(userBubble);
    chat.appendChild(userDiv);
    chat.scrollTop = chat.scrollHeight;

    input.value = '';

    try {
        const response = await fetch('/agents/timmy/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'message=' + encodeURIComponent(message)
        });
        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const timmyResponse = doc.querySelector('.chat-message.timmy, .msg-body');

        const replyDiv = document.createElement('div');
        replyDiv.className = 'mobile-chat-msg timmy';
        const replyMeta = document.createElement('div');
        replyMeta.className = 'meta';
        replyMeta.textContent = 'TIMMY';
        const replyBubble = document.createElement('div');
        replyBubble.className = 'bubble';
        replyBubble.textContent = timmyResponse ? timmyResponse.textContent.trim() : 'Response received.';
        replyDiv.appendChild(replyMeta);
        replyDiv.appendChild(replyBubble);
        chat.appendChild(replyDiv);
        chat.scrollTop = chat.scrollHeight;
    } catch (e) {
        const errDiv = document.createElement('div');
        errDiv.className = 'mobile-chat-msg timmy';
        const errMeta = document.createElement('div');
        errMeta.className = 'meta';
        errMeta.textContent = 'TIMMY';
        const errBubble = document.createElement('div');
        errBubble.className = 'bubble';
        errBubble.style.color = 'var(--red)';
        errBubble.textContent = 'Sorry, I could not process that. Try again?';
        errDiv.appendChild(errMeta);
        errDiv.appendChild(errBubble);
        chat.appendChild(errDiv);
        chat.scrollTop = chat.scrollHeight;
    }
}
</script>
{% endblock %}