import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button";
import { useApiServices } from "@/store/admin/apiServices";
import { Plus } from "lucide-react";
import { useEffect, type FC } from "react";
import { Link } from "react-router";

const ApiServicesPage: FC = () => {
  const apiServices = useApiServices((state) => state.apiServices);
  const loading = useApiServices((state) => state.loading);
  const fetchApiServices = useApiServices((state) => state.fetch);

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

  return (
    <div className="relative flex flex-col items-stretch w-full h-full">
      <div className="p-4">
        <Breadcrumbs
          className="pb-2"
          items={[
            {
              href: "/admin",
              label: "Admin",
            },
            {
              label: "API Services",
            },
          ]}
        />
      </div>
      <div className="p-4 flex flex-row items-center justify-between">
        <p className="text-gray-800 dark:text-gray-300">Search...</p>
        <Link to="/admin/api-services/create">
          <Button className="flex flex-row items-center gap-2">
            <Plus /> Add API Service
          </Button>
        </Link>
      </div>

      <div className="flex-1 overflow-x-auto">
        <table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
          {loading && (
            <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
              <div className="text-gray-800 dark:text-gray-200 font-medium">
                Loading...
              </div>
            </div>
          )}

          <thead className="bg-black/5 dark:bg-white/5 text-nowrap">
            <tr>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Name
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Client ID
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Is Active
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Created At
              </th>
              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-300 dark:border-gray-700">
                Updated At
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
            {!loading && apiServices.length === 0 ? (
              <tr>
                <td
                  colSpan={5}
                  className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
                >
                  No services found.
                </td>
              </tr>
            ) : (
              apiServices.map((service) => (
                <tr
                  key={service.id}
                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
                >
                  <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-300 dark:border-gray-700">
                    <Link
                      to={`/admin/api-services/view/${service.id}`}
                      className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                    >
                      {service.name}
                    </Link>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700">
                    {service.client_id}
                  </td>
                  <td className="px-6 py-4 text-sm border border-gray-300 dark:border-gray-700">
                    <span
                      className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
                        service.is_active
                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                          : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
                      }`}
                    >
                      {service.is_active ? "Yes" : "No"}
                    </span>
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
                    {new Date(service.created_at).toLocaleString()}
                  </td>
                  <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700">
                    {new Date(service.updated_at).toLocaleString()}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default ApiServicesPage;