import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { User, USER_STATUS_LABELS } 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 currentStatusText = USER_STATUS_LABELS[user.status as keyof typeof USER_STATUS_LABELS] || user.status;
  const newStatusText = USER_STATUS_LABELS[newStatus as keyof typeof USER_STATUS_LABELS] || newStatus;

  const currentStatusColor = user.status === "active" ? "text-primary" : "text-muted-foreground";
  const newStatusColor = newStatus === "active" ? "text-primary" : "text-muted-foreground";

  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-3">
            <div className="flex items-center gap-2">
              <span className="text-muted-foreground w-16 text-sm">사용자:</span>
              <span className="font-medium">
                {user.userName} ({user.userId})
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-muted-foreground w-16 text-sm">상태 변경:</span>
              <div className="flex items-center gap-2">
                <span className={`font-medium ${currentStatusColor}`}>{currentStatusText}</span>
                <span className="text-muted-foreground">→</span>
                <span className={`font-medium ${newStatusColor}`}>{newStatusText}</span>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onCancel}>
            취소
          </Button>
          <Button onClick={onConfirm} variant="default">
            변경
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}