Skripsi_Valentino_5103022014/frontend/app/admin/page.tsx

"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import { Zap, Check, X, Info, Activity } from "lucide-react";

export default function AdminDashboard() {
  const [pendingBookings, setPendingBookings] = useState<any[]>([]);
  const [roomStats, setRoomStats] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAdminData();
    // Refresh data konsumsi daya setiap 10 detik agar terlihat real-time
    const interval = setInterval(fetchAdminData, 10000);
    return () => clearInterval(interval);
  }, []);

  const fetchAdminData = async () => {
    try {
      const token = localStorage.getItem("token");
      
      // 1. Ambil SEMUA booking pakai endpoint yang sudah ada, lalu filter di Frontend
      const bookRes = await axios.get("http://172.17.110.6:8080/api/bookings", { 
        headers: { Authorization: `Bearer ${token}` } 
      });
      
      const allBookings = bookRes.data.data || [];
      // Saring hanya yang statusnya "Pending" atau kosong
      const pendingOnly = allBookings.filter((b: any) => b.status === "Pending" || !b.status);
      setPendingBookings(pendingOnly);

      // 2. Ambil daftar ruangan biasa, lalu kita sisipkan "Dummy Power" untuk UI
      const roomRes = await axios.get("http://172.17.110.6:8080/api/rooms", { 
        headers: { Authorization: `Bearer ${token}` } 
      });
      
      const roomsWithDummyPower = (roomRes.data.data || []).map((room: any) => ({
        ...room,
        // Simulasi daya acak antara 0 sampai 15 Watt untuk keperluan UI
        power_consumption: Math.floor(Math.random() * 15) 
      }));
      setRoomStats(roomsWithDummyPower);

    } catch (err) {
      console.error("Gagal ambil data admin", err);
    } finally {
      setLoading(false);
    }
  };

  // PERBAIKAN 1: Ubah tipe id menjadi 'string' karena kita menggunakan UUID
  const handleAction = async (id: string, status: string) => {
    try {
      const token = localStorage.getItem("token");
      // Mengirim status 'Approved' atau 'Rejected' ke backend
      await axios.put(`http://172.17.110.6:8080/api/bookings/${id}/status`, 
        { status: status }, 
        { headers: { Authorization: `Bearer ${token}` } }
      );
      alert(`Permintaan berhasil di-${status}`);
      fetchAdminData(); // Refresh data setelah aksi
    } catch (err: any) {
      console.error(err);
      alert("Gagal memproses pendaftaran.");
    }
  };

  if (loading) return <div className="p-10 font-medium text-gray-500">Memasuki Mode Admin...</div>;

  return (
    <div className="space-y-8">
      {/* SECTION 1: POWER MONITORING CARDS */}
      <div>
        <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
          <Activity className="text-blue-500" /> Real-time Room Energy
        </h2>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {/* TAMBAHKAN PENGURUTAN ABJAD DI SINI */}
          {[...roomStats]
            .sort((a, b) => a.name.localeCompare(b.name))
            .map((room) => (
            <div key={room.room_id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
              <div className="flex justify-between items-start mb-3">
                <span className="text-sm font-bold text-gray-400 uppercase tracking-tight">{room.name}</span>
                <div className={`h-3 w-3 rounded-full ${room.power_consumption > 5 ? 'bg-orange-500 animate-pulse' : 'bg-gray-300'}`} />
              </div>
              <div className="flex items-end gap-2">
                <span className="text-3xl font-black text-gray-800">{room.power_consumption || 0}</span>
                <span className="text-gray-500 font-bold mb-1">Watts</span>
              </div>
              <p className="text-[10px] text-gray-400 mt-2 font-medium">Last updated: Just now</p>
            </div>
          ))}
        </div>
      </div>

      {/* SECTION 2: APPROVAL TABLE */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="p-6 border-b border-gray-50 flex justify-between items-center">
          <h2 className="text-xl font-bold text-gray-800">Pending Approvals</h2>
          <span className="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold">
            {pendingBookings.length} Requests
          </span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead className="bg-gray-50 text-gray-500 text-xs font-bold uppercase">
              <tr>
                <th className="p-4">Peminjam</th>
                <th className="p-4">Ruangan</th>
                <th className="p-4">Tanggal & Waktu</th>
                <th className="p-4">Keperluan</th>
                <th className="p-4 text-center">Tindakan</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {pendingBookings.map((b) => (
                // PERBAIKAN 2: Gunakan booking_id sebagai key
                <tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name || "Tanpa Nama"}</td>
                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name || "Ruangan Tidak Diketahui"}</td>
                  
                  {/* PERBAIKAN 3: Format Waktu Mulai dan Selesai yang Rapi */}
                  <td className="p-4 text-sm text-gray-600">
                    <div className="font-bold">
                      {new Date(b.start_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})} - {new Date(b.end_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}
                    </div>
                    <div className="text-xs text-gray-400">
                      {new Date(b.start_time).toLocaleDateString('id-ID')}
                    </div>
                  </td>

                  <td className="p-4 text-sm text-gray-600 truncate max-w-60">{b.purpose}</td>
                  <td className="p-4">
                    <div className="flex justify-center gap-2">
                      {/* PERBAIKAN 4: Gunakan b.booking_id di fungsi onClick */}
                      <button 
                        onClick={() => handleAction(b.booking_id, 'Approved')} 
                        className="p-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors"
                      >
                        <Check size={18} />
                      </button>
                      <button 
                        onClick={() => handleAction(b.booking_id, 'Rejected')} 
                        className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
                      >
                        <X size={18} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
              {pendingBookings.length === 0 && (
                <tr>
                  <td colSpan={5} className="p-10 text-center text-gray-400 text-sm italic">Tidak ada permintaan menunggu.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}