import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { Plus, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";

import { InviteForm, type InviteFormValues } from "@/client/components/admin/invite-form";
import { Button } from "@/client/components/ui/button";
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 { ListRow } from "@/client/components/ui/row";
import { SecretRevealCard } from "@/client/components/ui/secret-reveal-card";
import { useRequireAdmin } from "@/client/hooks/use-auth-guard";
import { useResourceForm } from "@/client/hooks/use-resource-form";
import { formatDate, formatDateTime } from "@/client/lib/format";
import { apiJsonRequest, apiRequest, responseMessage } from "@/client/lib/http";
import { queryKeys } from "@/client/lib/query";
import { hasAdminRole } from "@/shared/role";

interface Invite {
  id: string;
  email: string;
  createdAt: string;
  expiresAt: string;
  consumedAt: string | null;
}

type InviteStatus = "pending" | "consumed" | "expired";

const STATUS_ORDER: Record<InviteStatus, number> = { pending: 0, expired: 1, consumed: 2 };
const STATUS_LABEL: Record<InviteStatus, string> = {
  pending: "Pending",
  consumed: "Consumed",
  expired: "Expired",
};
const STATUS_TONE: Record<InviteStatus, string> = {
  pending: "text-zinc-200",
  consumed: "text-zinc-500",
  expired: "text-zinc-500",
};

const statusOf = (invite: Invite): InviteStatus => {
  if (invite.consumedAt) return "consumed";
  if (Date.parse(invite.expiresAt) < Date.now()) return "expired";
  return "pending";
};

export const AdminInvitesPage = () => {
  const session = useRequireAdmin("/admin/invites");
  const queryClient = useQueryClient();
  const [submitting, setSubmitting] = useState(false);
  const [lastUrl, setLastUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const form = useResourceForm({ canCancel: () => !submitting });
  const isAdmin = hasAdminRole(session.data?.user.role);
  const userId = session.data?.user.id ?? null;
  const isLocked = submitting || form.creating || lastUrl !== null;
  const invitesQueryKey = queryKeys.adminInvites(userId);

  const invitesQuery = useInfiniteQuery({
    queryKey: invitesQueryKey,
    queryFn: async ({ pageParam }: { pageParam: string | null }) => {
      const url = pageParam ? `/api/admin/invites?cursor=${encodeURIComponent(pageParam)}` : "/api/admin/invites";
      const res = await apiRequest(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return (await res.json()) as { invites: Invite[]; nextCursor: string | null };
    },
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    enabled: isAdmin,
  });
  const invites = useMemo(() => invitesQuery.data?.pages.flatMap((page) => page.invites) ?? [], [invitesQuery.data]);
  const hasNextPage = invitesQuery.hasNextPage;
  const loadingMore = invitesQuery.isFetchingNextPage;

  const loadMore = async () => {
    if (!invitesQuery.hasNextPage || invitesQuery.isFetchingNextPage) return;
    await invitesQuery.fetchNextPage();
  };

  const sortedInvites = useMemo(
    () =>
      [...invites].sort((a, b) => {
        const byStatus = STATUS_ORDER[statusOf(a)] - STATUS_ORDER[statusOf(b)];
        if (byStatus !== 0) return byStatus;
        return Date.parse(b.createdAt) - Date.parse(a.createdAt);
      }),
    [invites],
  );

  const handleCreate = async (values: InviteFormValues) => {
    if (submitting) return;
    form.setFormError(null);
    setSubmitting(true);
    try {
      const res = await apiJsonRequest(
        "/api/admin/invites",
        { email: values.email, expiresInDays: values.days },
        { method: "POST" },
      );
      if (!res.ok) {
        form.setFormError(await responseMessage(res, "Could not create invite."));
        return;
      }
      const body = (await res.json()) as { inviteUrl: string };
      setLastUrl(body.inviteUrl);
      form.close();
      await queryClient.resetQueries({ queryKey: invitesQueryKey, exact: true });
    } finally {
      setSubmitting(false);
    }
  };

  const handleRevoke = async (id: string) => {
    await apiRequest(`/api/admin/invites/${id}`, { method: "DELETE" });
    await queryClient.resetQueries({ queryKey: invitesQueryKey, exact: true });
  };

  return (
    <div className="mx-auto max-w-3xl">
      <PageHeader
        title="Invites"
        actions={
          <Button size="sm" onClick={form.startCreate} disabled={isLocked}>
            <Plus className="h-4 w-4" aria-hidden="true" />
            New invite
          </Button>
        }
      />
      <PageError message={error} onDismiss={() => setError(null)} />
      {lastUrl ? (
        <div className="mb-6">
          <SecretRevealCard
            eyebrow="New invite — copy now, this is the only time it's shown"
            lines={[{ label: "url", value: lastUrl }]}
            copyLabel="Copy invite URL"
            onDismiss={() => setLastUrl(null)}
          />
        </div>
      ) : null}

      {form.creating ? (
        <Card className="mb-4">
          <InviteForm
            pending={submitting}
            error={form.formError}
            onDismissError={() => form.setFormError(null)}
            onSubmit={handleCreate}
            onCancel={form.cancel}
          />
        </Card>
      ) : null}

      <Card>
        {sortedInvites.length === 0 ? (
          <p className="text-sm text-zinc-500">No invites yet.</p>
        ) : (
          <>
            <ul className="flex flex-col gap-2">
              {sortedInvites.map((invite) => {
                const status = statusOf(invite);
                return (
                  <ListRow
                    key={invite.id}
                    className="flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between"
                  >
                    <div className="min-w-0">
                      <div className="flex items-baseline gap-3">
                        <span
                          className={`shrink-0 text-[10px] font-medium uppercase tracking-[0.18em] ${STATUS_TONE[status]}`}
                        >
                          {STATUS_LABEL[status]}
                        </span>
                        <p className="truncate text-zinc-100">{invite.email}</p>
                      </div>
                      <p className="mt-1 text-xs text-zinc-500">
                        {status === "consumed"
                          ? `Consumed ${formatDate(invite.consumedAt!)}`
                          : status === "expired"
                            ? `Expired ${formatDateTime(invite.expiresAt)}`
                            : `Expires ${formatDateTime(invite.expiresAt)}`}
                      </p>
                    </div>
                    {status === "pending" ? (
                      <ConfirmButton
                        variant="ghost"
                        size="sm"
                        aria-label="Revoke invite"
                        title="Revoke invite"
                        className="self-start sm:self-auto"
                        onConfirm={() => handleRevoke(invite.id)}
                      >
                        <Trash2 className="h-4 w-4" aria-hidden="true" />
                      </ConfirmButton>
                    ) : null}
                  </ListRow>
                );
              })}
            </ul>
            {hasNextPage ? (
              <div className="mt-4">
                <Button variant="ghost" size="sm" onClick={loadMore} loading={loadingMore}>
                  Load more
                </Button>
              </div>
            ) : null}
          </>
        )}
      </Card>
    </div>
  );
};