"use client";

export const dynamic = "force-dynamic";

import { useMemo } from "react";
import { useParams, useRouter } from "next/navigation";

import { SignedIn, SignedOut, useAuth } from "@/auth/clerk";

import { ApiError } from "@/api/mutator";
import {
  type gatewaysStatusApiV1GatewaysStatusGetResponse,
  type getGatewayApiV1GatewaysGatewayIdGetResponse,
  useGatewaysStatusApiV1GatewaysStatusGet,
  useGetGatewayApiV1GatewaysGatewayIdGet,
} from "@/api/generated/gateways/gateways";
import {
  type listAgentsApiV1AgentsGetResponse,
  useListAgentsApiV1AgentsGet,
} from "@/api/generated/agents/agents";
import { useOrganizationMembership } from "@/lib/use-organization-membership";
import { AdminOnlyNotice } from "@/components/auth/AdminOnlyNotice";
import { SignedOutPanel } from "@/components/auth/SignedOutPanel";
import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
import { DashboardShell } from "@/components/templates/DashboardShell";
import { Button } from "@/components/ui/button";

const formatTimestamp = (value?: string | null) => {
  if (!value) return "—";
  const date = new Date(`${value}${value.endsWith("Z") ? "" : "Z"}`);
  if (Number.isNaN(date.getTime())) return "—";
  return date.toLocaleString(undefined, {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

const maskToken = (value?: string | null) => {
  if (!value) return "—";
  if (value.length <= 8) return "••••";
  return `••••${value.slice(-4)}`;
};

export default function GatewayDetailPage() {
  const router = useRouter();
  const params = useParams();
  const { isSignedIn } = useAuth();
  const gatewayIdParam = params?.gatewayId;
  const gatewayId = Array.isArray(gatewayIdParam)
    ? gatewayIdParam[0]
    : gatewayIdParam;

  const { isAdmin } = useOrganizationMembership(isSignedIn);

  const gatewayQuery = useGetGatewayApiV1GatewaysGatewayIdGet<
    getGatewayApiV1GatewaysGatewayIdGetResponse,
    ApiError
  >(gatewayId ?? "", {
    query: {
      enabled: Boolean(isSignedIn && isAdmin && gatewayId),
      refetchInterval: 30_000,
    },
  });

  const gateway =
    gatewayQuery.data?.status === 200 ? gatewayQuery.data.data : null;

  const agentsQuery = useListAgentsApiV1AgentsGet<
    listAgentsApiV1AgentsGetResponse,
    ApiError
  >(gatewayId ? { gateway_id: gatewayId } : undefined, {
    query: {
      enabled: Boolean(isSignedIn && isAdmin && gatewayId),
      refetchInterval: 15_000,
    },
  });

  const statusParams = gateway
    ? {
        gateway_url: gateway.url,
        gateway_token: gateway.token ?? undefined,
        gateway_main_session_key: gateway.main_session_key ?? undefined,
      }
    : undefined;

  const statusQuery = useGatewaysStatusApiV1GatewaysStatusGet<
    gatewaysStatusApiV1GatewaysStatusGetResponse,
    ApiError
  >(statusParams, {
    query: {
      enabled: Boolean(isSignedIn && isAdmin && statusParams),
      refetchInterval: 15_000,
    },
  });

  const agents = useMemo(
    () =>
      agentsQuery.data?.status === 200
        ? (agentsQuery.data.data.items ?? [])
        : [],
    [agentsQuery.data],
  );

  const status =
    statusQuery.data?.status === 200 ? statusQuery.data.data : null;
  const isConnected = status?.connected ?? false;

  const title = useMemo(
    () => (gateway?.name ? gateway.name : "Gateway"),
    [gateway?.name],
  );

  return (
    <DashboardShell>
      <SignedOut>
        <SignedOutPanel
          message="Sign in to view a gateway."
          forceRedirectUrl={`/gateways/${gatewayId}`}
        />
      </SignedOut>
      <SignedIn>
        <DashboardSidebar />
        <main className="flex-1 overflow-y-auto bg-slate-50">
          <div className="border-b border-slate-200 bg-white px-8 py-6">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <h1 className="font-heading text-2xl font-semibold text-slate-900 tracking-tight">
                  {title}
                </h1>
                <p className="mt-1 text-sm text-slate-500">
                  Gateway configuration and connection details.
                </p>
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  onClick={() => router.push("/gateways")}
                >
                  Back to gateways
                </Button>
                {isAdmin && gatewayId ? (
                  <Button
                    onClick={() => router.push(`/gateways/${gatewayId}/edit`)}
                  >
                    Edit gateway
                  </Button>
                ) : null}
              </div>
            </div>
          </div>

          <div className="p-8">
            {!isAdmin ? (
              <AdminOnlyNotice message="Only organization owners and admins can access gateways." />
            ) : gatewayQuery.isLoading ? (
              <div className="rounded-xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">
                Loading gateway…
              </div>
            ) : gatewayQuery.error ? (
              <div className="rounded-xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700">
                {gatewayQuery.error.message}
              </div>
            ) : gateway ? (
              <div className="space-y-6">
                <div className="grid gap-6 lg:grid-cols-2">
                  <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div className="flex items-center justify-between">
                      <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                        Connection
                      </p>
                      <div className="flex items-center gap-2 text-xs text-slate-500">
                        <span
                          className={`h-2 w-2 rounded-full ${
                            statusQuery.isLoading
                              ? "bg-slate-300"
                              : isConnected
                                ? "bg-emerald-500"
                                : "bg-rose-500"
                          }`}
                        />
                        <span>
                          {statusQuery.isLoading
                            ? "Checking"
                            : isConnected
                              ? "Online"
                              : "Offline"}
                        </span>
                      </div>
                    </div>
                    <div className="mt-4 space-y-3 text-sm text-slate-700">
                      <div>
                        <p className="text-xs uppercase text-slate-400">
                          Gateway URL
                        </p>
                        <p className="mt-1 text-sm font-medium text-slate-900">
                          {gateway.url}
                        </p>
                      </div>
                      <div>
                        <p className="text-xs uppercase text-slate-400">
                          Token
                        </p>
                        <p className="mt-1 text-sm font-medium text-slate-900">
                          {maskToken(gateway.token)}
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                      Runtime
                    </p>
                    <div className="mt-4 space-y-3 text-sm text-slate-700">
                      <div>
                        <p className="text-xs uppercase text-slate-400">
                          Main session key
                        </p>
                        <p className="mt-1 text-sm font-medium text-slate-900">
                          {gateway.main_session_key}
                        </p>
                      </div>
                      <div>
                        <p className="text-xs uppercase text-slate-400">
                          Workspace root
                        </p>
                        <p className="mt-1 text-sm font-medium text-slate-900">
                          {gateway.workspace_root}
                        </p>
                      </div>
                      <div className="grid gap-3 sm:grid-cols-2">
                        <div>
                          <p className="text-xs uppercase text-slate-400">
                            Created
                          </p>
                          <p className="mt-1 text-sm font-medium text-slate-900">
                            {formatTimestamp(gateway.created_at)}
                          </p>
                        </div>
                        <div>
                          <p className="text-xs uppercase text-slate-400">
                            Updated
                          </p>
                          <p className="mt-1 text-sm font-medium text-slate-900">
                            {formatTimestamp(gateway.updated_at)}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                  <div className="flex items-center justify-between">
                    <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                      Agents
                    </p>
                    {agentsQuery.isLoading ? (
                      <span className="text-xs text-slate-500">Loading…</span>
                    ) : (
                      <span className="text-xs text-slate-500">
                        {agents.length} total
                      </span>
                    )}
                  </div>
                  <div className="mt-4 overflow-x-auto">
                    <table className="w-full text-left text-sm">
                      <thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                        <tr>
                          <th className="px-4 py-3">Agent</th>
                          <th className="px-4 py-3">Status</th>
                          <th className="px-4 py-3">Last seen</th>
                          <th className="px-4 py-3">Updated</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-slate-100">
                        {agents.length === 0 && !agentsQuery.isLoading ? (
                          <tr>
                            <td
                              colSpan={4}
                              className="px-4 py-6 text-center text-xs text-slate-500"
                            >
                              No agents assigned to this gateway.
                            </td>
                          </tr>
                        ) : (
                          agents.map((agent) => (
                            <tr key={agent.id} className="hover:bg-slate-50">
                              <td className="px-4 py-3">
                                <p className="text-sm font-medium text-slate-900">
                                  {agent.name}
                                </p>
                                <p className="text-xs text-slate-500">
                                  {agent.id}
                                </p>
                              </td>
                              <td className="px-4 py-3 text-sm text-slate-700">
                                {agent.status}
                              </td>
                              <td className="px-4 py-3 text-xs text-slate-500">
                                {formatTimestamp(agent.last_seen_at ?? null)}
                              </td>
                              <td className="px-4 py-3 text-xs text-slate-500">
                                {formatTimestamp(agent.updated_at)}
                              </td>
                            </tr>
                          ))
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            ) : null}
          </div>
        </main>
      </SignedIn>
    </DashboardShell>
  );
}