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

"use client";

import { useState, useEffect } from "react";
// Import ikon yang diperlukan
import { Activity, Power, ZapOff, AlertTriangle, Lightbulb, Wind, Projector } from "lucide-react";

export default function PowerMonitoringPage() {

  const fetchPowerStatus = async () => {
  try {
    const response = await fetch("http://172.17.110.6:8080/api/hardware/power-status");
    const data = await response.json();
    
    // Asumsikan data dari HA berupa string angka, kita update ke room D101
    setRooms(prev => prev.map(room => 
      room.name === "Kelas D101" ? { ...room, power: parseFloat(data.power) || 0 } : room
    ));
  } catch (err) {
    console.error("Gagal mengambil data daya:", err);
  }
};

useEffect(() => {
  // Ambil data awal
  fetchPowerStatus();

  // Set interval untuk update setiap 5 detik agar real-time sesuai HA
  const interval = setInterval(fetchPowerStatus, 5000);
  
  return () => clearInterval(interval);
}, []);
  const [rooms, setRooms] = useState<any[]>([]);

  // 1. STATE BARU: Dipisahkan berdasarkan ID Ruangan agar tidak bentrok
  const [roomDeviceStatus, setRoomDeviceStatus] = useState<{ [roomId: string]: { [deviceName: string]: boolean } }>({});

  useEffect(() => {
    // Simulasi Data Ruangan dari IoT
    const dummyRooms = [
      { id: 1, name: "Kelas D101", power: 1250, isRelayOn: true, lastUpdate: "Baru saja" },
      { id: 2, name: "Kelas D102", power: 0, isRelayOn: false, lastUpdate: "2 mnt lalu" },
      { id: 3, name: "Kelas D103", power: 45, isRelayOn: true, lastUpdate: "Baru saja" },
      { id: 4, name: "Kelas D104", power: 0, isRelayOn: false, lastUpdate: "10 mnt lalu" },
    ];
    setRooms(dummyRooms);

    // Inisialisasi status default (semua OFF) untuk setiap ruangan
    const initialStatus: { [roomId: string]: { [deviceName: string]: boolean } } = {};
    dummyRooms.forEach(room => {
      initialStatus[`room_${room.id}`] = {
        "Lampu 1": false,
        "Lampu 2": false,
        "AC 1": false,
        "Proyektor": false,
      };
    });
    setRoomDeviceStatus(initialStatus);
  }, []);

  // 2. FUNGSI HANDLE TOGGLE YANG DIPERBAIKI (Menerima roomId)
  const handleDeviceToggle = async (roomId: number, roomName: string, deviceName: string) => {
    const roomIdKey = `room_${roomId}`;
    const currentStatus = roomDeviceStatus[roomIdKey]?.[deviceName] || false;
    const actionType = currentStatus ? "off" : "on";

    const confirmMsg = `Apakah Anda yakin ingin mematikan ${deviceName} di ${roomName}?`;
    if (currentStatus && !confirm(confirmMsg)) return;

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

    try {
      // Tembak API Golang (Ganti dengan endpoint aslimu jika berbeda)
      const response = await fetch("http://172.17.110.6:8080/api/hardware/control", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ device: backendDevice, action: actionType }),
      });

      if (response.ok) {
        // 3. UPDATE STATE HANYA UNTUK RUANGAN YANG DIKLIK
        setRoomDeviceStatus(prev => ({
          ...prev,
          [roomIdKey]: {
            ...prev[roomIdKey],
            [deviceName]: !currentStatus,
          },
        }));
      } else {
        const errorData = await response.json();
        alert(`GAGAL: ${errorData.error || response.statusText}`);
      }
    } catch (error) {
      console.error("Error API:", error);
      alert("GAGAL: Tidak dapat terhubung ke Server Golang.");
    }
  };

  const handleCutOff = (roomName: string) => {
    if (confirm(`PERINGATAN: Anda yakin ingin mematikan daya secara paksa di ${roomName}?`)) {
      alert(`Sinyal pemutusan daya dikirim ke Relay Master ${roomName}.`);
    }
  };

  return (
    <div className="space-y-6">
      {/* Header section... */}
      <div className="flex items-center gap-3 mb-6">
        <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">Power Monitoring & Control</h2>
          <p className="text-gray-500 text-sm mt-1">Pantau konsumsi daya kWh meter dan kendalikan *relay* sirkuit ruangan.</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {[...rooms].sort((a, b) => a.name.localeCompare(b.name)).map((room) => {
          
          // Ambil status spesifik untuk ruangan ini
          const roomIdKey = `room_${room.id}`;
          const currentRoomStatus = roomDeviceStatus[roomIdKey] || {};

          return (
            <div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col">
              
              {/* Status Badge */}
              <div className={`absolute top-0 right-0 px-4 py-1.5 text-[10px] font-black uppercase tracking-wider rounded-bl-xl
                ${room.isRelayOn ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                {room.isRelayOn ? 'Sirkuit Aktif' : 'Sirkuit Terputus'}
              </div>

              <h3 className="text-lg font-bold text-gray-800 mb-4">{room.name}</h3>
              
              {/* Power display... */}
              <div className="flex items-end gap-2 mb-6">
                <span className={`text-5xl font-black tracking-tight ${room.power > 1000 ? 'text-orange-500' : 'text-gray-800'}`}>
                  {room.power}
                </span>
                <span className="text-gray-500 font-bold mb-1.5">Watts</span>
              </div>

              {room.power > 1000 && (
                <div className="flex items-center gap-2 text-xs font-bold text-orange-600 bg-orange-50 p-2 rounded-lg mb-4">
                  <AlertTriangle size={14} /> Beban Tinggi Terdeteksi!
                </div>
              )}

              {/* 3. PANEL KONTROL IoT BARU DENGAN LOGIKA WARNA DIPERBAIKI */}
              <div className="mt-2 mb-6 pt-4 border-t border-gray-100">
                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3">IoT Device Control</p>
                <div className="grid grid-cols-2 gap-2">
                  
                  {/* LAMPU 1 */}
                  <button 
                    onClick={() => handleDeviceToggle(room.id, room.name, 'Lampu 1')} 
                    disabled={!room.isRelayOn}
                    className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
                      ${currentRoomStatus['Lampu 1'] 
                        ? 'bg-yellow-100 text-yellow-600 border border-yellow-200' 
                        : 'bg-gray-50 text-gray-400 border border-transparent'}`}
                  >
                    <Lightbulb size={14} className={currentRoomStatus['Lampu 1'] ? "fill-yellow-500" : ""} /> Lampu 1
                  </button>

                  {/* LAMPU 2 */}
                  <button 
                    onClick={() => handleDeviceToggle(room.id, room.name, 'Lampu 2')} 
                    disabled={!room.isRelayOn}
                    className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
                      ${currentRoomStatus['Lampu 2'] 
                        ? 'bg-yellow-100 text-yellow-600 border border-yellow-200' 
                        : 'bg-gray-50 text-gray-400 border border-transparent'}`}
                  >
                    <Lightbulb size={14} className={currentRoomStatus['Lampu 2'] ? "fill-yellow-500" : ""} /> Lampu 2
                  </button>

                  {/* AC 1 */}
                  <button 
                    onClick={() => handleDeviceToggle(room.id, room.name, 'AC 1')} 
                    disabled={!room.isRelayOn}
                    className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
                      ${currentRoomStatus['AC 1'] 
                        ? 'bg-blue-100 text-blue-600 border border-blue-200' 
                        : 'bg-gray-50 text-gray-400 border border-transparent'}`}
                  >
                    <Wind size={14} className={currentRoomStatus['AC 1'] ? "animate-pulse" : ""} /> AC 1
                  </button>

                  {/* PROYEKTOR */}
                  <button 
                    onClick={() => handleDeviceToggle(room.id, room.name, 'Proyektor')} 
                    disabled={!room.isRelayOn}
                    className={`flex justify-center items-center gap-2 p-2 rounded-lg text-xs font-bold transition-all
                      ${currentRoomStatus['Proyektor'] 
                        ? 'bg-purple-100 text-purple-600 border border-purple-200' 
                        : 'bg-gray-50 text-gray-400 border border-transparent'}`}
                  >
                    <Projector size={14} /> Proyektor
                  </button>

                </div>
              </div>

              {/* Footer... */}
              <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
                <span className="text-xs text-gray-400 font-medium">Update: {room.lastUpdate}</span>
                <button 
                  onClick={() => handleCutOff(room.name)}
                  disabled={!room.isRelayOn}
                  className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold transition-all
                    ${room.isRelayOn 
                      ? 'bg-red-50 text-red-600 hover:bg-red-600 hover:text-white border border-red-200 hover:border-red-600' 
                      : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
                >
                  {room.isRelayOn ? <><Power size={14} /> Cut Off Power</> : <><ZapOff size={14} /> Offline</>}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}