'use client';

/**
 * LeaveConfirmModal
 * 편집 중 이탈 시 저장 여부를 묻는 커스텀 팝업.
 */

import React, { useState } from 'react';

// ── 타입 정의 ────────────────────────────────────────────────────────────────

interface LeaveConfirmModalProps {
    isOpen: boolean;
    onSaveAndLeave: () => void;
    onDiscardAndLeave: () => void;
    onContinueEditing: () => void;
    isSaving: boolean;
}

// ── 컴포넌트 ─────────────────────────────────────────────────────────────────

export default function LeaveConfirmModal({
    isOpen,
    onSaveAndLeave,
    onDiscardAndLeave,
    onContinueEditing,
    isSaving,
}: LeaveConfirmModalProps) {
    const [isConfirmingDiscard, setIsConfirmingDiscard] = useState(false);

    if (!isOpen) return null;

    const handleDiscardClick = () => {
        const confirmed = window.confirm(
            '임시저장본이 영구 삭제됩니다. 정말 나가시겠습니까?',
        );
        if (confirmed) {
            setIsConfirmingDiscard(false);
            onDiscardAndLeave();
        }
    };

    return (
        <div
            className="fixed inset-0 z-50 flex items-center justify-center"
            role="dialog"
            aria-modal="true"
            aria-labelledby="leave-confirm-title"
        >
            {/* 오버레이 */}
            <div
                className="absolute inset-0 bg-black/50"
                aria-hidden="true"
                onClick={onContinueEditing}
            />

            {/* 모달 박스 */}
            <div className="relative bg-white rounded-2xl shadow-2xl max-w-sm w-full mx-4 p-6 flex flex-col gap-5">

                {/* 제목 + 본문 */}
                <div className="flex flex-col gap-1.5">
                    <h2
                        id="leave-confirm-title"
                        className="text-lg font-bold text-gray-900"
                    >
                        편집을 종료하시겠습니까?
                    </h2>
                    <p className="text-sm text-gray-600">
                        저장하지 않은 변경사항이 있습니다.
                    </p>
                </div>

                {/* 버튼 스택 */}
                <div className="flex flex-col gap-2">
                    {/* 1. 저장 후 나가기 */}
                    <button
                        type="button"
                        onClick={onSaveAndLeave}
                        disabled={isSaving}
                        className="w-full bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 disabled:bg-indigo-400 disabled:cursor-not-allowed text-white font-bold rounded-xl py-2.5 text-sm flex items-center justify-center gap-2 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                    >
                        {isSaving ? (
                            <>
                                {/* 스피너 */}
                                <svg
                                    className="animate-spin h-4 w-4 text-white"
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    aria-hidden="true"
                                >
                                    <circle
                                        className="opacity-25"
                                        cx="12"
                                        cy="12"
                                        r="10"
                                        stroke="currentColor"
                                        strokeWidth="4"
                                    />
                                    <path
                                        className="opacity-75"
                                        fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                                    />
                                </svg>
                                저장 중...
                            </>
                        ) : (
                            '저장 후 나가기'
                        )}
                    </button>

                    {/* 2. 저장하지 않고 나가기 */}
                    <button
                        type="button"
                        onClick={handleDiscardClick}
                        disabled={isSaving || isConfirmingDiscard}
                        className="w-full border border-red-200 bg-red-50 hover:bg-red-100 active:bg-red-200 disabled:opacity-50 disabled:cursor-not-allowed text-red-600 font-medium rounded-xl py-2.5 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2"
                    >
                        저장하지 않고 나가기
                    </button>

                    {/* 3. 편집 계속 */}
                    <button
                        type="button"
                        onClick={onContinueEditing}
                        disabled={isSaving}
                        className="w-full bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed text-gray-700 font-medium rounded-xl py-2.5 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
                    >
                        편집 계속
                    </button>
                </div>
            </div>
        </div>
    );
}