{% extends "base.html" %}
{% block title %}لوحة التحكم — KFS Smart Farm{% endblock %}
{% block content %}
<section class="grid nodes" id="nodes"><p class="muted">جاري تحميل القراءات…</p></section>

<section class="grid two">
    <div class="card">
        <div class="card-head">
            <h2>آخر القراءات</h2>
            <div class="seg">
                <select id="metric">
                    <option value="soil_moisture_pct">رطوبة التربة %</option>
                    <option value="air_temp_c">حرارة الهواء °C</option>
                    <option value="air_humidity_pct">رطوبة الهواء %</option>
                    <option value="light">الإضاءة (ADC)</option>
                    <option value="battery_v">البطارية V</option>
                </select>
                <select id="hours">
                    <option value="24">24 ساعة</option>
                    <option value="168">7 أيام</option>
                </select>
            </div>
        </div>
        <canvas id="chart" height="130"></canvas>
    </div>

    <div class="card">
        <h2>التحكم عن بعد</h2>
        <form id="control" class="control">
            <label>العقدة
                <select name="node_id">{% for n in nodes %}<option value="{{ n.node_id }}">{{ n.name or n.node_id }}</option>{% endfor %}</select>
            </label>
            <label>الجهاز
                <select name="actuator"><option value="pump">مضخة الري (Relay 1)</option><option value="fan">مروحة الصوبة (Relay 2)</option></select>
            </label>
            <label>المدة (دقائق، بحد أقصى {{ pump_max }})
                <input name="duration_min" type="number" min="1" max="{{ pump_max }}" value="5">
            </label>
            <div class="row">
                <button type="button" class="btn primary" data-action="on">تشغيل</button>
                <button type="button" class="btn" data-action="off">إيقاف</button>
            </div>
            <p class="muted small">الأمر يصل للعقدة عند أول استعلام (كل 30 ثانية) وينتهي تلقائياً إذا لم يُستلم خلال 10 دقائق.</p>
        </form>
    </div>
</section>

<section class="grid two">
    <div class="card">
        <h2>توقع الري (نموذج الذكاء الاصطناعي)</h2>
        <div id="predictions" class="preds"></div>
    </div>
    <div class="card">
        <h2>سجل القرارات والتنبيهات</h2>
        <ul id="decisions" class="log"></ul>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}