"use client";

import { ActionButton } from "@/components/ui/action-button";
import { ButtonWithTooltip } from "@/components/ui/button";
import { toast } from "@/components/ui/sonner";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  useMutation,
  useQueryClient,
  useSuspenseQuery,
} from "@tanstack/react-query";
import { formatDistanceToNow } from "date-fns";
import { Mail, MailX, UserPlus } from "lucide-react";

import { useTRPC } from "@karakeep/shared-react/trpc";

import ActionConfirmingDialog from "../ui/action-confirming-dialog";
import { AdminCard } from "./AdminCard";
import CreateInviteDialog from "./CreateInviteDialog";

export default function InvitesList() {
  const api = useTRPC();
  const queryClient = useQueryClient();
  const { data: invites } = useSuspenseQuery(api.invites.list.queryOptions());

  const { mutateAsync: revokeInvite, isPending: isRevokePending } = useMutation(
    api.invites.revoke.mutationOptions({
      onSuccess: () => {
        toast({
          description: "Invite revoked successfully",
        });
        queryClient.invalidateQueries(api.invites.list.pathFilter());
      },
      onError: (e) => {
        toast({
          variant: "destructive",
          description: `Failed to revoke invite: ${e.message}`,
        });
      },
    }),
  );

  const { mutateAsync: resendInvite, isPending: isResendPending } = useMutation(
    api.invites.resend.mutationOptions({
      onSuccess: () => {
        toast({
          description: "Invite resent successfully",
        });
        queryClient.invalidateQueries(api.invites.list.pathFilter());
      },
      onError: (e) => {
        toast({
          variant: "destructive",
          description: `Failed to resend invite: ${e.message}`,
        });
      },
    }),
  );

  const activeInvites = invites?.invites || [];

  const InviteTable = ({
    invites: inviteList,
    title,
  }: {
    invites: NonNullable<typeof invites>["invites"];
    title: string;
  }) => (
    <div className="mb-6">
      {inviteList.length === 0 ? (
        <p className="text-sm text-gray-500">
          No {title.toLowerCase()} invites
        </p>
      ) : (
        <Table>
          <TableHeader className="bg-gray-200">
            <TableHead>Email</TableHead>
            <TableHead>Invited By</TableHead>
            <TableHead>Created</TableHead>
            <TableHead>Actions</TableHead>
          </TableHeader>
          <TableBody>
            {inviteList.map((invite) => (
              <TableRow key={invite.id}>
                <TableCell className="py-2">{invite.email}</TableCell>
                <TableCell className="py-2">{invite.invitedBy.name}</TableCell>
                <TableCell className="py-2">
                  {formatDistanceToNow(new Date(invite.createdAt), {
                    addSuffix: true,
                  })}
                </TableCell>
                <TableCell className="flex gap-1 py-2">
                  {
                    <>
                      <ButtonWithTooltip
                        tooltip="Resend Invite"
                        variant="outline"
                        size="sm"
                        onClick={() => resendInvite({ inviteId: invite.id })}
                        disabled={isResendPending}
                      >
                        <Mail size={14} />
                      </ButtonWithTooltip>
                      <ActionConfirmingDialog
                        title="Revoke Invite"
                        description={`Are you sure you want to revoke the invite for ${invite.email}? This action cannot be undone.`}
                        actionButton={(setDialogOpen) => (
                          <ActionButton
                            variant="destructive"
                            loading={isRevokePending}
                            onClick={async () => {
                              await revokeInvite({ inviteId: invite.id });
                              setDialogOpen(false);
                            }}
                          >
                            Revoke
                          </ActionButton>
                        )}
                      >
                        <ButtonWithTooltip
                          tooltip="Revoke Invite"
                          variant="outline"
                          size="sm"
                        >
                          <MailX size={14} color="red" />
                        </ButtonWithTooltip>
                      </ActionConfirmingDialog>
                    </>
                  }
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  );

  return (
    <AdminCard>
      <div className="flex flex-col gap-4">
        <div className="mb-2 flex items-center justify-between text-xl font-medium">
          <span>User Invitations ({activeInvites.length})</span>
          <CreateInviteDialog>
            <ButtonWithTooltip tooltip="Send Invite" variant="outline">
              <UserPlus size={16} />
            </ButtonWithTooltip>
          </CreateInviteDialog>
        </div>

        <InviteTable invites={activeInvites} title="Invites" />
      </div>
    </AdminCard>
  );
}