{% extends 'base.html' %}
{% block title %}Dashboard — Marine Maintenance{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block topbar_actions %}
    <a href="{{ url_for('work_order_new') }}" class="btn btn-primary">+ Nueva Orden</a>
{% endblock %}
{% block content %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">🚢 Embarcaciones</div>
        <div class="stat-value">{{ stats.vessels }}</div>
        <div class="stat-sub">registradas</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">🔧 Órdenes Activas</div>
        <div class="stat-value" style="color:var(--warn)">{{ stats.open_orders }}</div>
        <div class="stat-sub">abiertas / en progreso</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">📦 Stock Bajo</div>
        <div class="stat-value" style="color:{% if stats.low_stock > 0 %}var(--danger){% else %}var(--success){% endif %}">{{ stats.low_stock }}</div>
        <div class="stat-sub">repuestos bajo mínimo</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">✅ Completadas</div>
        <div class="stat-value" style="color:var(--success)">{{ stats.completed_this_month }}</div>
        <div class="stat-sub">este mes</div>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-header">🔧 Órdenes Recientes</div>
        {% if recent_orders %}
        <div class="table-wrap">
        <table>
            <thead><tr><th>Orden</th><th>Embarcación</th><th>Estado</th><th></th></tr></thead>
            <tbody>
            {% for o in recent_orders %}
            <tr>
                <td><span class="text-cyan">{{ o.order_number }}</span></td>
                <td>{{ o.vessel_name }}</td>
                <td><span class="badge badge-{{ o.status }}">{{ o.status.replace('_',' ') }}</span></td>
                <td><a href="{{ url_for('work_order_detail', woid=o.id) }}" class="btn btn-sm btn-secondary">Ver</a></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <p class="text-gray" style="font-size:13px">No hay órdenes aún.</p>
        {% endif %}
    </div>

    <div>
        {% if low_stock_parts %}
        <div class="card mb-4">
            <div class="card-header">⚠️ Stock Bajo</div>
            {% for p in low_stock_parts %}
            <div class="flex justify-between" style="padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px">
                <span>{{ p.name }}</span>
                <span class="text-danger">{{ p.quantity }} {{ p.unit }} / mín {{ p.min_quantity }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if upcoming %}
        <div class="card">
            <div class="card-header">📅 Mantenimientos Próximos</div>
            {% for s in upcoming %}
            <div style="padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:13px">
                <div class="flex justify-between">
                    <span>{{ s.vessel_name }}</span>
                    <span class="text-warn">{{ s.next_due_date }}</span>
                </div>
                <div class="text-gray" style="font-size:12px">{{ s.task_name }}</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}