"use client";

export default function DeveloperTools() {
  const swaggerUrl = process.env.NEXT_PUBLIC_API_URL ? `${process.env.NEXT_PUBLIC_API_URL}/doc` : "http://localhost:8083/doc";
  const portainerUrl = "https://localhost:9443/#!/home"; // Adjust host if needed
  const docsUrl = "/docs"; // Internal docs route with Swagger UI

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Developer Tools</h1>
      <p className="text-gray-600 dark:text-gray-300">Quick access to developer resources.</p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <a
          href={swaggerUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
        >
          <div className="text-xl">📜</div>
          <div className="mt-2 font-medium text-gray-900 dark:text-white">Swagger API Docs</div>
          <div className="text-sm text-gray-600 dark:text-gray-400">Backend OpenAPI /doc</div>
        </a>

        <a
          href={portainerUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
        >
          <div className="text-xl">🧰</div>
          <div className="mt-2 font-medium text-gray-900 dark:text-white">Portainer</div>
          <div className="text-sm text-gray-600 dark:text-gray-400">Container management (:9443)</div>
        </a>

      </div>
    </div>
  );
}