'use client';

import { useEffect, useState, useCallback } from 'react';
import { setConfirmHandler } from '@/lib/confirm';

interface ConfirmState {
    isOpen: boolean;
    message: string;
    resolve: ((value: boolean) => void) | null;
}

export default function ConfirmDialog() {
    const [state, setState] = useState<ConfirmState>({
        isOpen: false,
        message: '',
        resolve: null,
    });

    useEffect(() => {
        setConfirmHandler((message, resolve) => {
            setState({ isOpen: true, message, resolve });
        });
        return () => setConfirmHandler(null);
    }, []);

    const handleConfirm = useCallback(() => {
        state.resolve?.(true);
        setState(prev => ({ ...prev, isOpen: false, resolve: null }));
    }, [state.resolve]);

    const handleCancel = useCallback(() => {
        state.resolve?.(false);
        setState(prev => ({ ...prev, isOpen: false, resolve: null }));
    }, [state.resolve]);

    // Keyboard support: Enter to confirm, Escape to cancel
    useEffect(() => {
        if (!state.isOpen) return;
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Escape') handleCancel();
            if (e.key === 'Enter') handleConfirm();
        };
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [state.isOpen, handleConfirm, handleCancel]);

    if (!state.isOpen) return null;

    return (
        <div className="fixed inset-0 z-[200] flex items-center justify-center px-4" role="alertdialog" aria-modal="true" aria-label="확인 대화상자">
            <div className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onClick={handleCancel} />
            <div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
                <div className="p-6">
                    <p className="text-sm text-gray-700 whitespace-pre-line leading-relaxed">{state.message}</p>
                </div>
                <div className="flex border-t border-gray-100">
                    <button
                        onClick={handleCancel}
                        className="flex-1 py-3.5 text-gray-600 font-bold text-sm hover:bg-gray-50 transition-colors focus:outline-none focus:bg-gray-50"
                        aria-label="취소"
                    >
                        취소
                    </button>
                    <button
                        onClick={handleConfirm}
                        className="flex-1 py-3.5 text-indigo-600 font-bold text-sm hover:bg-indigo-50 transition-colors border-l border-gray-100 focus:outline-none focus:bg-indigo-50"
                        autoFocus
                        aria-label="확인"
                    >
                        확인
                    </button>
                </div>
            </div>
        </div>
    );
}