"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import { useRouter } from "next/navigation";
import { MapPin, Users, Calendar, X, Clock, FileText } from "lucide-react";

// Tipe Data
interface Room {
  room_id: number;
  name: string;
  category: string;
  capacity: number;
  floor: string;
  status: string;
}

export default function Dashboard() {
  const router = useRouter();
  const [user, setUser] = useState<any>(null);
  const [rooms, setRooms] = useState<Room[]>([]);
  const [loading, setLoading] = useState(true);

  // --- STATE UNTUK MODAL BOOKING ---
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedRoom, setSelectedRoom] = useState<Room | null>(null);
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const [purpose, setPurpose] = useState("");
  const [submitLoading, setSubmitLoading] = useState(false);
  // ----------------------------------

  useEffect(() => {
    const token = localStorage.getItem("token");
    const userData = localStorage.getItem("user");

    if (!token || !userData) {
      router.push("/login");
      return;
    }

    setUser(JSON.parse(userData));
    fetchRooms(token);
  }, []);

  const fetchRooms = async (token: string) => {
    try {
      const response = await axios.get("http://localhost:8080/api/rooms", {
        headers: { Authorization: `Bearer ${token}` },
      });
      setRooms(response.data.data);
    } catch (error) {
      console.error("Error:", error);
      router.push("/login");
    } finally {
      setLoading(false);
    }
  };

  // --- BUKA MODAL ---
  const openBookingModal = (room: Room) => {
    setSelectedRoom(room);
    setIsModalOpen(true);
    // Reset form
    setStartTime("");
    setEndTime("");
    setPurpose("");
  };

  // --- SUBMIT BOOKING ---
  const handleBookingSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitLoading(true);

    const token = localStorage.getItem("token");

    try {
      const startISO = new Date(startTime).toISOString();
      const endISO = new Date(endTime).toISOString();

      await axios.post(
        "http://localhost:8080/api/bookings",
        {
          room_id: selectedRoom?.room_id,
          start_time: startISO,
          end_time: endISO,
          purpose: purpose,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );

      alert("Booking Berhasil Diajukan! Menunggu persetujuan.");
      setIsModalOpen(false); // Tutup modal

    } catch (error: any) {
      const errorMsg = error.response?.data?.error || "Gagal melakukan booking.";
      alert("GAGAL: " + errorMsg);
    } finally {
      setSubmitLoading(false);
    }
  };

  if (loading) return <div className="p-10 text-center">Memuat data...</div>;

  return (
    <div className="w-full">
      
      {/* Header Konten: Judul & Tombol Riwayat */}
      <div className="flex items-center justify-between mb-8">
        <h2 className="text-2xl font-bold text-gray-800">Pilih Ruangan</h2>
        <button 
          onClick={() => router.push('/history')}
          className="flex items-center gap-2 bg-white border border-gray-300 text-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all"
        >
          <Clock size={18} />
          Lihat Riwayat Booking
        </button>
      </div>
      
      {/* Grid Daftar Kelas */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {rooms.map((room) => (
          <div key={room.room_id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between hover:shadow-md transition-shadow">
            <div>
              <div className="flex justify-between items-start mb-3">
                  <span className={`px-2 py-1 text-xs font-semibold rounded-full ${
                  room.status === 'Available' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                  }`}>
                  {room.status}
                  </span>
                  <span className="text-gray-400 text-xs font-medium">{room.category}</span>
              </div>
              <h3 className="text-lg font-bold text-gray-800 mb-1">{room.name}</h3>
              <div className="space-y-2 text-sm text-gray-600 mt-4">
                  <div className="flex items-center gap-2">
                  <MapPin size={16} className="text-blue-500" /> {room.floor}
                  </div>
                  <div className="flex items-center gap-2">
                  <Users size={16} className="text-blue-500" /> Kapasitas: {room.capacity}
                  </div>
              </div>
            </div>
            
            <button 
              className="mt-6 w-full bg-blue-600 text-white font-medium py-2 rounded-lg hover:bg-blue-700 transition flex justify-center items-center gap-2 shadow-sm"
              onClick={() => openBookingModal(room)}
            >
              <Calendar size={16} />
              Booking Ruangan
            </button>
          </div>
        ))}
      </div>

      {/* --- MODAL POPUP FORMULIR --- */}
      {isModalOpen && selectedRoom && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl w-full max-w-md shadow-xl overflow-hidden border border-gray-100">
            
            {/* Header Modal */}
            <div className="bg-blue-600 p-4 flex justify-between items-center text-white">
              <h3 className="font-semibold text-lg">Form Peminjaman</h3>
              <button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-1 rounded-lg transition-colors">
                <X size={20} />
              </button>
            </div>

            {/* Body Form */}
            <form onSubmit={handleBookingSubmit} className="p-6 space-y-4">
              <div className="bg-blue-50 p-3 rounded-lg border border-blue-100 mb-2">
                <p className="text-sm text-blue-800 font-semibold">Ruangan: {selectedRoom.name}</p>
                <p className="text-xs text-blue-600 mt-0.5">{selectedRoom.floor}</p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Waktu Mulai</label>
                <div className="relative">
                    <Clock className="absolute left-3 top-2.5 text-gray-400 h-4 w-4" />
                    <input 
                    type="datetime-local" 
                    required
                    className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    value={startTime}
                    onChange={(e) => setStartTime(e.target.value)}
                    />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Waktu Selesai</label>
                <div className="relative">
                    <Clock className="absolute left-3 top-2.5 text-gray-400 h-4 w-4" />
                    <input 
                    type="datetime-local" 
                    required
                    className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    value={endTime}
                    onChange={(e) => setEndTime(e.target.value)}
                    />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Keperluan / Kegiatan</label>
                <div className="relative">
                    <FileText className="absolute left-3 top-2.5 text-gray-400 h-4 w-4" />
                    <textarea 
                    required
                    rows={3}
                    placeholder="Contoh: Rapat Progres Skripsi"
                    className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    value={purpose}
                    onChange={(e) => setPurpose(e.target.value)}
                    />
                </div>
              </div>

              <div className="pt-3 flex gap-3">
                <button 
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium transition-all"
                >
                  Batal
                </button>
                <button 
                  type="submit"
                  disabled={submitLoading}
                  className={`flex-1 py-2 rounded-lg text-white text-sm font-medium shadow-sm transition-all
                    ${submitLoading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
                >
                  {submitLoading ? 'Mengirim...' : 'Ajukan Booking'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}