{% extends 'base.html' %}

{% block title %}Dashboard - AI History Search{% endblock %}

{% block content %}
<div class="row mb-5">
    <div class="col-md-8">
        <h1 class="fw-bold display-5">Search <span class="text-info">History</span></h1>
        <p class="text-secondary lead">Browse and search through your company's AI chat archives across all connected platforms.</p>
    </div>
    <div class="col-md-4 text-md-end d-flex align-items-center justify-content-md-end">
        <div class="d-flex flex-column align-items-md-end">
            <form action="{% url 'sync_history' %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-cyan btn-lg shadow px-4 py-2">
                    <i class="bi bi-arrow-repeat me-2"></i>Sync Now
                </button>
            </form>
            {% if last_sync_log %}
            <small class="text-secondary mt-2">
                Last sync: {{ last_sync_log.timestamp|timesince }} ago 
                {% if last_sync_log.status == 'success' %}
                <span class="badge bg-success bg-opacity-10 text-success ms-1 border border-success border-opacity-25">Success</span>
                {% else %}
                <span class="badge bg-danger bg-opacity-10 text-danger ms-1 border border-danger border-opacity-25">Error</span>
                {% endif %}
            </small>
            {% endif %}
        </div>
    </div>
</div>

<div class="row mb-5">
    <div class="col-12">
        <div class="glass-card p-4">
            <form method="get" class="row g-3">
                <div class="col-md-10">
                    <div class="input-group input-group-lg bg-transparent">
                        <span class="input-group-text bg-transparent border-end-0 text-secondary"><i class="bi bi-search"></i></span>
                        <input type="text" name="q" class="form-control bg-transparent border-start-0 ps-0 text-white" placeholder="Search by topic, keyword, or code snippet..." value="{{ query }}">
                    </div>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-info btn-lg w-100 fw-bold">Search</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-9">
        {% if histories %}
            <div class="d-flex flex-column gap-3">
                {% for chat in histories %}
                <div class="glass-card overflow-hidden">
                    <a href="{% url 'chat_detail' chat.pk %}" class="text-decoration-none p-4 d-block h-100">
                        <div class="d-flex w-100 justify-content-between mb-2">
                            <h4 class="mb-1 fw-bold text-white">{{ chat.chat_title }}</h4>
                            <small class="text-secondary">{{ chat.chat_last_date|date:"M d, Y" }}</small>
                        </div>
                        <p class="mb-3 text-secondary text-truncate opacity-75">{{ chat.chat_content|truncatewords:40 }}</p>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="badge rounded-pill bg-info bg-opacity-10 text-info border border-info border-opacity-25 me-3 px-3 py-2">
                                    <i class="bi {% if 'POE' in chat.ai_chat_engine %}bi-robot{% elif 'Merlin' in chat.ai_chat_engine %}bi-magic{% elif 'OPENROUTER' in chat.ai_chat_engine %}bi-share{% elif 'OpenAI' in chat.ai_chat_engine %}bi-openai{% else %}bi-cpu{% endif %} me-2"></i>{{ chat.ai_chat_engine }}
                                </span>
                                {% if chat.ai_configuration %}
                                <small class="text-secondary"><i class="bi bi-key me-1"></i>{{ chat.ai_configuration.get_provider_display }}</small>
                                {% endif %}
                            </div>
                            <span class="text-info x-small fw-bold">VIEW DETAILS <i class="bi bi-chevron-right ms-1"></i></span>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="glass-card text-center py-5">
                <i class="bi bi-chat-left-dots display-1 text-secondary opacity-25 mb-4"></i>
                <h3 class="text-white">No results found</h3>
                <p class="text-secondary">Try adjusting your search query or sync new data from your AI providers.</p>
            </div>
        {% endif %}
    </div>
    
    <div class="col-lg-3">
        <div class="glass-card p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold mb-0 text-white">AI Connections</h5>
                <span class="badge bg-info bg-opacity-20 text-info">{{ ai_configs|length }}</span>
            </div>
            {% if ai_configs %}
                {% for config in ai_configs %}
                <div class="d-flex align-items-center mb-4">
                    <div class="flex-shrink-0 bg-secondary bg-opacity-10 p-2 rounded-3">
                        {% if config.provider == 'openai' %}
                        <i class="bi bi-openai fs-4 text-success"></i>
                        {% elif config.provider == 'merlin' %}
                        <i class="bi bi-magic fs-4 text-warning"></i>
                        {% elif config.provider == 'poe' %}
                        <i class="bi bi-robot fs-4 text-info"></i>
                        {% elif config.provider == 'openrouter' %}
                        <i class="bi bi-share fs-4 text-danger"></i>
                        {% else %}
                        <i class="bi bi-lightning-charge fs-4 text-primary"></i>
                        {% endif %}
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <div class="fw-bold text-white small">{{ config.get_provider_display }}</div>
                        <div class="text-secondary x-small">
                            {% if config.is_active %}
                            <span class="text-success"><i class="bi bi-circle-fill me-1" style="font-size: 6px;"></i> Active</span>
                            {% else %}
                            <span class="text-danger"><i class="bi bi-circle me-1" style="font-size: 6px;"></i> Inactive</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-secondary small">No AI engines connected yet.</p>
            {% endif %}
            <hr class="border-secondary opacity-25">
            <div class="d-grid">
                <a href="/admin/core/aiconfiguration/add/" class="btn btn-outline-light btn-sm py-2">Add Connection</a>
            </div>
        </div>

        <div class="glass-card p-4 mb-4 border-top border-info border-3">
            <h6 class="fw-bold mb-3 text-info"><i class="bi bi-gift me-2"></i>Free API Keys</h6>
            <ul class="list-unstyled small mb-0 text-secondary">
                <li class="mb-2">
                    <strong class="text-white">OpenRouter:</strong> Offers free models like Llama 3.
                </li>
                <li class="mb-2">
                    <strong class="text-white">Merlin AI:</strong> Sign up for a free tier access token.
                </li>
                <li>
                    <strong class="text-white">POE:</strong> Use your PB-Key from browser cookies.
                </li>
            </ul>
        </div>
        
        <div class="glass-card p-4 bg-info bg-opacity-5">
            <h6 class="fw-bold mb-2 text-white">Search Tip</h6>
            <p class="small mb-0 text-secondary">Use specific keywords like <span class="text-info">"BGP"</span>, <span class="text-info">"Latency"</span>, or <span class="text-info">"Python"</span> to find solutions instantly.</p>
        </div>
    </div>
</div>
{% endblock %}
