{% extends "layout.html" %}

{% block title %}Boiler Status Demo - OptiWarm{% endblock %}

{% block head %}
<style>
    .boiler-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .boiler-card {
        border: 2px solid #dee2e6;
        border-radius: 10px;
        padding: 20px;
        background: white;
        transition: all 0.3s ease;
        position: relative;
        min-height: 220px;
    }

    .boiler-card.active {
        border-color: #28a745;
        background-color: #f8fff9;
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
    }

    .boiler-card.inactive {
        border-color: #6c757d;
        background-color: #f8f9fa;
    }

    .boiler-card.maintenance {
        border-color: #ffc107;
        background-color: #fffbf0;
    }

    .boiler-card.available {
        border-color: #17a2b8;
        background-color: #f0fcff;
        box-shadow: 0 4px 8px rgba(23, 162, 184, 0.2);
    }

    .status-indicator {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

    .status-indicator.active {
        background-color: #28a745;
    }

    .status-indicator.inactive {
        background-color: #6c757d;
        animation: none;
    }

    .status-indicator.maintenance {
        background-color: #ffc107;
    }

    .status-indicator.available {
        background-color: #17a2b8;
    }

    @keyframes pulse {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.1); }
        100% { opacity: 1; transform: scale(1); }
    }

    .boiler-name {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

    .boiler-info {
        margin-bottom: 8px;
        font-size: 0.9rem;
    }

    .boiler-info strong {
        color: #495057;
    }

    .temperature-display {
        background: #e9ecef;
        border-radius: 5px;
        padding: 8px;
        margin: 8px 0;
        text-align: center;
    }

    .temperature-display.heating {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
    }

    .runtime-info {
        background: #d1ecf1;
        border-radius: 5px;
        padding: 8px;
        margin: 8px 0;
        font-size: 0.85rem;
    }

    .status-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .stats-bar {
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-bottom: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        border: 1px solid #dee2e6;
    }

    .stat-item h3 {
        margin: 0;
        font-size: 1.8rem;
        font-weight: bold;
    }

    .stat-item p {
        margin: 0;
        color: #6c757d;
        font-size: 0.9rem;
    }

    .loading {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }

    .error {
        text-align: center;
        padding: 40px;
        color: #dc3545;
        background: #f8d7da;
        border-radius: 8px;
        margin: 20px 0;
    }

    .last-updated {
        text-align: center;
        color: #6c757d;
        font-size: 0.8rem;
        margin-top: 20px;
    }

    .boiler-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 10px;
        display: block;
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }

    .boiler-card.active .boiler-icon {
        opacity: 1;
        filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.3));
    }

    .boiler-card.maintenance .boiler-icon {
        opacity: 0.7;
        filter: grayscale(20%) sepia(30%) saturate(150%) hue-rotate(30deg);
    }

    .boiler-card.inactive .boiler-icon {
        opacity: 0.4;
        filter: grayscale(70%);
    }

    .boiler-card.available .boiler-icon {
        opacity: 0.9;
        filter: drop-shadow(0 2px 4px rgba(23, 162, 184, 0.3));
    }

    .boiler-type-info {
        text-align: center;
        margin-bottom: 15px;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 15px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="mb-4">
        <i class="fas fa-fire text-primary"></i> 
        Boiler Status Demo
        <small class="text-muted">Real-time monitoring</small>
    </h1>
    
    <!-- Statistics Bar -->
    <div class="stats-bar" id="stats-bar">
        <div class="stat-item">
            <h3 id="total-boilers">-</h3>
            <p>Total Boilers</p>
        </div>
        <div class="stat-item">
            <h3 id="active-boilers" class="text-success">-</h3>
            <p>Active</p>
        </div>
        <div class="stat-item">
            <h3 id="available-boilers" class="text-info">-</h3>
            <p>Available</p>
        </div>
        <div class="stat-item">
            <h3 id="maintenance-boilers" class="text-warning">-</h3>
            <p>In Maintenance</p>
        </div>
    </div>
    
    <!-- Status Legend -->
    <div class="status-legend">
        <div class="legend-item">
            <div class="legend-dot" style="background-color: #28a745;"></div>
            <span>Active & Running</span>
        </div>
        <div class="legend-item">
            <div class="legend-dot" style="background-color: #17a2b8;"></div>
            <span>Available</span>
        </div>
        <div class="legend-item">
            <div class="legend-dot" style="background-color: #ffc107;"></div>
            <span>In Maintenance</span>
        </div>
        <!-- div class="legend-item">
            <div class="legend-dot" style="background-color: #6c757d;"></div>
            <span>Inactive</span>
        </div -->
    </div>
    
    <!-- Loading/Error States -->
    <div id="loading" class="loading">
        <i class="fas fa-spinner fa-spin fa-2x"></i>
        <p>Loading boiler status...</p>
    </div>
    
    <div id="error" class="error" style="display: none;">
        <i class="fas fa-exclamation-triangle"></i>
        <p>Failed to load boiler status. Retrying...</p>
    </div>
    
    <!-- Boiler Grid -->
    <div id="boiler-grid" class="boiler-grid" style="display: none;">
        <!-- Boiler cards will be inserted here by JavaScript -->
    </div>
    
    <!-- Last Updated Info -->
    <div class="last-updated">
        <i class="fas fa-clock"></i>
        Last updated: <span id="last-updated-time">-</span>
        <span class="ml-3">
            <i class="fas fa-sync-alt"></i>
            Auto-refresh: <span id="refresh-countdown">1</span>s
        </span>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let refreshInterval;
let countdownInterval;
let countdownSeconds = 1;

function updateCountdown() {
    document.getElementById('refresh-countdown').textContent = countdownSeconds;
    countdownSeconds--;
    
    if (countdownSeconds < 0) {
        countdownSeconds = 1;
    }
}

function resetCountdown() {
    countdownSeconds = 1;
}

function getStatusClass(boiler) {
    if (!boiler.is_available) {
        return 'maintenance';
    } else if (boiler.is_active) {
        return 'active';
    } else if (boiler.is_available) {
        return 'available';
    } else {
        return 'inactive';
    }
}

function getStatusIndicatorClass(boiler) {
    if (!boiler.is_available) {
        return 'maintenance';
    } else if (boiler.is_active) {
        return 'active';
    } else if (boiler.is_available) {
        return 'available';
    } else {
        return 'inactive';
    }
}

function formatDateTime(isoString) {
    if (!isoString) return '-';
    const date = new Date(isoString);
    return date.toLocaleString();
}

function getBoilerIcon(boilerType, fuelType) {
    // Normalize the fuel type to match our icon names
    const normalizedFuel = (fuelType || '').toLowerCase();

    // Map fuel types to icon names
    const iconMap = {
        'solar': 'solar',
        'natural gas': 'gas',
        'biomass': 'wood',
        'electric': 'electric',
        'electricity': 'electric',
        'oil': 'oil',
        'heating oil': 'oil',
        'pellet': 'pellet',
        'pellets': 'pellet',
        'electricitysolar': 'solar',
        'electricitycoil': 'coil',
        'wood': 'wood',
        'gas': 'gas',
        'electricitygas': 'gas',
        'electricity f2': 'coil',
        'electricity f1': 'solar',
        'diesel': 'oil',
    };

    // Try to match fuel type first, then fallback to boiler type
    let iconName = iconMap[normalizedFuel];

    if (!iconName) {
        const normalizedType = (boilerType || '').toLowerCase();
        iconName = iconMap[normalizedType] || 'gas'; // default to gas icon
    }

    return `/static/img/boiler-icons/${iconName}.png`;
}

function createBoilerCard(boiler) {
    const statusClass = getStatusClass(boiler);
    const indicatorClass = getStatusIndicatorClass(boiler);
    const iconSrc = getBoilerIcon(boiler.boiler_type, boiler.fuel_type);

    let temperatureDisplay = '';
    if (boiler.current_temp !== undefined) {
        const isHeating = boiler.required_temp_min && boiler.current_temp < boiler.required_temp_min;
        const tempClass = isHeating ? 'heating' : '';

        temperatureDisplay = `
            <div class="temperature-display ${tempClass}">
                <strong>Current: ${boiler.current_temp}°C</strong>
                ${boiler.required_temp_min ? `<br>Required: ${boiler.required_temp_min}°C - ${boiler.required_temp_max || boiler.required_temp_min}°C` : ''}
            </div>
        `;
    }

    let runtimeDisplay = '';
    if (boiler.is_active && boiler.runtime_hours !== undefined) {
        runtimeDisplay = `
            <div class="runtime-info">
                <i class="fas fa-clock"></i> 
                Running: ${boiler.runtime_hours}h
                ${boiler.session_cost ? `<br><i class="fas fa-euro-sign"></i> Cost: €${boiler.session_cost.toFixed(2)}` : ''}
                <br><small>Started: ${formatDateTime(boiler.start_time)}</small>
            </div>
        `;
    }

    return `
        <div class="boiler-card ${statusClass}" id="boiler-${boiler.id}">
            <div class="status-indicator ${indicatorClass}"></div>

            <div class="boiler-type-info">
                <img src="${iconSrc}" alt="${boiler.boiler_type} boiler" class="boiler-icon" 
                     onerror="this.src='/static/img/boiler-icons/gas.svg'">
                <div class="boiler-name">${boiler.name}</div>
            </div>

            <div class="boiler-info">
                <strong>Location:</strong> ${boiler.location}
            </div>

            <div class="boiler-info">
                <strong>Zone:</strong> ${boiler.zone}
            </div>

            <div class="boiler-info">
                <strong>Type:</strong> ${boiler.boiler_type} (${boiler.fuel_type})
            </div>

            ${boiler.rated_power ? `
            <div class="boiler-info">
                <strong>Power:</strong> ${boiler.rated_power} kW
            </div>` : ''}

            ${temperatureDisplay}
            ${runtimeDisplay}
        </div>
    `;
}

function updateStatistics(boilers) {
    const stats = {
        total: boilers.length,
        active: boilers.filter(b => b.is_active).length,
        available: boilers.filter(b => b.is_available).length,
        maintenance: boilers.filter(b => !b.is_available).length
    };

    document.getElementById('total-boilers').textContent = stats.total;
    document.getElementById('active-boilers').textContent = stats.active;
    document.getElementById('available-boilers').textContent = stats.available;
    document.getElementById('maintenance-boilers').textContent = stats.maintenance;
}

function loadBoilerStatus() {
    fetch('/api/boiler-status')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Hide loading/error states
            document.getElementById('loading').style.display = 'none';
            document.getElementById('error').style.display = 'none';
            document.getElementById('boiler-grid').style.display = 'grid';

            // Update statistics
            updateStatistics(data.boilers);

            // Update boiler grid
            const grid = document.getElementById('boiler-grid');
            grid.innerHTML = data.boilers.map(boiler => createBoilerCard(boiler)).join('');

            // Update last updated time
            document.getElementById('last-updated-time').textContent = new Date().toLocaleTimeString();

            // Reset countdown
            resetCountdown();
        })
        .catch(error => {
            console.error('Error loading boiler status:', error);

            // Show error state
            document.getElementById('loading').style.display = 'none';
            document.getElementById('error').style.display = 'block';
            document.getElementById('boiler-grid').style.display = 'none';
        });
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Load initial data
    loadBoilerStatus();

    // Set up auto-refresh every second
    refreshInterval = setInterval(loadBoilerStatus, 1000);

    // Set up countdown timer
    countdownInterval = setInterval(updateCountdown, 1000);
});

// Clean up intervals when page is unloaded
window.addEventListener('beforeunload', function() {
    if (refreshInterval) {
        clearInterval(refreshInterval);
    }
    if (countdownInterval) {
        clearInterval(countdownInterval);
    }
});
</script>
{% endblock %}