import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { User } from "@/types/user";

interface UserStatusConfirmDialogProps {
  user: User | null;
  newStatus: string;
  isOpen: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

/**
 * 사용자 상태 변경 확인 모달
 */
export function UserStatusConfirmDialog({
  user,
  newStatus,
  isOpen,
  onConfirm,
  onCancel,
}: UserStatusConfirmDialogProps) {
  if (!user) return null;

  const statusText = newStatus === "active" ? "활성" : "비활성";
  const statusColor = newStatus === "active" ? "text-blue-600" : "text-gray-600";

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>사용자 상태 변경</DialogTitle>
          <DialogDescription>사용자의 상태를 변경하시겠습니까?</DialogDescription>
        </DialogHeader>

        <div className="py-4">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="text-muted-foreground text-sm">사용자:</span>
              <span className="font-medium">
                {user.user_name} ({user.user_id})
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-muted-foreground text-sm">변경할 상태:</span>
              <span className={`font-medium ${statusColor}`}>{statusText}</span>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onCancel}>
            취소
          </Button>
          <Button onClick={onConfirm} className={newStatus === "active" ? "bg-blue-500 hover:bg-blue-600" : ""}>
            변경
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}