{% extends "appbuilder/base.html" %}

{% block content %}
<div class="container-fluid">
    <!-- Banner -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Airflow Wingman</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Model Selection</h3>
                </div>
                <div class="panel-body">
                    {% for provider_id, provider in models.items() %}
                    <div class="provider-section mb-3">
                        <h4 class="provider-name">{{ provider.name }}</h4>
                        {% for model in provider.models %}
                        <div class="radio model-option">
                            <label class="model-label" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ model.description }}">
                                <input type="radio"
                                       name="model"
                                       value="{{ provider_id }}:{{ model.id }}"
                                       {% if model.default %}checked{% endif %}
                                       data-endpoint="{{ provider.endpoint }}"
                                       data-context-window="{{ model.context_window }}">
                                {{ model.name }}
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>

                <style>
                .provider-section {
                    margin-bottom: 20px;
                }
                .provider-name {
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    color: #666;
                }
                .model-option {
                    margin-left: 15px;
                    margin-bottom: 8px;
                }
                .model-option label {
                    display: block;
                    cursor: pointer;
                }
                </style>
            </div>

            <!-- API Key Input -->
            <div class="panel panel-default mt-3">
                <div class="panel-heading">
                    <h3 class="panel-title">API Key</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <input type="password"
                               class="form-control"
                               id="api-key"
                               placeholder="Enter your API key"
                               autocomplete="off">
                        <small class="text-muted">
                            Your API key will be used for the selected provider
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Chat Window -->
        <div class="col-md-9">
            <div class="panel panel-default" style="height: calc(100vh - 250px); display: flex; flex-direction: column;">
                <div class="panel-body" style="flex-grow: 1; overflow-y: auto; padding: 15px;" id="chat-messages">
                    <!-- Messages will be dynamically added here -->
                </div>
                <div class="panel-footer" style="padding: 15px; background-color: white;">
                    <div class="input-group">
                        <input type="text" class="form-control" id="message-input" placeholder="Type your message...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" id="send-button">
                                <i class="fa fa-paper-plane"></i> Send
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.message {
    margin-bottom: 15px;
    max-width: 80%;
    clear: both;
}

.message-user {
    float: right;
    background-color: #f0f7ff;
    border: 1px solid #d1e6ff;
    border-radius: 15px 15px 0 15px;
    padding: 10px 15px;
}

.message-assistant {
    float: left;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 15px 15px 15px 0;
    padding: 10px 15px;
}

#chat-messages::after {
    content: "";
    clear: both;
    display: table;
}

.panel-body::-webkit-scrollbar {
    width: 8px;
}

.panel-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.panel-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.panel-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl, {
            trigger: 'hover',
            html: true
        });
    });

    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');
    const chatMessages = document.getElementById('chat-messages');

    function addMessage(content, isUser) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'message-user' : 'message-assistant'}`;
        messageDiv.textContent = content;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function sendMessage() {
        const message = messageInput.value.trim();
        if (message) {
            addMessage(message, true);
            messageInput.value = '';
            // TODO: Add API call to send message and get response
        }
    }

    sendButton.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
});
</script>
{% endblock %}