{% extends "base.html" %}

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

{% block styles %}
{{ super() }}
<style>
  .bg-success-soft { background: #f0fdf4 !important; }
  .bg-warning-soft { background: #fef3c7 !important; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 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 con información del comercial -->
                        <div class="text-center mb-4" style="border-bottom: 2px solid #f1f5f9; padding-bottom: 20px;">
                            <h2 class="text-primary mb-3">{{ title }}</h2>
                            {% if commercial_name %}
                            <div class="alert alert-info" style="background: #e0f2fe; border: none; border-radius: 10px;">
                                <i class="fas fa-user-tie me-2"></i>
                                <strong>Comercial asignado:</strong> {{ commercial_name }}
                            </div>
                            {% endif %}
                        </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>Detalles 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> {{ client_name }}</p>
                                    <p><i class="fas fa-map-marker-alt me-2 text-muted"></i><strong>CUPS:</strong> {{ lead.cups or 'No disponible' }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p><i class="fas fa-home me-2 text-muted"></i><strong>Dirección:</strong> {{ supply_address }}</p>
                                    <p><i class="fas fa-building me-2 text-muted"></i><strong>Comercializadora:</strong> {{ provider_name }}</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <p><i class="fas fa-calendar me-2 text-muted"></i><strong>Período:</strong> {{ billing_period }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p><i class="fas fa-clock me-2 text-muted"></i><strong>Tarifa:</strong> {{ tariff_type }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Resultado principal -->
                        <div class="text-center mb-5">
                            {% if yearly_savings > 0 %}
                                <h3 class="text-success mb-2">Tu ahorro anual estimado</h3>
                                <div class="display-3 text-success fw-bold mb-2">{{ yearly_savings|round|int }} €</div>
                                <p class="text-success fs-4">({{ "%.2f"|format(savings_percentage) }}%)</p>
                                <p class="text-muted">Equivale a {{ "%.0f"|format(monthly_savings) }} € mensuales</p>
                                <h4 class="text-primary mt-4">¡Podemos ayudarte a ahorrar!</h4>
                            {% else %}
                                <h3 class="text-warning mb-2">Análisis de costes</h3>
                                <div class="display-3 text-warning fw-bold mb-2">Sin ahorro</div>
                                <p class="text-muted">Tu tarifa actual ya es competitiva</p>
                                <h4 class="text-primary mt-4">Mantienes una buena tarifa</h4>
                            {% endif %}
                            <p class="text-muted">Con una tarifa adaptada a tu consumo</p>
                        </div>

                        <!-- Comparativa de costes -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card border-0" style="background: #f8fafc;">
                                    <div class="card-body text-center">
                                        <h6 class="text-muted mb-2">Coste mensual actual</h6>
                                        <h4 class="text-dark">{{ "%.0f"|format(current_cost) }} €/mes</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-0 {% if yearly_savings > 0 %}bg-success-soft{% else %}bg-warning-soft{% endif %}">
                                    <div class="card-body text-center">
                                        <h6 class="text-muted mb-2">Coste mensual propuesto</h6>
                                        <h4 class="{% if yearly_savings > 0 %}text-success{% else %}text-warning{% endif %}">{{ "%.0f"|format(ole_cost) }} €/mes</h4>
                                    </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>Cálculo basado en precios oficiales y referencias que pueden estar sujetas a cambios.</strong>
                                    <p class="mb-0 mt-2">Este cálculo considera únicamente los términos de potencia y energía. No incluye impuestos, alquileres de equipos u otros conceptos que puedan aparecer en tu facturación simplificada.</p>
                                </div>
                            </div>
                        </div>

                        <!-- Mejoras detectadas -->
                        {% if reactive_energy_penalty > 0 or power_excess_penalty > 0 %}
                        <div class="mt-4">
                            <h5 class="text-secondary mb-3">
                                <i class="fas fa-lightbulb me-2"></i>Mejoras detectadas
                            </h5>
                            <div class="row">
                                {% if reactive_energy_penalty > 0 %}
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0" style="background: #fef3c7;">
                                        <div class="card-body text-center">
                                            <i class="fas fa-bolt text-warning mb-2" style="font-size: 2rem;"></i>
                                            <h6 class="text-warning">Energía Reactiva no detectada</h6>
                                            <p class="text-muted small mb-0">No se ha detectado penalización por energía reactiva en tu factura actual.</p>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                {% if power_excess_penalty <= 0 %}
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0" style="background: #fef3c7;">
                                        <div class="card-body text-center">
                                            <i class="fas fa-tachometer-alt text-warning mb-2" style="font-size: 2rem;"></i>
                                            <h6 class="text-warning">Exceso de potencia no detectado</h6>
                                            <p class="text-muted small mb-0">No se han detectado penalizaciones por exceso de potencia en tu factura.</p>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}

                        <!-- Acciones para comerciales -->
                        <div class="text-center mt-5">
                            <div class="row">
                                <div class="col-md-6">
                                    <button class="btn btn-primary btn-lg w-100 mb-3" onclick="window.print()">
                                        <i class="fas fa-print me-2"></i>Imprimir estudio
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <a href="{{ url_for('commercial_invoice.plans_selection') }}" class="btn btn-outline-primary btn-lg w-100 mb-3">
                                        <i class="fas fa-arrow-left me-2"></i>Ver otros planes
                                    </a>
                                </div>
                            </div>
                            <button class="btn btn-lg w-100" style="background: linear-gradient(135deg, #0b99fd 0%, #bd05dc 100%); border: none; color: white;" onclick="generateProposal()">
                                <i class="fas fa-file-pdf me-2"></i>Generar propuesta personalizada
                            </button>
                        </div>

                        <!-- Nota legal -->
                        <div class="text-center mt-4">
                            <p class="text-muted small">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                Los cálculos son estimaciones basadas en los datos de la factura y precios vigentes. El ahorro final puede variar según el consumo y las condiciones del mercado. Sin compromiso.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function generateProposal() {
    // Aquí se implementará la funcionalidad de generar propuesta personalizada
    alert('Funcionalidad de propuesta personalizada en desarrollo');
}
</script>

{% endblock %}
