{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-stats.css"}}">

{{template "admin-hero-styles" .}}

<details class="admin-hero mb-3">
    <summary class="admin-hero-bar">
        <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-bar-chart-alt-2'></i></span>
        <span class="admin-hero-intro">{{T "admin_stats_page_hint"}}</span>
        <span class="admin-hero-toggle">
            <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
            {{template "admin-hero-help-meta" .}}
        </span>
    </summary>
    <div class="admin-hero-body">
        <ul class="admin-hero-field-grid">
            <li class="admin-hero-field-item"><strong>{{T "admin_stats_usage_period"}}</strong>{{T "admin_stats_usage_period_desc"}}</li>
            <li class="admin-hero-field-item"><strong>{{T "admin_stats_usage_charts"}}</strong>{{T "admin_stats_usage_charts_desc"}}</li>
        </ul>
    </div>
</details>

<div class="admin-stats-summary row g-3 g-md-4 mb-4">
    <div class="col-6 col-md-3"><div class="stat-card blue"><h3>{{.Data.UserCount}}</h3><p>{{T "admin_stats_stat_users"}}</p></div></div>
    <div class="col-6 col-md-3"><div class="stat-card"><h3>{{.Data.DocumentCount}}</h3><p>{{T "admin_stats_stat_documents"}}</p></div></div>
    <div class="col-6 col-md-3"><div class="stat-card green"><h3>{{.Data.PublishedCount}}</h3><p>{{T "admin_stats_stat_published"}}</p></div></div>
    <div class="col-6 col-md-3"><div class="stat-card orange"><h3>{{.Data.ViewCount}}</h3><p>{{T "admin_stats_stat_views"}}</p></div></div>
</div>

<div class="admin-dash-chart-card mb-4">
    <div class="card-head">
        <div>
            <h5 class="mb-1"><i class='bx bx-line-chart'></i> {{T "admin_stats_trend_title"}}</h5>
            <p class="small text-muted mb-0">{{T "admin_stats_trend_desc"}}</p>
        </div>
        <select class="form-select form-select-sm" id="adminStatsPeriod" style="width:auto;min-width:120px;">
            <option value="7days">{{T "admin_stats_period_7d"}}</option>
            <option value="30days">{{T "admin_stats_period_30d"}}</option>
        </select>
    </div>
    <div class="card-body-inner">
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsNewUsers">0</h4><p>{{T "admin_stats_period_new_users"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsActiveUsers">0</h4><p>{{T "admin_stats_period_active_users"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsPublished">0</h4><p>{{T "admin_stats_period_published"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsViews">0</h4><p>{{T "admin_stats_period_views"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsLikes">0</h4><p>{{T "admin_stats_period_likes"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsFavorites">0</h4><p>{{T "admin_stats_period_favorites"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsComments">0</h4><p>{{T "admin_stats_period_comments"}}</p></div></div>
            <div class="col-6 col-md-4 col-xl-3 col-xxl"><div class="admin-dash-period-stat"><h4 id="adminPsCreated">0</h4><p>{{T "admin_stats_period_created"}}</p></div></div>
        </div>
        <canvas id="adminEngagementChart" height="90"></canvas>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="admin-dash-chart-card h-100">
            <div class="card-head"><h5 class="mb-0"><i class='bx bx-edit-alt'></i> {{T "admin_stats_publish_title"}}</h5></div>
            <div class="card-body-inner"><canvas id="adminPublishChart" height="90"></canvas></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="admin-dash-chart-card h-100">
            <div class="card-head"><h5 class="mb-0"><i class='bx bx-pie-chart-alt-2'></i> {{T "admin_stats_status_title"}}</h5></div>
            <div class="card-body-inner d-flex align-items-center justify-content-center">
                <canvas id="adminStatusChart" height="180"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="admin-dash-chart-card mb-4">
    <div class="card-head"><h5 class="mb-0"><i class='bx bx-user-plus'></i> {{T "admin_stats_user_trend_title"}}</h5></div>
    <div class="card-body-inner"><canvas id="adminUserTrendChart" height="90"></canvas></div>
</div>

<div class="admin-dash-chart-card mb-4">
    <div class="card-head"><h5 class="mb-0"><i class='bx bx-trophy'></i> {{T "admin_stats_top_docs_title"}}</h5></div>
    <div class="card-body-inner">
        <ul class="nav nav-tabs admin-dash-tabs mb-3" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="adminTopViewsTab" data-bs-toggle="tab" data-bs-target="#adminTopViewsPane" type="button" role="tab">
                    <i class='bx bx-show'></i> {{T "admin_stats_tab_most_views"}}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="adminTopLikesTab" data-bs-toggle="tab" data-bs-target="#adminTopLikesPane" type="button" role="tab">
                    <i class='bx bx-like'></i> {{T "admin_stats_tab_most_likes"}}
                </button>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="adminTopViewsPane" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover admin-dash-rank-table mb-0">
                        <thead><tr><th style="width:56px;">#</th><th>{{T "admin_stats_col_document"}}</th><th class="text-end" style="width:100px;">{{T "admin_stats_col_views"}}</th></tr></thead>
                        <tbody id="adminTopViewsList"><tr><td colspan="3" class="text-center text-muted py-3">{{T "admin_loading"}}</td></tr></tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="adminTopLikesPane" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover admin-dash-rank-table mb-0">
                        <thead><tr><th style="width:56px;">#</th><th>{{T "admin_stats_col_document"}}</th><th class="text-end" style="width:100px;">{{T "admin_stats_col_likes"}}</th></tr></thead>
                        <tbody id="adminTopLikesList"><tr><td colspan="3" class="text-center text-muted py-3">{{T "admin_loading"}}</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
window.AdminStatsI18n = {
    loadFailed: {{json (T "admin_stats_load_failed")}},
    noData: {{json (T "admin_no_data")}},
    untitled: {{json (T "admin_stats_untitled")}},
    newUsers: {{json (T "admin_stats_new_users")}},
    activeUsers: {{json (T "admin_stats_active_users")}},
    published: {{json (T "admin_stats_series_published")}},
    created: {{json (T "admin_stats_series_created")}},
    views: {{json (T "admin_stats_series_views")}},
    likes: {{json (T "admin_stats_series_likes")}},
    favorites: {{json (T "admin_stats_series_favorites")}},
    comments: {{json (T "admin_stats_series_comments")}},
    statusPublished: {{json (T "admin_stats_stat_published")}},
    statusDraft: {{json (T "admin_stats_status_draft")}},
    statusPending: {{json (T "admin_stats_status_pending")}},
    statusRejected: {{json (T "admin_stats_status_rejected")}}
};
</script>
<script src="{{asset "/template/default/assets/chartjs/js/Chart.min.js"}}"></script>
<script src="{{asset "/template/default/assets/js/admin-stats-charts.js"}}"></script>
<script>
$(function () {
    AdminStatsCharts.init({ period: '7days', periodSelect: '#adminStatsPeriod' });
});
</script>
{{end}}