{% extends "base.html" %}

{% block title %}AI Settings{% endblock %}
{% block page_title %}AI Settings{% 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/context" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-puzzle"></i> Context &amp; Tools
            </a>
        </div>
    </div>

    <div class="accordion" id="aiSettingsAccordion">
        <!-- General -->
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGeneral">
                    <i class="bi bi-gear me-2"></i> General
                </button>
            </h2>
            <div id="collapseGeneral" class="accordion-collapse collapse show" data-bs-parent="#aiSettingsAccordion">
                <div class="accordion-body">
                    <form method="post" action="/ai/settings">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="enabled" name="enabled"
                                   {% if settings.get('enabled') == 'true' %}checked{% endif %}>
                            <label class="form-check-label" for="enabled">Enable AI Chat Widget</label>
                        </div>
                        <div class="mb-3">
                            <label for="system_prompt" class="form-label">System Prompt</label>
                            <textarea class="form-control" id="system_prompt" name="system_prompt"
                                      rows="6" placeholder="You are a helpful admin assistant.">{{ settings.get('system_prompt', 'You are a helpful admin assistant.') }}</textarea>
                            <div class="form-text">Base system prompt. Context items from the Context &amp; Tools page are appended automatically.</div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i> Save General Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Connections -->
        <div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConnections">
                    <i class="bi bi-plug me-2"></i> Model Connections
                </button>
            </h2>
            <div id="collapseConnections" class="accordion-collapse collapse show" data-bs-parent="#aiSettingsAccordion">
                <div class="accordion-body">
                    <div class="d-flex justify-content-end mb-2">
                        <a href="/ai/settings/connections/new" class="btn btn-primary btn-sm">
                            <i class="bi bi-plus-lg"></i> Add Connection
                        </a>
                    </div>
                    {% if connections %}
                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead>
                                <tr>
                                    <th style="width: 1%"></th>
                                    <th>Name</th>
                                    <th>Model</th>
                                    <th>Base URL</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for conn in connections %}
                                <tr>
                                    <td>
                                        {% if conn.is_active %}
                                        <span class="badge bg-success"><i class="bi bi-check-lg"></i> Active</span>
                                        {% endif %}
                                    </td>
                                    <td><strong>{{ conn.name }}</strong></td>
                                    <td><code>{{ conn.model }}</code></td>
                                    <td><code class="text-muted">{{ conn.base_url }}</code></td>
                                    <td class="text-end">
                                        {% if not conn.is_active %}
                                        <form method="post" action="/ai/settings/connections/{{ conn.id }}/activate" class="d-inline">
                                            <button type="submit" class="btn btn-outline-success btn-sm" title="Set Active">
                                                <i class="bi bi-lightning"></i> Activate
                                            </button>
                                        </form>
                                        {% endif %}
                                        <a href="/ai/settings/connections/{{ conn.id }}/edit" class="btn btn-outline-secondary btn-sm">
                                            <i class="bi bi-pencil"></i> Edit
                                        </a>
                                        <form method="post" action="/ai/settings/connections/{{ conn.id }}/delete" class="d-inline"
                                              onsubmit="return confirm('Delete connection &quot;{{ conn.name }}&quot;?');">
                                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-muted fst-italic">No connections configured. Click <strong>Add Connection</strong> to create one.</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}