{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2 fw-bold">Dashboard</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <span class="badge bg-body-secondary text-body border p-2 d-flex align-items-center">
            <i class="fa-solid fa-clock text-primary me-2"></i>
            Local: <span class="fw-semibold ms-1">{{ local_time }}</span>
            <span class="badge bg-secondary ms-2">{{ timezone }}</span>
        </span>
    </div>
</div>

<!-- Bot Connection Status Alert Banner -->
<div class="row mb-4">
    <div class="col-12">
        {% if bot_connected %}
        <div class="card bg-success-subtle text-success border border-success-subtle shadow-sm py-2 px-3">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <i class="fa-solid fa-circle-check me-2 fs-5"></i>
                    <strong>Bot Engine:</strong> Telegram User Client is active and monitoring incoming messages.
                    {% if profile %}
                    <span class="ms-2 d-none d-md-inline">(Logged in as <strong>{{ profile.first_name }}</strong> {% if profile.username %}@{{ profile.username }}{% endif %})</span>
                    {% endif %}
                </div>
                <div class="d-flex gap-2">
                    <span class="badge bg-success rounded-pill px-3 py-2"><i class="fa-solid fa-wifi me-1"></i> Connected</span>
                </div>
            </div>
        </div>
        {% else %}
        <div class="card bg-danger-subtle text-danger border border-danger-subtle shadow-sm py-2 px-3">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <div>
                    <i class="fa-solid fa-triangle-exclamation me-2 fs-5"></i>
                    <strong>Bot Engine:</strong> Telegram Client is offline. Auto-reply messages will not be delivered.
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ url_for('settings') }}" class="btn btn-danger btn-sm"><i class="fa-solid fa-gears me-1"></i> Configure/Login</a>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Analytics Cards Rows -->
<div class="row g-4 mb-4">
    <!-- Today's Messages -->
    <div class="col-sm-6 col-lg-3">
        <div class="card glass-card h-100 border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="card-subtitle text-secondary mb-0 fw-semibold text-uppercase" style="font-size: 0.8rem;">Today's Messages</h6>
                    <div class="bg-primary-subtle text-primary rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-envelope fs-5"></i>
                    </div>
                </div>
                <h2 class="card-title mb-1 fw-bold">{{ messages_today }}</h2>
                <p class="card-text text-secondary small">Total incoming messages today</p>
            </div>
        </div>
    </div>
    
    <!-- Today's Replies -->
    <div class="col-sm-6 col-lg-3">
        <div class="card glass-card h-100 border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="card-subtitle text-secondary mb-0 fw-semibold text-uppercase" style="font-size: 0.8rem;">Today's Replies</h6>
                    <div class="bg-success-subtle text-success rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-reply-all fs-5"></i>
                    </div>
                </div>
                <h2 class="card-title mb-1 fw-bold">{{ replies_today }}</h2>
                <p class="card-text text-secondary small">Auto replies dispatched today</p>
            </div>
        </div>
    </div>

    <!-- Total Users -->
    <div class="col-sm-6 col-lg-3">
        <div class="card glass-card h-100 border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="card-subtitle text-secondary mb-0 fw-semibold text-uppercase" style="font-size: 0.8rem;">Total Users</h6>
                    <div class="bg-info-subtle text-info rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-users fs-5"></i>
                    </div>
                </div>
                <h2 class="card-title mb-1 fw-bold">{{ total_users }}</h2>
                <p class="card-text text-secondary small">Unique users interacted</p>
            </div>
        </div>
    </div>

    <!-- Total Replies -->
    <div class="col-sm-6 col-lg-3">
        <div class="card glass-card h-100 border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="card-subtitle text-secondary mb-0 fw-semibold text-uppercase" style="font-size: 0.8rem;">Total Replies</h6>
                    <div class="bg-warning-subtle text-warning rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-paper-plane fs-5"></i>
                    </div>
                </div>
                <h2 class="card-title mb-1 fw-bold">{{ total_replies }}</h2>
                <p class="card-text text-secondary small">Total auto replies sent all-time</p>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Chart Container -->
    <div class="col-lg-8">
        <div class="card glass-card shadow-sm border-0 h-100">
            <div class="card-header bg-transparent border-0 pt-3 px-3 pb-0">
                <h5 class="fw-bold"><i class="fa-solid fa-chart-area text-primary me-2"></i> Weekly Analytics</h5>
            </div>
            <div class="card-body">
                <div style="position: relative; height: 280px;">
                    <canvas id="repliesChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- System Resources Status -->
    <div class="col-lg-4">
        <div class="card glass-card shadow-sm border-0 h-100">
            <div class="card-header bg-transparent border-0 pt-3 px-3 pb-0">
                <h5 class="fw-bold"><i class="fa-solid fa-server text-primary me-2"></i> System Health</h5>
            </div>
            <div class="card-body">
                <!-- CPU Usage -->
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-semibold small"><i class="fa-solid fa-microchip me-1"></i> CPU Usage</span>
                        <span class="fw-bold small">{{ cpu_usage }}%</span>
                    </div>
                    <div class="progress progress-bar-custom bg-secondary-subtle">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ cpu_usage }}%"></div>
                    </div>
                </div>
                
                <!-- RAM Usage -->
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-semibold small"><i class="fa-solid fa-memory me-1"></i> Memory (RAM)</span>
                        <span class="fw-bold small">{{ ram_usage }}%</span>
                    </div>
                    <div class="progress progress-bar-custom bg-secondary-subtle">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ ram_usage }}%"></div>
                    </div>
                </div>

                <!-- Storage Usage -->
                <div class="mb-4">
                    <div class="d-flex justify-content-between mb-1">
                        <span class="fw-semibold small"><i class="fa-solid fa-hard-drive me-1"></i> Storage Disk</span>
                        <span class="fw-bold small">{{ storage_usage }}%</span>
                    </div>
                    <div class="progress progress-bar-custom bg-secondary-subtle">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: {{ storage_usage }}%"></div>
                    </div>
                </div>
                
                <hr class="border-secondary-subtle">
                
                <!-- Engine States -->
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="small text-secondary"><i class="fa-solid fa-database me-1"></i> Database Status</span>
                    <span class="badge bg-success-subtle text-success border border-success-subtle">SQLite Active</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="small text-secondary"><i class="fa-solid fa-gears me-1"></i> Sessions Status</span>
                    <span class="badge bg-success-subtle text-success border border-success-subtle">Healthy</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Logs List -->
<div class="row">
    <div class="col-12">
        <div class="card glass-card shadow-sm border-0">
            <div class="card-header bg-transparent border-0 pt-3 px-3 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><i class="fa-solid fa-list-ul text-primary me-2"></i> Recent Activity</h5>
                <a href="{{ url_for('logs') }}" class="btn btn-outline-primary btn-sm">View All Logs</a>
            </div>
            <div class="card-body px-0 pb-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">Time</th>
                                <th>Name / User ID</th>
                                <th>Original Message</th>
                                <th>Reply Dispatch</th>
                                <th class="pe-3">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if recent_logs %}
                                {% for log in recent_logs %}
                                <tr>
                                    <td class="ps-3 small text-secondary">{{ log.timestamp }}</td>
                                    <td>
                                        <div class="fw-bold">{{ log.full_name }}</div>
                                        <small class="text-secondary">{% if log.username %}@{{ log.username }}{% else %}ID: {{ log.user_id }}{% endif %}</small>
                                    </td>
                                    <td><span class="text-truncate d-inline-block" style="max-width: 250px;">{{ log.original_message or '-' }}</span></td>
                                    <td><span class="text-truncate d-inline-block text-secondary" style="max-width: 250px;">{{ log.reply_message or '-' }}</span></td>
                                    <td class="pe-3">
                                        {% if log.status == 'Replied' %}
                                            <span class="badge bg-success-subtle text-success border border-success-subtle">Replied</span>
                                        {% elif log.status.startswith('Ignored:') %}
                                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle">{{ log.status }}</span>
                                        {% else %}
                                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle">{{ log.status }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-secondary">
                                        <i class="fa-solid fa-inbox fs-3 mb-2 d-block"></i> No auto-reply events recorded yet.
                                    </td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Fetch chart statistics from API endpoint
        fetch("{{ url_for('api_stats') }}")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById('repliesChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: 'Replies Dispatched',
                                data: data.replies,
                                borderColor: '{{ primary_color }}',
                                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                                borderWidth: 3,
                                fill: true,
                                tension: 0.3
                            },
                            {
                                label: 'Messages Ignored',
                                data: data.ignores,
                                borderColor: '#ffc107',
                                backgroundColor: 'rgba(255, 193, 7, 0.05)',
                                borderWidth: 2,
                                fill: true,
                                tension: 0.3
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: true,
                                position: 'top',
                                labels: {
                                    font: { family: "'Inter', sans-serif" }
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { display: false }
                            },
                            y: {
                                beginAtZero: true,
                                ticks: { stepSize: 1 }
                            }
                        }
                    }
                });
            })
            .catch(err => console.error("Error loading charts: ", err));
    });
</script>
{% endblock %}