{% extends "layout.html.twig" %}

{% block title %}Admin Dashboard - LocalLendables{% endblock %}

{% block head %}
<style>
.admin-header {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 2rem 0;
}

.admin-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.activity-item {
    border-left: 4px solid #007bff;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

.activity-item.deactivated {
    border-left-color: #dc3545;
    background: #fff5f5;
    opacity: 0.7;
}

.message-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
}

.message-item.deactivated {
    background: #fff5f5;
    border-color: #dc3545;
    opacity: 0.7;
}

.btn-danger-outline {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-danger-outline:hover {
    background-color: #dc3545;
    color: white;
}

.filter-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 2rem;
}

.filter-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.filter-tab.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #007bff;
}
</style>
{% endblock %}

{% block content %}
<div class="admin-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-5 mb-2">Admin Dashboard</h1>
                <p class="lead mb-0">Manage member activity and messages</p>
            </div>
            <div class="col-md-4 text-end">
                <span class="badge bg-light text-dark px-3 py-2">
                    <i class="fas fa-shield-alt me-2"></i>Administrator
                </span>
            </div>
        </div>
    </div>
</div>

<div class="container my-5">
    <!-- Admin Stats -->
    <div class="admin-stats">
        <div class="stat-card">
            <div class="stat-number">{{ stats.totalMessages }}</div>
            <div class="text-muted">Total Messages</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ stats.activeMessages }}</div>
            <div class="text-muted">Active Messages</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ stats.totalActivity }}</div>
            <div class="text-muted">Total Activities</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ stats.activeActivity }}</div>
            <div class="text-muted">Active Activities</div>
        </div>
    </div>

    <!-- Navigation Tabs -->
    <div class="filter-tabs">
        <button class="filter-tab active" onclick="showTab('messages')">
            <i class="fas fa-comments me-2"></i>Messages
        </button>
        <button class="filter-tab" onclick="showTab('activity')">
            <i class="fas fa-activity me-2"></i>Member Activity
        </button>
    </div>

    <!-- Messages Management -->
    <div id="messages-tab" class="tab-content">
        <div class="admin-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3><i class="fas fa-comments me-2"></i>Chat Messages</h3>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary" onclick="filterMessages('all')">All</button>
                    <button type="button" class="btn btn-outline-primary active" onclick="filterMessages('active')">Active</button>
                    <button type="button" class="btn btn-outline-primary" onclick="filterMessages('deactivated')">Deactivated</button>
                </div>
            </div>

            <div id="messages-list">
                {% for message in messages %}
                <div class="message-item{% if not message.isActive %} deactivated{% endif %}" data-status="{% if message.isActive %}active{% else %}deactivated{% endif %}">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center mb-2">
                                {% if message.senderAvatar %}
                                    <img src="/ll_images/{{ message.senderAvatar }}" 
                                         alt="{{ message.senderName }}" 
                                         class="rounded-circle me-2" 
                                         width="32" height="32"
                                         style="object-fit: cover;"
                                         onerror="this.src='/avatars/default.svg';">
                                {% else %}
                                    <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2" 
                                         style="width: 32px; height: 32px; color: white; font-size: 14px;">
                                        {{ message.senderName|slice(0,1)|upper }}
                                    </div>
                                {% endif %}
                                <strong>{{ message.senderName }}</strong>
                                <span class="text-muted ms-2">{{ message.createdAt|date('M j, Y g:i A') }}</span>
                                {% if not message.isActive %}
                                    <span class="badge bg-danger ms-2">Deactivated</span>
                                {% endif %}
                            </div>
                            
                            {% if message.messageType == 'audio' %}
                                <div class="mb-2">
                                    <i class="fas fa-microphone text-primary me-2"></i>
                                    <span class="text-muted">Audio Message</span>
                                    {% if message.audioPath %}
                                        <audio controls class="d-block mt-2" style="max-width: 300px;">
                                            <source src="{{ message.audioPath }}" type="audio/webm">
                                            Your browser does not support the audio element.
                                        </audio>
                                    {% endif %}
                                </div>
                                {% if message.transcription %}
                                    <div class="border-start border-primary ps-3">
                                        <small class="text-muted d-block mb-1">Transcription:</small>
                                        <p class="mb-0">{{ message.transcription }}</p>
                                    </div>
                                {% endif %}
                            {% else %}
                                <p class="mb-0">{{ message.textContent }}</p>
                            {% endif %}
                            
                            {% if message.itemName %}
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-box me-1"></i>About: {{ message.itemName }}
                                    </small>
                                </div>
                            {% endif %}
                        </div>
                        <div class="col-md-4 text-end">
                            {% if message.isActive %}
                                <button class="btn btn-danger-outline btn-sm" 
                                        onclick="deactivateMessage({{ message.id }})">
                                    <i class="fas fa-ban me-1"></i>Deactivate
                                </button>
                            {% else %}
                                <button class="btn btn-success btn-sm" 
                                        onclick="reactivateMessage({{ message.id }})">
                                    <i class="fas fa-check me-1"></i>Reactivate
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Activity Management -->
    <div id="activity-tab" class="tab-content" style="display: none;">
        <div class="admin-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3><i class="fas fa-activity me-2"></i>Member Activity</h3>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary" onclick="filterActivity('all')">All</button>
                    <button type="button" class="btn btn-outline-primary active" onclick="filterActivity('active')">Active</button>
                    <button type="button" class="btn btn-outline-primary" onclick="filterActivity('deactivated')">Deactivated</button>
                </div>
            </div>

            <div id="activity-list">
                {% for activity in activities %}
                <div class="activity-item{% if not activity.isActive %} deactivated{% endif %}" data-status="{% if activity.isActive %}active{% else %}deactivated{% endif %}">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center mb-2">
                                {% if activity.userAvatar %}
                                    <img src="/ll_images/{{ activity.userAvatar }}" 
                                         alt="{{ activity.userName }}" 
                                         class="rounded-circle me-2" 
                                         width="32" height="32"
                                         style="object-fit: cover;"
                                         onerror="this.src='/avatars/default.svg';">
                                {% else %}
                                    <div class="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2" 
                                         style="width: 32px; height: 32px; color: white; font-size: 14px;">
                                        {{ activity.userName|slice(0,1)|upper }}
                                    </div>
                                {% endif %}
                                <strong>{{ activity.userName }}</strong>
                                <span class="text-muted ms-2">{{ activity.createdAt|date('M j, Y g:i A') }}</span>
                                {% if not activity.isActive %}
                                    <span class="badge bg-danger ms-2">Deactivated</span>
                                {% endif %}
                            </div>
                            <p class="mb-0">{{ activity.description }}</p>
                            <small class="text-muted">
                                <i class="fas fa-tag me-1"></i>{{ activity.activityType|title }}
                            </small>
                        </div>
                        <div class="col-md-4 text-end">
                            {% if activity.isActive %}
                                <button class="btn btn-danger-outline btn-sm" 
                                        onclick="deactivateActivity({{ activity.id }})">
                                    <i class="fas fa-ban me-1"></i>Deactivate
                                </button>
                            {% else %}
                                <button class="btn btn-success btn-sm" 
                                        onclick="reactivateActivity({{ activity.id }})">
                                    <i class="fas fa-check me-1"></i>Reactivate
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.style.display = 'none';
    });
    
    // Remove active class from all tab buttons
    document.querySelectorAll('.filter-tab').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // Show selected tab
    document.getElementById(tabName + '-tab').style.display = 'block';
    
    // Add active class to clicked tab
    event.target.classList.add('active');
}

function filterMessages(status) {
    const messages = document.querySelectorAll('#messages-list .message-item');
    const buttons = document.querySelectorAll('#messages-tab .btn-group button');
    
    // Update active button
    buttons.forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    messages.forEach(message => {
        if (status === 'all' || message.dataset.status === status) {
            message.style.display = 'block';
        } else {
            message.style.display = 'none';
        }
    });
}

function filterActivity(status) {
    const activities = document.querySelectorAll('#activity-list .activity-item');
    const buttons = document.querySelectorAll('#activity-tab .btn-group button');
    
    // Update active button
    buttons.forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    activities.forEach(activity => {
        if (status === 'all' || activity.dataset.status === status) {
            activity.style.display = 'block';
        } else {
            activity.style.display = 'none';
        }
    });
}

function deactivateMessage(messageId) {
    if (confirm('Are you sure you want to deactivate this message? It will be hidden from users but not permanently deleted.')) {
        fetch(`/admin/api/messages/${messageId}/deactivate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deactivating message: ' + data.error);
            }
        });
    }
}

function reactivateMessage(messageId) {
    fetch(`/admin/api/messages/${messageId}/reactivate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error reactivating message: ' + data.error);
        }
    });
}

function deactivateActivity(activityId) {
    if (confirm('Are you sure you want to deactivate this activity? It will be hidden from users but not permanently deleted.')) {
        fetch(`/admin/api/activity/${activityId}/deactivate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error deactivating activity: ' + data.error);
            }
        });
    }
}

function reactivateActivity(activityId) {
    fetch(`/admin/api/activity/${activityId}/reactivate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error reactivating activity: ' + data.error);
        }
    });
}
</script>
{% endblock %}