{% extends "base.html" %}

{% block title %}Agent - Memorizz{% endblock %}

{% block content %}
<div class="page-header page-header--agent">
    <a href="/agents" class="back-link">← Back to Agents</a>
    <h1>
        {% if agent and agent.persona and agent.persona.name %}
            {{ agent.persona.name }}
        {% else %}
            Agent
        {% endif %}
    </h1>
    {% if agent and agent.persona and agent.persona.role %}
    <p>{{ agent.persona.role }}</p>
    {% endif %}
</div>

{% if error %}
<div class="error-message">
    <span>!</span> {{ error }}
</div>
{% endif %}

{% if agent %}
<div class="agent-workbench">
    <section class="chat-panel">
        <div class="chat-header">
            <div class="chat-header-main">
                <div class="chat-header-title">
                    <span class="chat-eyebrow">Agent</span>
                    <h2>
                        {% if agent.persona and agent.persona.name %}
                            {{ agent.persona.name }}
                        {% else %}
                            Agent
                        {% endif %}
                    </h2>
                </div>
                <div class="chat-meta">
                    <span class="badge">{{ agent.application_mode or 'assistant' }}</span>
                    <span class="meta-chip">Max tool iterations: {{ agent.max_steps or 20 }}</span>
                    {% if agent.persona and agent.persona.role %}
                    <span class="meta-chip">Role: {{ agent.persona.role }}</span>
                    {% endif %}
                    <code class="meta-chip meta-chip--code">{{ agent.agent_id }}</code>
                </div>
            </div>
            <div class="chat-header-side">
                <span class="pane-badge">{{ context_window|length }} messages</span>
            </div>
        </div>

        <div class="chat-body">
            {% if context_window %}
            <div class="conversation-messages">
                {% for msg in context_window %}
                <div class="message {{ msg.role or 'system' }}">
                    <div class="message-avatar">
                        {% if msg.role == 'user' %}👤{% elif msg.role == 'assistant' %}🤖{% elif msg.role == 'tool' %}🔧{% else %}📝{% endif %}
                    </div>
                    <div class="message-bubble">
                        <div class="message-meta">
                            <span class="message-role">{{ msg.role|default('Unknown')|title }}</span>
                            {% if msg.timestamp %}
                            <span class="message-time">{{ msg.timestamp }}</span>
                            {% endif %}
                        </div>
                        <div class="message-text">{{ msg.content or msg.get('text', 'No content') }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-pane">
                <div class="empty-icon">💬</div>
                <p>No conversation history</p>
                <p class="empty-hint">Run a conversation with this agent to see messages here</p>
            </div>
            {% endif %}

            {% if run_response %}
            <div class="chat-latest">
                <div class="chat-latest-label">Latest response</div>
                <div class="chat-latest-body">{{ run_response }}</div>
            </div>
            {% endif %}
        </div>

        {% if run_error %}
        <div class="run-output error-message chat-error">
            <span>!</span> {{ run_error }}
        </div>
        {% endif %}

        <form method="post" action="/agents/{{ agent.agent_id }}/run" class="chat-composer">
            <div class="composer-input">
                <label for="run_query" class="sr-only">Prompt</label>
                <textarea id="run_query" name="query" rows="2" placeholder="Message the agent...">{{ run_query or '' }}</textarea>
            </div>
            <div class="composer-row">
                <div class="composer-memory">
                    <label for="run_memory_id" class="sr-only">Memory ID</label>
                    <input id="run_memory_id" name="memory_id" type="text" placeholder="Memory ID (optional)">
                </div>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
    </section>

    <aside class="context-panel">
        {% if token_stats %}
        <div class="token-utilization">
            <div class="token-header">
                <h3>Context Utilization</h3>
                <span class="token-summary">{{ token_stats.total_tokens|default(0) }} / {{ token_stats.context_window_tokens|default(128000) }} tokens</span>
            </div>
            <div class="token-bar-wrapper">
                <div class="token-bar-container">
                    <div class="token-bar" style="width: {{ [token_stats.percentage_used|default(0), 100]|min }}%"></div>
                </div>
            </div>
            <div class="token-composition-tooltip">
                <div class="composition-title">Token Composition</div>
                <div class="composition-item">
                    <span class="composition-label"><span class="composition-dot instruction"></span> System Instruction</span>
                    <span class="composition-value">{{ token_stats.composition.instruction|default(0) }} tokens</span>
                </div>
                <div class="composition-item">
                    <span class="composition-label"><span class="composition-dot persona"></span> Persona</span>
                    <span class="composition-value">{{ token_stats.composition.persona|default(0) }} tokens</span>
                </div>
                <div class="composition-item">
                    <span class="composition-label"><span class="composition-dot tools"></span> Tools</span>
                    <span class="composition-value">{{ token_stats.composition.tools|default(0) }} tokens</span>
                </div>
                <div class="composition-item">
                    <span class="composition-label"><span class="composition-dot history"></span> Conversation History</span>
                    <span class="composition-value">{{ token_stats.composition.history|default(0) }} tokens</span>
                </div>
            </div>
            <div class="token-details">
                <span class="token-percentage">{{ token_stats.percentage_used|default(0) }}% used</span>
                <span class="token-messages">{{ token_stats.message_count|default(0) }} messages</span>
            </div>
        </div>
        {% endif %}

        <div class="context-card">
            <div class="context-card-header">
                <div class="context-card-title">
                    <h3>Context Window</h3>
                    <span class="context-card-subtitle">{{ context_window|length }} messages</span>
                </div>
            </div>
            <div class="context-card-body">
                {% if agent.instruction %}
                <div class="context-block">
                    <div class="context-block-title">System Instruction</div>
                    <div class="context-block-body">
                        <pre class="instruction-text">{{ agent.instruction }}</pre>
                    </div>
                </div>
                {% endif %}

                {% if agent.persona %}
                <div class="context-block">
                    <div class="context-block-title">Persona</div>
                    <div class="context-block-body">
                        {% if agent.persona.name %}
                        <div class="context-item">
                            <span class="item-label">Name:</span>
                            <span class="item-value">{{ agent.persona.name }}</span>
                        </div>
                        {% endif %}
                        {% if agent.persona.role %}
                        <div class="context-item">
                            <span class="item-label">Role:</span>
                            <span class="item-value">{{ agent.persona.role }}</span>
                        </div>
                        {% endif %}
                        {% if agent.persona.background %}
                        <div class="context-item">
                            <span class="item-label">Background:</span>
                            <span class="item-value">{{ agent.persona.background }}</span>
                        </div>
                        {% endif %}
                        {% if agent.persona.goals %}
                        <div class="context-item">
                            <span class="item-label">Goals:</span>
                            <ul class="goals-list">
                            {% if agent.persona.goals is iterable and agent.persona.goals is not string %}
                                {% for goal in agent.persona.goals %}
                                <li>{{ goal }}</li>
                                {% endfor %}
                            {% else %}
                                <li>{{ agent.persona.goals }}</li>
                            {% endif %}
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {% if agent.tools %}
                <div class="context-block">
                    <div class="context-block-title">Tools ({{ agent.tools|length }})</div>
                    <div class="context-block-body">
                        <div class="tools-list">
                            {% for tool in agent.tools %}
                            <div class="tool-item">
                                <span class="tool-name">{{ tool.name if tool.name else tool.get('function', {}).get('name', 'Unknown') }}</span>
                                <span class="tool-desc">{{ tool.description if tool.description else tool.get('function', {}).get('description', '') }}</span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="context-block">
                    <div class="context-block-title">Conversation</div>
                    {% if context_window %}
                    <div class="context-log">
                        {% for msg in context_window %}
                        <div class="context-log-item">
                            <div class="context-log-meta">
                                <span class="context-log-role">{{ msg.role|default('unknown')|upper }}</span>
                                {% if msg.timestamp %}
                                <span class="context-log-time">{{ msg.timestamp }}</span>
                                {% endif %}
                            </div>
                            <div class="context-log-text">{{ msg.content or msg.get('text', 'No content') }}</div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="context-log-empty">No conversation history.</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </aside>
</div>

<div class="agent-actions">
    <form method="post" action="/agents/{{ agent.agent_id }}/delete"
          onsubmit="return confirm('Are you sure you want to delete this agent?');">
        <button type="submit" class="btn btn-danger">Delete Agent</button>
    </form>
</div>
{% else %}
<div class="empty-state">
    <div class="empty-icon">❓</div>
    <h3>Agent Not Found</h3>
    <p>The requested agent could not be found.</p>
    <a href="/agents" class="btn btn-primary">Back to Agents</a>
</div>
{% endif %}
{% endblock %}