import type { FC } from "react";
import { Link } from "react-router";

const services = [
  {
    id: "1",
    name: "User Service",
    clientId: "user-svc-001",
    isActive: true,
    createdAt: "2024-09-15T10:20:30Z",
    updatedAt: "2025-01-10T12:00:00Z",
  },
  {
    id: "2",
    name: "Billing Service",
    clientId: "billing-svc-009",
    isActive: false,
    createdAt: "2024-10-01T08:45:10Z",
    updatedAt: "2025-03-22T14:30:00Z",
  },
  {
    id: "3",
    name: "Analytics Service",
    clientId: "analytics-svc-777",
    isActive: true,
    createdAt: "2024-11-25T16:00:00Z",
    updatedAt: "2025-02-05T10:15:45Z",
  },
  {
    id: "4",
    name: "Email Service",
    clientId: "email-svc-333",
    isActive: false,
    createdAt: "2023-07-10T13:00:00Z",
    updatedAt: "2024-12-31T09:25:00Z",
  },
];

const ApiServicesPage: FC = () => {
  return (
    <div className="overflow-x-auto rounded shadow-md dark:shadow-gray-800">
      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead className="bg-gray-50 dark:bg-gray-800">
          <tr>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
              Name
            </th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
              Client ID
            </th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
              Is Active
            </th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
              Created At
            </th>
            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
              Updated At
            </th>
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
          {services.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">
                <Link
                  to={`/services/${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">
                {service.clientId}
              </td>
              <td className="px-6 py-4 text-sm">
                <span
                  className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
                    service.isActive
                      ? "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.isActive ? "Yes" : "No"}
                </span>
              </td>
              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                {new Date(service.createdAt).toLocaleString()}
              </td>
              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                {new Date(service.updatedAt).toLocaleString()}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ApiServicesPage;
