{% extends "base.html" %}

{% block title %}Admin Dashboard - HKFC Men's C Team MOTM System{% endblock %}

{% block content %}
<!-- Dashboard Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h1 class="card-title">
          <i class="fas fa-tachometer-alt text-primary me-2"></i>
          Admin Dashboard
        </h1>
        <p class="lead text-muted">Central hub for all administrative functions</p>
      </div>
    </div>
  </div>
</div>

<!-- Quick Actions -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-bolt me-2"></i>Quick Actions
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-3 mb-3">
            <a href="/admin/import" class="btn btn-outline-primary w-100">
              <i class="fas fa-download me-2"></i>
              <div class="text-start">
                <div class="fw-bold">Import Data</div>
                <small class="text-muted">Import from HKHA</small>
              </div>
            </a>
          </div>
          <div class="col-md-3 mb-3">
            <a href="/admin/squad" class="btn btn-outline-success w-100">
              <i class="fas fa-list-check me-2"></i>
              <div class="text-start">
                <div class="fw-bold">Select Squad</div>
                <small class="text-muted">Choose match squad</small>
              </div>
            </a>
          </div>
          <div class="col-md-3 mb-3">
            <a href="/admin/motm" class="btn btn-outline-warning w-100">
              <i class="fas fa-trophy me-2"></i>
              <div class="text-start">
                <div class="fw-bold">MOTM Settings</div>
                <small class="text-muted">Manage voting</small>
              </div>
            </a>
          </div>
          <div class="col-md-3 mb-3">
            <a href="/admin/motm/manage" class="btn btn-outline-danger w-100">
              <i class="fas fa-database me-2"></i>
              <div class="text-start">
                <div class="fw-bold">MOTM Management</div>
                <small class="text-muted">Reset & drop columns</small>
              </div>
            </a>
          </div>
          <div class="col-md-3 mb-3">
            <a href="/admin/comments/manage" class="btn btn-outline-warning w-100">
              <i class="fas fa-comments me-2"></i>
              <div class="text-start">
                <div class="fw-bold">Comments Management</div>
                <small class="text-muted">Edit & delete comments</small>
              </div>
            </a>
          </div>
          <div class="col-md-3 mb-3">
            <a href="/admin/profile" class="btn btn-outline-secondary w-100">
              <i class="fas fa-user-cog me-2"></i>
              <div class="text-start">
                <div class="fw-bold">Admin Profile</div>
                <small class="text-muted">Account settings</small>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Data Management Section -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-success text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-database me-2"></i>Data Management
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-success">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-users text-success me-2"></i>Club Management
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Manage hockey clubs, logos, and club information.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/clubs" class="btn btn-success">
                    <i class="fas fa-eye me-2"></i>View Clubs
                  </a>
                  <a href="/admin/clubs/add" class="btn btn-outline-success">
                    <i class="fas fa-plus me-2"></i>Add Club
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-primary">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-user text-primary me-2"></i>Player Management
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Add, edit, and manage player information and squads.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/players" class="btn btn-primary">
                    <i class="fas fa-eye me-2"></i>View Players
                  </a>
                  <a href="/admin/players/add" class="btn btn-outline-primary">
                    <i class="fas fa-plus me-2"></i>Add Player
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-info">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-layer-group text-info me-2"></i>Team Management
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Manage hockey teams and their associations with clubs.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/teams" class="btn btn-info">
                    <i class="fas fa-eye me-2"></i>View Teams
                  </a>
                  <a href="/admin/teams/add" class="btn btn-outline-info">
                    <i class="fas fa-plus me-2"></i>Add Team
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Analytics & Reports Section -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-info text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-chart-bar me-2"></i>Analytics & Reports
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-info">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-poll text-info me-2"></i>Vote Charts
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">View current vote counts and MOTM/DotD results for the current match.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/voting" class="btn btn-info">
                    <i class="fas fa-chart-pie me-2"></i>View Vote Charts
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-success">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-trophy text-success me-2"></i>Player of the Year
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">View Player of the Year standings and cumulative MOTM votes.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/poty" class="btn btn-success">
                    <i class="fas fa-medal me-2"></i>View POTY Chart
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-warning">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-futbol text-warning me-2"></i>Goals & Assists
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Manage goals and assists statistics for matches.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/stats" class="btn btn-warning">
                    <i class="fas fa-plus me-2"></i>Add Stats
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- System Management Section -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-warning text-dark">
        <h5 class="card-title mb-0">
          <i class="fas fa-cogs me-2"></i>System Management
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-warning">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-cloud text-warning me-2"></i>S3 Storage
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Configure and manage S3 storage for assets and logos.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/s3-config" class="btn btn-warning">
                    <i class="fas fa-cog me-2"></i>Configure S3
                  </a>
                  <a href="/admin/s3-status" class="btn btn-outline-warning">
                    <i class="fas fa-info-circle me-2"></i>View Status
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-secondary">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-database text-secondary me-2"></i>Database
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Manage database configuration and status.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/database-status" class="btn btn-secondary">
                    <i class="fas fa-info-circle me-2"></i>Database Status
                  </a>
                  <a href="/admin/database-setup" class="btn btn-outline-secondary">
                    <i class="fas fa-wrench me-2"></i>Database Setup
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <div class="col-lg-4 mb-3">
            <div class="card h-100 border-dark">
              <div class="card-header bg-light">
                <h6 class="card-title mb-0">
                  <i class="fas fa-list-check text-dark me-2"></i>Squad Management
                </h6>
              </div>
              <div class="card-body">
                <p class="card-text">Manage match squads and player selections.</p>
                <div class="d-grid gap-2">
                  <a href="/admin/squad/list" class="btn btn-dark">
                    <i class="fas fa-eye me-2"></i>View Squad
                  </a>
                  <a href="/admin/squad/history" class="btn btn-outline-dark">
                    <i class="fas fa-history me-2"></i>Squad History
                  </a>
                  <a href="/admin/squad/reset" class="btn btn-outline-dark">
                    <i class="fas fa-refresh me-2"></i>Reset Squad
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- System Status -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-info text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-heartbeat me-2"></i>System Status
        </h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-3 text-center">
            <div class="mb-2">
              <i class="fas fa-server text-success fs-1"></i>
            </div>
            <h6>Database</h6>
            <span class="badge bg-success">
              <span class="status-indicator status-online"></span>Online
            </span>
          </div>
          <div class="col-md-3 text-center">
            <div class="mb-2">
              <i class="fas fa-cloud text-info fs-1"></i>
            </div>
            <h6>S3 Storage</h6>
            <span class="badge bg-info">
              <span class="status-indicator status-online"></span>Configured
            </span>
          </div>
          <div class="col-md-3 text-center">
            <div class="mb-2">
              <i class="fas fa-users text-primary fs-1"></i>
            </div>
            <h6>Active Users</h6>
            <span class="badge bg-primary">1</span>
          </div>
          <div class="col-md-3 text-center">
            <div class="mb-2">
              <i class="fas fa-calendar text-warning fs-1"></i>
            </div>
            <h6>Next Match</h6>
            <span class="badge bg-warning">Pending</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}