import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ExternalLink, Trash2 } from "lucide-react";
import { useState } from "react";

import { BackLink } from "@/client/components/ui/back-link";
import { Card } from "@/client/components/ui/card";
import { ConfirmButton } from "@/client/components/ui/confirm-button";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { PanelRow } from "@/client/components/ui/row";
import { Skeleton } from "@/client/components/ui/skeleton";
import { useRequireSession } from "@/client/hooks/use-auth-guard";
import { formatDate } from "@/client/lib/format";
import { apiRequest, responseMessage } from "@/client/lib/http";
import { fetchJson, queryKeys } from "@/client/lib/query";

interface ConnectedApp {
  id: string;
  client_id: string;
  client_name: string | null;
  client_uri: string | null;
  scopes: string[];
  granted_at: string | null;
  updated_at: string | null;
}

const AppRowsSkeleton = ({ count }: { count: number }) => (
  <div className="flex flex-col gap-3" aria-busy="true">
    {Array.from({ length: count }, (_, i) => (
      <div
        key={i}
        className="flex flex-col gap-3 rounded-xl border border-zinc-800/60 bg-zinc-900/40 px-4 py-3 sm:flex-row sm:items-start sm:justify-between"
      >
        <div className="min-w-0 flex-1 space-y-2">
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-3 w-56" />
          <div className="flex gap-1 pt-1">
            <Skeleton className="h-4 w-12 rounded" />
            <Skeleton className="h-4 w-16 rounded" />
            <Skeleton className="h-4 w-10 rounded" />
          </div>
          <Skeleton className="h-3 w-32" />
        </div>
        <Skeleton className="h-9 w-20 rounded-lg" />
      </div>
    ))}
  </div>
);

const AccountAppsPageSkeleton = () => (
  <div className="mx-auto max-w-3xl" aria-busy="true">
    <Skeleton className="mb-6 h-4 w-24" />
    <div className="mb-8">
      <Skeleton className="mb-3 h-8 w-48" />
      <Skeleton className="h-4 w-full max-w-xl" />
    </div>
    <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-5 sm:p-6">
      <Skeleton className="mb-4 h-5 w-28" />
      <AppRowsSkeleton count={2} />
    </div>
  </div>
);

export const AccountAppsPage = () => {
  const session = useRequireSession("/account/apps");
  const queryClient = useQueryClient();
  const userId = session.data?.user.id ?? null;
  const appsQueryKey = queryKeys.accountApps(userId);
  const { data: apps = null } = useQuery({
    queryKey: appsQueryKey,
    queryFn: () => fetchJson<ConnectedApp[]>("/api/account/connected-apps"),
    enabled: Boolean(userId),
  });
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState<string | null>(null);

  const handleRevoke = async (app: ConnectedApp) => {
    setError(null);
    setPending(app.id);
    try {
      const res = await apiRequest(`/api/account/connected-apps/${encodeURIComponent(app.id)}`, {
        method: "DELETE",
      });
      if (!res.ok && res.status !== 204) {
        setError(await responseMessage(res, "Could not revoke access."));
        return;
      }
      await queryClient.invalidateQueries({ queryKey: appsQueryKey, exact: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to revoke access.");
    } finally {
      setPending(null);
    }
  };

  if (session.isPending || !session.data) {
    return <AccountAppsPageSkeleton />;
  }

  return (
    <div className="mx-auto max-w-3xl">
      <BackLink to="/account">Account</BackLink>
      <PageHeader
        title="Connected apps"
        description="Third-party apps you've authorized to sign you in. Revoking removes the grant and clears any active tokens."
      />
      <PageError message={error} onDismiss={() => setError(null)} />
      <Card>
        <h2 className="mb-4 text-lg font-semibold text-zinc-100">Authorized</h2>
        {!apps ? (
          <AppRowsSkeleton count={2} />
        ) : (
          <div className="flex flex-col gap-3">
            {apps.map((app) => (
              <PanelRow key={app.id} className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <p className="text-sm font-medium text-zinc-100">{app.client_name ?? app.client_id}</p>
                    {app.client_uri ? (
                      <a
                        href={app.client_uri}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-0.5 text-xs text-zinc-500 hover:text-zinc-300"
                      >
                        <ExternalLink className="h-3 w-3" aria-hidden="true" />
                        visit
                      </a>
                    ) : null}
                  </div>
                  <code className="mt-1 block truncate text-xs text-zinc-500">{app.client_id}</code>
                  {Array.isArray(app.scopes) && app.scopes.length > 0 ? (
                    <div className="mt-2 flex flex-wrap gap-1">
                      {app.scopes.map((s) => (
                        <code
                          key={s}
                          className="rounded bg-zinc-800/60 px-1.5 py-0.5 font-mono text-[0.7rem] text-zinc-300"
                        >
                          {s}
                        </code>
                      ))}
                    </div>
                  ) : null}
                  {app.granted_at ? (
                    <p className="mt-2 text-xs text-zinc-500">Authorized {formatDate(app.granted_at)}</p>
                  ) : null}
                </div>
                <ConfirmButton
                  variant="ghost"
                  size="sm"
                  loading={pending === app.id}
                  onConfirm={() => handleRevoke(app)}
                >
                  <Trash2 className="h-4 w-4" aria-hidden="true" />
                  Revoke
                </ConfirmButton>
              </PanelRow>
            ))}
            {apps.length === 0 ? <p className="text-sm text-zinc-500">No third-party apps authorized yet.</p> : null}
          </div>
        )}
      </Card>
    </div>
  );
};