{% extends "base.html" %}

{% block title %}Dashboard - Llamaball{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="display-4 text-center mb-4">
            <i class="bi bi-chat-dots-fill text-primary"></i>
            Welcome to Llamaball
        </h1>
        <p class="lead text-center text-muted">
            Accessible, ethical, and actually useful document chat and RAG system powered by Ollama
        </p>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-number">{{ stats.documents }}</div>
            <div class="stat-label">
                <i class="bi bi-file-text-fill"></i> Documents
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--success-color), #28a745);">
            <div class="stat-number">{{ stats.embeddings }}</div>
            <div class="stat-label">
                <i class="bi bi-vector-pen"></i> Embeddings
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--warning-color), #ffc107);">
            <div class="stat-number">{{ stats.files }}</div>
            <div class="stat-label">
                <i class="bi bi-folder-fill"></i> Files
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card" style="background: linear-gradient(135deg, var(--info-color), #17a2b8);">
            <div class="stat-number">{{ (stats.database_size / 1024 / 1024) | round(1) }}MB</div>
            <div class="stat-label">
                <i class="bi bi-database-fill"></i> Database
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <h3><i class="bi bi-lightning-fill"></i> Quick Actions</h3>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-chat-fill display-1 text-primary mb-3"></i>
                <h5 class="card-title">Start Chatting</h5>
                <p class="card-text">Ask questions about your documents using natural language.</p>
                <a href="{{ url_for('chat_page') }}" class="btn btn-primary">
                    <i class="bi bi-chat-dots"></i> Open Chat
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-cloud-upload-fill display-1 text-success mb-3"></i>
                <h5 class="card-title">Upload Documents</h5>
                <p class="card-text">Add new documents to your knowledge base for analysis.</p>
                <a href="{{ url_for('upload_page') }}" class="btn btn-success">
                    <i class="bi bi-upload"></i> Upload Files
                </a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="bi bi-graph-up display-1 text-info mb-3"></i>
                <h5 class="card-title">View Statistics</h5>
                <p class="card-text">Explore detailed analytics about your document collection.</p>
                <a href="{{ url_for('stats_page') }}" class="btn btn-info">
                    <i class="bi bi-bar-chart"></i> View Stats
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Recent Files -->
{% if recent_files %}
<div class="row mb-4">
    <div class="col-12">
        <h3><i class="bi bi-clock-history"></i> Recent Files</h3>
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><i class="bi bi-file-earmark"></i> Filename</th>
                                <th><i class="bi bi-calendar"></i> Modified</th>
                                <th><i class="bi bi-tag"></i> Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for file in recent_files %}
                            <tr>
                                <td>
                                    <i class="bi bi-file-earmark-text text-primary"></i>
                                    {{ file.filename }}
                                </td>
                                <td>
                                    <small class="text-muted">
                                        <script>document.write(formatDate({{ file.mtime }}))</script>
                                    </small>
                                </td>
                                <td>
                                    {% set ext = file.filename.split('.')[-1].lower() %}
                                    <span class="badge badge-primary">{{ ext }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Available Models -->
{% if models %}
<div class="row mb-4">
    <div class="col-12">
        <h3><i class="bi bi-cpu"></i> Available Models</h3>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    {% for model in models[:6] %}
                    <div class="col-md-4 mb-3">
                        <div class="card border-primary">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="bi bi-robot"></i> {{ model.name }}
                                </h6>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Size: {{ (model.size / 1024 / 1024 / 1024) | round(1) }}GB
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if models|length > 6 %}
                <div class="text-center">
                    <small class="text-muted">... and {{ models|length - 6 }} more models</small>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Supported File Types -->
<div class="row mb-4">
    <div class="col-12">
        <h3><i class="bi bi-file-earmark-check"></i> Supported File Types</h3>
        <div class="card">
            <div class="card-body">
                <p class="text-muted mb-3">
                    Llamaball supports over 100 file types across multiple categories:
                </p>
                <div class="row">
                    <div class="col-md-3">
                        <h6><i class="bi bi-file-text"></i> Text Documents</h6>
                        <div class="mb-3">
                            <span class="badge badge-info me-1">.txt</span>
                            <span class="badge badge-info me-1">.md</span>
                            <span class="badge badge-info me-1">.rst</span>
                            <span class="badge badge-info me-1">.tex</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h6><i class="bi bi-code-slash"></i> Source Code</h6>
                        <div class="mb-3">
                            <span class="badge badge-success me-1">.py</span>
                            <span class="badge badge-success me-1">.js</span>
                            <span class="badge badge-success me-1">.html</span>
                            <span class="badge badge-success me-1">.css</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h6><i class="bi bi-file-earmark-pdf"></i> Documents</h6>
                        <div class="mb-3">
                            <span class="badge badge-warning me-1">.pdf</span>
                            <span class="badge badge-warning me-1">.docx</span>
                            <span class="badge badge-warning me-1">.xlsx</span>
                            <span class="badge badge-warning me-1">.csv</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h6><i class="bi bi-archive"></i> Archives</h6>
                        <div class="mb-3">
                            <span class="badge badge-primary me-1">.zip</span>
                            <span class="badge badge-primary me-1">.tar</span>
                            <span class="badge badge-primary me-1">.7z</span>
                            <span class="badge badge-primary me-1">.rar</span>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <small class="text-muted">
                        Total: {{ supported_extensions|length }} supported file types
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- System Status -->
<div class="row">
    <div class="col-12">
        <h3><i class="bi bi-heart-pulse"></i> System Status</h3>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-database-check text-success me-2"></i>
                            <div>
                                <strong>Database</strong><br>
                                <small class="text-success">Connected</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-robot text-success me-2"></i>
                            <div>
                                <strong>Ollama</strong><br>
                                <small class="text-success">{{ models|length }} models available</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-server text-success me-2"></i>
                            <div>
                                <strong>Web Server</strong><br>
                                <small class="text-success">Running</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-refresh stats every 30 seconds
    setInterval(function() {
        fetch('/api/stats')
            .then(response => response.json())
            .then(data => {
                // Update stat cards
                document.querySelector('.stat-card:nth-child(1) .stat-number').textContent = data.documents || 0;
                document.querySelector('.stat-card:nth-child(2) .stat-number').textContent = data.embeddings || 0;
                document.querySelector('.stat-card:nth-child(3) .stat-number').textContent = data.files || 0;
                document.querySelector('.stat-card:nth-child(4) .stat-number').textContent = 
                    Math.round((data.database_size || 0) / 1024 / 1024 * 10) / 10 + 'MB';
            })
            .catch(error => console.log('Stats refresh failed:', error));
    }, 30000);
</script>
{% endblock %} 