<div class="moderation-dashboard">
    <div class="moderation-header">
        <div class="header-content">
            <h1>🛡️ Панель модерації</h1>
            <p>Управління контентом та учасниками</p>
        </div>
        <div class="header-actions">
            <select id="actionFilter" onchange="filterModeration()" class="filter-select">
                <option value="">Всі дії</option>
                <option value="reported">Скаргиния</option>
                <option value="flagged">Позначені</option>
                <option value="spam">Спам</option>
                <option value="banned">Заблоковані</option>
            </select>
        </div>
    </div>

    <div class="moderation-stats">
        <div class="mod-stat-card">
            <div class="stat-icon">⚠️</div>
            <div class="stat-info">
                <div class="stat-num"><?= $reportedCount ?? 0 ?></div>
                <div class="stat-text">Скаргиния</div>
            </div>
        </div>
        <div class="mod-stat-card">
            <div class="stat-icon">🚩</div>
            <div class="stat-info">
                <div class="stat-num"><?= $flaggedCount ?? 0 ?></div>
                <div class="stat-text">Позначені</div>
            </div>
        </div>
        <div class="mod-stat-card">
            <div class="stat-icon">🤖</div>
            <div class="stat-info">
                <div class="stat-num"><?= $spamCount ?? 0 ?></div>
                <div class="stat-text">Можливий спам</div>
            </div>
        </div>
        <div class="mod-stat-card">
            <div class="stat-icon">🔒</div>
            <div class="stat-info">
                <div class="stat-num"><?= $bannedCount ?? 0 ?></div>
                <div class="stat-text">Заблоковані</div>
            </div>
        </div>
    </div>

    <div class="moderation-tabs">
        <button class="tab-btn active" data-tab="reports">Скаргиния (<?= count($reports ?? []) ?>)</button>
        <button class="tab-btn" data-tab="queue">Черга на модерацію (<?= count($queue ?? []) ?>)</button>
        <button class="tab-btn" data-tab="violations">Порушення</button>
        <button class="tab-btn" data-tab="appeals">Апеляції</button>
    </div>

    <div class="tab-content" id="reports">
        <div class="table-container">
            <table class="mod-table">
                <thead>
                    <tr>
                        <th>Контент</th>
                        <th>Автор</th>
                        <th>Причина</th>
                        <th>Скаргиния</th>
                        <th>Дата</th>
                        <th>Дії</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($reports ?? [] as $report): ?>
                    <tr class="report-row">
                        <td>
                            <a href="/post/<?= htmlspecialchars($report['post_slug']) ?>" class="content-link">
                                <?= htmlspecialchars(substr($report['title'], 0, 50)) ?>
                            </a>
                        </td>
                        <td>
                            <a href="/u/<?= htmlspecialchars($report['author']) ?>">
                                <?= htmlspecialchars($report['author']) ?>
                            </a>
                        </td>
                        <td><?= htmlspecialchars($report['reason']) ?></td>
                        <td><?= $report['count'] ?? 1 ?></td>
                        <td><?= date('d M Y H:i', strtotime($report['created_at'])) ?></td>
                        <td>
                            <button onclick="approveReport(<?= $report['id'] ?>)" class="btn-confirm">✓ Прийняти</button>
                            <button onclick="dismissReport(<?= $report['id'] ?>)" class="btn-dismiss">✕ Відхилити</button>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?php if (empty($reports)): ?>
            <div class="empty-table">
                <i class="fas fa-inbox"></i>
                <p>Нема скаргинь</p>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="tab-content hidden" id="queue">
        <div class="table-container">
            <table class="mod-table">
                <thead>
                    <tr>
                        <th>Контент</th>
                        <th>Тип</th>
                        <th>Автор</th>
                        <th>Дата</th>
                        <th>Дії</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($queue ?? [] as $item): ?>
                    <tr>
                        <td>
                            <a href="/post/<?= htmlspecialchars($item['slug']) ?>" class="content-link">
                                <?= htmlspecialchars(substr($item['title'], 0, 50)) ?>
                            </a>
                        </td>
                        <td><?= $item['type'] === 'post' ? 'Тема' : 'Комментар' ?></td>
                        <td><?= htmlspecialchars($item['author']) ?></td>
                        <td><?= date('d M Y H:i', strtotime($item['created_at'])) ?></td>
                        <td>
                            <button class="btn-approve">✓ Схвалити</button>
                            <button class="btn-reject">✕ Відхилити</button>
                            <button class="btn-edit">✏️ Редагувати</button>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="tab-content hidden" id="violations">
        <div class="violations-grid">
            <div class="violation-card">
                <div class="violation-header">
                    <h3>Спам</h3>
                    <span class="count"><?= $spamCount ?? 0 ?></span>
                </div>
                <div class="violation-users">
                    <?php foreach (array_slice($violators['spam'] ?? [], 0, 5) as $user): ?>
                    <div class="violation-user">
                        <img src="<?= \App\Helpers\Asset::avatar($user['avatar'], $user['username'], 32) ?>" alt="">
                        <div>
                            <strong><?= htmlspecialchars($user['username']) ?></strong>
                            <small><?= $user['count'] ?> шт.</small>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="violation-card">
                <div class="violation-header">
                    <h3>Неприйнятна мова</h3>
                    <span class="count"><?= count($violators['harmful'] ?? []) ?></span>
                </div>
                <div class="violation-users">
                    <?php foreach (array_slice($violators['harmful'] ?? [], 0, 5) as $user): ?>
                    <div class="violation-user">
                        <img src="<?= \App\Helpers\Asset::avatar($user['avatar'], $user['username'], 32) ?>" alt="">
                        <div>
                            <strong><?= htmlspecialchars($user['username']) ?></strong>
                            <small><?= $user['count'] ?> шт.</small>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="violation-card">
                <div class="violation-header">
                    <h3>Порушення авторських прав</h3>
                    <span class="count"><?= count($violators['copyright'] ?? []) ?></span>
                </div>
                <div class="violation-users">
                    <?php foreach (array_slice($violators['copyright'] ?? [], 0, 5) as $user): ?>
                    <div class="violation-user">
                        <img src="<?= \App\Helpers\Asset::avatar($user['avatar'], $user['username'], 32) ?>" alt="">
                        <div>
                            <strong><?= htmlspecialchars($user['username']) ?></strong>
                            <small><?= $user['count'] ?> шт.</small>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-content hidden" id="appeals">
        <div class="appeals-list">
            <?php foreach ($appeals ?? [] as $appeal): ?>
            <div class="appeal-card">
                <div class="appeal-header">
                    <div class="appeal-user">
                        <img src="<?= \App\Helpers\Asset::avatar($appeal['avatar'], $appeal['username'], 36) ?>" alt="">
                        <div>
                            <strong><?= htmlspecialchars($appeal['username']) ?></strong>
                            <small><?= date('d M Y H:i', strtotime($appeal['created_at'])) ?></small>
                        </div>
                    </div>
                    <span class="appeal-status"><?= $appeal['status'] ?></span>
                </div>
                <div class="appeal-body">
                    <p class="appeal-reason"><strong>Причина блокування:</strong> <?= htmlspecialchars($appeal['reason']) ?></p>
                    <p class="appeal-message"><?= htmlspecialchars($appeal['message']) ?></p>
                </div>
                <div class="appeal-actions">
                    <button class="btn-approve">✓ Розблокувати</button>
                    <button class="btn-reject">✕ Відхилити</button>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<style>
.moderation-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.moderation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 2rem;
}

.header-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.header-content p {
    color: var(--text-muted);
}

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

.mod-stat-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
}

.mod-stat-card:hover {
    border-color: rgba(99,102,241,0.5);
}

.stat-icon {
    font-size: 2rem;
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #6366f1;
}

.stat-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.moderation-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
}

.tab-btn {
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none;
}

.table-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow-x: auto;
}

.mod-table {
    width: 100%;
    border-collapse: collapse;
}

.mod-table thead {
    background: rgba(99,102,241,0.05);
}

.mod-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.mod-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.mod-table tbody tr:hover {
    background: rgba(99,102,241,0.05);
}

.content-link {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.3s;
}

.content-link:hover {
    text-decoration: underline;
}

.btn-confirm, .btn-dismiss, .btn-approve, .btn-reject, .btn-edit {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
    margin-right: 0.25rem;
}

.btn-confirm, .btn-approve {
    background: #10b981;
    color: white;
}

.btn-confirm:hover, .btn-approve:hover {
    background: #059669;
}

.btn-dismiss, .btn-reject {
    background: #ef4444;
    color: white;
}

.btn-dismiss:hover, .btn-reject:hover {
    background: #dc2626;
}

.btn-edit {
    background: #f59e0b;
    color: white;
}

.btn-edit:hover {
    background: #d97706;
}

.empty-table {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-table i {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 1rem;
    display: block;
}

.violations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.violation-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.violation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.violation-header h3 {
    margin: 0;
}

.count {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(99,102,241,0.1);
    color: #6366f1;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.violation-users {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.violation-user {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(99,102,241,0.05);
    border-radius: 0.5rem;
}

.violation-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.violation-user strong {
    display: block;
}

.violation-user small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.appeals-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.appeal-card {
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    transition: all 0.3s;
}

.appeal-card:hover {
    border-color: rgba(99,102,241,0.5);
}

.appeal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.appeal-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.appeal-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.appeal-user strong {
    display: block;
}

.appeal-user small {
    color: var(--text-muted);
}

.appeal-status {
    padding: 0.25rem 0.75rem;
    background: rgba(251,146,60,0.1);
    color: #f97316;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.appeal-body {
    margin-bottom: 1rem;
}

.appeal-reason {
    margin: 0 0 0.75rem 0;
}

.appeal-message {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
}

.appeal-actions {
    display: flex;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .moderation-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .moderation-tabs {
        flex-wrap: wrap;
    }

    .mod-table {
        font-size: 0.85rem;
    }

    .mod-table th, .mod-table td {
        padding: 0.75rem;
    }
}
</style>

<script>
const tabs = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
    tab.addEventListener('click', function() {
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.add('hidden'));
        
        this.classList.add('active');
        document.getElementById(this.dataset.tab).classList.remove('hidden');
    });
});

function filterModeration() {
    const filter = document.getElementById('actionFilter').value;
    if (filter) {
        window.location.href = '/forum/moderation?filter=' + filter;
    }
}

function approveReport(reportId) {
    if (confirm('Схвалити цю скаргину?')) {
        fetch('/api/moderation/report/' + reportId + '/approve', {
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        }).then(r => r.json()).then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}

function dismissReport(reportId) {
    if (confirm('Відхилити цю скаргину?')) {
        fetch('/api/moderation/report/' + reportId + '/dismiss', {
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'}
        }).then(r => r.json()).then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}
</script>
