import React, { useState, useEffect } from 'react';
import { X, Server, FolderPlus, Trash2, Save, Power, Monitor, Settings2 } from 'lucide-react';
import { SiteConfig } from '../types';

interface SiteManagerModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConnect: (site: SiteConfig) => void;
  onSaveSites: (sites: SiteConfig[]) => void;
  initialSites: SiteConfig[];
}

const SiteManagerModal: React.FC<SiteManagerModalProps> = ({ 
  isOpen, 
  onClose, 
  onConnect, 
  onSaveSites,
  initialSites 
}) => {
  const [sites, setSites] = useState<SiteConfig[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [formData, setFormData] = useState<SiteConfig | null>(null);
  const [isDirty, setIsDirty] = useState(false);
  const [activeTab, setActiveTab] = useState<'general' | 'transfer'>('general');

  // Initialize
  useEffect(() => {
    if (isOpen) {
      setSites(initialSites);
      if (initialSites.length > 0 && !selectedId) {
        selectSite(initialSites[0]);
      }
    }
  }, [isOpen, initialSites]);

  const selectSite = (site: SiteConfig) => {
    setSelectedId(site.id);
    setFormData({ ...site });
    setIsDirty(false);
    setActiveTab('general');
  };

  const handleNewSite = () => {
    const newSite: SiteConfig = {
      id: `site-${Date.now()}`,
      name: '새 사이트',
      protocol: 'ftp',
      host: '',
      port: '21',
      user: '',
      pass: '',
      passiveMode: true
    };
    const newSites = [...sites, newSite];
    setSites(newSites);
    selectSite(newSite);
    setIsDirty(true);
  };

  const handleDelete = () => {
    if (!selectedId) return;
    if (!window.confirm('선택한 사이트를 삭제하시겠습니까?')) return;
    
    const newSites = sites.filter(s => s.id !== selectedId);
    setSites(newSites);
    onSaveSites(newSites); // Auto save on delete
    
    if (newSites.length > 0) {
      selectSite(newSites[0]);
    } else {
      setSelectedId(null);
      setFormData(null);
    }
  };

  const handleSave = () => {
    if (!formData) return;
    
    const newSites = sites.map(s => s.id === formData.id ? formData : s);
    setSites(newSites);
    onSaveSites(newSites);
    setIsDirty(false);
  };

  const handleConnectClick = () => {
    if (formData) {
      if (isDirty) {
        handleSave();
      }
      onConnect(formData);
    }
  };

  const updateForm = (field: keyof SiteConfig, value: any) => {
    if (!formData) return;
    const updated = { ...formData, [field]: value };
    
    // Auto port update based on protocol
    if (field === 'protocol') {
        if (value === 'sftp') updated.port = '22';
        if (value === 'ftp') updated.port = '21';
    }

    setFormData(updated);
    
    if (field === 'name') {
      setSites(sites.map(s => s.id === updated.id ? updated : s));
    }
    
    setIsDirty(true);
  };

  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-3xl flex flex-col h-[600px] max-h-[90vh]">
        
        {/* Header */}
        <div className="flex items-center justify-between p-3 border-b border-slate-200 bg-slate-50 rounded-t-lg">
          <h2 className="text-sm font-bold text-slate-800 flex items-center gap-2">
            <Server size={18} className="text-blue-600" />
            사이트 관리자 (Site Manager)
          </h2>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
            <X size={18} />
          </button>
        </div>

        <div className="flex flex-1 min-h-0">
          {/* Left: Site List */}
          <div className="w-1/3 border-r border-slate-200 flex flex-col bg-slate-50">
            <div className="p-2 border-b border-slate-200 flex gap-2">
              <button 
                onClick={handleNewSite}
                className="flex-1 bg-white hover:bg-slate-50 text-slate-700 text-xs py-1.5 rounded border border-slate-300 flex items-center justify-center gap-1 transition-colors shadow-sm"
              >
                <FolderPlus size={14} /> 새 사이트
              </button>
              <button 
                onClick={handleDelete}
                disabled={!selectedId}
                className="bg-white hover:bg-red-50 hover:border-red-200 text-slate-500 hover:text-red-500 text-xs px-2 py-1.5 rounded border border-slate-300 transition-colors disabled:opacity-50 shadow-sm"
              >
                <Trash2 size={14} />
              </button>
            </div>
            
            <div className="flex-1 overflow-y-auto p-2 space-y-1">
              {sites.map(site => (
                <div 
                  key={site.id}
                  onClick={() => selectSite(site)}
                  className={`flex items-center gap-2 px-3 py-2 rounded cursor-pointer text-sm select-none transition-colors ${
                    selectedId === site.id 
                      ? 'bg-blue-100 text-blue-900 border border-blue-200' 
                      : 'text-slate-600 hover:bg-slate-200'
                  }`}
                >
                  <Server size={14} className={selectedId === site.id ? 'text-blue-600' : 'text-slate-400'} />
                  <span className="truncate">{site.name}</span>
                </div>
              ))}
              {sites.length === 0 && (
                <div className="text-center text-slate-400 text-xs mt-10">
                  등록된 사이트가 없습니다.
                </div>
              )}
            </div>
          </div>

          {/* Right: Site Details Form */}
          <div className="w-2/3 flex flex-col bg-white">
            {formData ? (
              <>
                {/* Tabs */}
                <div className="flex border-b border-slate-200 px-4">
                    <button 
                        onClick={() => setActiveTab('general')}
                        className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
                            activeTab === 'general' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
                        }`}
                    >
                        일반 (General)
                    </button>
                    <button 
                        onClick={() => setActiveTab('transfer')}
                        className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
                            activeTab === 'transfer' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500'
                        }`}
                    >
                        전송 설정 (Transfer)
                    </button>
                </div>

                <div className="p-6 flex-1 overflow-y-auto">
                    {activeTab === 'general' ? (
                        <div className="space-y-4">
                        <div className="grid grid-cols-4 gap-4 items-center">
                            <label className="text-xs text-slate-500 text-right">사이트 이름</label>
                            <input 
                            type="text" 
                            value={formData.name}
                            onChange={(e) => updateForm('name', e.target.value)}
                            className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
                            />
                        </div>

                        <hr className="border-slate-200 my-4" />

                        <div className="grid grid-cols-4 gap-4 items-center">
                            <label className="text-xs text-slate-500 text-right">프로토콜</label>
                            <select 
                            value={formData.protocol}
                            onChange={(e) => updateForm('protocol', e.target.value as any)}
                            className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
                            >
                            <option value="ftp">FTP - 파일 전송 프로토콜</option>
                            <option value="sftp">SFTP - SSH 파일 전송 프로토콜</option>
                            </select>
                        </div>

                        <div className="grid grid-cols-4 gap-4 items-center">
                            <label className="text-xs text-slate-500 text-right">호스트</label>
                            <div className="col-span-3 flex gap-2">
                            <input 
                                type="text" 
                                value={formData.host}
                                onChange={(e) => updateForm('host', e.target.value)}
                                placeholder="ftp.example.com"
                                className="flex-1 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
                            />
                            <div className="flex items-center gap-2">
                                <span className="text-xs text-slate-500">포트:</span>
                                <input 
                                type="text" 
                                value={formData.port}
                                onChange={(e) => updateForm('port', e.target.value)}
                                className="w-16 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm text-center focus:border-blue-500 focus:outline-none text-slate-800"
                                />
                            </div>
                            </div>
                        </div>

                        <div className="grid grid-cols-4 gap-4 items-center">
                            <label className="text-xs text-slate-500 text-right">사용자 (ID)</label>
                            <input 
                            type="text" 
                            value={formData.user}
                            onChange={(e) => updateForm('user', e.target.value)}
                            className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800"
                            />
                        </div>

                        <div className="grid grid-cols-4 gap-4 items-center">
                            <label className="text-xs text-slate-500 text-right">비밀번호</label>
                            <input 
                            type="password" 
                            value={formData.pass || ''}
                            onChange={(e) => updateForm('pass', e.target.value)}
                            placeholder="저장하지 않으려면 비워두세요"
                            className="col-span-3 bg-white border border-slate-300 rounded px-2 py-1.5 text-sm focus:border-blue-500 focus:outline-none text-slate-800 placeholder:text-slate-400"
                            />
                        </div>
                        </div>
                    ) : (
                        <div className="space-y-6">
                            <div className="space-y-3">
                                <h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">전송 모드</h3>
                                <div className="flex items-center gap-3">
                                    <label className="flex items-center gap-2 cursor-pointer group">
                                        <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${formData.passiveMode !== false ? 'bg-blue-600 border-blue-500' : 'bg-white border-slate-400'}`}>
                                            {formData.passiveMode !== false && <div className="w-2 h-2 bg-white rounded-sm" />}
                                        </div>
                                        <input 
                                            type="checkbox" 
                                            checked={formData.passiveMode !== false}
                                            onChange={(e) => updateForm('passiveMode', e.target.checked)}
                                            className="hidden"
                                        />
                                        <div className="text-sm text-slate-700 group-hover:text-blue-600 transition-colors">패시브 모드 (Passive Mode) 사용</div>
                                    </label>
                                </div>
                                <p className="text-xs text-slate-500 ml-6">
                                    서버가 방화벽/NAT 뒤에 있는 경우 패시브 모드를 사용하는 것이 좋습니다. 
                                    (FTP 프로토콜에만 적용됩니다)
                                </p>
                            </div>

                            <div className="space-y-3">
                                <h3 className="text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-4">제한 설정</h3>
                                <div className="grid grid-cols-4 gap-4 items-center">
                                    <label className="text-xs text-slate-500">최대 연결 수:</label>
                                    <input type="number" defaultValue={2} disabled className="bg-slate-100 border border-slate-300 rounded px-2 py-1 text-sm text-slate-500" />
                                    <span className="text-xs text-slate-400 col-span-2">(데모 제한)</span>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
              </>
            ) : (
              <div className="flex-1 flex flex-col items-center justify-center text-slate-400">
                <Server size={48} className="mb-4 opacity-20" />
                <p>왼쪽 목록에서 사이트를 선택하거나</p>
                <p>'새 사이트'를 클릭하세요.</p>
              </div>
            )}
          </div>
        </div>

        {/* Footer Actions */}
        <div className="p-3 border-t border-slate-200 bg-slate-50 flex justify-between items-center rounded-b-lg">
          <button 
             onClick={onClose}
             className="px-4 py-2 text-slate-500 hover:text-slate-800 text-sm transition-colors"
          >
            닫기
          </button>
          
          <div className="flex gap-2">
            <button 
              onClick={handleSave}
              disabled={!formData}
              className={`px-4 py-2 text-sm rounded flex items-center gap-2 transition-colors shadow-sm ${
                  isDirty 
                  ? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/20' 
                  : 'bg-white border border-slate-300 text-slate-500'
              }`}
            >
              <Save size={16} /> 저장
            </button>
            <button 
              onClick={handleConnectClick}
              disabled={!formData}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm flex items-center gap-2 shadow-md shadow-blue-500/20"
            >
              <Power size={16} /> 연결
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SiteManagerModal;