"use client";

import React, { useState, useEffect, useMemo, useCallback } from "react";
import Link from "next/link";
import {
  Building2,
  Layers,
  Search,
  Plus,
  Pencil,
  Trash2,
  Users,
  CheckCircle2,
  AlertTriangle,
  Wrench,
  X,
  RefreshCw,
  DoorOpen,
  School,
  Sparkles,
  Info,
  Check,
} from "lucide-react";
import { Modal } from "@/components/ui/Modal";
import { StatCard } from "@/components/ui/StatCard";

export interface RoomItem {
  id: number;
  room_code: string;
  room_name: string;
  floor: number;
  capacity: number;
  status: string;
  notes?: string | null;
  created_at?: string;
  updated_at?: string;
}

interface RoomManagementViewProps {
  currentFloor: 1 | 2 | 3;
}

export const RoomManagementView: React.FC<RoomManagementViewProps> = ({ currentFloor }) => {
  // Data State
  const [rooms, setRooms] = useState<RoomItem[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // Search & Filter State
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [statusFilter, setStatusFilter] = useState<string>("Semua");

  // Modal States
  const [isAddModalOpen, setIsAddModalOpen] = useState<boolean>(false);
  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);

  // Selected item for Edit / Delete
  const [selectedRoom, setSelectedRoom] = useState<RoomItem | null>(null);

  // Form State
  const [formData, setFormData] = useState<{
    room_code: string;
    room_name: string;
    floor: number;
    capacity: number;
    status: string;
    notes: string;
  }>({
    room_code: "",
    room_name: "",
    floor: currentFloor,
    capacity: 36,
    status: "Siap Pakai",
    notes: "",
  });
  const [formError, setFormError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  // Toast feedback
  const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null);

  const showToast = (message: string, type: "success" | "error" = "success") => {
    setToast({ message, type });
    setTimeout(() => {
      setToast(null);
    }, 3500);
  };

  // Fetch rooms for current floor
  const fetchRooms = useCallback(async () => {
    try {
      setIsLoading(true);
      setError(null);
      const res = await fetch(`/api/sarpras/rooms?floor=${currentFloor}`, {
        cache: "no-store",
      });
      const json = await res.json();
      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memuat data ruangan");
      }
      setRooms(json.data || []);
    } catch (err: any) {
      console.error("fetchRooms error:", err);
      setError(err.message || "Terjadi kesalahan saat memuat data");
    } finally {
      setIsLoading(false);
    }
  }, [currentFloor]);

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

  // Open Add Modal
  const handleOpenAddModal = () => {
    setFormData({
      room_code: "",
      room_name: "",
      floor: currentFloor,
      capacity: 36,
      status: "Siap Pakai",
      notes: "",
    });
    setFormError(null);
    setIsAddModalOpen(true);
  };

  // Open Edit Modal
  const handleOpenEditModal = (room: RoomItem) => {
    setSelectedRoom(room);
    setFormData({
      room_code: room.room_code,
      room_name: room.room_name,
      floor: room.floor,
      capacity: room.capacity,
      status: room.status,
      notes: room.notes || "",
    });
    setFormError(null);
    setIsEditModalOpen(true);
  };

  // Open Delete Modal
  const handleOpenDeleteModal = (room: RoomItem) => {
    setSelectedRoom(room);
    setIsDeleteModalOpen(true);
  };

  // Submit Add Room
  const handleSubmitAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.room_code.trim()) {
      setFormError("Kode Ruangan wajib diisi");
      return;
    }
    if (!formData.room_name.trim()) {
      setFormError("Nama Ruangan wajib diisi");
      return;
    }

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/rooms", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });
      const json = await res.json();

      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menambahkan ruangan");
      }

      showToast(json.message || "Ruangan berhasil ditambahkan");
      setIsAddModalOpen(false);
      fetchRooms();

      if (typeof window !== "undefined") {
        window.dispatchEvent(new CustomEvent("sarpras-room-updated"));
        try {
          const bc = new BroadcastChannel("smartschool-events");
          bc.postMessage({ type: "SARPRAS_ROOM_MUTATION" });
          bc.close();
        } catch {}
      }
    } catch (err: any) {
      setFormError(err.message || "Gagal menambahkan ruangan");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Submit Edit Room
  const handleSubmitEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedRoom) return;
    if (!formData.room_code.trim()) {
      setFormError("Kode Ruangan wajib diisi");
      return;
    }
    if (!formData.room_name.trim()) {
      setFormError("Nama Ruangan wajib diisi");
      return;
    }

    try {
      setIsSubmitting(true);
      setFormError(null);
      const res = await fetch("/api/sarpras/rooms", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id: selectedRoom.id,
          ...formData,
        }),
      });
      const json = await res.json();

      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal memperbarui ruangan");
      }

      showToast(json.message || "Ruangan berhasil diperbarui");
      setIsEditModalOpen(false);
      setSelectedRoom(null);
      fetchRooms();

      if (typeof window !== "undefined") {
        window.dispatchEvent(new CustomEvent("sarpras-room-updated"));
        try {
          const bc = new BroadcastChannel("smartschool-events");
          bc.postMessage({ type: "SARPRAS_ROOM_MUTATION" });
          bc.close();
        } catch {}
      }
    } catch (err: any) {
      setFormError(err.message || "Gagal memperbarui ruangan");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Submit Delete Room
  const handleSubmitDelete = async () => {
    if (!selectedRoom) return;

    try {
      setIsSubmitting(true);
      const res = await fetch(`/api/sarpras/rooms?id=${selectedRoom.id}`, {
        method: "DELETE",
      });
      const json = await res.json();

      if (!res.ok || !json.success) {
        throw new Error(json.error || "Gagal menghapus ruangan");
      }

      showToast(json.message || "Ruangan berhasil dihapus");
      setIsDeleteModalOpen(false);
      setSelectedRoom(null);
      fetchRooms();

      if (typeof window !== "undefined") {
        window.dispatchEvent(new CustomEvent("sarpras-room-updated"));
        try {
          const bc = new BroadcastChannel("smartschool-events");
          bc.postMessage({ type: "SARPRAS_ROOM_MUTATION" });
          bc.close();
        } catch {}
      }
    } catch (err: any) {
      showToast(err.message || "Gagal menghapus ruangan", "error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Filtered rooms
  const filteredRooms = useMemo(() => {
    return rooms.filter((room) => {
      const matchSearch =
        searchTerm === "" ||
        room.room_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
        room.room_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (room.notes && room.notes.toLowerCase().includes(searchTerm.toLowerCase()));

      const matchStatus =
        statusFilter === "Semua" || room.status.toLowerCase() === statusFilter.toLowerCase();

      return matchSearch && matchStatus;
    });
  }, [rooms, searchTerm, statusFilter]);

  // Statistics
  const stats = useMemo(() => {
    const total = rooms.length;
    const kelas = rooms.filter((r) => r.room_name.toLowerCase().includes("kelas")).length;
    const labKhusus = rooms.filter(
      (r) =>
        r.room_name.toLowerCase().includes("lab") ||
        r.room_name.toLowerCase().includes("aula") ||
        r.room_name.toLowerCase().includes("perpustakaan") ||
        r.room_name.toLowerCase().includes("podcast") ||
        r.room_name.toLowerCase().includes("kesenian")
    ).length;
    const siapPakai = rooms.filter((r) => r.status.toLowerCase() === "siap pakai").length;
    const maintenance = rooms.filter(
      (r) =>
        r.status.toLowerCase().includes("perbaikan") ||
        r.status.toLowerCase().includes("maintenance") ||
        r.status.toLowerCase().includes("renovasi")
    ).length;

    return { total, kelas, labKhusus, siapPakai, maintenance };
  }, [rooms]);

  // Helper for Status Badge styling
  const renderStatusBadge = (status: string) => {
    const lower = status.toLowerCase();
    if (lower === "siap pakai") {
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
          Siap Pakai
        </span>
      );
    }
    if (lower.includes("perbaikan") || lower.includes("maintenance")) {
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">
          <Wrench className="w-3 h-3 text-amber-500" />
          Perbaikan
        </span>
      );
    }
    if (lower.includes("renovasi")) {
      return (
        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-200">
          <span className="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
          Renovasi
        </span>
      );
    }
    return (
      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
        <span className="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
        {status}
      </span>
    );
  };

  return (
    <div className="space-y-6">
      {/* Toast Notification */}
      {toast && (
        <div
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg border text-sm font-medium transition-all transform animate-in slide-in-from-bottom-5 ${
            toast.type === "success"
              ? "bg-emerald-900/90 text-white border-emerald-700"
              : "bg-rose-900/90 text-white border-rose-700"
          }`}
        >
          {toast.type === "success" ? (
            <CheckCircle2 className="w-5 h-5 text-emerald-300" />
          ) : (
            <AlertTriangle className="w-5 h-5 text-rose-300" />
          )}
          <span>{toast.message}</span>
          <button
            onClick={() => setToast(null)}
            className="ml-2 text-white/70 hover:text-white"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      )}

      {/* Header Banner */}
      <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-blue-600 mb-1">
              <Building2 className="w-4 h-4" />
              <span>Sarana & Prasarana • SMA BPI 1 Bandung</span>
            </div>
            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
              Daftar Ruangan — Lantai {currentFloor}
            </h1>
            <p className="text-sm text-slate-500 mt-1">
              Manajemen inventaris ruangan, kelas reguler, laboratorium, dan fasilitas lantai {currentFloor} SMA BPI 1 Bandung.
            </p>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={handleOpenAddModal}
              className="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              <span>Tambah Ruangan</span>
            </button>
          </div>
        </div>

        {/* Floor Navigation Tabs */}
        <div className="mt-6 pt-5 border-t border-slate-100 flex items-center gap-2 overflow-x-auto pb-1">
          <span className="text-xs font-medium text-slate-400 mr-2 flex items-center gap-1.5">
            <Layers className="w-3.5 h-3.5" />
            Pilih Lantai:
          </span>
          {[1, 2, 3].map((floorNum) => {
            const isActive = floorNum === currentFloor;
            return (
              <Link
                key={floorNum}
                href={`/sarpras/ruang/lantai-${floorNum}`}
                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
                  isActive
                    ? "bg-blue-600 text-white shadow-sm shadow-blue-500/25"
                    : "bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-900"
                }`}
              >
                <span>Lantai {floorNum}</span>
                {isActive && (
                  <span className="w-2 h-2 rounded-full bg-white"></span>
                )}
              </Link>
            );
          })}
        </div>
      </div>

      {/* Metric Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title={`Total Ruang Lt. ${currentFloor}`}
          value={isLoading ? "..." : stats.total}
          icon={Building2}
          description="Ruangan terdaftar"
          variant="primary"
        />
        <StatCard
          title="Ruang Kelas Belajar"
          value={isLoading ? "..." : stats.kelas}
          icon={School}
          description="Kelas aktif KBM"
          variant="blue"
        />
        <StatCard
          title="Lab & Ruang Khusus"
          value={isLoading ? "..." : stats.labKhusus}
          icon={Sparkles}
          description="Laboratorium & aula"
          variant="purple"
        />
        <StatCard
          title="Status Siap Pakai"
          value={isLoading ? "..." : `${stats.siapPakai} / ${stats.total}`}
          icon={CheckCircle2}
          description={
            stats.maintenance > 0
              ? `${stats.maintenance} dalam pemeliharaan`
              : "100% fasilitas prima"
          }
          variant="success"
        />
      </div>

      {/* Main Content Card: Table & Filters */}
      <div className="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        {/* Table Filter & Search Toolbar */}
        <div className="p-4 sm:p-5 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-3 bg-slate-50/50">
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 max-w-2xl">
            {/* Search Input */}
            <div className="relative flex-1">
              <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                placeholder="Cari kode ruang, nama, atau keterangan..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-9 pr-9 py-2 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all placeholder:text-slate-400"
              />
              {searchTerm && (
                <button
                  onClick={() => setSearchTerm("")}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                >
                  <X className="w-4 h-4" />
                </button>
              )}
            </div>

            {/* Status Filter */}
            <div className="flex items-center gap-2">
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-3.5 py-2 bg-white border border-slate-200 rounded-xl text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
              >
                <option value="Semua">Semua Status</option>
                <option value="Siap Pakai">Siap Pakai</option>
                <option value="Perbaikan">Perbaikan / Maint.</option>
                <option value="Renovasi">Renovasi</option>
                <option value="Tidak Digunakan">Tidak Digunakan</option>
              </select>
            </div>
          </div>

          <div className="flex items-center justify-between sm:justify-end gap-3">
            <div className="text-xs text-slate-500">
              Menampilkan <span className="font-semibold text-slate-900">{filteredRooms.length}</span> dari{" "}
              <span className="font-semibold text-slate-900">{rooms.length}</span> ruangan
            </div>
            <button
              onClick={handleOpenAddModal}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-lg shadow-sm transition-all"
              title="Tambah Ruangan Baru di Lantai Ini"
            >
              <Plus className="w-3.5 h-3.5" />
              <span>+ Tambah Ruang</span>
            </button>
          </div>
        </div>

        {/* Table Content */}
        {isLoading ? (
          <div className="py-20 flex flex-col items-center justify-center text-slate-400">
            <RefreshCw className="w-8 h-8 animate-spin text-blue-600 mb-3" />
            <p className="text-sm font-medium">Memuat daftar ruangan...</p>
          </div>
        ) : error ? (
          <div className="py-16 text-center">
            <AlertTriangle className="w-10 h-10 text-rose-500 mx-auto mb-3" />
            <p className="text-sm font-semibold text-slate-800">{error}</p>
            <button
              onClick={() => fetchRooms()}
              className="mt-3 px-4 py-2 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700"
            >
              Coba Lagi
            </button>
          </div>
        ) : filteredRooms.length === 0 ? (
          <div className="py-16 text-center">
            <DoorOpen className="w-12 h-12 text-slate-300 mx-auto mb-3" />
            <p className="text-base font-semibold text-slate-700">Tidak ada ruangan ditemukan</p>
            <p className="text-xs text-slate-500 mt-1 max-w-sm mx-auto">
              {searchTerm || statusFilter !== "Semua"
                ? "Coba ubah kata kunci pencarian atau filter status yang dipilih."
                : `Belum ada data ruangan untuk Lantai ${currentFloor}. Klik tombol Tambah Ruangan untuk menambahkan.`}
            </p>
            {searchTerm || statusFilter !== "Semua" ? (
              <button
                onClick={() => {
                  setSearchTerm("");
                  setStatusFilter("Semua");
                }}
                className="mt-4 px-4 py-2 text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors"
              >
                Reset Filter
              </button>
            ) : (
              <button
                onClick={handleOpenAddModal}
                className="mt-4 inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
              >
                <Plus className="w-3.5 h-3.5" />
                Tambah Ruangan Sekarang
              </button>
            )}
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-200 text-slate-600 text-xs font-bold uppercase tracking-wider">
                  <th className="py-3.5 px-4 w-12 text-center">No</th>
                  <th className="py-3.5 px-4 w-32">Kode Ruang</th>
                  <th className="py-3.5 px-4 min-w-[200px]">Nama Ruangan</th>
                  <th className="py-3.5 px-4 w-28 text-center">Lantai</th>
                  <th className="py-3.5 px-4 w-36">Kapasitas</th>
                  <th className="py-3.5 px-4 min-w-[180px]">Status & Keterangan</th>
                  <th className="py-3.5 px-4 w-32 text-center">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm">
                {filteredRooms.map((room, idx) => (
                  <tr
                    key={room.id}
                    className="hover:bg-slate-50/80 transition-colors group"
                  >
                    {/* No */}
                    <td className="py-3.5 px-4 text-center font-medium text-slate-400 text-xs">
                      {idx + 1}
                    </td>

                    {/* Kode Ruang */}
                    <td className="py-3.5 px-4 font-mono font-bold text-slate-900">
                      <span className="inline-block px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 border border-slate-200/70 text-xs tracking-wider">
                        {room.room_code}
                      </span>
                    </td>

                    {/* Nama Ruangan */}
                    <td className="py-3.5 px-4">
                      <div className="font-semibold text-slate-900 flex items-center gap-2">
                        <DoorOpen className="w-4 h-4 text-slate-400 group-hover:text-blue-600 transition-colors" />
                        <span>{room.room_name}</span>
                      </div>
                    </td>

                    {/* Lantai */}
                    <td className="py-3.5 px-4 text-center">
                      <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-slate-100 text-slate-700">
                        Lt. {room.floor}
                      </span>
                    </td>

                    {/* Kapasitas */}
                    <td className="py-3.5 px-4">
                      <div className="flex items-center gap-1.5 text-slate-700">
                        <Users className="w-3.5 h-3.5 text-slate-400" />
                        <span className="font-medium">{room.capacity}</span>
                        <span className="text-xs text-slate-500">Siswa / Orang</span>
                      </div>
                    </td>

                    {/* Status & Keterangan */}
                    <td className="py-3.5 px-4">
                      <div className="space-y-1">
                        <div>{renderStatusBadge(room.status)}</div>
                        {room.notes && (
                          <p className="text-xs text-slate-500 line-clamp-1" title={room.notes}>
                            {room.notes}
                          </p>
                        )}
                      </div>
                    </td>

                    {/* Aksi: Edit & Hapus */}
                    <td className="py-3.5 px-4 text-center">
                      <div className="flex items-center justify-center gap-1.5">
                        <button
                          onClick={() => handleOpenEditModal(room)}
                          className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold text-blue-700 bg-blue-50 hover:bg-blue-100 border border-blue-200/80 transition-colors"
                          title="Edit Ruangan"
                        >
                          <Pencil className="w-3 h-3" />
                          <span>Edit</span>
                        </button>
                        <button
                          onClick={() => handleOpenDeleteModal(room)}
                          className="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold text-rose-700 bg-rose-50 hover:bg-rose-100 border border-rose-200/80 transition-colors"
                          title="Hapus Ruangan"
                        >
                          <Trash2 className="w-3 h-3" />
                          <span>Hapus</span>
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Footer info */}
        <div className="p-4 border-t border-slate-100 bg-slate-50/40 text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-2">
          <span>SMA BPI 1 Bandung • Sistem Informasi Sarana & Prasarana</span>
          <span>Diperbarui otomatis dari database</span>
        </div>
      </div>

      {/* ==================================================== */}
      {/* MODAL: TAMBAH RUANGAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isAddModalOpen}
        onClose={() => setIsAddModalOpen(false)}
        title={`Tambah Ruangan — Lantai ${currentFloor}`}
        description="Masukkan identitas kode, nama ruangan, kapasitas, dan status fasilitas."
        maxWidth="lg"
      >
        <form onSubmit={handleSubmitAdd} className="space-y-4 pt-2">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-medium flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{formError}</span>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {/* Kode Ruangan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kode / ID Ruang <span className="text-rose-500">*</span>
              </label>
              <input
                type="text"
                required
                placeholder={`Contoh: R${currentFloor}13`}
                value={formData.room_code}
                onChange={(e) => setFormData({ ...formData, room_code: e.target.value.toUpperCase() })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
              <span className="text-[11px] text-slate-400 mt-1 block">
                Kode unik ruangan (huruf kapital & angka)
              </span>
            </div>

            {/* Lantai */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Posisi Lantai <span className="text-rose-500">*</span>
              </label>
              <select
                value={formData.floor}
                onChange={(e) => setFormData({ ...formData, floor: Number(e.target.value) as 1 | 2 | 3 })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value={1}>Lantai 1</option>
                <option value={2}>Lantai 2</option>
                <option value={3}>Lantai 3</option>
              </select>
            </div>
          </div>

          {/* Nama Ruangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama Ruangan <span className="text-rose-500">*</span>
            </label>
            <input
              type="text"
              required
              placeholder="Contoh: Ruang Kelas X-5 / Lab Robotik"
              value={formData.room_name}
              onChange={(e) => setFormData({ ...formData, room_name: e.target.value })}
              className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {/* Kapasitas */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kapasitas (Orang / Siswa)
              </label>
              <input
                type="number"
                min={1}
                max={500}
                value={formData.capacity}
                onChange={(e) => setFormData({ ...formData, capacity: parseInt(e.target.value, 10) || 0 })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Status Ruang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Status Ruangan
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Siap Pakai">Siap Pakai</option>
                <option value="Perbaikan">Perbaikan / Maintenance</option>
                <option value="Renovasi">Renovasi</option>
                <option value="Tidak Digunakan">Tidak Digunakan</option>
              </select>
            </div>
          </div>

          {/* Keterangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Keterangan / Fasilitas Pendukung
            </label>
            <textarea
              rows={3}
              placeholder="Contoh: AC 2 unit, Smart Projector, 36 set meja kursi..."
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
              className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          {/* Modal Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsAddModalOpen(false)}
              className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-xl transition-colors cursor-pointer"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-4 h-4 animate-spin" />
                  <span>Menyimpan...</span>
                </>
              ) : (
                <>
                  <Check className="w-4 h-4" />
                  <span>Simpan Ruangan</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: EDIT RUANGAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        title="Edit Data Ruangan"
        description={`Perbarui informasi ruangan ${selectedRoom?.room_code} - ${selectedRoom?.room_name}.`}
        maxWidth="lg"
      >
        <form onSubmit={handleSubmitEdit} className="space-y-4 pt-2">
          {formError && (
            <div className="p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-medium flex items-center gap-2">
              <AlertTriangle className="w-4 h-4 shrink-0" />
              <span>{formError}</span>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {/* Kode Ruangan */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kode / ID Ruang <span className="text-rose-500">*</span>
              </label>
              <input
                type="text"
                required
                value={formData.room_code}
                onChange={(e) => setFormData({ ...formData, room_code: e.target.value.toUpperCase() })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Lantai */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Posisi Lantai <span className="text-rose-500">*</span>
              </label>
              <select
                value={formData.floor}
                onChange={(e) => setFormData({ ...formData, floor: Number(e.target.value) as 1 | 2 | 3 })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value={1}>Lantai 1</option>
                <option value={2}>Lantai 2</option>
                <option value={3}>Lantai 3</option>
              </select>
            </div>
          </div>

          {/* Nama Ruangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Nama Ruangan <span className="text-rose-500">*</span>
            </label>
            <input
              type="text"
              required
              value={formData.room_name}
              onChange={(e) => setFormData({ ...formData, room_name: e.target.value })}
              className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {/* Kapasitas */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Kapasitas (Orang / Siswa)
              </label>
              <input
                type="number"
                min={1}
                max={500}
                value={formData.capacity}
                onChange={(e) => setFormData({ ...formData, capacity: parseInt(e.target.value, 10) || 0 })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              />
            </div>

            {/* Status Ruang */}
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">
                Status Ruangan
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
              >
                <option value="Siap Pakai">Siap Pakai</option>
                <option value="Perbaikan">Perbaikan / Maintenance</option>
                <option value="Renovasi">Renovasi</option>
                <option value="Tidak Digunakan">Tidak Digunakan</option>
              </select>
            </div>
          </div>

          {/* Keterangan */}
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Keterangan / Catatan Fasilitas
            </label>
            <textarea
              rows={3}
              value={formData.notes}
              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
              className="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
            />
          </div>

          {/* Modal Actions */}
          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsEditModalOpen(false)}
              className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-xl transition-colors"
            >
              Batal
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-4 h-4 animate-spin" />
                  <span>Memperbarui...</span>
                </>
              ) : (
                <>
                  <Check className="w-4 h-4" />
                  <span>Simpan Perubahan</span>
                </>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* ==================================================== */}
      {/* MODAL: KONFIRMASI HAPUS RUANGAN */}
      {/* ==================================================== */}
      <Modal
        isOpen={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        title="Hapus Data Ruangan"
        description="Konfirmasi penghapusan data ruangan dari sistem Sarana & Prasarana."
        maxWidth="md"
      >
        <div className="space-y-4 pt-2">
          <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-sm flex items-start gap-3">
            <AlertTriangle className="w-5 h-5 text-rose-600 shrink-0 mt-0.5" />
            <div>
              <p className="font-semibold text-rose-900">
                Peringatan: Tindakan ini tidak dapat dibatalkan!
              </p>
              <p className="text-xs text-rose-700 mt-1">
                Apakah Anda yakin ingin menghapus ruangan{" "}
                <span className="font-bold underline">
                  {selectedRoom?.room_code} — {selectedRoom?.room_name}
                </span>{" "}
                (Lantai {selectedRoom?.floor})?
              </p>
            </div>
          </div>

          <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-100">
            <button
              type="button"
              onClick={() => setIsDeleteModalOpen(false)}
              className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-xl transition-colors"
            >
              Batal
            </button>
            <button
              type="button"
              onClick={handleSubmitDelete}
              disabled={isSubmitting}
              className="px-5 py-2 text-sm font-semibold text-white bg-rose-600 hover:bg-rose-700 rounded-xl shadow-sm transition-all disabled:opacity-50 flex items-center gap-2"
            >
              {isSubmitting ? (
                <>
                  <RefreshCw className="w-4 h-4 animate-spin" />
                  <span>Menghapus...</span>
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4" />
                  <span>Ya, Hapus Ruangan</span>
                </>
              )}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
};
export default RoomManagementView;