{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 120px 0 40px 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-lg border-0" style="border-radius: 20px; overflow: hidden;">
                    <div class="card-body p-5">
                        <!-- Header -->
                        <div class="text-center mb-4" style="border-bottom: 2px solid #f1f5f9; padding-bottom: 20px;">
                            <h2 class="text-primary mb-3">Propuesta Energética Personalizada</h2>
                            <div class="alert alert-info" style="background: #e0f2fe; border: none; border-radius: 10px;">
                                <i class="fas fa-user-tie me-2"></i>
                                <strong>Comercial:</strong> {{ proposal_data.commercial_name }}
                            </div>
                        </div>

                        <!-- Información del cliente -->
                        <div class="client-info mb-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-user me-2"></i>Información del Cliente
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <p><i class="fas fa-user me-2 text-muted"></i><strong>Cliente:</strong> {{ invoice_data.get('client_name', '') }}</p>
                                    <p><i class="fas fa-map-marker-alt me-2 text-muted"></i><strong>CUPS:</strong> {{ invoice_data.get('cups', 'No disponible') }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p><i class="fas fa-home me-2 text-muted"></i><strong>Dirección:</strong> {{ invoice_data.get('supply_address', '') }}</p>
                                    <p><i class="fas fa-building me-2 text-muted"></i><strong>Comercializadora actual:</strong> {{ invoice_data.get('provider_name', '') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Comentario personalizado -->
                        {% if proposal_data.custom_comment %}
                        <div class="mb-4">
                            <div class="alert alert-primary" style="background: #dbeafe; border: none; border-radius: 10px;">
                                <h6 class="fw-bold mb-2"><i class="fas fa-comment me-2"></i>Comentario del Comercial</h6>
                                <p class="mb-0">{{ proposal_data.custom_comment }}</p>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Planes seleccionados -->
                        <div class="mb-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-star me-2"></i>Planes Recomendados
                            </h5>
                            
                            {% for plan in proposal_data.selected_plans %}
                            <div class="card mb-3 border-2 {% if plan.is_savings %}border-success{% else %}border-warning{% endif %}">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h6 class="card-title fw-bold text-primary">{{ plan.name }}</h6>
                                            <p class="text-muted mb-2">{{ plan.supplier }}</p>
                                            
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <small class="text-muted">Precio Energía P1:</small>
                                                    <div class="fw-bold">{{ "%.6f"|format(plan.energy_prices.P1|default(0)) }} €/kWh</div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <small class="text-muted">Precio Potencia P1:</small>
                                                    <div class="fw-bold">{{ "%.5f"|format(plan.power_prices.P1|default(0)) }} €/kW/día</div>
                                                </div>
                                            </div>
                                            
                                            <div class="mt-2">
                                                <small class="text-muted">Permanencia: {{ plan.contract_duration }} meses</small>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-4 text-end">
                                            <div class="mb-2">
                                                <small class="text-muted">Coste mensual estimado</small>
                                                <div class="h5 text-primary fw-bold">{{ "%.2f"|format(plan.ole_cost) }} €/mes</div>
                                            </div>
                                            
                                            {% if plan.is_savings %}
                                                <div class="text-success">
                                                    <small>Ahorro anual</small>
                                                    <div class="h6 fw-bold">{{ plan.yearly_savings|round|int }} €</div>
                                                    <small>({{ "%.1f"|format(plan.savings_percentage) }}% ahorro)</small>
                                                </div>
                                            {% else %}
                                                <div class="text-warning">
                                                    <small>Coste adicional anual</small>
                                                    <div class="h6 fw-bold">+{{ plan.yearly_loss|round|int }} €</div>
                                                    <small>({{ "%.1f"|format(plan.savings_percentage) }}% más caro)</small>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- Resumen de la propuesta -->
                        <div class="mb-4">
                            <div class="card" style="background: #f8fafc; border: none;">
                                <div class="card-body">
                                    <h6 class="fw-bold mb-3"><i class="fas fa-chart-line me-2"></i>Resumen de la Propuesta</h6>
                                    <div class="row">
                                        <div class="col-md-4 text-center">
                                            <div class="text-muted">Planes incluidos</div>
                                            <div class="h4 text-primary fw-bold">{{ proposal_data.selected_plans|length }}</div>
                                        </div>
                                        <div class="col-md-4 text-center">
                                            <div class="text-muted">Mejor ahorro anual</div>
                                            {% set best_savings = proposal_data.selected_plans|selectattr('is_savings')|list|sort(attribute='yearly_savings', reverse=true)|first %}
                                            {% if best_savings %}
                                                <div class="h4 text-success fw-bold">{{ best_savings.yearly_savings|round|int }} €</div>
                                            {% else %}
                                                <div class="h4 text-muted fw-bold">N/A</div>
                                            {% endif %}
                                        </div>
                                        <div class="col-md-4 text-center">
                                            <div class="text-muted">Coste mensual más bajo</div>
                                            {% set cheapest_plan = proposal_data.selected_plans|sort(attribute='ole_cost')|first %}
                                            <div class="h4 text-primary fw-bold">{{ "%.2f"|format(cheapest_plan.ole_cost) }} €</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Información adicional -->
                        <div class="alert alert-primary" style="background: #dbeafe; border: none; border-radius: 10px;">
                            <div class="d-flex align-items-start">
                                <i class="fas fa-info-circle me-3 mt-1"></i>
                                <div>
                                    <strong>Información Importante</strong>
                                    <p class="mb-2 mt-2">Esta propuesta está basada en el análisis de su factura actual y los precios oficiales vigentes.</p>
                                    <p class="mb-0">Los cálculos son estimaciones que pueden variar según las condiciones del mercado y el consumo real.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Acciones -->
                        <div class="text-center mt-4">
                            <div class="row">
                                <div class="col-md-4">
                                    <a href="{{ url_for('commercial_invoice.generate_proposal') }}" class="btn btn-outline-secondary btn-lg w-100 mb-3">
                                        <i class="fas fa-edit me-2"></i>Editar propuesta
                                    </a>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-info btn-lg w-100 mb-3" onclick="window.print()">
                                        <i class="fas fa-print me-2"></i>Imprimir propuesta
                                    </button>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-primary btn-lg w-100 mb-3" onclick="downloadPDF()">
                                        <i class="fas fa-download me-2"></i>Descargar PDF
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Nota legal -->
                        <div class="text-center mt-4">
                            <p class="text-muted small">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                La propuesta tiene un compromiso sujeto a disponibilidad de las fechas y hasta el vencimiento de los planes. Los precios y condiciones están sujetos a cambios según las condiciones del mercado.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function downloadPDF() {
    window.location.href = "{{ url_for('commercial_invoice.download_proposal') }}";
}
</script>

{% endblock %}