import React from 'react';
import { ShieldAlert, ExternalLink, X, AlertTriangle } from 'lucide-react';

interface ConnectionHelpModalProps {
    isOpen: boolean;
    onClose: () => void;
}

const ConnectionHelpModal: React.FC<ConnectionHelpModalProps> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
            <div className="bg-white rounded-lg shadow-2xl max-w-lg w-full overflow-hidden border border-red-100">

                {/* Header */}
                <div className="bg-red-50 p-4 border-b border-red-100 flex items-center justify-between">
                    <div className="flex items-center gap-2 text-red-700">
                        <ShieldAlert size={20} />
                        <h2 className="font-bold text-lg">백엔드 연결 실패</h2>
                    </div>
                    <button onClick={onClose} className="text-red-400 hover:text-red-600 transition-colors">
                        <X size={20} />
                    </button>
                </div>

                {/* Content */}
                <div className="p-6 space-y-4">
                    <p className="text-slate-700 text-sm leading-relaxed">
                        현재 <strong>HTTPS(보안)</strong> 사이트에서 <strong>로컬 백엔드(ws://localhost)</strong>로 접속을 시도하고 있습니다.
                        브라우저 보안 정책(Mixed Content)으로 인해 연결이 차단되었을 가능성이 높습니다.
                    </p>

                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 space-y-2">
                        <h3 className="font-semibold text-yellow-800 flex items-center gap-2 text-sm">
                            <AlertTriangle size={16} />
                            해결 방법 (Chrome/Edge)
                        </h3>
                        <ol className="list-decimal list-inside text-xs text-yellow-800 space-y-1.5 ml-1">
                            <li>
                                새 탭을 열고 주소창에 아래 주소를 입력하세요:
                                <div className="bg-white border border-yellow-300 rounded px-2 py-1 mt-1 font-mono text-slate-600 select-all cursor-pointer hover:bg-slate-50" onClick={(e) => navigator.clipboard.writeText(e.currentTarget.textContent || '')}>
                                    chrome://flags/#allow-insecure-localhost
                                </div>
                            </li>
                            <li>
                                <strong>Allow invalid certificates for resources from localhost</strong> 항목을 <span className="font-bold text-green-600">Enabled</span>로 변경하세요.
                            </li>
                            <li>
                                브라우저 하단의 <strong>Relaunch</strong> 버튼을 눌러 재시작하세요.
                            </li>
                        </ol>
                    </div>

                    <p className="text-xs text-slate-500 text-center">
                        설정을 변경한 후에도 연결이 안 된다면 백엔드 프로그램이 실행 중인지 확인해주세요.
                    </p>
                </div>

                {/* Footer */}
                <div className="p-4 bg-slate-50 border-t border-slate-200 flex justify-end">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 rounded text-sm transition-colors font-medium shadow-sm"
                    >
                        닫기
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ConnectionHelpModal;