Skripsi_Valentino_5103022014/frontend/app/admin/monitoring/page.tsx

"use client";

import { useState, useEffect } from "react";
import { Activity, Power, AlertTriangle, Lightbulb, Wind, Projector, Zap } from "lucide-react";

export default function PowerMonitoringPage() {
  // =========================================================================
  // 1. DEKLARASI STATE UNTUK KELAS D101
  // =========================================================================
  const [powerData, setPowerData] = useState({ umum: 0, ac1: 0, ac2: 0 });
  const [deviceStatus, setDeviceStatus] = useState({
    "Lampu 1": false,
    "Lampu 2": false,
    "AC": false,
    "Proyektor": false,
  });
  const [isRelayOn, setIsRelayOn] = useState(true); // Status apakah ruangan terkunci/terbuka
  const [lastUpdate, setLastUpdate] = useState("Menunggu data...");

  // =========================================================================
  // 2. FUNGSI FETCH DATA DARI BACKEND GOLANG
  // =========================================================================
  
  // A. Tarik Data Daya dari 3 MCB (Umum, AC1, AC2)
  const fetchPowerStatus = async () => {
    try {
      // Pastikan route ini sesuai dengan router.GET di main.go Golang kamu
      const response = await fetch("http://172.17.172.17:8080/api/hardware/power-status");
      if (response.ok) {
        const data = await response.json();
        setPowerData({
          umum: parseFloat(data.umum) || 0,
          ac1: parseFloat(data.ac1) || 0,
          ac2: parseFloat(data.ac2) || 0,
        });
        
        const now = new Date();
        setLastUpdate(`${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`);
      }
    } catch (err) {
      console.error("Gagal mengambil data daya:", err);
    }
  };

  // B. Tarik Data Status Perangkat IoT
  const fetchDeviceStatus = async () => {
    try {
      const response = await fetch("http://172.17.172.17:8080/api/hardware/status");
      const result = await response.json();
      
      if (result.status === "success") {
        const backendData = result.data;
        setDeviceStatus({
          "Lampu 1": backendData.lampu1 === "on",
          "Lampu 2": backendData.lampu2 === "on",
          "AC": backendData.ac === "on",
          "Proyektor": backendData.projector === "on",
        });
        // Jika semua mati dan gemboknya aktif, bisa kita asumsikan ruangan off
        // Tergantung bagaimana logika "auth" kamu di frontend
      }
    } catch (err) {
      console.error("Gagal sinkronisasi status perangkat:", err);
    }
  };

  // =========================================================================
  // 3. INISIALISASI & POLLING (AUTO-REFRESH 3 DETIK)
  // =========================================================================
  useEffect(() => {
    fetchPowerStatus();
    fetchDeviceStatus();

    const interval = setInterval(() => {
      fetchPowerStatus();
      fetchDeviceStatus();
    }, 3000); 
    
    return () => clearInterval(interval);
  }, []);

  // =========================================================================
  // 4. FUNGSI KONTROL DEVICE & CUT OFF
  // =========================================================================
  const handleDeviceToggle = async (deviceName: string) => {
    // Tentukan kunci array state yang benar
    const key = deviceName as keyof typeof deviceStatus;
    const currentStatus = deviceStatus[key];
    const actionType = currentStatus ? "off" : "on";

    if (currentStatus) {
      if (!window.confirm(`Apakah Anda yakin ingin mematikan ${deviceName}?`)) return;
    }

    let backendDevice = "";
    if (deviceName === 'AC') backendDevice = "ac";
    else if (deviceName === 'Proyektor') backendDevice = "projector";
    else if (deviceName === 'Lampu 1') backendDevice = "lampu1";
    else if (deviceName === 'Lampu 2') backendDevice = "lampu2";

    // Optimistic UI (Berubah cepat di layar)
    setDeviceStatus(prev => ({ ...prev, [key]: !currentStatus }));

    try {
      const response = await fetch("http://172.17.172.17:8080/api/hardware/control", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ device: backendDevice, action: actionType }),
      });

      if (!response.ok) {
        setDeviceStatus(prev => ({ ...prev, [key]: currentStatus }));
        const errorData = await response.json();
        alert(`GAGAL: ${errorData.error || "Server menolak perintah"}`);
      }
    } catch (error) {
      console.error("Error API:", error);
      setDeviceStatus(prev => ({ ...prev, [key]: currentStatus }));
      alert("GAGAL: Tidak dapat terhubung ke Server Golang.");
    }
  };

  // FUNGSI CUT OFF 3 MCB SEKALIGUS
  const handleCutOff = async () => {
    if (!window.confirm(`PERINGATAN FATAL: Anda yakin ingin memutus 3 MCB Daya di Kelas D101 secara paksa?`)) return;
    
    try {
      const response = await fetch("http://172.17.172.17:8080/api/cutoff", {
        method: "POST",
      });

      if (response.ok) {
        alert(`Daya di Kelas D101 berhasil diputus!`);
        setIsRelayOn(false);
        fetchPowerStatus(); // Paksa update layar agar jadi 0 Watt
        fetchDeviceStatus(); // Paksa update icon perangkat mati
      } else {
        alert("Gagal memutus daya. Cek koneksi server.");
      }
    } catch (error) {
      console.error(error);
      alert("Terjadi kesalahan jaringan saat memutus daya.");
    }
  };

  // Hitung total daya
  const totalPower = powerData.umum + powerData.ac1 + powerData.ac2;

  // =========================================================================
  // 5. TAMPILAN UI (RENDER)
  // =========================================================================
  return (
    <div className="space-y-6 max-w-6xl mx-auto">
      {/* HEADER SECTION */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div className="flex items-center gap-3">
          <div className="bg-blue-100 p-3 rounded-lg text-blue-600">
            <Activity size={28} />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-gray-800">S-CLASS Power Monitoring</h2>
            <p className="text-gray-500 text-sm mt-1">Pantau beban 3 MCB utama & kendalikan perangkat Kelas D101.</p>
          </div>
        </div>
        
        <button 
          onClick={handleCutOff}
          className="flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-xl font-bold shadow-lg transition-all duration-200"
        >
          <Power size={20} /> GLOBAL CUT OFF
        </button>
      </div>

      {/* TOTAL POWER SUMMARY */}
      <div className="bg-gray-900 text-white p-6 rounded-2xl shadow-lg flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="flex items-center gap-4">
          <div className="bg-gray-800 p-4 rounded-full">
            <Zap size={32} className="text-yellow-400" />
          </div>
          <div>
            <h3 className="text-lg text-gray-300 font-semibold">Total Konsumsi Daya (D101)</h3>
            <p className="text-sm text-gray-400">Update terakhir: {lastUpdate}</p>
          </div>
        </div>
        <div className="text-right">
          <span className={`text-5xl font-black ${totalPower > 3000 ? 'text-red-400' : 'text-yellow-400'}`}>
            {totalPower.toFixed(1)}
          </span>
          <span className="text-2xl text-gray-400 ml-2">Watts</span>
        </div>
      </div>

      {/* 3 MCB MONITORING CARDS */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* MCB UMUM */}
        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden">
          <div className="absolute top-0 right-0 px-3 py-1 text-[10px] font-black uppercase bg-blue-100 text-blue-700 rounded-bl-xl">MCB 1</div>
          <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider mb-1">Jalur Umum</h3>
          <p className="text-xs text-gray-400 mb-4">Lampu, Proyektor & Stop Kontak</p>
          <div className="flex items-end gap-2">
            <span className="text-4xl font-black text-gray-800">{powerData.umum.toFixed(1)}</span>
            <span className="text-gray-500 font-bold mb-1">W</span>
          </div>
        </div>

        {/* MCB AC 1 */}
        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden">
          <div className="absolute top-0 right-0 px-3 py-1 text-[10px] font-black uppercase bg-teal-100 text-teal-700 rounded-bl-xl">MCB 2</div>
          <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider mb-1">Pendingin 1</h3>
          <p className="text-xs text-gray-400 mb-4">Air Conditioner Unit 1</p>
          <div className="flex items-end gap-2">
            <span className="text-4xl font-black text-gray-800">{powerData.ac1.toFixed(1)}</span>
            <span className="text-gray-500 font-bold mb-1">W</span>
          </div>
        </div>

        {/* MCB AC 2 */}
        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden">
          <div className="absolute top-0 right-0 px-3 py-1 text-[10px] font-black uppercase bg-teal-100 text-teal-700 rounded-bl-xl">MCB 3</div>
          <h3 className="text-sm font-bold text-gray-500 uppercase tracking-wider mb-1">Pendingin 2</h3>
          <p className="text-xs text-gray-400 mb-4">Air Conditioner Unit 2</p>
          <div className="flex items-end gap-2">
            <span className="text-4xl font-black text-gray-800">{powerData.ac2.toFixed(1)}</span>
            <span className="text-gray-500 font-bold mb-1">W</span>
          </div>
        </div>
      </div>

      {totalPower > 3500 && (
        <div className="flex items-center gap-3 bg-red-50 border border-red-200 text-red-700 p-4 rounded-xl font-bold animate-pulse">
          <AlertTriangle size={24} /> PERINGATAN: Beban Kelas D101 melebihi batas aman (3500W)!
        </div>
      )}

      {/* IOT DEVICE CONTROLS */}
      <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm mt-6">
        <h3 className="text-lg font-bold text-gray-800 mb-4">Kontrol Perangkat Kelas D101</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          
          <button 
            onClick={() => handleDeviceToggle('Lampu 1')} 
            className={`flex flex-col items-center justify-center gap-3 p-4 rounded-xl font-bold transition-all border-2
              ${deviceStatus['Lampu 1'] ? 'bg-yellow-50 border-yellow-400 text-yellow-700' : 'bg-gray-50 border-transparent text-gray-400 hover:bg-gray-100'}`}
          >
            <Lightbulb size={28} className={deviceStatus['Lampu 1'] ? "fill-yellow-400" : ""} /> Lampu 1
          </button>

          <button 
            onClick={() => handleDeviceToggle('Lampu 2')} 
            className={`flex flex-col items-center justify-center gap-3 p-4 rounded-xl font-bold transition-all border-2
              ${deviceStatus['Lampu 2'] ? 'bg-yellow-50 border-yellow-400 text-yellow-700' : 'bg-gray-50 border-transparent text-gray-400 hover:bg-gray-100'}`}
          >
            <Lightbulb size={28} className={deviceStatus['Lampu 2'] ? "fill-yellow-400" : ""} /> Lampu 2
          </button>

          <button 
            onClick={() => handleDeviceToggle('AC')} 
            className={`flex flex-col items-center justify-center gap-3 p-4 rounded-xl font-bold transition-all border-2
              ${deviceStatus['AC'] ? 'bg-blue-50 border-blue-400 text-blue-700' : 'bg-gray-50 border-transparent text-gray-400 hover:bg-gray-100'}`}
          >
            <Wind size={28} className={deviceStatus['AC'] ? "animate-pulse" : ""} /> AC Ruangan
          </button>

          <button 
            onClick={() => handleDeviceToggle('Proyektor')} 
            className={`flex flex-col items-center justify-center gap-3 p-4 rounded-xl font-bold transition-all border-2
              ${deviceStatus['Proyektor'] ? 'bg-purple-50 border-purple-400 text-purple-700' : 'bg-gray-50 border-transparent text-gray-400 hover:bg-gray-100'}`}
          >
            <Projector size={28} className={deviceStatus['Proyektor'] ? "fill-purple-400" : ""} /> Proyektor
          </button>

        </div>
      </div>
    </div>
  );
}