"use client";

import { useLocale, useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { toast } from "sonner";

import { RoleBadge } from "@/components/org/role-badge";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { revokeInvitation } from "@/lib/actions/team";

export function PendingInvitationRow({
  invitation,
}: {
  invitation: { id: string; email: string; role: "admin" | "member"; expiresAt: Date };
}) {
  const t = useTranslations("Settings.team");
  const locale = useLocale();
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  const dateLocale = locale === "fr" ? "fr-FR" : locale === "es" ? "es-ES" : "en-US";
  const fmt = new Intl.DateTimeFormat(dateLocale, { dateStyle: "medium" });

  function onRevoke() {
    startTransition(async () => {
      try {
        await revokeInvitation({ invitationId: invitation.id });
        toast.success(t("invitationRevokeSuccess"));
        router.refresh();
      } catch {
        toast.error(t("invitationRevokeFailed"));
      }
    });
  }

  return (
    <li className="flex items-center justify-between gap-3 rounded-md border px-3 py-2">
      <div className="flex min-w-0 flex-col">
        <span className="truncate font-medium">{invitation.email}</span>
        <span className="truncate text-xs text-muted-foreground">
          {t("invitationExpiresAt", { date: fmt.format(invitation.expiresAt) })}
        </span>
      </div>
      <div className="flex items-center gap-2">
        <RoleBadge role={invitation.role} />
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button type="button" variant="ghost" size="sm" disabled={isPending}>
              {t("invitationRevoke")}
            </Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{t("invitationRevoke")}</AlertDialogTitle>
              <AlertDialogDescription>
                {t("invitationRevokeConfirm", { email: invitation.email })}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
              <AlertDialogAction onClick={onRevoke} disabled={isPending}>
                {t("invitationRevoke")}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </div>
    </li>
  );
}