{% extends "base.html" %}

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

{% block styles %}
<style>
    /* Estilos generales */
    .plan-detail-section {
        padding: 48px 0;
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        min-height: 100vh;
    }
    .plan-detail-container {
        max-width: 1000px;
        margin: 0 auto;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    /* Cabecera */
    .plan-header {
        background: linear-gradient(135deg, #0b99fd 0%, #bd05dc 100%);
        color: white;
        padding: 30px;
        position: relative;
        overflow: hidden;
    }
    .plan-header::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,0 L100,100 M20,0 L100,80 M40,0 L100,60 M60,0 L100,40 M80,0 L100,20 M0,20 L80,100 M0,40 L60,100 M0,60 L40,100 M0,80 L20,100" stroke="rgba(255,255,255,0.1)" stroke-width="1"></path></svg>');
        opacity: 0.3;
    }
    .plan-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
    }
    .plan-supplier {
        font-size: 18px;
        opacity: 0.9;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
    }
    .plan-badge {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        margin-right: 8px;
        position: relative;
        z-index: 1;
    }
    
    /* Contenido */
    .plan-content {
        padding: 30px;
    }
    
    /* Sección de ahorro */
    .savings-section {
        background-color: #f0fdf4;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 30px;
        text-align: center;
        border-left: 5px solid #10b981;
    }
    .savings-amount {
        font-size: 48px;
        font-weight: 700;
        color: #10b981;
        margin-bottom: 8px;
    }
    .savings-percentage {
        font-size: 24px;
        font-weight: 600;
        color: #10b981;
        margin-bottom: 16px;
    }
    .savings-description {
        font-size: 16px;
        color: #374151;
    }
    
    /* Información del cliente */
    .client-info {
        background-color: #f9fafb;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
    }
    .client-info-title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
    }
    .client-info-title i {
        margin-right: 8px;
        color: #6366f1;
    }
    .client-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    .client-info-item {
        margin-bottom: 12px;
    }
    .client-info-label {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 4px;
    }
    .client-info-value {
        font-size: 16px;
        font-weight: 500;
        color: #111827;
    }
    
    /* Comparativa de precios */
    .price-comparison {
        margin-bottom: 30px;
    }
    .price-comparison-title {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
    }
    .price-comparison-title i {
        margin-right: 8px;
        color: #6366f1;
    }
    .comparison-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .comparison-table th {
        background-color: #f3f4f6;
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
    }
    .comparison-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
    }
    .comparison-table tr:last-child td {
        border-bottom: none;
    }
    .comparison-table .current-price {
        color: #ef4444;
        font-weight: 500;
    }
    .comparison-table .new-price {
        color: #10b981;
        font-weight: 500;
    }
    .comparison-table .price-difference {
        font-weight: 600;
    }
    
    /* Detalles del plan */
    .plan-details {
        margin-bottom: 30px;
    }
    .plan-details-title {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
    }
    .plan-details-title i {
        margin-right: 8px;
        color: #6366f1;
    }
    .plan-details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    .plan-detail-item {
        background-color: #f9fafb;
        border-radius: 8px;
        padding: 16px;
    }
    .plan-detail-label {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 4px;
    }
    .plan-detail-value {
        font-size: 16px;
        font-weight: 500;
        color: #111827;
    }
    
    /* Botones de acción */
    .action-buttons {
        margin-top: 30px;
        display: flex;
        gap: 16px;
    }
    .btn-action {
        flex: 1;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn-action:hover {
        transform: translateY(-2px);
    }
    .btn-primary {
        background: linear-gradient(135deg, #0b99fd 0%, #bd05dc 100%);
        color: white;
        border: none;
    }
    .btn-outline {
        background-color: transparent;
        color: #6366f1;
        border: 1px solid #6366f1;
    }
    .btn-outline:hover {
        background-color: #f5f3ff;
    }
    
    /* Nota legal */
    .legal-note {
        margin-top: 30px;
        padding: 16px;
        background-color: #f3f4f6;
        border-radius: 8px;
        font-size: 14px;
        color: #6B7280;
        line-height: 1.5;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .plan-content {
            padding: 20px;
        }
        .savings-amount {
            font-size: 36px;
        }
        .savings-percentage {
            font-size: 20px;
        }
        .action-buttons {
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="plan-detail-section">
    <div class="container">
        <div class="plan-detail-container">
            <!-- Cabecera del plan -->
            <div class="plan-header">
                <h1 class="plan-title">{{ plan.name }}</h1>
                <p class="plan-supplier">{{ plan.supplier }}</p>
                <div>
                    <span class="plan-badge"><i class="fas fa-bolt me-1"></i> {{ plan.tariff_type|default('2.0TD') }}</span>
                    <span class="plan-badge"><i class="fas fa-calendar me-1"></i> {{ plan.contract_duration|default(12) }} meses</span>
                    {% if plan.best_option %}
                    <span class="plan-badge" style="background-color: rgba(255, 255, 255, 0.4);"><i class="fas fa-star me-1"></i> Mejor oferta</span>
                    {% endif %}
                </div>
            </div>
            
            <!-- Contenido del plan -->
            <div class="plan-content">
                <!-- Sección de ahorro -->
                <div class="savings-section">
                    {% if plan.is_savings %}
                        <div class="savings-amount">{{ plan.yearly_savings|round|int }} €</div>
                        <div class="savings-percentage">{{ "%.1f"|format(plan.savings_percentage|default(0)) }}% de ahorro anual</div>
                        <p class="savings-description">Ahorro estimado basado en tu consumo actual</p>
                    {% else %}
                        <div class="savings-amount" style="color: #ef4444;">+{{ plan.yearly_loss|round|int }} €</div>
                        <div class="savings-percentage" style="color: #ef4444;">{{ "%.1f"|format(plan.savings_percentage|default(0))|abs }}% más caro anualmente</div>
                        <p class="savings-description">Este plan es más caro que tu tarifa actual</p>
                    {% endif %}
                </div>
                
                <!-- Información del cliente -->
                <div class="client-info">
                    <h3 class="client-info-title"><i class="fas fa-user-circle"></i> Información del cliente</h3>
                    <div class="client-info-grid">
                        <div class="client-info-item">
                            <div class="client-info-label">Cliente</div>
                            <div class="client-info-value">{{ client_name }}</div>
                        </div>
                        <div class="client-info-item">
                            <div class="client-info-label">CUPS</div>
                            <div class="client-info-value">{{ cups }}</div>
                        </div>
                        <div class="client-info-item">
                            <div class="client-info-label">Dirección</div>
                            <div class="client-info-value">{{ supply_address }}</div>
                        </div>
                        <div class="client-info-item">
                            <div class="client-info-label">Comercializadora actual</div>
                            <div class="client-info-value">{{ current_supplier }}</div>
                        </div>
                        <div class="client-info-item">
                            <div class="client-info-label">Tarifa</div>
                            <div class="client-info-value">{{ tariff_type }}</div>
                        </div>
                        <div class="client-info-item">
                            <div class="client-info-label">Periodo de facturación</div>
                            <div class="client-info-value">{{ billing_period }}</div>
                        </div>
                    </div>
                </div>
                
                <!-- Comparativa de precios -->
                <div class="price-comparison">
                    <h3 class="price-comparison-title"><i class="fas fa-chart-line"></i> Comparativa de precios</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>Concepto</th>
                                <th>Tarifa actual</th>
                                <th>{{ plan.name }}</th>
                                <th>Diferencia</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Coste mensual</td>
                                <td class="current-price">{{ "%.2f"|format(current_cost) }} €/mes</td>
                                <td class="new-price">{{ "%.2f"|format(plan.ole_cost|default(0)) }} €/mes</td>
                                <td class="price-difference">
                                    {% if plan.is_savings %}
                                        <span style="color: #10b981;">-{{ "%.2f"|format((current_cost - plan.ole_cost)|abs) }} €/mes</span>
                                    {% else %}
                                        <span style="color: #ef4444;">+{{ "%.2f"|format((plan.ole_cost - current_cost)|abs) }} €/mes</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td>Coste anual</td>
                                <td class="current-price">{{ "%.2f"|format(current_cost * 12) }} €/año</td>
                                <td class="new-price">{{ "%.2f"|format(plan.ole_cost|default(0) * 12) }} €/año</td>
                                <td class="price-difference">
                                    {% if plan.is_savings %}
                                        <span style="color: #10b981;">-{{ "%.2f"|format(plan.yearly_savings|default(0)) }} €/año</span>
                                    {% else %}
                                        <span style="color: #ef4444;">+{{ "%.2f"|format(plan.yearly_loss|default(0)) }} €/año</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- Detalles del plan -->
                <div class="plan-details">
                    <h3 class="plan-details-title"><i class="fas fa-info-circle"></i> Detalles del plan</h3>
                    <div class="plan-details-grid">
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Precio Energía P1</div>
                            <div class="plan-detail-value">{{ "%.6f"|format(plan.energy_prices.P1|default(0)) }} €/kWh</div>
                        </div>
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Precio Energía P2</div>
                            <div class="plan-detail-value">{{ "%.6f"|format(plan.energy_prices.P2|default(0)) }} €/kWh</div>
                        </div>
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Precio Energía P3</div>
                            <div class="plan-detail-value">{{ "%.6f"|format(plan.energy_prices.P3|default(0)) }} €/kWh</div>
                        </div>
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Precio Potencia P1</div>
                            <div class="plan-detail-value">{{ "%.5f"|format(plan.power_prices.P1|default(0)) }} €/kW/día</div>
                        </div>
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Precio Potencia P2</div>
                            <div class="plan-detail-value">{{ "%.5f"|format(plan.power_prices.P2|default(0)) }} €/kW/día</div>
                        </div>
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Permanencia</div>
                            <div class="plan-detail-value">{{ plan.contract_duration|default(12) }} meses</div>
                        </div>
                        {% if plan.renewable %}
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Energía</div>
                            <div class="plan-detail-value">100% Renovable</div>
                        </div>
                        {% endif %}
                        {% if plan.compensation_surplus %}
                        <div class="plan-detail-item">
                            <div class="plan-detail-label">Compensación excedentes</div>
                            <div class="plan-detail-value">{{ "%.4f"|format(plan.compensation_surplus|default(0)) }} €/kWh</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Botones de acción -->
                <div class="action-buttons">
                    <a href="{{ url_for('admin.admin_plans_selection') }}" class="btn-action btn-outline">
                        <i class="fas fa-arrow-left me-2"></i> Volver a planes
                    </a>
                    <button onclick="window.print()" class="btn-action btn-outline">
                        <i class="fas fa-print me-2"></i> Imprimir estudio
                    </button>
                    <a href="#" class="btn-action btn-primary">
                        <i class="fas fa-file-pdf me-2"></i> Generar PDF
                    </a>
                </div>
                
                <!-- Nota legal -->
                <div class="legal-note">
                    <p><strong>Nota:</strong> Los cálculos mostrados son estimaciones basadas en los datos de consumo proporcionados. 
                    El ahorro real puede variar dependiendo del consumo futuro y de posibles cambios en las tarifas. 
                    Este documento no constituye una oferta contractual.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}