"use client";

import { useState, useEffect } from "react";
import { ShieldCheck, Check, X, Clock } from "lucide-react";

export default function ApprovalsPage() {
  const [activeTab, setActiveTab] = useState("Pending");
  const [bookings, setBookings] = useState<any[]>([]);

  useEffect(() => {
    // Data Dummy Sementara
    setBookings([
      { id: 1, user: { full_name: "Andreas Budi" }, room: { name: "Kelas D101" }, start_time: new Date().toISOString(), purpose: "Rapat Evaluasi BEM", status: "Pending" },
      { id: 2, user: { full_name: "Siska Saraswati" }, room: { name: "Kelas D105" }, start_time: new Date().toISOString(), purpose: "Sidang Skripsi", status: "Pending" },
      { id: 3, user: { full_name: "Bima Arya" }, room: { name: "Kelas D102" }, start_time: new Date().toISOString(), purpose: "Kelas Pengganti", status: "Approved" },
      { id: 4, user: { full_name: "Citra Kirana" }, room: { name: "Kelas D104" }, start_time: new Date().toISOString(), purpose: "Latihan Band", status: "Rejected" },
    ]);
  }, []);

  const filteredBookings = bookings.filter(b => b.status === activeTab);

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="bg-blue-100 p-3 rounded-lg text-blue-600">
          <ShieldCheck size={28} />
        </div>
        <div>
          <h2 className="text-2xl font-bold text-gray-800">Manajemen Persetujuan</h2>
          <p className="text-gray-500 text-sm mt-1">Kelola permohonan peminjaman ruangan S-CLASS.</p>
        </div>
      </div>

      {/* TABS */}
      <div className="flex gap-4 border-b border-gray-200">
        {["Pending", "Approved", "Rejected"].map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`pb-3 px-4 font-bold text-sm transition-all ${
              activeTab === tab 
                ? "border-b-2 border-blue-600 text-blue-600" 
                : "text-gray-400 hover:text-gray-600"
            }`}
          >
            {tab}
          </button>
        ))}
      </div>

      {/* TABEL */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <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">Waktu Mulai</th>
                <th className="p-4">Keperluan</th>
                <th className="p-4 text-center">Status / Aksi</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {filteredBookings.map((b) => (
                <tr key={b.id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name}</td>
                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name}</td>
                  <td className="p-4 text-sm text-gray-600">{new Date(b.start_time).toLocaleString('id-ID')}</td>
                  <td className="p-4 text-sm text-gray-600">{b.purpose}</td>
                  <td className="p-4 text-center">
                    {b.status === "Pending" ? (
                      <div className="flex justify-center gap-2">
                        <button className="flex items-center gap-1 px-3 py-1.5 bg-green-50 text-green-600 font-bold text-xs rounded-lg hover:bg-green-100 transition-colors">
                          <Check size={14} /> Setujui
                        </button>
                        <button className="flex items-center gap-1 px-3 py-1.5 bg-red-50 text-red-600 font-bold text-xs rounded-lg hover:bg-red-100 transition-colors">
                          <X size={14} /> Tolak
                        </button>
                      </div>
                    ) : (
                      <span className={`px-3 py-1 rounded-full text-xs font-bold ${
                        b.status === 'Approved' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                      }`}>
                        {b.status}
                      </span>
                    )}
                  </td>
                </tr>
              ))}
              {filteredBookings.length === 0 && (
                <tr><td colSpan={5} className="p-8 text-center text-gray-400 font-medium">Tidak ada data di kategori ini.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}