{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
  <div>
    <h1 class="h3 mb-1">Panel general</h1>
    <p class="text-muted mb-0">Vista rápida del equipo, la operación diaria y la agenda de esta semana.</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a class="btn btn-outline-primary" href="{{ url_for('admin_calendar') }}">Abrir calendario semanal</a>
    <a class="btn btn-primary" href="{{ url_for('admin_appointments') }}">Gestionar turnos</a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Próximos</div><div class="metric-number">{{ stats.upcoming }}</div></div></div></div>
  <div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Hoy</div><div class="metric-number">{{ stats.today }}</div></div></div></div>
  <div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Completados</div><div class="metric-number">{{ stats.completed }}</div></div></div></div>
  <div class="col-md-6 col-xl"><div class="card metric-card"><div class="card-body"><div class="metric-label">Cancelados</div><div class="metric-number">{{ stats.cancelled }}</div></div></div></div>
  <div class="col-md-6 col-xl"><div class="card metric-card emphasis"><div class="card-body"><div class="metric-label">Recordatorios pendientes</div><div class="metric-number">{{ stats.due_reminders }}</div></div></div></div>
</div>

<div class="card table-panel tabbed-card">
  <ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-upcoming" type="button">Próximos turnos</button></li>
    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-week" type="button">Semana en curso</button></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="tab-upcoming">
      <div class="card-header d-flex justify-content-between align-items-center"><span class="fw-bold">Próximos turnos</span><a class="small text-decoration-none" href="{{ url_for('admin_appointments') }}">Ver todos</a></div>
      <div class="table-responsive wide-table">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>Fecha</th><th>Hora</th><th>Cliente</th><th>Servicio</th><th>Profesional</th><th>Estado</th></tr></thead>
          <tbody>
          {% for item in upcoming %}
          <tr>
            <td>{{ item.appointment_date.strftime('%d/%m/%Y') }}</td>
            <td>{{ item.start_time.strftime('%H:%M') }}</td>
            <td>{{ item.client_name }}<br><span class="small text-muted">{{ item.client_email }}</span></td>
            <td>{{ item.service.name }}</td>
            <td>{{ item.professional.display_name }}</td>
            <td><span class="badge rounded-pill text-bg-secondary">{{ item.status }}</span></td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="text-center text-muted py-4">No hay turnos para mostrar.</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane fade" id="tab-week">
      <div class="card-header fw-bold">Semana en curso</div>
      <div class="card-body p-0">
        <div class="week-strip">
          {% for day in week_dates %}
            <div class="week-day-card">
              <div class="week-day-header">{{ weekday_labels[day.weekday()] }}<span>{{ day.strftime('%d/%m') }}</span></div>
              <div class="week-day-body">
                {% for item in week_map[day.isoformat()] %}
                <div class="mini-appointment" style="border-left-color: {{ item.professional.color or '#0d6efd' }};">
                  <strong>{{ item.start_time.strftime('%H:%M') }}</strong>
                  <div>{{ item.client_name }}</div>
                  <small>{{ item.professional.display_name }}</small>
                </div>
                {% else %}
                <div class="text-muted small">Sin turnos</div>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}