'use client';

/**
 * DraftRecoveryModal
 * 편집 화면 진입 시 임시저장본이 있을 때 표시하는 복구 모달.
 */

import React from 'react';

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

interface DraftRecoveryModalProps {
    isOpen: boolean;
    onRecover: () => void;
    onDiscard: () => void;
    draftSavedAt: Date | null;
    currentContent: string;
    draftContent: string;
}

// ── 시간 차이 포매터 (한국어) ────────────────────────────────────────────────

export function formatRelativeTime(date: Date): string {
    const diffMs = Date.now() - date.getTime();
    const diffSec = Math.floor(diffMs / 1000);
    const diffMin = Math.floor(diffSec / 60);
    const diffHour = Math.floor(diffMin / 60);
    const diffDay = Math.floor(diffHour / 24);

    if (diffSec < 60) return '방금 전';
    if (diffMin < 60) return `${diffMin}분 전`;
    if (diffHour < 24) return `${diffHour}시간 전`;
    return `${diffDay}일 전`;
}

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

export default function DraftRecoveryModal({
    isOpen,
    onRecover,
    onDiscard,
    draftSavedAt,
    currentContent,
    draftContent,
}: DraftRecoveryModalProps) {
    if (!isOpen) return null;

    const relativeTime = draftSavedAt ? formatRelativeTime(draftSavedAt) : '알 수 없음';
    const draftCharCount = draftContent.length;
    const currentCharCount = currentContent.length;

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

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

                {/* 헤더 */}
                <div className="flex items-center gap-3">
                    <span className="text-2xl" aria-hidden="true">📝</span>
                    <h2
                        id="draft-recovery-title"
                        className="text-lg font-bold text-gray-900"
                    >
                        임시저장본이 있습니다
                    </h2>
                </div>

                {/* 본문 */}
                <p className="text-sm text-gray-600 leading-relaxed">
                    <span className="font-medium text-gray-800">{relativeTime}</span>에 임시저장된 내용이 있습니다.
                    복구하시겠습니까?
                </p>

                {/* 변경 요약 */}
                <div className="bg-gray-50 rounded-xl px-4 py-3 text-sm text-gray-600 flex flex-col gap-1 border border-gray-100">
                    <div className="flex justify-between">
                        <span className="text-gray-500">임시저장본</span>
                        <span className="font-medium text-gray-800">{draftCharCount.toLocaleString()}자</span>
                    </div>
                    <div className="flex justify-between">
                        <span className="text-gray-500">현재 문서</span>
                        <span className="font-medium text-gray-800">{currentCharCount.toLocaleString()}자</span>
                    </div>
                    {draftCharCount !== currentCharCount && (
                        <div className="flex justify-between border-t border-gray-200 pt-1 mt-1">
                            <span className="text-gray-500">차이</span>
                            <span className={`font-semibold ${draftCharCount > currentCharCount ? 'text-indigo-600' : 'text-orange-500'}`}>
                                {draftCharCount > currentCharCount ? '+' : ''}
                                {(draftCharCount - currentCharCount).toLocaleString()}자
                            </span>
                        </div>
                    )}
                </div>

                {/* 버튼 영역 */}
                <div className="flex flex-col gap-2 pt-1">
                    <button
                        type="button"
                        onClick={onRecover}
                        className="w-full bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-bold rounded-xl py-2.5 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                    >
                        복구하기
                    </button>
                    <button
                        type="button"
                        onClick={onDiscard}
                        className="w-full bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-600 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>
    );
}