Skripsi_Valentino_5103022014/frontend/app/dashboard/bookings/calendar/page.tsx

"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import { CalendarDays, MapPin, Clock, ChevronLeft, ChevronRight, Calendar as CalendarIcon } from "lucide-react";

export default function CalendarViewPage() {
  const [bookings, setBookings] = useState<any[]>([]);
  const [rooms, setRooms] = useState<any[]>([]);
  const [schedules, setSchedules] = useState<any[]>([]); // 1. STATE BARU UNTUK JADWAL KULIAH
  const [loading, setLoading] = useState(true);

  // --- STATE UNTUK NAVIGASI MINGGU ---
  const [startDate, setStartDate] = useState(() => {
    const d = new Date();
    d.setHours(0, 0, 0, 0); 
    return d;
  });

  // Generate 7 Hari ke depan berdasarkan startDate
  const weekDates = Array.from({ length: 7 }).map((_, i) => {
    const d = new Date(startDate);
    d.setDate(startDate.getDate() + i);
    return d;
  });

  // FORMAT RENTANG TANGGAL
  const firstDay = weekDates[0].toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
  const lastDay = weekDates[6].toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
  const dateRangeLabel = `${firstDay} - ${lastDay}`;

  // Fungsi Navigasi
  const goToPreviousWeek = () => {
    setStartDate(prev => {
      const newDate = new Date(prev);
      newDate.setDate(prev.getDate() - 7);
      return newDate;
    });
  };

  const goToNextWeek = () => {
    setStartDate(prev => {
      const newDate = new Date(prev);
      newDate.setDate(prev.getDate() + 7);
      return newDate;
    });
  };

  const goToToday = () => {
    const d = new Date();
    d.setHours(0, 0, 0, 0);
    setStartDate(d);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const token = localStorage.getItem("token");
        // 2. FETCH DATA SCHEDULES BERSAMAAN DENGAN ROOMS & BOOKINGS
        const [roomsRes, bookingsRes, schedulesRes] = await Promise.all([
          axios.get("http://172.17.110.6:8080/api/rooms", { headers: { Authorization: `Bearer ${token}` } }),
          axios.get("http://172.17.110.6:8080/api/bookings", { headers: { Authorization: `Bearer ${token}` } }),
          axios.get("http://172.17.110.6:8080/api/schedules", { headers: { Authorization: `Bearer ${token}` } })
        ]);
        
        setRooms(roomsRes.data.data || []);
        setBookings(bookingsRes.data.data || []);
        setSchedules(schedulesRes.data.data || []);
      } catch (error) {
        console.error("Gagal memuat data", error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  // Fungsi memfilter booking dinamis
  const getBookingsForCell = (roomId: number, dateObj: Date) => {
    return bookings.filter(b => {
      if (b.room_id !== roomId) return false;
      const bDate = new Date(b.start_time);
      return (
        bDate.getDate() === dateObj.getDate() &&
        bDate.getMonth() === dateObj.getMonth() &&
        bDate.getFullYear() === dateObj.getFullYear()
      );
    });
  };

  // 3. FUNGSI BARU: Memfilter jadwal statis berdasarkan hari
  const getSchedulesForCell = (roomId: number, dateObj: Date) => {
    const namaHari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
    const hariIni = namaHari[dateObj.getDay()];

    return schedules.filter(s => s.room_id === roomId && s.hari === hariIni);
  };

  // Format Jam
  const formatTime = (isoString: string) => {
    return new Date(isoString).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
  };

  if (loading) return <div className="p-8 text-gray-500 font-medium">Menyusun matriks jadwal...</div>;

  return (
    <div className="w-full">
      
      {/* HEADER & NAVIGASI */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
        <div className="flex items-center gap-3">
          <div className="bg-blue-100 p-3 rounded-lg text-blue-600">
            <CalendarDays size={28} />
          </div>
          <div>
            <h2 className="text-2xl font-bold text-gray-800">Weekly Calendar View</h2>
            <p className="text-gray-500 text-sm mt-1">Pantau kepadatan jadwal ruangan S-CLASS.</p>
          </div>
        </div>

        {/* Kontrol Navigasi Minggu */}
        <div className="flex items-center bg-white border border-gray-200 rounded-lg p-1 shadow-sm w-fit">
          <button 
            onClick={goToPreviousWeek} 
            className="p-2 hover:bg-gray-100 rounded-md transition-colors text-gray-600 hover:text-blue-600 shrink-0"
            title="Minggu Sebelumnya"
          >
            <ChevronLeft size={20} />
          </button>
          
          <div className="w-px h-6 bg-gray-200 mx-1"></div>
          
          <button 
            onClick={goToToday} 
            title="Kembali ke minggu ini"
            className="w-44 py-2 hover:bg-gray-100 rounded-md transition-colors text-sm font-semibold text-gray-700 hover:text-blue-600 flex items-center justify-center gap-2"
          >
            <CalendarIcon size={16} className="shrink-0" /> 
            <span className="truncate">{dateRangeLabel}</span>
          </button>

          <div className="w-px h-6 bg-gray-200 mx-1"></div>

          <button 
            onClick={goToNextWeek} 
            className="p-2 hover:bg-gray-100 rounded-md transition-colors text-gray-600 hover:text-blue-600 shrink-0"
            title="Minggu Depan"
          >
            <ChevronRight size={20} />
          </button>
        </div>
      </div>

      {/* Pembungkus Tabel */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden relative">
        <div className="overflow-x-auto">
          <table className="w-full min-w-250 text-left border-collapse">
            
            {/* HEADER TABEL: Sumbu X (Tanggal) */}
            <thead className="bg-gray-50">
              <tr>
                <th className="sticky left-0 z-10 bg-gray-50 border-b border-r border-gray-200 p-4 font-bold text-gray-700 w-48 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">
                  <div className="flex items-center gap-2">
                    <MapPin size={18} className="text-blue-500" /> Ruangan
                  </div>
                </th>
                
                {weekDates.map((date, idx) => (
                  <th key={idx} className="border-b border-gray-200 p-4 min-w-50 text-center">
                    <div className="font-bold text-gray-800">
                      {date.toLocaleDateString('id-ID', { weekday: 'long' })}
                    </div>
                    <div className="text-xs font-medium text-gray-500 mt-0.5">
                      {date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })}
                    </div>
                  </th>
                ))}
              </tr>
              </thead>

            {/* BODY TABEL: Sumbu Y (Ruangan) */}
            <tbody>
        {[...rooms]
          .sort((a, b) => a.name.localeCompare(b.name))
          .map((room) => (
            <tr key={room.room_id} className="hover:bg-blue-50/30 transition-colors">
              <td className="sticky left-0 z-10 bg-white border-b border-r border-gray-200 p-4 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 transition-colors">
                <div className="font-bold text-gray-800">{room.name}</div>
                <div className="text-xs text-gray-500">{room.category}</div>
              </td>
              
                  {weekDates.map((date, idx) => {
                    const dailyBookings = getBookingsForCell(room.room_id, date);
                    const dailySchedules = getSchedulesForCell(room.room_id, date); // Ambil jadwal kuliah hari ini
                    
                    return (
                      <td key={idx} className="border-b border-gray-100 border-r border-r-gray-50 p-2 align-top">
                        {(dailyBookings.length > 0 || dailySchedules.length > 0) ? (
                          <div className="space-y-2">
                            
                            {/* 4. RENDER JADWAL KULIAH STATIS (Tampil Paling Atas, Warna Abu-abu) */}
                            {dailySchedules
                              .sort((a, b) => a.jam_mulai.localeCompare(b.jam_mulai))
                              .map((s, i) => (
                                <div 
                                  key={`sched-${i}`} 
                                  className="border rounded-md p-2 shadow-sm border-l-4 bg-gray-100 border-gray-300 border-l-gray-500 opacity-90"
                                >
                                  <p className="text-xs font-bold text-gray-700 truncate" title={s.nama_mk}>
                                    [KULIAH] {s.nama_mk}
                                  </p>
                                  <div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
                                    <Clock size={10} />
                                    {s.jam_mulai.substring(0, 5)} - {s.jam_selesai.substring(0, 5)}
                                    <span className="ml-auto text-[9px] uppercase bg-gray-200 px-1 rounded border border-gray-300">
                                      {s.kode_mk}
                                    </span>
                                  </div>
                                </div>
                              ))
                            }

                            {/* 5. RENDER BOOKING DINAMIS MAHASISWA */}
                            {dailyBookings
                              .filter((b) => b.status === "Pending" || b.status === "Approved")
                              .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
                              .map((b) => (
                                <div 
                                  key={b.booking_id} 
                                  className={`border rounded-md p-2 shadow-sm border-l-4 
                                    ${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' : 
                                      b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' : 
                                      'bg-blue-50 border-blue-200 border-l-blue-500'}`}
                                >
                                  <p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
                                    {b.purpose}
                                  </p>
                                  <div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
                                    <Clock size={10} />
                                    {formatTime(b.start_time)} - {formatTime(b.end_time)}
                                    <span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
                                      {b.status || 'Pending'}
                                    </span>
                                  </div>
                                </div>
                              ))}
                          </div>
                        ) : (
                          <div className="h-full w-full min-h-10 flex items-center justify-center text-gray-300 text-xs">
                            -
                          </div>
                        )}
                      </td>
                    );
                  })}
                  
                </tr>
              ))}
            </tbody>

          </table>
        </div>
      </div>

    </div>
  );
}