"use client";

import { useState, useEffect } from "react";
import {
  getPublicClients,
  PublicClient,
} from "@/service/client/public-clients";

type CategoryTabsProps = {
  selectedCategory: string;
  onCategoryChange: (category: string) => void;
};

export default function CategoryTabs({
  selectedCategory,
  onCategoryChange,
}: CategoryTabsProps) {
  const [clients, setClients] = useState<PublicClient[]>([]);
  const [loading, setLoading] = useState(true);

  // ✅ Fetch public clients dari API
  useEffect(() => {
    async function fetchClients() {
      try {
        const response = await getPublicClients();
        if (response?.data?.success && response.data.data) {
          // 🔹 Filter hanya client aktif (boolean true)
          const activeClients = response.data.data.filter(
            (client: PublicClient) => client.isActive === true
          );
          setClients(activeClients);
        }
      } catch (error) {
        console.error("Error fetching public clients:", error);
        // Fallback ke data statis jika API gagal
        setClients([]);
      } finally {
        setLoading(false);
      }
    }

    fetchClients();
  }, []);

  // 🔹 Fallback jika API gagal
  const fallbackClients = [
    { id: 1, name: "DIV HUMAS POLRI" },
    { id: 2, name: "POLDASUMUT" },
    { id: 3, name: "POLDAMETROJAYA" },
    { id: 4, name: "POLDARIYAD" },
    { id: 5, name: "POLDABALI" },
  ];

  const displayClients =
    clients.length > 0 ? clients : (fallbackClients as any);

  // 🔹 Susun kategori: “SEMUA” di awal
  const categories = ["SEMUA", ...displayClients.map((c: any) => c.name)];

  // 🔹 Tampilkan skeleton saat loading
  if (loading) {
    return (
      <div className="flex flex-wrap gap-2 overflow-x-auto">
        {Array.from({ length: 6 }).map((_, idx) => (
          <div
            key={idx}
            className="px-4 py-1 text-sm rounded font-medium border bg-gray-200 animate-pulse h-8 w-20"
          ></div>
        ))}
      </div>
    );
  }

  // 🔹 Render kategori client
  return (
    <div className="flex flex-wrap gap-2 overflow-x-auto">
      {categories.map((cat, idx) => (
        <button
          key={idx}
          onClick={() => onCategoryChange(cat)}
          className={`px-4 py-1 text-sm rounded font-medium border transition-colors ${
            selectedCategory === cat
              ? "bg-[#C6A455] text-white border-[#C6A455]"
              : "bg-white text-gray-800 hover:bg-gray-50 border-gray-300"
          }`}
        >
          {cat.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

// "use client";

// import { useState, useEffect } from "react";
// import { getPublicClients, PublicClient } from "@/service/client/public-clients";

// type CategoryTabsProps = {
//   selectedCategory: string;
//   onCategoryChange: (category: string) => void;
// };

// export default function CategoryTabs({
//   selectedCategory,
//   onCategoryChange,
// }: CategoryTabsProps) {
//   const [clients, setClients] = useState<PublicClient[]>([]);
//   const [loading, setLoading] = useState(true);

//   // Fetch public clients
//   useEffect(() => {
//     async function fetchClients() {
//       try {
//         const response = await getPublicClients();
//         if (response?.data?.success && response.data.data) {
//           setClients(response.data.data);
//         }
//       } catch (error) {
//         console.error("Error fetching public clients:", error);
//         // Fallback to empty array if API fails
//         setClients([]);
//       } finally {
//         setLoading(false);
//       }
//     }

//     fetchClients();
//   }, []);

//   // Create categories array with "SEMUA" first, then client names
//   const categories = ["SEMUA", ...clients.map(client => client.name)];

//   if (loading) {
//     return (
//       <div className="flex flex-wrap gap-2 overflow-x-auto">
//         {Array.from({ length: 6 }).map((_, idx) => (
//           <div
//             key={idx}
//             className="px-4 py-1 text-sm rounded font-medium border bg-gray-200 animate-pulse h-8 w-20"
//           ></div>
//         ))}
//       </div>
//     );
//   }

//   return (
//     <div className="flex flex-wrap gap-2 overflow-x-auto">
//       {categories.map((cat, idx) => (
//         <button
//           key={idx}
//           onClick={() => onCategoryChange(cat)}
//           className={`px-4 py-1 text-sm rounded font-medium border transition-colors ${
//             selectedCategory === cat
//               ? "bg-[#C6A455] text-white"
//               : "bg-white text-gray-800 hover:bg-gray-50"
//           }`}
//         >
//           {cat.toUpperCase()}
//         </button>
//       ))}
//     </div>
//   );
// }