{% 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-2 pb-3 mb-4 border-bottom">
    <h1 class="h2"><i class="fa-solid fa-gauge text-primary me-2"></i>Admin Dashboard Overview</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ url_for('live_control') }}" class="btn btn-sm btn-primary me-2">
            <i class="fa-solid fa-tower-broadcast me-1"></i>Manage TG Live
        </a>
        <a href="{{ url_for('reactions') }}" class="btn btn-sm btn-success">
            <i class="fa-solid fa-bolt me-1"></i>Auto Reactions
        </a>
    </div>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-uppercase mb-1" style="font-size: 12px; opacity: 0.9;">Total Accounts</h6>
                    <h2 class="mb-0 fw-bold">{{ account_count }}</h2>
                    <small>Active: {{ active_account_count }}</small>
                </div>
                <i class="fa-solid fa-users fa-2x opacity-75"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card bg-success text-white p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-uppercase mb-1" style="font-size: 12px; opacity: 0.9;">Reaction Rules</h6>
                    <h2 class="mb-0 fw-bold">{{ reaction_rule_count }}</h2>
                    <small>Enabled: {{ active_rule_count }}</small>
                </div>
                <i class="fa-solid fa-bolt fa-2x opacity-75"></i>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card bg-warning text-dark p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-uppercase mb-1" style="font-size: 12px; opacity: 0.9;">TG Live Status</h6>
                    <h5 class="mb-0 fw-bold text-truncate" style="max-width: 140px;">
                        {% if live_cfg and live_cfg.is_joined %}Joined{% else %}Disconnected{% endif %}
                    </h5>
                    <small>AutoJoin: {% if live_cfg and live_cfg.is_auto_join %}ON{% else %}OFF{% endif %}</small>
                </div>
                <i class="fa-solid fa-microphone-lines fa-2x opacity-75"></i>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card bg-dark text-white p-3">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-uppercase mb-1" style="font-size: 12px; opacity: 0.9;">Target Live Chat</h6>
                    <h5 class="mb-0 fw-bold text-truncate" style="max-width: 140px;">
                        {{ live_cfg.target_chat if live_cfg and live_cfg.target_chat else "Not Set" }}
                    </h5>
                    <small>Audio: {% if live_cfg and live_cfg.is_muted %}Muted{% else %}Unmuted{% endif %}</small>
                </div>
                <i class="fa-solid fa-bullhorn fa-2x opacity-75"></i>
            </div>
        </div>
    </div>
</div>

<!-- Quick Live Chat Controls Card -->
<div class="card mb-4">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-tower-broadcast text-primary me-2"></i>Quick TG Live Control</h5>
    </div>
    <div class="card-body">
        <form action="{{ url_for('live_control') }}" method="POST" class="row g-3 align-items-center">
            <div class="col-md-5">
                <label for="target_chat" class="form-label font-weight-bold">Target Channel/Group Username</label>
                <input type="text" class="form-control" name="target_chat" value="{{ live_cfg.target_chat if live_cfg else '' }}" placeholder="@mychannel or chat_id">
            </div>
            <div class="col-md-7 d-flex align-items-end gap-2 mt-4">
                <button type="submit" name="action" value="join_live" class="btn btn-primary">
                    <i class="fa-solid fa-play me-1"></i>Join Live Now
                </button>
                <button type="submit" name="action" value="leave_live" class="btn btn-danger">
                    <i class="fa-solid fa-stop me-1"></i>Leave Live
                </button>
                <button type="submit" name="action" value="save_config" class="btn btn-secondary">
                    <i class="fa-solid fa-floppy-disk me-1"></i>Save Target
                </button>
            </div>
        </form>
    </div>
</div>

<!-- System Logs Card -->
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <h5 class="mb-0 fw-bold"><i class="fa-solid fa-list-check me-2 text-info"></i>Recent System Activity</h5>
        <a href="{{ url_for('logs') }}" class="btn btn-sm btn-outline-secondary">View All Logs</a>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 180px;">Timestamp</th>
                        <th style="width: 100px;">Level</th>
                        <th>Event Message</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in recent_logs %}
                    <tr>
                        <td class="text-muted"><small>{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small></td>
                        <td>
                            {% if log.level == 'ERROR' %}
                                <span class="badge bg-danger">ERROR</span>
                            {% elif log.level == 'WARNING' %}
                                <span class="badge bg-warning text-dark">WARNING</span>
                            {% else %}
                                <span class="badge bg-info text-dark">INFO</span>
                            {% endif %}
                        </td>
                        <td>{{ log.message }}</td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="3" class="text-center text-muted py-3">No system activity logged yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}