'use client';

import { useState, useCallback } from 'react';

interface RecordingConsentModalProps {
    isOpen: boolean;
    onClose: () => void;
    onConsent: () => void;
    documentTitle?: string;
}

/**
 * 동의 녹취 확인 모달 (P0-B: Legal 필수)
 * 
 * 통신비밀보호법 제3조에 의거, 녹음 시작 전 반드시 상대방 동의 확인 필요.
 * "녹취 시작" 음성 명령 시 이 모달이 먼저 표시됩니다.
 */
export default function RecordingConsentModal({
    isOpen,
    onClose,
    onConsent,
    documentTitle,
}: RecordingConsentModalProps) {
    const [notified, setNotified] = useState(false);
    const [agreed, setAgreed] = useState(false);

    const handleConsent = useCallback(() => {
        if (notified && agreed) {
            onConsent();
            // 상태 리셋
            setNotified(false);
            setAgreed(false);
        }
    }, [notified, agreed, onConsent]);

    const handleClose = useCallback(() => {
        setNotified(false);
        setAgreed(false);
        onClose();
    }, [onClose]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" role="dialog" aria-modal="true">
            {/* 배경 오버레이 */}
            <div
                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                onClick={handleClose}
            />

            {/* 모달 본체 */}
            <div className="relative bg-white rounded-2xl shadow-2xl max-w-md w-full mx-auto overflow-hidden animate-in fade-in zoom-in-95 duration-200">
                {/* 헤더 */}
                <div className="bg-gradient-to-r from-red-500 to-orange-500 px-6 py-4">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-white">녹취 동의 확인</h2>
                            <p className="text-sm text-white/80">통신비밀보호법 준수</p>
                        </div>
                    </div>
                </div>

                {/* 경고 메시지 */}
                <div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
                    <p className="text-sm text-amber-800 leading-relaxed">
                        <strong>⚠️ 법적 고지:</strong> 통신비밀보호법 제3조에 의거, 상대방의 동의 없이
                        대화를 녹음하는 것은 <strong>형사처벌 대상</strong>입니다.
                        녹취 전 반드시 상대방에게 고지하고 동의를 받아야 합니다.
                    </p>
                </div>

                {/* 체크박스 */}
                <div className="px-6 py-5 space-y-4">
                    {documentTitle && (
                        <p className="text-xs text-slate-500">
                            관련 문서: <span className="font-medium text-slate-700">{documentTitle}</span>
                        </p>
                    )}

                    <label className="flex items-start gap-3 cursor-pointer group">
                        <input
                            type="checkbox"
                            checked={notified}
                            onChange={(e) => setNotified(e.target.checked)}
                            className="mt-0.5 w-5 h-5 rounded border-slate-300 text-indigo-600 
                                       focus:ring-indigo-500 cursor-pointer flex-shrink-0"
                        />
                        <span className="text-sm text-slate-700 group-hover:text-slate-900">
                            상대방에게 <strong>녹취 사실을 고지</strong>했습니다.
                            <span className="block text-xs text-slate-400 mt-0.5">
                                &quot;이 통화/상담 내용은 업무 기록을 위해 녹음됩니다&quot;
                            </span>
                        </span>
                    </label>

                    <label className="flex items-start gap-3 cursor-pointer group">
                        <input
                            type="checkbox"
                            checked={agreed}
                            onChange={(e) => setAgreed(e.target.checked)}
                            className="mt-0.5 w-5 h-5 rounded border-slate-300 text-indigo-600 
                                       focus:ring-indigo-500 cursor-pointer flex-shrink-0"
                        />
                        <span className="text-sm text-slate-700 group-hover:text-slate-900">
                            상대방이 녹취에 <strong>동의</strong>했습니다.
                            <span className="block text-xs text-slate-400 mt-0.5">
                                구두 동의 또는 서면 동의를 확인했습니다.
                            </span>
                        </span>
                    </label>
                </div>

                {/* 버튼 영역 */}
                <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex gap-3">
                    <button
                        onClick={handleClose}
                        className="flex-1 px-4 py-2.5 text-sm font-medium text-slate-600 
                                   bg-white border border-slate-200 rounded-xl
                                   hover:bg-slate-50 transition-colors"
                    >
                        취소
                    </button>
                    <button
                        onClick={handleConsent}
                        disabled={!notified || !agreed}
                        className={`flex-1 px-4 py-2.5 text-sm font-bold rounded-xl transition-all
                            ${notified && agreed
                                ? 'bg-red-500 text-white hover:bg-red-600 shadow-lg shadow-red-200'
                                : 'bg-slate-200 text-slate-400 cursor-not-allowed'
                            }`}
                    >
                        🎤 녹취 시작
                    </button>
                </div>

                {/* 법적 면책 */}
                <div className="px-6 py-2 bg-slate-100">
                    <p className="text-[10px] text-slate-400 text-center">
                        동의 기록은 법적 증빙을 위해 안전하게 저장됩니다.
                    </p>
                </div>
            </div>
        </div>
    );
}