{% extends "base.html" %}
{% block content %}
<div class="container py-5">
  <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3 mb-4">
    <div>
      <p class="text-uppercase text-secondary mb-2 small">Admin Dashboard</p>
      <h1 class="display-6 fw-semibold">Welcome back, {{ user.get_full_name|default:user.username }}</h1>
      <p class="text-muted">Quickly monitor platform activity, manage creator discovery, and stay on top of support workflows.</p>
    </div>
    <div class="text-md-end">
      <span class="badge bg-success rounded-pill py-2 px-3">Staff Access</span>
      <p class="mb-0 mt-2 text-muted">Last login: {{ user.last_login|date:"M d, Y H:i" }}</p>
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <span class="badge bg-primary me-3 p-3 rounded-circle"><i class="fa-solid fa-users fa-lg"></i></span>
            <div>
              <h6 class="text-uppercase text-muted mb-1">Creators</h6>
              <h3 class="mb-0">Manage talent</h3>
            </div>
          </div>
          <p class="text-muted small">Review discoverable profiles, update visibility settings, and approve creator requests.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <span class="badge bg-info me-3 p-3 rounded-circle"><i class="fa-solid fa-chart-line fa-lg"></i></span>
            <div>
              <h6 class="text-uppercase text-muted mb-1">Insights</h6>
              <h3 class="mb-0">Platform health</h3>
            </div>
          </div>
          <p class="text-muted small">Monitor engagement, activity signals, and marketplace trends at a glance.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <span class="badge bg-warning text-dark me-3 p-3 rounded-circle"><i class="fa-solid fa-comments fa-lg"></i></span>
            <div>
              <h6 class="text-uppercase text-muted mb-1">Messages</h6>
              <h3 class="mb-0">Customer support</h3>
            </div>
          </div>
          <p class="text-muted small">Track recent threads and follow up on user inquiries through the messaging center.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center mb-3">
            <span class="badge bg-secondary me-3 p-3 rounded-circle"><i class="fa-solid fa-credit-card fa-lg"></i></span>
            <div>
              <h6 class="text-uppercase text-muted mb-1">Revenue</h6>
              <h3 class="mb-0">Subscriptions</h3>
            </div>
          </div>
          <p class="text-muted small">Validate active plans, check checkout flows, and manage payment provider integrations.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
              <h5 class="card-title mb-1">Platform overview</h5>
              <p class="text-muted mb-0">Use these quick actions to move between core admin workflows.</p>
            </div>
            <span class="badge bg-primary">Live status</span>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <div class="bg-light rounded-3 p-4 h-100">
                <h6 class="text-uppercase text-muted mb-3">Creator discovery</h6>
                <p class="mb-3 text-muted">Inspect discoverable profiles and perform moderation actions.</p>
                <a href="{% url 'core:discover' %}" class="btn btn-sm btn-primary">Open Discover</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="bg-light rounded-3 p-4 h-100">
                <h6 class="text-uppercase text-muted mb-3">Marketplace</h6>
                <p class="mb-3 text-muted">Review creator offerings, galleries, and booking readiness.</p>
                <a href="{% url 'core:marketplace' %}" class="btn btn-sm btn-primary">View Marketplace</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="bg-light rounded-3 p-4 h-100">
                <h6 class="text-uppercase text-muted mb-3">Messages</h6>
                <p class="mb-3 text-muted">Open the staff message center to answer user requests.</p>
                <a href="{% url 'core:message_list' %}" class="btn btn-sm btn-primary">Open Messages</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="bg-light rounded-3 p-4 h-100">
                <h6 class="text-uppercase text-muted mb-3">Subscriptions</h6>
                <p class="mb-3 text-muted">Check plan status and payment provider readiness.</p>
                <a href="{% url 'core:subscription_plans' %}" class="btn btn-sm btn-primary">Manage Plans</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="bg-light rounded-3 p-4 h-100">
                <h6 class="text-uppercase text-muted mb-3">Investments</h6>
                <p class="mb-3 text-muted">Review active investments, wallet liquidity, and withdrawal activity.</p>
                <a href="{% url 'core:admin_investment_management' %}" class="btn btn-sm btn-primary">Investment Management</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <h5 class="card-title mb-3">Admin briefing</h5>
          <ul class="list-unstyled">
            <li class="mb-3">
              <div class="d-flex align-items-start gap-3">
                <span class="text-primary fs-4"><i class="fa-solid fa-circle-check"></i></span>
                <div>
                  <h6 class="mb-1">Verified accounts</h6>
                  <p class="text-muted small mb-0">Maintain verified celebrity profiles and validation workflows.</p>
                </div>
              </div>
            </li>
            <li class="mb-3">
              <div class="d-flex align-items-start gap-3">
                <span class="text-warning fs-4"><i class="fa-solid fa-exclamation-triangle"></i></span>
                <div>
                  <h6 class="mb-1">Booking requests</h6>
                  <p class="text-muted small mb-0">Ensure requests are reviewed and routed to company support.</p>
                </div>
              </div>
            </li>
            <li>
              <div class="d-flex align-items-start gap-3">
                <span class="text-success fs-4"><i class="fa-solid fa-shield-halved"></i></span>
                <div>
                  <h6 class="mb-1">Security checks</h6>
                  <p class="text-muted small mb-0">Confirm staff-only access and audit recent admin activity.</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}