{% extends "base.html" %}

{% block head %}
<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .chat-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .chat-header-info h2 {
        margin: 0 0 0.25rem 0;
    }

    .chat-header-info p {
        margin: 0;
        color: #888;
    }

    .conversation-controls {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-secondary {
        background: #2d2d2d;
        color: #e0e0e0;
        border: 1px solid #444;
    }

    .btn-secondary:hover {
        background: #3d3d3d;
        border-color: #e10600;
    }

    .btn-primary {
        background: #e10600;
        color: white;
    }

    .btn-primary:hover {
        background: #ff1a1a;
    }

    .conversation-panel {
        background: #1e1e1e;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.5rem;
    }

    .conversation-panel.hidden {
        display: none;
    }

    .conversation-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #333;
    }

    .conversation-panel-header h3 {
        margin: 0;
        font-size: 1rem;
    }

    .close-panel {
        background: none;
        border: none;
        color: #888;
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.25rem;
    }

    .close-panel:hover {
        color: #e10600;
    }

    #conversation-status:empty {
        display: none;
    }

    .chat-form {
        display: flex;
        gap: 1rem;
        align-items: flex-end;
    }

    .chat-form textarea {
        flex: 1;
        padding: 1rem;
        font-size: 1rem;
        border: 2px solid #333;
        border-radius: 8px;
        background: #1e1e1e;
        color: #e0e0e0;
        resize: vertical;
        min-height: 60px;
        font-family: inherit;
    }

    .chat-form textarea:focus {
        outline: none;
        border-color: #e10600;
    }

    .chat-form button {
        padding: 1rem 2rem;
        font-size: 1rem;
        background: #e10600;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: background 0.2s;
    }

    .chat-form button:hover {
        background: #ff1a1a;
    }

    .chat-form button:disabled {
        background: #666;
        cursor: not-allowed;
    }

    .responses {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .loading {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #888;
        padding: 1rem;
    }

    .loading::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-top-color: #e10600;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .suggestion {
        padding: 0.5rem 1rem;
        background: #2d2d2d;
        border: 1px solid #444;
        border-radius: 20px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .suggestion:hover {
        background: #3d3d3d;
        border-color: #e10600;
    }

    /* Message history (conversation resume) */
    .message {
        background: #1e1e1e;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .message-question {
        font-size: 0.9rem;
        color: #888;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #333;
    }

    .message-content {
        line-height: 1.7;
    }

    .message-content h1,
    .message-content h2,
    .message-content h3 {
        color: #e10600;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .message-content h1:first-child,
    .message-content h2:first-child,
    .message-content h3:first-child {
        margin-top: 0;
    }

    .message-content ul,
    .message-content ol {
        padding-left: 1.5rem;
    }

    .message-content li {
        margin-bottom: 0.5rem;
    }

    .message-content code {
        background: #2d2d2d;
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-size: 0.9em;
    }

    .message-content pre {
        background: #2d2d2d;
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
    }

    .message-content pre code {
        background: none;
        padding: 0;
    }

    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
    }

    .message-content iframe {
        width: 100%;
        height: 1000px;
        border: none;
        border-radius: 8px;
        background: #1a1a1a;
    }

    .message-content .chart-container {
        position: relative;
        margin: 1rem 0;
    }

    .message-content .chart-open-link {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 10;
        background: rgba(30, 30, 30, 0.85);
        color: #e10600;
        padding: 0.25rem 0.6rem;
        border-radius: 6px;
        font-size: 0.8rem;
        text-decoration: none;
        border: 1px solid #333;
        transition: background 0.15s;
    }

    .message-content .chart-open-link:hover {
        background: rgba(50, 50, 50, 0.95);
    }

    .message-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }

    .message-content th,
    .message-content td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid #333;
    }

    .message-content th {
        background: #2d2d2d;
        color: #e10600;
    }

    .message-content strong {
        color: #fff;
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-container">
    <div class="chat-header">
        <div class="chat-header-info">
            <h2>Ask About F1</h2>
            <p>Get insights about races, drivers, lap times, strategies, and more.</p>
        </div>
        <div class="conversation-controls">
            <button class="btn btn-secondary"
                    hx-get="/api/conversations"
                    hx-target="#conversation-panel-content"
                    hx-swap="innerHTML"
                    onclick="toggleConversationPanel(true)">
                History
            </button>
            <button class="btn btn-primary"
                    hx-post="/api/conversations/new"
                    hx-target="#conversation-status"
                    hx-swap="innerHTML"
                    onclick="clearResponses()">
                New Chat
            </button>
        </div>
    </div>

    <div id="conversation-panel" class="conversation-panel hidden">
        <div class="conversation-panel-header">
            <h3>Conversation History</h3>
            <button class="close-panel" onclick="toggleConversationPanel(false)">&times;</button>
        </div>
        <div id="conversation-panel-content">
            <!-- Conversation list loaded via HTMX -->
        </div>
    </div>

    <div id="conversation-status">
        <!-- Status messages shown here -->
    </div>

    <form class="chat-form"
          hx-post="/api/chat"
          hx-target="#responses"
          hx-swap="afterbegin"
          hx-indicator="#loading">
        <textarea name="question"
                  placeholder="Ask about any F1 race, driver, or session..."
                  rows="2"
                  required></textarea>
        <button type="submit">Analyze</button>
    </form>

    <div class="suggestions">
        <span class="suggestion" onclick="askQuestion(this.textContent)">Who won the 2024 Monaco GP?</span>
        <span class="suggestion" onclick="askQuestion(this.textContent)">Compare Verstappen and Norris lap times at Silverstone 2024</span>
        <span class="suggestion" onclick="askQuestion(this.textContent)">Show Ferrari's tyre strategy at Monza 2024</span>
    </div>

    <div id="loading" class="loading htmx-indicator">
        Analyzing F1 data...
    </div>

    <div id="responses" class="responses">
        <!-- Responses will be inserted here -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function askQuestion(text) {
        const textarea = document.querySelector('textarea[name="question"]');
        textarea.value = text;
        textarea.form.requestSubmit();
    }

    function toggleConversationPanel(show) {
        const panel = document.getElementById('conversation-panel');
        if (show) {
            panel.classList.remove('hidden');
        } else {
            panel.classList.add('hidden');
        }
    }

    function clearResponses() {
        document.getElementById('responses').innerHTML = '';
        toggleConversationPanel(false);
    }

    // Handle HTMX responses
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (!event.detail.successful) return;

        // Clear textarea after successful form submission
        if (event.detail.elt.matches('form')) {
            event.detail.elt.querySelector('textarea').value = '';
        }

        // Close panel and load history when resuming a conversation
        if (event.detail.pathInfo.requestPath.includes('/resume')) {
            toggleConversationPanel(false);
            const conversationId = event.detail.elt.dataset.conversationId;
            document.getElementById('responses').innerHTML = '';
            htmx.ajax('GET', `/api/conversations/${conversationId}/messages`, {
                target: '#responses',
                swap: 'innerHTML'
            });
        }
    });
</script>
{% endblock %}