{% extends "base.html" %}
{% set active = "inventario" %}
{% block title %}{{ producto.nombre }} · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow"><a href="{{ url_for('inventario') }}">&larr; Inventarios</a></div>
        <h1>{{ producto.nombre }}</h1>
    </div>
    <form method="post" action="{{ url_for('producto_desactivar', producto_id=producto.id) }}" onsubmit="return confirm('¿Desactivar este producto? Ya no aparecerá en el POS.');">
        <button type="submit" class="btn ghost">Desactivar producto</button>
    </form>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Stock actual</span>
        <span class="value" style="{{ 'color:var(--alerta);' if producto.stock <= producto.stock_minimo }}">{{ producto.stock }}</span>
        <span class="sub">mínimo {{ producto.stock_minimo }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Costo</span>
        <span class="value" style="font-size:22px;">${{ "%.0f"|format(producto.costo) }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Precio de venta</span>
        <span class="value" style="font-size:22px;">${{ "%.0f"|format(producto.precio) }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Valor en stock</span>
        <span class="value" style="font-size:22px;">${{ "%.0f"|format(producto.stock * producto.costo) }}</span>
    </div>
</div>

<div class="grid cols-2">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Editar producto</h2>
        <form method="post" action="{{ url_for('producto_editar', producto_id=producto.id) }}">
            <div class="field"><label>Nombre</label><input type="text" name="nombre" value="{{ producto.nombre }}" required></div>
            <div class="field"><label>Categoría</label><input type="text" name="categoria" value="{{ producto.categoria }}"></div>
            <div class="grid cols-2">
                <div class="field"><label>Precio de venta</label><input type="number" name="precio" step="0.01" value="{{ producto.precio }}" required></div>
                <div class="field"><label>Costo</label><input type="number" name="costo" step="0.01" value="{{ producto.costo }}" required></div>
            </div>
            <div class="field"><label>Stock mínimo</label><input type="number" name="stock_minimo" value="{{ producto.stock_minimo }}"></div>
            <div class="field">
                <label>Proveedor preferido</label>
                <select name="proveedor_preferido_id">
                    <option value="">Sin definir</option>
                    {% for p in proveedores %}
                    <option value="{{ p.id }}" {{ "selected" if producto.proveedor_preferido_id==p.id }}>{{ p.nombre }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar cambios</button>
        </form>

        <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:20px 0 8px;">Ajuste manual de stock</h3>
        <form method="post" action="{{ url_for('producto_ajustar', producto_id=producto.id) }}">
            <div class="grid cols-2">
                <div class="field"><label>Cantidad (negativo para restar)</label><input type="number" name="cantidad" required placeholder="Ej. -2 o 10"></div>
                <div class="field"><label>Motivo</label><input type="text" name="motivo" placeholder="Ej. Merma, conteo físico..." required></div>
            </div>
            <button type="submit" class="btn secondary" style="width:100%;">Registrar ajuste</button>
        </form>
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Historial de movimientos</h2>
        {% if movimientos %}
        <table>
            <thead><tr><th>Fecha</th><th>Motivo</th><th>Cambio</th></tr></thead>
            <tbody>
            {% for m in movimientos %}
                <tr>
                    <td class="mono">{{ m.fecha[:16] }}</td>
                    <td>{{ m.motivo }}</td>
                    <td class="mono" style="color:{{ 'var(--salvia)' if m.cambio > 0 else 'var(--alerta)' }}; font-weight:600;">{{ "+" if m.cambio > 0 }}{{ m.cambio }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin movimientos todavía</div></div>
        {% endif %}
    </div>
</div>
{% endblock %}