import React, { useState, useEffect } from 'react';
import { X, HelpCircle, Server, Folder, FileText, Settings, Wifi, Terminal } from 'lucide-react';

interface HelpModalProps {
    isOpen: boolean;
    onClose: () => void;
    initialTab?: 'sites' | 'connection' | 'files' | 'backend';
}

const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose, initialTab }) => {
    const [activeTab, setActiveTab] = useState<'sites' | 'connection' | 'files' | 'backend'>('sites');

    useEffect(() => {
        if (isOpen && initialTab) {
            setActiveTab(initialTab);
        }
    }, [isOpen, initialTab]);

    // ESC key handler
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (isOpen && (e.key === 'Escape' || e.key === 'Esc')) {
                onClose();
            }
        };

        if (isOpen) {
            window.addEventListener('keydown', handleKeyDown);
        }

        return () => {
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [isOpen, onClose]);

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
            <div className="bg-white border border-slate-200 rounded-lg shadow-2xl w-full max-w-2xl flex flex-col h-[600px] max-h-[90vh]">

                {/* Header */}
                <div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50 rounded-t-lg">
                    <h2 className="text-base font-bold text-slate-800 flex items-center gap-2">
                        <HelpCircle size={20} className="text-blue-600" />
                        도움말 및 사용 가이드
                    </h2>
                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
                        <X size={20} />
                    </button>
                </div>

                <div className="flex flex-1 min-h-0">
                    {/* Sidebar */}
                    <div className="w-48 border-r border-slate-200 bg-slate-50 p-2 flex flex-col gap-1">
                        <button
                            onClick={() => setActiveTab('sites')}
                            className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'sites' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
                                }`}
                        >
                            <Server size={16} /> 사이트 관리
                        </button>
                        <button
                            onClick={() => setActiveTab('connection')}
                            className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'connection' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
                                }`}
                        >
                            <Wifi size={16} /> 접속 및 설정
                        </button>
                        <button
                            onClick={() => setActiveTab('backend')}
                            className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'backend' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
                                }`}
                        >
                            <Terminal size={16} /> 백엔드 설치/실행
                        </button>
                        <button
                            onClick={() => setActiveTab('files')}
                            className={`flex items-center gap-2 px-3 py-2 text-sm rounded transition-colors ${activeTab === 'files' ? 'bg-white text-blue-600 shadow-sm font-medium' : 'text-slate-600 hover:bg-slate-200'
                                }`}
                        >
                            <Folder size={16} /> 파일 작업
                        </button>
                    </div>

                    {/* Content */}
                    <div className="flex-1 overflow-y-auto p-6 bg-white">
                        {activeTab === 'sites' && (
                            <div className="space-y-6">
                                <div>
                                    <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
                                        <Server size={20} className="text-slate-400" /> 사이트 관리자
                                    </h3>
                                    <p className="text-slate-600 text-sm leading-relaxed mb-4">
                                        자주 방문하는 FTP 서버 정보를 저장하고 관리할 수 있습니다.
                                    </p>
                                    <ul className="list-disc list-inside text-sm text-slate-600 space-y-2 bg-slate-50 p-4 rounded border border-slate-100">
                                        <li><strong>새 사이트:</strong> 새로운 접속 정보를 추가합니다.</li>
                                        <li><strong>시작 디렉토리:</strong> 접속 성공 시 자동으로 이동할 경로를 지정할 수 있습니다. (예: /public_html)</li>
                                        <li><strong>자동 저장:</strong> '연결' 버튼을 누르면 변경된 정보가 자동으로 저장됩니다. (백엔드 재시작 필요)</li>
                                    </ul>
                                </div>
                            </div>
                        )}

                        {activeTab === 'connection' && (
                            <div className="space-y-6">
                                <div>
                                    <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
                                        <Wifi size={20} className="text-slate-400" /> 퀵 접속 및 설정
                                    </h3>
                                    <p className="text-slate-600 text-sm leading-relaxed mb-4">
                                        상단 입력창을 통해 빠르게 접속하거나 설정을 변경할 수 있습니다.
                                    </p>
                                    <ul className="list-disc list-inside text-sm text-slate-600 space-y-2 bg-slate-50 p-4 rounded border border-slate-100">
                                        <li><strong>자동 완성:</strong> 마지막으로 입력한 호스트, 사용자, 포트 정보가 자동으로 채워집니다.</li>
                                        <li><strong>접속 상태:</strong> 연결 버튼의 색상(초록/파랑)으로 현재 상태를 확인할 수 있습니다.</li>
                                        <li><strong>백엔드 설정:</strong> 우측 상단 톱니바퀴 아이콘을 통해 백엔드 코드를 확인하거나 다운로드할 수 있습니다.</li>
                                    </ul>
                                </div>
                            </div>
                        )}

                        {activeTab === 'backend' && (
                            <div className="space-y-6">
                                <div>
                                    <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
                                        <Terminal size={20} className="text-slate-400" /> 백엔드 설치 및 실행
                                    </h3>
                                    <p className="text-slate-600 text-sm leading-relaxed mb-4">
                                        WebZilla는 보안상의 이유로 로컬 파일 시스템에 접근하기 위해 별도의 백엔드 프로그램이 필요합니다.
                                    </p>

                                    <div className="space-y-4">
                                        <div className="bg-amber-50 p-4 rounded border border-amber-100">
                                            <h4 className="font-bold text-amber-800 text-sm mb-2 flex items-center gap-2">
                                                <Settings size={16} /> 1. 백엔드 코드 다운로드
                                            </h4>
                                            <p className="text-xs text-amber-700 leading-relaxed">
                                                메인 화면 상단의 <span className="font-bold bg-emerald-600 text-white px-1.5 py-0.5 rounded text-[10px]">백엔드</span> 버튼을 눌러
                                                <code className="mx-1 bg-amber-100 px-1 rounded text-amber-900">backend_proxy.cjs</code> 파일을 다운로드하세요.
                                            </p>
                                        </div>

                                        <div className="bg-slate-50 p-4 rounded border border-slate-200">
                                            <h4 className="font-bold text-slate-800 text-sm mb-2 text- mb-2">2. 실행 방법</h4>

                                            <div className="space-y-3">
                                                <div>
                                                    <span className="text-xs font-bold text-slate-600 block mb-1">방법 A: Node.js가 설치된 경우 (추천)</span>
                                                    <div className="bg-slate-800 text-slate-200 p-2 rounded text-xs font-mono">
                                                        node backend_proxy.cjs
                                                    </div>
                                                </div>
                                                <div>
                                                    <span className="text-xs font-bold text-slate-600 block mb-1">방법 B: 실행 파일(.exe) 사용</span>
                                                    <p className="text-xs text-slate-500">배포된 exe 파일을 더블 클릭하여 실행하세요.</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="flex items-start gap-2 text-xs text-blue-600 bg-blue-50 p-3 rounded">
                                            <div className="shrink-0 mt-0.5"><Wifi size={14} /></div>
                                            <p>서버가 실행되면 포트 <strong>8090</strong>에서 대기하며, 이 창의 우측 상단 'Server' 상태가 <span className="font-bold text-green-600">Connected</span>로 변경됩니다.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        {activeTab === 'files' && (
                            <div className="space-y-6">
                                <div>
                                    <h3 className="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2">
                                        <Folder size={20} className="text-slate-400" /> 파일 및 폴더 관리
                                    </h3>
                                    <p className="text-slate-600 text-sm leading-relaxed mb-4">
                                        로컬(내 컴퓨터)과 리모트(서버) 간의 파일 전송 및 관리를 수행합니다.
                                    </p>

                                    <div className="space-y-4">
                                        <div className="bg-blue-50 p-3 rounded border border-blue-100">
                                            <h4 className="font-bold text-blue-800 text-sm mb-1">파일 전송</h4>
                                            <p className="text-xs text-blue-600">
                                                파일을 더블 클릭하거나 드래그하여 업로드/다운로드 할 수 있습니다. (드래그 앤 드롭 준비 중)
                                            </p>
                                        </div>

                                        <div className="grid grid-cols-2 gap-3">
                                            <div className="border border-slate-200 p-3 rounded">
                                                <h4 className="font-bold text-slate-700 text-sm mb-1">로컬 (내 컴퓨터)</h4>
                                                <ul className="text-xs text-slate-500 space-y-1">
                                                    <li>• 새 폴더 만들기</li>
                                                    <li>• 이름 변경</li>
                                                    <li>• 파일/폴더 삭제</li>
                                                </ul>
                                            </div>
                                            <div className="border border-slate-200 p-3 rounded">
                                                <h4 className="font-bold text-slate-700 text-sm mb-1">리모트 (서버)</h4>
                                                <ul className="text-xs text-slate-500 space-y-1">
                                                    <li>• 새 폴더 만들기 (MKD)</li>
                                                    <li>• 이름 변경 (RENAME)</li>
                                                    <li>• 파일/폴더 삭제 (DELE)</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>

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

export default HelpModal;