"use client";

/**
 * UnsavedChangesGuard
 *
 * 모달에서 저장하지 않은 변경사항이 있을 때 닫기를 시도하면
 * 확인 다이얼로그를 띄우는 공통 모듈.
 *
 * 사용법:
 * 1. useUnsavedChangesGuard 훅으로 상태 관리
 * 2. UnsavedChangesDialog 컴포넌트로 확인 다이얼로그 렌더링
 *
 * @example
 * const guard = useUnsavedChangesGuard({
 *   hasChanges: () => JSON.stringify(data) !== initialSnapshot,
 *   onClose: () => onOpenChange(false),
 * });
 *
 * <Dialog open={open} onOpenChange={guard.handleOpenChange}>
 *   ...
 *   <Button onClick={guard.tryClose}>취소</Button>
 * </Dialog>
 * <UnsavedChangesDialog guard={guard} />
 */

import { useState, useCallback } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface UseUnsavedChangesGuardOptions {
  hasChanges: () => boolean;
  onClose: () => void;
  title?: string;
  description?: string;
}

export interface UnsavedChangesGuardState {
  showConfirm: boolean;
  setShowConfirm: (v: boolean) => void;
  tryClose: () => void;
  doClose: () => void;
  handleOpenChange: (open: boolean) => void;
  title: string;
  description: string;
}

export function useUnsavedChangesGuard({
  hasChanges,
  onClose,
  title = "저장하지 않은 변경사항",
  description = "저장하지 않은 변경사항이 있습니다. 저장하지 않고 닫으시겠습니까?",
}: UseUnsavedChangesGuardOptions): UnsavedChangesGuardState {
  const [showConfirm, setShowConfirm] = useState(false);

  const doClose = useCallback(() => {
    setShowConfirm(false);
    onClose();
  }, [onClose]);

  const tryClose = useCallback(() => {
    if (hasChanges()) {
      setShowConfirm(true);
      return;
    }
    doClose();
  }, [hasChanges, doClose]);

  const handleOpenChange = useCallback(
    (open: boolean) => {
      if (!open) tryClose();
    },
    [tryClose],
  );

  return { showConfirm, setShowConfirm, tryClose, doClose, handleOpenChange, title, description };
}

interface UnsavedChangesDialogProps {
  guard: UnsavedChangesGuardState;
}

export function UnsavedChangesDialog({ guard }: UnsavedChangesDialogProps) {
  return (
    <AlertDialog open={guard.showConfirm} onOpenChange={guard.setShowConfirm}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{guard.title}</AlertDialogTitle>
          <AlertDialogDescription>{guard.description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogAction
            onClick={guard.doClose}
            className="bg-red-600 text-white hover:bg-red-700"
          >
            닫기
          </AlertDialogAction>
          <AlertDialogCancel>취소</AlertDialogCancel>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}