{% extends "layout.html" %}

{% block title %}OptiWarm - Dashboard{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
        <div class="ml-3 d-inline-block">
            <span class="process-indicator mr-3">
                <span class="status-dot {{ 'status-running' if mqtt_collector_running else 'status-stopped' }}"></span>
                <small>MQTT Sensors Collector</small>
            </span>
            <span class="process-indicator">
                <span class="status-dot {{ 'status-running' if boiler_controller_running else 'status-stopped' }}"></span>
                <small>Boiler Controller</small>
            </span>
        </div>
    </h1>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-primary">
            <i class="fas fa-sync-alt mr-1"></i>Refresh
        </button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Last 24 hours</a>
            <a class="dropdown-item" href="#">Last 7 days</a>
            <a class="dropdown-item" href="#">Last 30 days</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Custom range</a>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="text-center">
                    <h5 class="card-title mb-0">Zone / Location</h5>
                    <p class="display-4 mb-2">{{ active_zones }}/{{ active_locations }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="text-center">
                    <h5 class="card-title mb-0">Active/Available Boilers</h5>
                    <p class="display-4 mb-2">{{ active_boilers }}/{{ total_boilers }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <h5 class="card-title">Average Temperature</h5>
                <p class="display-4 mb-0">{% if avg_temperature %}{{ avg_temperature }}°C{% else %}--°C{% endif %}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <h5 class="card-title">Billing Period Cost</h5>
                <p class="display-4 mb-0">{% if billing_period_cost %}{{ billing_period_cost }}{% else %}--{% endif %}</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Heating Zones</h5>
            </div>
            <div class="card-body">
                {% if zone_temperature_data %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Location</th>
                                    <th>Zone</th>
                                    <th>Current Temp</th>
                                    <th>Min Required</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for zone in zone_temperature_data %}
                                <tr>
                                    <td><a href="{{ url_for('locations.show', id=zone.location_id) }}">{{ zone.location_name }}</a></td>
                                    <td><a href="{{ url_for('zones.show', id=zone.zone_id) }}">{{ zone.zone_name }}</a></td>
                                    <td>
                                        {% if zone.current_temp %}
                                            {{ zone.current_temp }}°C
                                        {% else %}
                                            <span class="text-muted">--</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if zone.min_required_temp %}
                                            {{ zone.min_required_temp }}°C
                                        {% else %}
                                            <span class="text-muted">--</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-info-circle mr-2"></i>
                        No zones currently heating.
                    </div>
                    <div class="text-center py-5">
                        <i class="fas fa-thermometer-half fa-4x text-muted mb-3"></i>
                        <p class="lead">No heating zones active</p>
                        <p class="text-muted">Zones will appear here when heating rules are active</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Active Heating Boilers</h5>
            </div>
            <div class="card-body">
                {% if active_heating_boilers %}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Boiler</th>
                                    <th>Location</th>
                                    <th>Hours</th>
                                    <th>Session Cost</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for boiler in active_heating_boilers %}
                                <tr>
                                    <td><a href="{{ url_for('boilers.show_boiler', id=boiler.boiler_id) }}">{{ boiler.name }}</a></td>
                                    <td>{{ boiler.location_name }}</td>
                                    <td>{{ boiler.hours_running }}h</td>
                                    <td>{{ boiler.session_cost }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-info-circle mr-2"></i>
                        No boilers currently heating.
                    </div>
                    <div class="text-center py-5">
                        <i class="fas fa-fire fa-4x text-muted mb-3"></i>
                        <p class="lead">No active heating</p>
                        <p class="text-muted">Boilers will appear here when they are actively heating</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Recent Activity</h5>
            </div>
            <div class="card-body">
                {% if recent_events %}
                    <div class="alert alert-success" role="alert">
                        <i class="fas fa-check-circle mr-2"></i>
                        Showing recent warming events.
                    </div>
                {% else %}
                    <div class="alert alert-info" role="alert">
                        <i class="fas fa-info-circle mr-2"></i>
                        System activity will be displayed here once you start using OptiWarm.
                    </div>
                {% endif %}
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Timestamp</th>
                                <th>Location</th>
                                <th>Zone</th>
                                <th>Event</th>
                                <th>Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if recent_events %}
                                {% for event in recent_events %}
                                <tr>
                                    <td>{{ event.day_exec.strftime('%Y-%m-%d') if event.day_exec else 'N/A' }}
                                        {% if not event.time_from and not event.time_to %} All Day {% else %}
                                          (
                                            {% if event.time_from %} {{ event.time_from.strftime('%H:%M') }} {% else %} 00:00{% endif %}
                                          -
                                          {% if event.time_to %} {{ event.time_to.strftime('%H:%M') }} {% else %} 24:00 {% endif %}
                                          )
                                        {% endif %}
                                    </td>
                                    <td>{{ event.location_name }}</td>
                                    <td>{{ event.zone_name }}</td>
                                    <td>{{ event.ruletype_name}}</td>
                                    <td>{% if event.active %}Active{% else %}Inactive{% endif %}</td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="5" class="text-center">No activity data</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    .process-indicator {
        display: inline-flex;
        align-items: center;
        font-size: 0.8rem;
    }

    .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .status-running {
        background-color: #28a745;
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
        animation: pulse 2s infinite;
    }

    .status-stopped {
        background-color: #dc3545;
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        }
    }
</style>

<script>
    // This is a placeholder for dashboard JavaScript that would be implemented
    $(document).ready(function() {
        console.log("Dashboard initialized");
        
        // Refresh button functionality
        $(".btn-refresh").click(function() {
            // Would reload dashboard data in a real implementation
            console.log("Refreshing dashboard data...");
        });
    });
</script>
{% endblock %}