{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">Resultados de la Simulación</div>
            <div class="card-body">
                <h4 class="card-title text-center mb-4">Generación Estimada: {{ energia }} kWh/mes</h4>
                
                {% if consumo_kwh > 0 %}
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title text-center">Comparativa de Facturación</h5>
                                <div class="row text-center mt-3">
                                    <div class="col-md-4">
                                        <p class="text-muted mb-1">Factura Actual</p>
                                        <h3 class="text-danger">${{ costo_mensual }}</h3>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="text-muted mb-1">Nueva Factura Est.</p>
                                        <h3 class="text-success">${{ nuevo_costo_mensual }}</h3>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="text-muted mb-1">Cobertura Solar</p>
                                        <h3>{{ porcentaje_cobertura }}%</h3>
                                    </div>
                                </div>
                                <div class="progress mt-3" style="height: 25px;">
                                    {% if porcentaje_cobertura >= 100 %}
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                            Solar {{ porcentaje_cobertura }}% (Excedente)
                                        </div>
                                    {% else %}
                                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ porcentaje_cobertura }}%;" aria-valuenow="{{ porcentaje_cobertura }}" aria-valuemin="0" aria-valuemax="100">
                                            Solar {{ porcentaje_cobertura }}%
                                        </div>
                                        <div class="progress-bar bg-secondary" role="progressbar" style="width: {{ 100 - porcentaje_cobertura }}%;" aria-valuenow="{{ 100 - porcentaje_cobertura }}" aria-valuemin="0" aria-valuemax="100">
                                            Red {{ "%.1f"|format(100 - porcentaje_cobertura) }}%
                                        </div>
                                    {% endif %}
                                </div>
                                {% if porcentaje_cobertura > 100 %}
                                <div class="alert alert-info mt-3 text-center">
                                    <strong>¡Excelente!</strong> Tu sistema genera un excedente de {{ "%.1f"|format(energia - consumo_kwh) }} kWh.
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="alert alert-info">
                            <h6>Ahorro Mensual</h6>
                            <h3>${{ ahorro }}</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="alert alert-warning">
                            <h6>Retorno Inversión</h6>
                            <h3>{{ recuperacion }} Años</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="alert alert-success">
                            <h6>CO2 Evitado</h6>
                            <h3>{{ co2 }} kg</h3>
                        </div>
                    </div>
                </div>

                <hr>
                <h5>Guardar Proyecto</h5>
                <form action="{{ url_for('main.save') }}" method="POST">
                    <input type="hidden" name="id_casa" value="{{ casa.id_casa }}">
                    <input type="hidden" name="id_panel" value="{{ panel.id_panel }}">
                    <input type="hidden" name="cantidad" value="{{ cantidad }}">
                    <input type="hidden" name="energia" value="{{ energia }}">
                    <input type="hidden" name="ahorro" value="{{ ahorro }}">
                    <input type="hidden" name="consumo_kwh" value="{{ consumo_kwh }}">
                    <input type="hidden" name="costo_mensual" value="{{ costo_mensual }}">
                    
                    <div class="mb-3">
                        <label for="nombre_cliente" class="form-label">Nombre del Cliente / Proyecto</label>
                        <input type="text" name="nombre_cliente" class="form-control" required value="Proyecto {{ casa.nombre }}">
                    </div>
                    <div class="mb-3">
                        <label for="fecha_referencia" class="form-label">Fecha de Simulación / Factura</label>
                        <input type="date" name="fecha_referencia" class="form-control" required value="{{ today }}">
                    </div>
                    <button type="submit" class="btn btn-primary">Guardar Proyecto</button>
                    <a href="{{ url_for('main.simular', id_casa=casa.id_casa) }}" class="btn btn-secondary">Volver a Simulación</a>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}