"use client";

import * as React from "react";
import { AlertCircle, Loader2 } from "lucide-react";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

interface LogoutConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  isLoading: boolean;
}

export function LogoutConfirmDialog({
  open,
  onOpenChange,
  onConfirm,
  isLoading,
}: LogoutConfirmDialogProps) {
  return (
    <AlertDialog
      open={open}
      onOpenChange={(open) => {
        if (!open && isLoading) return;
        onOpenChange(open);
      }}
    >
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <div className="flex items-center gap-3 mb-1">
            <div className="flex size-10 items-center justify-center rounded-full bg-red-50">
              {isLoading ? (
                <Loader2 className="size-5 animate-spin text-red-600" />
              ) : (
                <AlertCircle className="size-5 text-red-600" />
              )}
            </div>
            <AlertDialogTitle className="text-xl font-bold font-['Lexend'] text-[#101828]">
              {isLoading ? "Signing out…" : "Confirm Logout"}
            </AlertDialogTitle>
          </div>
          <AlertDialogDescription className="text-[14px] leading-relaxed text-[#575a62] font-['Lexend_Deca']">
            {isLoading
              ? "Please wait while we finish signing you out on the server and clear your session."
              : "Are you sure you want to log out? You will need to sign in again to access your account."}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="mt-4 gap-3">
          <AlertDialogCancel
            disabled={isLoading}
            className="h-11 rounded-[12px] border-[#eaecf0] bg-white px-4 font-['Lexend_Deca'] text-[13px] font-semibold text-[#344054] hover:bg-gray-50 transition-all duration-200"
          >
            Cancel
          </AlertDialogCancel>
          <Button
            type="button"
            disabled={isLoading}
            onClick={() => void onConfirm()}
            className="h-11 rounded-[12px] bg-red-600 px-4 font-['Lexend_Deca'] text-[13px] font-semibold text-white hover:bg-red-700 shadow-[0px_1px_2px_rgba(16,24,40,0.05)] transition-all duration-200"
          >
            {isLoading ? (
              <>
                <Loader2 className="mr-2 size-4 animate-spin" />
                Please wait…
              </>
            ) : (
              "Log out"
            )}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}