import useHasPermission from '@hooks/use-has-permission';
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { LockOpenIcon, ShieldWarningIcon } from '@phosphor-icons/react';
import { usersQueries } from '@service/queries';
import { unbanUser } from '@service/user.api';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useRouteContext } from '@tanstack/react-router';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { Label } from '@ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
import { UserWithRole } from 'better-auth/plugins';
import { useState } from 'react';
import { toast } from 'sonner';
import { Spinner } from '../ui/spinner';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../ui/table';

type UnbanUserProps = {
  data: UserWithRole;
};

const UnbanUserAction = ({ data }: UnbanUserProps) => {
  const { session } = useRouteContext({ from: '__root__' });
  const isCurrentUser = session?.user.id === data.id;
  const { hasPermission, isLoading } = useHasPermission('user', 'ban');
  const queryClient = useQueryClient();

  const [_open, _setOpen] = useState(false);
  const prevent = usePreventAutoFocus();

  const { mutate: unbanMutation, isPending } = useMutation({
    mutationFn: unbanUser,
    onSuccess: () => {
      queryClient.refetchQueries({
        queryKey: usersQueries.all,
      });
      _setOpen(false);
      toast.success(
        m.users_page_message_unbanned_success({ name: data.name }),
        {
          richColors: true,
        },
      );
    },
    onError: (error: ReturnError) => {
      console.error(error);
      const code = error.code as Parameters<
        typeof m.backend_message
      >[0]['code'];
      toast.error(m.backend_message({ code }), {
        richColors: true,
      });
    },
  });

  const onConfirm = () => {
    unbanMutation({ data: { id: data.id } });
  };

  if (isCurrentUser || isLoading) return null;

  if (hasPermission) {
    return (
      <Dialog open={_open} onOpenChange={_setOpen}>
        <Tooltip>
          <TooltipTrigger asChild>
            <DialogTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="rounded-full cursor-pointer text-green-500 hover:bg-green-100 hover:text-green-600"
              >
                <LockOpenIcon size={16} />
                <span className="sr-only">{m.ui_unban_btn()}</span>
              </Button>
            </DialogTrigger>
          </TooltipTrigger>
          <TooltipContent className="bg-green-500 [&_svg]:bg-green-500 [&_svg]:fill-green-500 text-white">
            <Label>{m.ui_unban_btn()}</Label>
          </TooltipContent>
        </Tooltip>
        <DialogContent
          showCloseButton={false}
          {...prevent}
          onPointerDownOutside={(e) => e.preventDefault()}
          onEscapeKeyDown={(e) => e.preventDefault()}
        >
          <DialogHeader>
            <DialogTitle className="flex items-center gap-3 text-lg font-bold text-green-500">
              <div className="rounded-full bg-green-100 p-3">
                <ShieldWarningIcon size={30} />
              </div>
              {m.users_page_ui_dialog_alert_title()}
            </DialogTitle>
            <DialogDescription className="sr-only">
              {m.users_page_ui_dialog_alert_title()}
            </DialogDescription>
          </DialogHeader>
          <div className="overflow-hidden rounded-md border">
            <Table className="bg-white">
              <TableHeader>
                <TableRow className="bg-primary">
                  <TableHead
                    className="px-2 h-7 text-white text-xs"
                    colSpan={2}
                  >
                    {m.users_page_ui_dialog_alert_description_title()}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-bold">
                    {m.users_page_ui_table_header_name()}:
                  </TableCell>
                  <TableCell>{data.name}</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-bold">
                    {m.users_page_ui_table_header_email()}:
                  </TableCell>
                  <TableCell>{data.email}</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
          <DialogFooter className="bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4">
            <DialogClose asChild>
              <Button variant="outline" type="button">
                {m.ui_cancel_btn()}
              </Button>
            </DialogClose>
            <Button
              variant="destructive"
              type="button"
              onClick={onConfirm}
              disabled={isPending}
            >
              {isPending && <Spinner data-icon="inline-start" />}
              {m.ui_confirm_btn()}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }

  return null;
};

export default UnbanUserAction;
