"use client";

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

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

  // 1. FUNGSI UNTUK MENGAMBIL DATA ASLI DARI DATABASE
  const fetchBookings = async () => {
    try {
      const token = localStorage.getItem("token");
      // Mengambil dari fungsi GetAllBookings di backend
      const res = await axios.get("http://localhost:8080/api/bookings", {
        headers: { Authorization: `Bearer ${token}` }
      });
      setBookings(res.data.data);
    } catch (err: any) {
      console.error("Gagal mengambil data peminjaman:", err);
    }
  };

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

  // 2. FUNGSI UNTUK MENGUBAH STATUS (APPROVE / REJECT)
  const updateStatus = async (bookingId: string, newStatus: string) => {
    try {
      const token = localStorage.getItem("token");
      // Mengirim UUID booking_id ke backend Golang
      await axios.put(
        `http://localhost:8080/api/bookings/${bookingId}/status`,
        { status: newStatus },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      
      alert(`Peminjaman berhasil di-${newStatus}!`);
      fetchBookings(); // Refresh tabel setelah update
    } catch (err: any) {
      console.error("Gagal update status:", err.response?.data || err.message);
      alert("Error: " + (err.response?.data?.error || "Gagal mengubah status"));
    }
  };

  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">Tanggal & Waktu</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) => (
                // Pastikan key menggunakan booking_id (UUID)
                <tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
                {/* Gunakan huruf KECIL: b.user dan b.room sesuai JSON dari Golang */}
                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name || "Tanpa Nama"}</td>
                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name || "Ruangan Tidak Diketahui"}</td>
                  
                  {/* Menampilkan Waktu Mulai sampai Waktu Selesai */}
                  <td className="p-4 text-sm text-gray-600">
                    <div className="font-bold">
                      {new Date(b.start_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})} - {new Date(b.end_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}
                    </div>
                    <div className="text-xs text-gray-400">
                      {new Date(b.start_time).toLocaleDateString('id-ID')}
                    </div>
                  </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">
                        {/* 3. TOMBOL SETUJUI & TOLAK YANG SUDAH BERFUNGSI */}
                        <button 
                          // KITA CEK SEMUA KEMUNGKINAN NAMA ID-NYA:
                          onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Approved")}
                          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 
                          onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Rejected")}
                          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>
                    ) : (
                      <div className="flex flex-col items-center gap-1">
                        <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>
                        {/* Menampilkan Redeem Code jika sudah Approved */}
                        {b.status === 'Approved' && b.redeem_code && (
                          <span className="text-[10px] text-gray-500 font-mono bg-gray-100 px-2 py-0.5 rounded">
                            Code: {b.redeem_code}
                          </span>
                        )}
                      </div>
                    )}
                  </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>
  );
}