{% extends "base.html" %}
{% block title %}Dashboard — Demeter IoT{% endblock %}

{% block content %}
<!-- Stats bar -->
<div class="stats shadow w-full mb-6 bg-base-100">
    <div class="stat">
        <div class="stat-title">Devices</div>
        <div class="stat-value" id="stat-total">{{ devices|length }}</div>
        <div class="stat-desc">Registered</div>
    </div>
    <div class="stat">
        <div class="stat-title">Online</div>
        <div class="stat-value text-success" id="stat-online">{{ devices|selectattr('online')|list|length }}</div>
        <div class="stat-desc">Connected via CoAP</div>
    </div>
    <div class="stat">
        <div class="stat-title">Subscriptions</div>
        <div class="stat-value text-info" id="stat-subs">{{ active_subscriptions }}</div>
        <div class="stat-desc">Active Observe</div>
    </div>
</div>

<!-- Device cards grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="devices-grid">
    {% for device in devices %}
    <div class="card bg-base-100 shadow-xl" id="card-{{ device.config.id }}">
        <div class="card-body">
            <!-- Header -->
            <div class="flex items-center justify-between">
                <h2 class="card-title text-lg">{{ device.config.name }}</h2>
                {% if device.online %}
                <div class="badge badge-success gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10"/>
                    </svg>
                    Online
                </div>
                {% else %}
                <div class="badge badge-error gap-1">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10"/>
                    </svg>
                    Offline
                </div>
                {% endif %}
            </div>

            <p class="text-sm opacity-60">{{ device.config.ip }}:{{ device.config.port }} &middot; {{ device.config.id }}</p>

            <div class="divider my-1"></div>

            <!-- Sensor readings -->
            {% if device.readings %}
                {% for uri, reading in device.readings.items() %}
                <div class="flex justify-between items-center py-1">
                    <span class="text-sm font-medium">
                        {% if 'soil_moisture' in uri %}
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" /></svg>
                            Soil Moisture
                        {% elif 'temperature' in uri %}
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
                            Temperature
                        {% elif 'water_level' in uri %}
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
                            Water Level
                        {% elif 'trigger' in uri %}
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                            Trigger
                        {% else %}
                            {{ uri }}
                        {% endif %}
                    </span>
                    <span class="font-mono text-lg {% if reading.stale %}opacity-40{% endif %}">
                        {% if reading.value is not none %}
                            {{ reading.value }}
                            <span class="text-xs opacity-60">{{ reading.unit }}</span>
                        {% else %}
                            <span class="opacity-40">—</span>
                        {% endif %}
                    </span>
                </div>

                {% if 'soil_moisture' in uri or 'water_level' in uri %}
                <progress
                    class="progress {% if 'soil_moisture' in uri %}progress-success{% else %}progress-info{% endif %} w-full h-2"
                    value="{{ reading.value or 0 }}"
                    max="100">
                </progress>
                {% endif %}
                {% endfor %}
            {% else %}
                <p class="text-sm opacity-40 italic">No readings yet</p>
            {% endif %}

            <!-- Card actions -->
            <div class="card-actions justify-end mt-2">
                <a href="/dashboard/devices/{{ device.config.id }}" class="btn btn-sm btn-outline">Details</a>
            </div>
        </div>
    </div>
    {% endfor %}

    {% if not devices %}
    <div class="col-span-full">
        <div class="alert alert-info">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span>No devices configured. Edit <code>config/devices.yaml</code> and restart the server.</span>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-refresh readings every 5 seconds
setInterval(async () => {
    try {
        const resp = await fetch('/dashboard/api/readings');
        const data = await resp.json();

        // Update online count
        let online = 0;
        for (const [id, dev] of Object.entries(data.devices)) {
            if (dev.online) online++;

            // Update readings in each card
            // (Full re-render would be more robust, but this is POC)
        }

        const statOnline = document.getElementById('stat-online');
        if (statOnline) statOnline.textContent = online;
    } catch (e) {
        console.warn('Auto-refresh failed:', e);
    }
}, 5000);
</script>
{% endblock %}