{% extends "base.html" %}

{% block title %}{{ meta_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<main>
  <section class="hero-section">
    <div class="container-xxl hero-grid">
      <div class="hero-copy">
        <span class="eyebrow">Primera iteración operativa</span>
        <h1>Controla mesas, comandas y cocina con un dashboard táctil y claro.</h1>
        <p class="hero-text">Un punto de partida usable para meseros y cocina: abre una mesa, agrega productos con notas, sigue el estado de la orden y cobra cuando esté lista.</p>
        <div class="hero-actions">
          <a href="#tables-grid" class="btn btn-pos-primary btn-lg">Ver mesas</a>
          <a href="{% url 'kitchen_board' %}" class="btn btn-pos-soft btn-lg">Abrir KDS</a>
        </div>
        <div class="hero-kpis row g-3">
          <div class="col-sm-4">
            <div class="metric-card">
              <span>Mesas ocupadas</span>
              <strong>{{ occupied_tables }}</strong>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="metric-card">
              <span>Productos activos</span>
              <strong>{{ available_products }}</strong>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="metric-card">
              <span>Ventas de hoy</span>
              <strong>${{ daily_revenue|floatformat:2 }}</strong>
            </div>
          </div>
        </div>
      </div>
      <div class="hero-visual">
        <div class="floating-card primary-card">
          <span class="floating-label">Orden activa</span>
          <strong>Mesa 4</strong>
          <p>2x Pasta trufa · 1x Limonada</p>
          <div class="status-pill status-ready">Lista para cobrar</div>
        </div>
        <div class="floating-card secondary-card">
          <span class="floating-label">Cocina</span>
          <strong>{{ kitchen_orders|length }} órdenes</strong>
          <p>Vista rápida para preparación</p>
        </div>
        <div class="shape shape-sphere"></div>
        <div class="shape shape-cube"></div>
      </div>
    </div>
  </section>

  <section class="dashboard-section">
    <div class="container-xxl">
      <div class="section-heading">
        <div>
          <span class="eyebrow">Flujo principal</span>
          <h2 id="tables-grid">Dashboard de mesas</h2>
        </div>
        <p>Toca una mesa para registrar productos, notas para cocina y revisar la comanda activa.</p>
      </div>
      <div class="row g-4">
        <div class="col-xl-8">
          <div class="table-grid">
            {% for table in tables %}
            <a href="{% url 'table_detail' table.id %}" class="table-card {% if table.status == 'occupied' %}is-occupied{% else %}is-free{% endif %}">
              <div class="table-card-top">
                <div>
                  <span class="table-label">{{ table.name }}</span>
                  <h3>{{ table.seats }} puestos</h3>
                </div>
                <span class="status-pill {% if table.status == 'occupied' %}status-busy{% else %}status-free{% endif %}">{{ table.get_status_display }}</span>
              </div>
              {% if table.current_order %}
              <div class="table-order-preview">
                <strong>Orden #{{ table.current_order.id }}</strong>
                <p>{{ table.current_order.total_items }} ítems · ${{ table.current_order.subtotal|floatformat:2 }}</p>
              </div>
              {% else %}
              <div class="empty-mini">Lista para recibir una nueva comanda.</div>
              {% endif %}
            </a>
            {% empty %}
            <div class="empty-state-card">
              <h3>No hay mesas configuradas</h3>
              <p>Agrega mesas desde el admin para empezar a tomar comandas.</p>
              <a href="/admin/" class="btn btn-pos-primary">Ir al admin</a>
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="col-xl-4">
          <div class="side-panel-card">
            <div class="section-heading compact">
              <div>
                <span class="eyebrow">Ventas rápidas</span>
                <h2>Top productos</h2>
              </div>
            </div>
            {% if top_products %}
            <div class="stack-list">
              {% for product in top_products %}
              <div class="stack-item">
                <div>
                  <strong>{{ product.name }}</strong>
                  <p>{{ product.category }}</p>
                </div>
                <span>{{ product.sold }} vendidos</span>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <div class="empty-mini">Todavía no hay ventas pagadas para mostrar tendencias.</div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="dashboard-section section-muted">
    <div class="container-xxl">
      <div class="row g-4">
        <div class="col-lg-7">
          <div class="side-panel-card h-100">
            <div class="section-heading compact">
              <div>
                <span class="eyebrow">Seguimiento</span>
                <h2>Órdenes recientes</h2>
              </div>
            </div>
            {% if recent_orders %}
            <div class="stack-list">
              {% for order in recent_orders %}
              <a href="{% url 'order_detail' order.id %}" class="stack-item stack-item-link">
                <div>
                  <strong>Orden #{{ order.id }} · {{ order.table.name }}</strong>
                  <p>{{ order.total_items }} ítems · {{ order.get_status_display }}</p>
                </div>
                <span>${{ order.subtotal|floatformat:2 }}</span>
              </a>
              {% endfor %}
            </div>
            {% else %}
            <div class="empty-mini">Aún no hay órdenes. Abre una mesa y agrega el primer producto.</div>
            {% endif %}
          </div>
        </div>
        <div class="col-lg-5">
          <div class="side-panel-card h-100">
            <div class="section-heading compact">
              <div>
                <span class="eyebrow">Cocina</span>
                <h2>Vista previa KDS</h2>
              </div>
              <a href="{% url 'kitchen_board' %}" class="text-link">Pantalla completa</a>
            </div>
            {% if kitchen_orders %}
            <div class="kitchen-preview-list">
              {% for order in kitchen_orders %}
              <div class="kitchen-ticket">
                <div class="d-flex justify-content-between align-items-start gap-3">
                  <div>
                    <strong>#{{ order.id }} · {{ order.table.name }}</strong>
                    <p>{{ order.get_status_display }}</p>
                  </div>
                  <span class="status-pill {% if order.status == 'open' %}status-free{% else %}status-busy{% endif %}">{{ order.get_status_display }}</span>
                </div>
                <ul>
                  {% for item in order.items.all %}
                  <li>{{ item.quantity }} × {{ item.product.name }}{% if item.note %} — {{ item.note }}{% endif %}</li>
                  {% endfor %}
                </ul>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <div class="empty-mini">La cocina está al día. No hay comandas pendientes.</div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </section>
</main>
{% endblock %}