hspguard/web/src/pages/Admin/ApiServices/View/index.tsx

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

const InfoCard = ({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) => (
  <div className="border dark:border-gray-800 border-gray-300 rounded mb-4">
    <div className="p-4 border-b dark:border-gray-800 border-gray-300">
      <h2 className="text-gray-800 dark:text-gray-200 font-semibold text-lg">
        {title}
      </h2>
    </div>
    <div className="p-4">{children}</div>
  </div>
);

const ViewApiServicePage: FC = () => {
  const { serviceId } = useParams();
  const apiService = useApiServices((state) => state.view);
  // const loading = useApiServices((state) => state.fetchingApiService);

  const loadService = useApiServices((state) => state.fetchSingle);

  const toggling = useApiServices((state) => state.toggling);
  const toggle = useApiServices((state) => state.toggle);

  useEffect(() => {
    if (typeof serviceId === "string") loadService(serviceId);
  }, [loadService, serviceId]);

  if (!apiService) {
    return (
      <div className="p-4 flex items-center justify-center h-[60vh]">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-2 border-blue-500 border-t-transparent mx-auto mb-3" />
          <p className="text-gray-600 dark:text-gray-400">
            Loading API Service...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="dark:text-gray-200 text-gray-800 p-4">
      <Breadcrumbs
        items={[
          { href: "/admin", label: "Admin" },
          { href: "/admin/api-services", label: "API Services" },
          { label: "View API Service" },
        ]}
      />

      <div className="sm:p-4 pt-4">
        {/* 📋 Main Details */}
        <InfoCard title="API Service Details">
          <div className="flex flex-col gap-4 text-sm text-gray-700 dark:text-gray-300">
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Name:
              </span>{" "}
              {apiService.name}
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Description:
              </span>{" "}
              {apiService.description}
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Redirect URIs:
              </span>
              <ul className="list-disc list-inside ml-4 mt-1">
                {apiService.redirect_uris.map((uri) => (
                  <li key={uri}>{uri}</li>
                ))}
              </ul>
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Scopes:
              </span>
              <div className="flex flex-wrap gap-2 mt-1">
                {apiService.scopes.map((scope) => (
                  <span
                    key={scope}
                    className="bg-blue-100 dark:bg-blue-800/30 text-blue-700 dark:text-blue-300 text-xs font-medium px-2 py-1 rounded"
                  >
                    {scope}
                  </span>
                ))}
              </div>
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Grant Types:
              </span>
              <div className="flex flex-wrap gap-2 mt-1">
                {apiService.grant_types.map((grant) => (
                  <span
                    key={grant}
                    className="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-300 text-xs font-medium px-2 py-1 rounded"
                  >
                    {grant}
                  </span>
                ))}
              </div>
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Created At:
              </span>{" "}
              {new Date(apiService.created_at).toLocaleString()}
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Updated At:
              </span>{" "}
              {new Date(apiService.updated_at).toLocaleString()}
            </div>
            <div>
              <span className="font-medium text-gray-900 dark:text-white">
                Status:
              </span>{" "}
              <span
                className={`font-semibold px-2 py-1 rounded ${
                  apiService.is_active
                    ? "bg-green-200 text-green-800 dark:bg-green-700/20 dark:text-green-300"
                    : "bg-red-200 text-red-800 dark:bg-red-700/20 dark:text-red-300"
                }`}
              >
                {apiService.is_active ? "Active" : "Inactive"}
              </span>
            </div>
          </div>
        </InfoCard>

        {/* 🔐 Credentials */}
        <InfoCard title="Client Credentials">
          <div className="flex flex-col gap-4">
            <div>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                <span className="font-medium text-gray-900 dark:text-white">
                  Client ID:
                </span>
              </p>
              <Input value={apiService.client_id} disabled />
            </div>

            <div>
              <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">
                <span className="font-medium text-gray-900 dark:text-white">
                  Client Secret:
                </span>
              </p>
              <Input value="***************" disabled />
            </div>

            <Button variant="outlined" onClick={() => {}}>
              Regenerate Credentials
            </Button>
          </div>
        </InfoCard>

        {/* 🚀 Actions */}
        <div className="flex flex-wrap gap-4 mt-6 justify-between items-center">
          <Link to="/admin/api-services">
            <Button variant="outlined">Back</Button>
          </Link>
          <div className="flex flex-row items-center gap-4">
            <Button
              variant="text"
              className={
                apiService.is_active
                  ? "text-red-400 hover:text-red-500"
                  : "text-green-400 hover:text-green-500"
              }
              onClick={toggle}
              loading={toggling}
            >
              {apiService.is_active ? "Disable" : "Enable"}
            </Button>
            <Link
              to={`/admin/api-services/edit/${serviceId}`}
              className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            >
              <Button variant="contained">Edit</Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ViewApiServicePage;