"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import { Settings2, RefreshCcw, AlertCircle, CheckCircle2 } from "lucide-react";

export default function ManageRoomsPage() {
  const [rooms, setRooms] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchRooms = async () => {
    try {
      const token = localStorage.getItem("token");
      const res = await axios.get("http://172.17.110.6:8080/api/rooms", {
        headers: { Authorization: `Bearer ${token}` }
      });
      setRooms(res.data.data);
    } catch (err: any) {
      console.error("Error Detail:", err.response?.data || err.message);
      alert("Error dari Server saat ambil ruangan: " + (err.response?.data?.error || err.message));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchRooms();
  }, []);

  // FUNGSI UTAMA: Mengubah status ruangan (Available <-> Maintenance)
  const toggleRoomStatus = async (roomId: number, currentStatus: string) => {
    const newStatus = currentStatus === "Available" ? "Maintenance" : "Available";
    
    try {
      const token = localStorage.getItem("token");
      await axios.put(`http://172.17.110.6:8080/api/admin/rooms/${roomId}/status`, 
        { status: newStatus },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      
      alert(`Status Ruangan berhasil diubah menjadi ${newStatus}`);
      fetchRooms(); // Refresh data agar UI terupdate
    } catch (err: any) {
      console.error("Gagal update:", err.response?.data || err.message);
      alert("Gagal memperbarui status ruangan: " + (err.response?.data?.error || err.message));
    }
  };

  if (loading) return <div className="p-8 text-gray-500 font-medium text-center">Menghubungkan ke Database S-CLASS...</div>;

  return (
    <div className="max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between mb-8">
        <div className="flex items-center gap-3">
          <div className="bg-blue-100 p-3 rounded-lg text-blue-600">
            <Settings2 size={28} />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-gray-800">Manajemen Ruangan</h2>
            <p className="text-gray-500 text-sm mt-1">Atur ketersediaan operasional setiap ruangan di Gedung D.</p>
          </div>
        </div>
        <button onClick={fetchRooms} className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
          <RefreshCcw size={20} />
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* TAMBAHKAN [...rooms].sort(...) SEBELUM .map */}
        {[...rooms]
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((room) => (
          <div key={room.room_id} className={`bg-white p-6 rounded-2xl border transition-all shadow-sm flex items-center justify-between
            ${room.status === 'Maintenance' ? 'border-orange-200 bg-orange-50/20' : 'border-gray-100'}`}>
            
            <div className="space-y-1">
              <div className="flex items-center gap-2 text-gray-400 text-xs font-bold uppercase tracking-wider">
                {room.category} • {room.floor}
              </div>
              <h3 className="text-xl font-bold text-gray-800">{room.name}</h3>
              
              <div className={`flex items-center gap-1.5 text-sm font-bold mt-2
                ${room.status === 'Available' ? 'text-green-600' : 'text-orange-600'}`}>
                {room.status === 'Available' ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                {room.status}
              </div>
            </div>

            <div className="flex flex-col items-end gap-3">
              <button
                onClick={() => toggleRoomStatus(room.room_id, room.status)}
                className={`px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm
                  ${room.status === 'Available' 
                    ? 'bg-orange-100 text-orange-700 hover:bg-orange-600 hover:text-white' 
                    : 'bg-green-100 text-green-700 hover:bg-green-600 hover:text-white'}`}
              >
                Set to {room.status === 'Available' ? 'Maintenance' : 'Available'}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}