{% extends "base.html" %}

{% block title %}AI Context & Tools{% endblock %}
{% block page_title %}AI Context & Tools{% endblock %}

{% block content %}
<div class="container-fluid">
    {% if save_success %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        Settings saved successfully.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endif %}

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <a href="/ai/settings" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Back to AI Settings
            </a>
        </div>
    </div>

    <form method="post" action="/ai/settings/context">
        <!-- Context Items -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-file-text me-2"></i> Context Items</span>
                <button type="button" class="btn btn-sm btn-outline-primary" id="add-context-btn">
                    <i class="bi bi-plus-lg"></i> Add Context
                </button>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Context items are injected into the system prompt to give the AI additional knowledge.</p>
                <div id="context-items-container">
                    {% for item in context_items %}
                    <div class="context-item card mb-2" data-index="{{ loop.index0 }}">
                        <div class="card-body p-2">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox"
                                           name="context_enabled_{{ loop.index0 }}"
                                           {% if item.get('enabled', true) %}checked{% endif %}>
                                </div>
                                <input type="text" class="form-control form-control-sm"
                                       name="context_name_{{ loop.index0 }}"
                                       value="{{ item.name }}" placeholder="Context name">
                                <button type="button" class="btn btn-sm btn-outline-danger remove-context-btn">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                            <textarea class="form-control form-control-sm"
                                      name="context_content_{{ loop.index0 }}"
                                      rows="3" placeholder="Context content...">{{ item.content }}</textarea>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Tools -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-tools me-2"></i> Registered Tools
            </div>
            <div class="card-body">
                <div class="alert alert-info small mb-3" role="alert">
                    <p class="mb-1"><i class="bi bi-info-circle me-1"></i> <strong>What are tools?</strong></p>
                    <p class="mb-1">Tools are Python functions the AI can call to look up live data from your app &mdash; database queries, external API calls, or computations. For example, a <code>find_customer</code> tool lets the AI answer <em>"What's John Smith's account number?"</em> by running a real query instead of guessing.</p>
                    <p class="mb-0 text-muted">Enable only the tools you want the AI to have access to. Tools are defined in application code with <code>@tool_registry.tool()</code> and cannot be added from this page.</p>
                </div>
                {% if tools %}
                <div class="list-group">
                    {% for tool in tools %}
                    <label class="list-group-item d-flex align-items-center gap-3">
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox"
                                   name="tool_{{ tool.name }}"
                                   {% if tool.name in enabled_tools %}checked{% endif %}>
                        </div>
                        <div>
                            <strong class="d-block"><code>{{ tool.name }}</code></strong>
                            <span class="text-muted small">{{ tool.description }}</span>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted mb-0">No tools registered. Developers can register tools using <code>@tool_registry.tool()</code>.</p>
                {% endif %}
            </div>
        </div>

        <!-- Lifecycle Hooks -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-diagram-3 me-2"></i> Lifecycle Hooks
            </div>
            <div class="card-body">
                <div class="alert alert-info small mb-3" role="alert">
                    <p class="mb-1"><i class="bi bi-info-circle me-1"></i> <strong>What are hooks?</strong></p>
                    <p class="mb-1">Hooks are Python functions that run at specific points in the chat flow. Four events are supported:</p>
                    <ul class="mb-1 ps-3">
                        <li><code>session_start</code> &mdash; when a new chat session begins (good for audit logs)</li>
                        <li><code>user_prompt_submit</code> &mdash; before the user's message is sent to the AI (inject context, redact PII)</li>
                        <li><code>pre_tool_use</code> &mdash; before a tool runs (gate by user role, rate-limit; return a message to block the call and feed it back to the AI)</li>
                        <li><code>post_tool_use</code> &mdash; after a tool runs (transform or redact the result)</li>
                    </ul>
                    <p class="mb-0 text-muted">Hooks are defined in application code with <code>@tool_registry.on("event")</code> and cannot be added from this page. A failing hook never blocks the chat &mdash; exceptions are logged and the hook is skipped.</p>
                </div>
                {% if hooks %}
                <div class="list-group">
                    {% for hook in hooks %}
                    <label class="list-group-item d-flex align-items-center gap-3">
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox"
                                   name="hook_{{ hook.name }}"
                                   {% if hook.name in enabled_hooks %}checked{% endif %}>
                        </div>
                        <div>
                            <strong class="d-block"><code>{{ hook.name }}</code> <span class="badge bg-secondary ms-1">{{ hook.event }}</span></strong>
                            <span class="text-muted small">{{ hook.description }}</span>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted mb-0">No hooks registered. Developers can register hooks using <code>@tool_registry.on("event_name")</code>.</p>
                {% endif %}
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-lg me-1"></i> Save Context, Tools &amp; Hooks
            </button>
        </div>
    </form>
</div>

<script>
(function() {
    const container = document.getElementById('context-items-container');
    const addBtn = document.getElementById('add-context-btn');
    let nextIndex = {{ context_items|length }};

    addBtn.addEventListener('click', function() {
        const html = `
        <div class="context-item card mb-2" data-index="${nextIndex}">
            <div class="card-body p-2">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox"
                               name="context_enabled_${nextIndex}" checked>
                    </div>
                    <input type="text" class="form-control form-control-sm"
                           name="context_name_${nextIndex}" placeholder="Context name">
                    <button type="button" class="btn btn-sm btn-outline-danger remove-context-btn">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
                <textarea class="form-control form-control-sm"
                          name="context_content_${nextIndex}"
                          rows="3" placeholder="Context content..."></textarea>
            </div>
        </div>`;
        container.insertAdjacentHTML('beforeend', html);
        nextIndex++;
    });

    container.addEventListener('click', function(e) {
        const btn = e.target.closest('.remove-context-btn');
        if (btn) {
            btn.closest('.context-item').remove();
            // Reindex
            container.querySelectorAll('.context-item').forEach((item, i) => {
                item.dataset.index = i;
                item.querySelector('[name^="context_enabled_"]').name = `context_enabled_${i}`;
                item.querySelector('[name^="context_name_"]').name = `context_name_${i}`;
                item.querySelector('[name^="context_content_"]').name = `context_content_${i}`;
            });
            nextIndex = container.querySelectorAll('.context-item').length;
        }
    });
})();
</script>
{% endblock %}