{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Simulaciones Guardadas</h2>
            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">Volver al Inicio</a>
        </div>
        
        <!-- Filter Form -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ url_for('main.proyectos') }}" method="GET" class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="id_casa" class="form-label">Filtrar por Casa</label>
                        <select name="id_casa" class="form-select" onchange="this.form.submit()">
                            <option value="">Todas las casas</option>
                            {% for casa in casas %}
                            <option value="{{ casa.id_casa }}" {% if selected_casa == casa.id_casa %}selected{% endif %}>{{ casa.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <a href="{{ url_for('main.proyectos') }}" class="btn btn-outline-secondary">Limpiar Filtro</a>
                    </div>
                </form>
            </div>
        </div>

        {% if proyectos %}
        <div class="card mb-4">
            <div class="card-header">
                Comparativa de Costos Mensuales: Sin Solar vs Con Solar
            </div>
            <div class="card-body">
                <canvas id="savingsChart" width="400" height="100"></canvas>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Cliente</th>
                        <th>Ciudad</th>
                        <th>Casa</th>
                        <th>Panel</th>
                        <th>Cantidad</th>
                        <th>Energía (kWh/mes)</th>
                        <th>Ahorro ($/mes)</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for proyecto in proyectos %}
                    <tr>
                        <td>{{ proyecto.fecha_referencia.strftime('%Y-%m-%d') }}</td>
                        <td>{{ proyecto.nombre_cliente }}</td>
                        <td>{{ proyecto.ciudad.nombre_ciudad }}</td>
                        <td>{{ proyecto.casa.nombre if proyecto.casa else 'N/A' }}</td>
                        <td>{{ proyecto.panel.marca }} {{ proyecto.panel.modelo }}</td>
                        <td>{{ proyecto.cantidad_paneles }}</td>
                        <td>{{ "%.2f"|format(proyecto.energia_estimada_mensual) }}</td>
                        <td>{{ "%.2f"|format(proyecto.ahorro_estimado) if proyecto.ahorro_estimado else '-' }}</td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm text-white" data-bs-toggle="modal" data-bs-target="#detallesModal"
                                data-cliente="{{ proyecto.nombre_cliente }}"
                                data-fecha="{{ proyecto.fecha_referencia.strftime('%Y-%m-%d') }}"
                                data-casa="{{ proyecto.casa.nombre if proyecto.casa else 'N/A' }}"
                                data-ciudad="{{ proyecto.ciudad.nombre_ciudad }}"
                                data-provincia="{{ proyecto.ciudad.provincia }}"
                                data-panel="{{ proyecto.panel.marca }} {{ proyecto.panel.modelo }}"
                                data-eficiencia="{{ '%.1f'|format(proyecto.panel.eficiencia_r * 100) }}"
                                data-cantidad="{{ proyecto.cantidad_paneles }}"
                                data-energia="{{ '%.2f'|format(proyecto.energia_estimada_mensual) }}"
                                data-ahorro="{{ '%.2f'|format(proyecto.ahorro_estimado) if proyecto.ahorro_estimado else '0' }}"
                                data-consumo="{{ proyecto.consumo_actual_kwh if proyecto.consumo_actual_kwh else '0' }}"
                                data-costo="{{ proyecto.costo_actual_mensual if proyecto.costo_actual_mensual else '0' }}"
                            >
                                Ver Detalles
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            No hay simulaciones guardadas todavía.
        </div>
        {% endif %}
    </div>
</div>

<!-- Modal Detalles -->
<div class="modal fade" id="detallesModal" tabindex="-1" aria-labelledby="detallesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="detallesModalLabel">Detalles del Proyecto</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="text-muted">Información General</h6>
                        <p><strong>Cliente:</strong> <span id="modalCliente"></span></p>
                        <p><strong>Fecha Simulación:</strong> <span id="modalFecha"></span></p>
                        <p><strong>Casa:</strong> <span id="modalCasa"></span></p>
                        <p><strong>Ubicación:</strong> <span id="modalUbicacion"></span></p>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted">Sistema Solar</h6>
                        <p><strong>Panel:</strong> <span id="modalPanel"></span></p>
                        <p><strong>Eficiencia:</strong> <span id="modalEficiencia"></span>%</p>
                        <p><strong>Cantidad:</strong> <span id="modalCantidad"></span> paneles</p>
                    </div>
                </div>
                
                <hr>
                
                <h6 class="text-muted mb-3">Análisis Financiero y Energético</h6>
                <div class="row text-center">
                    <div class="col-md-3">
                        <div class="p-2 border rounded bg-light">
                            <small class="d-block text-muted">Consumo Actual</small>
                            <strong class="h5"><span id="modalConsumo"></span> kWh</strong>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-2 border rounded bg-light">
                            <small class="d-block text-muted">Factura Actual</small>
                            <strong class="h5 text-danger">$<span id="modalCosto"></span></strong>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-2 border rounded bg-light">
                            <small class="d-block text-muted">Generación Solar</small>
                            <strong class="h5 text-success"><span id="modalEnergia"></span> kWh</strong>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="p-2 border rounded bg-light">
                            <small class="d-block text-muted">Ahorro Estimado</small>
                            <strong class="h5 text-primary">$<span id="modalAhorro"></span></strong>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-info mt-4 text-center">
                    <strong>Nuevo Costo Estimado:</strong> $<span id="modalNuevoCosto"></span> / mes
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Modal Logic
    const detallesModal = document.getElementById('detallesModal');
    detallesModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget;
        
        // Extract info from data-* attributes
        const cliente = button.getAttribute('data-cliente');
        const fecha = button.getAttribute('data-fecha');
        const casa = button.getAttribute('data-casa');
        const ciudad = button.getAttribute('data-ciudad');
        const provincia = button.getAttribute('data-provincia');
        const panel = button.getAttribute('data-panel');
        const eficiencia = button.getAttribute('data-eficiencia');
        const cantidad = button.getAttribute('data-cantidad');
        const energia = button.getAttribute('data-energia');
        const ahorro = parseFloat(button.getAttribute('data-ahorro'));
        const consumo = button.getAttribute('data-consumo');
        const costo = parseFloat(button.getAttribute('data-costo'));
        
        // Calculate new cost
        const nuevoCosto = Math.max(0, costo - ahorro).toFixed(2);

        // Update the modal's content.
        detallesModal.querySelector('#modalCliente').textContent = cliente;
        detallesModal.querySelector('#modalFecha').textContent = fecha;
        detallesModal.querySelector('#modalCasa').textContent = casa;
        detallesModal.querySelector('#modalUbicacion').textContent = `${ciudad}, ${provincia}`;
        detallesModal.querySelector('#modalPanel').textContent = panel;
        detallesModal.querySelector('#modalEficiencia').textContent = eficiencia;
        detallesModal.querySelector('#modalCantidad').textContent = cantidad;
        detallesModal.querySelector('#modalEnergia').textContent = energia;
        detallesModal.querySelector('#modalAhorro').textContent = ahorro.toFixed(2);
        detallesModal.querySelector('#modalConsumo').textContent = consumo;
        detallesModal.querySelector('#modalCosto').textContent = costo.toFixed(2);
        detallesModal.querySelector('#modalNuevoCosto').textContent = nuevoCosto;
    });

    const ctx = document.getElementById('savingsChart').getContext('2d');
    const savingsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ labels | tojson }},
            datasets: [
                {
                    label: 'Costo Sin Solar ($)',
                    data: {{ costo_sin_solar | tojson }},
                    backgroundColor: 'rgba(220, 53, 69, 0.6)',
                    borderColor: 'rgba(220, 53, 69, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Costo Con Solar ($)',
                    data: {{ costo_con_solar | tojson }},
                    backgroundColor: 'rgba(25, 135, 84, 0.6)',
                    borderColor: 'rgba(25, 135, 84, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Costo Mensual ($)'
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        footer: function(tooltipItems) {
                            let sinSolar = 0;
                            let conSolar = 0;
                            tooltipItems.forEach(function(tooltipItem) {
                                if (tooltipItem.datasetIndex === 0) {
                                    sinSolar = tooltipItem.raw;
                                } else if (tooltipItem.datasetIndex === 1) {
                                    conSolar = tooltipItem.raw;
                                }
                            });
                            // Nota: Como el tooltip muestra un item a la vez por defecto en modo 'nearest', 
                            // esto funciona mejor si el modo es 'index'.
                            return '';
                        }
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false,
            }
        }
    });
</script>
{% endblock %}