"use client";

import { useState, useEffect } from "react";
// 1. IMPORT IKON BARU DI SINI
import { Activity, Power, ZapOff, AlertTriangle, Lightbulb, Wind, Projector } from "lucide-react";

export default function PowerMonitoringPage() {
  const [rooms, setRooms] = useState<any[]>([]);

  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);
  }, []);

  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}.`);
      // Nanti di sini kamu pasang axios.post ke Golang -> MQTT -> ESP32
    }
  };

  // 2. FUNGSI BARU UNTUK KONTROL PERANGKAT SPESIFIK
  const handleDeviceToggle = (roomName: string, deviceName: string) => {
    alert(`Mengirim sinyal IoT untuk menyalakan/mematikan [${deviceName}] di [${roomName}]...`);
    // Nanti ganti dengan axios.put(`http://localhost:8080/api/rooms/.../device`, { device: deviceName })
  };

  return (
    <div className="space-y-6">
      <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">
        {/* SUDAH DITAMBAHKAN PENGURUTAN ABJAD AGAR RAPI */}
        {[...rooms]
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((room) => (
          <div key={room.id} className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm relative overflow-hidden flex flex-col">
            
            {/* Indikator Status di Pojok Kanan Atas */}
            <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>
            
            <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 */}
            <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">
                <button 
                  onClick={() => handleDeviceToggle(room.name, 'Lampu 1')} 
                  disabled={!room.isRelayOn}
                  className="flex justify-center items-center gap-2 p-2 bg-blue-50 text-blue-600 rounded-lg text-xs font-bold hover:bg-blue-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Lightbulb size={14} /> Lampu 1
                </button>
                <button 
                  onClick={() => handleDeviceToggle(room.name, 'Lampu 2')} 
                  disabled={!room.isRelayOn}
                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Lightbulb size={14} /> Lampu 2
                </button>
                <button 
                  onClick={() => handleDeviceToggle(room.name, 'AC 1')} 
                  disabled={!room.isRelayOn}
                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Wind size={14} /> AC 1
                </button>
                <button 
                  onClick={() => handleDeviceToggle(room.name, 'AC 2')} 
                  disabled={!room.isRelayOn}
                  className="flex justify-center items-center gap-2 p-2 bg-gray-50 text-gray-600 rounded-lg text-xs font-bold hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Wind size={14} /> AC 2
                </button>
                <button 
                  onClick={() => handleDeviceToggle(room.name, 'Proyektor')} 
                  disabled={!room.isRelayOn}
                  className="col-span-2 flex justify-center items-center gap-2 p-2 bg-purple-50 text-purple-600 rounded-lg text-xs font-bold hover:bg-purple-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Projector size={14} /> Proyektor
                </button>
              </div>
            </div>

            <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>
  );
}