import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getDatabase, ref, onValue, set, push } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-database.js";

// 🔥 CONFIG
const firebaseConfig = {
  apiKey: "AIzaSyC-Wdu6vNC0dRyF33S3_C2wpVt9I6wnp0w",
  authDomain: "smartoven-f9fdd.firebaseapp.com",
  databaseURL: "https://smartoven-f9fdd-default-rtdb.firebaseio.com/",
  projectId: "smartoven-f9fdd",
  appId: "1:1005261996032:web:1bcb483b922275f08f98e5"
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

// 🔥 ELEMENT
const suhuEl = document.getElementById("suhu");
const humEl = document.getElementById("kelembaban");
const logEl = document.getElementById("log");
const heaterEl = document.getElementById("heater");
const fanEl = document.getElementById("fan");
const historyTable = document.getElementById("historyTable");

// =======================
// 🔥 REALTIME SENSOR
// =======================
onValue(ref(db, 'sensor'), (snapshot) => {
    const data = snapshot.val();
    if (!data) return;

    const time = new Date().toLocaleTimeString();

    if (suhuEl) suhuEl.innerText = data.suhu + " °C";
    if (humEl) humEl.innerText = data.kelembaban + " %";

    if (logEl) {
        logEl.innerHTML += `
        <tr>
            <td>${time}</td>
            <td>${data.suhu}</td>
            <td>${data.kelembaban}</td>
        </tr>`;
    }

    // simpan ke history
    push(ref(db, 'history'), {
        suhu: data.suhu,
        kelembaban: data.kelembaban,
        waktu: time
    });
});

// =======================
// 🔥 STATUS CONTROL
// =======================
onValue(ref(db, 'control'), (snap) => {
    const d = snap.val();
    if (!d) return;

    if (heaterEl) {
        heaterEl.innerText = d.heater ? "ON" : "OFF";
        heaterEl.className = d.heater ? "text-green-500" : "text-red-500";
    }

    if (fanEl) {
        fanEl.innerText = d.fan ? "ON" : "OFF";
        fanEl.className = d.fan ? "text-green-500" : "text-red-500";
    }
});

// =======================
// 🔥 KONTROL
// =======================
window.setHeater = (val) => {
    set(ref(db, 'control/heater'), val);
};

window.setFan = (val) => {
    set(ref(db, 'control/fan'), val);
};

window.setTarget = () => {
    const suhu = document.getElementById("targetSuhu").value;
    if (!suhu) return alert("Isi suhu!");
    set(ref(db, 'control/target_suhu'), parseInt(suhu));
};

// =======================
// 🔥 HISTORY TABLE
// =======================
onValue(ref(db, 'history'), (snap) => {
    const data = snap.val();
    if (!data || !historyTable) return;

    historyTable.innerHTML = "";

    Object.values(data).reverse().forEach(d => {

        let status = "Normal";
        let color = "text-green-500";

        if (d.suhu > 50) {
            status = "Panas";
            color = "text-red-500";
        } else if (d.suhu < 30) {
            status = "Dingin";
            color = "text-blue-500";
        }

        historyTable.innerHTML += `
        <tr class="hover:bg-gray-50 transition">
            <td class="px-4 py-3">${d.waktu}</td>
            <td class="px-4 py-3 font-semibold">${d.suhu} °C</td>
            <td class="px-4 py-3">${d.kelembaban} %</td>
            <td class="px-4 py-3 ${color} font-semibold">${status}</td>
        </tr>`;
    });
});