import React, { useState, useRef, useEffect } from 'react';
import { 
  Folder, FileCode, Plus, Settings, Search, Trash2, 
  ArrowLeft, Save, Play, ChevronRight, X, Check, Globe
} from 'lucide-react';

const THEMES = {
  dark: { id: 'dark', name: 'Midnight Dark', bg: 'bg-[#0d1117]', card: 'bg-[#161b22]', text: 'text-slate-300', border: 'border-[#30363d]', accent: 'bg-blue-600', editor: 'bg-[#0d1117]', line: 'text-slate-600' },
  light: { id: 'light', name: 'Clean Light', bg: 'bg-slate-50', card: 'bg-white', text: 'text-slate-800', border: 'border-slate-200', accent: 'bg-blue-500', editor: 'bg-white', line: 'text-slate-400' },
  hacker: { id: 'hacker', name: 'Matrix Green', bg: 'bg-black', card: 'bg-neutral-900', text: 'text-green-500', border: 'border-green-900', accent: 'bg-green-700', editor: 'bg-black', line: 'text-green-900' }
};

export default function WebIDE() {
  const [theme, setTheme] = useState(THEMES.dark);
  const [files, setFiles] = useState([]);
  const [currentDir, setCurrentDir] = useState(null);
  const [activeFile, setActiveFile] = useState(null);
  const [view, setView] = useState('home'); // home, editor, preview
  const [editorContent, setEditorContent] = useState('');
  const [savedContent, setSavedContent] = useState('');
  const [searchCode, setSearchCode] = useState('');
  const [modal, setModal] = useState(null);
  const [input, setInput] = useState('');
  const [path, setPath] = useState([{ id: null, name: 'Home' }]);
  
  const textareaRef = useRef(null);

  // --- File Logic ---
  const currentItems = files.filter(f => f.parentId === currentDir);
  
  const handleCreate = () => {
    if (!input) return;
    const newItem = {
      id: Date.now(),
      name: input,
      type: modal === 'folder' ? 'folder' : 'file',
      parentId: currentDir,
      content: modal === 'file' ? '\n<h1>Hello!</h1>' : null
    };
    setFiles([...files, newItem]);
    setModal(null);
    setInput('');
    if (newItem.type === 'file') openFile(newItem);
  };

  const openFile = (file) => {
    setActiveFile(file);
    setEditorContent(file.content);
    setSavedContent(file.content);
    setView('editor');
  };

  const deleteItem = (id) => {
    if (window.confirm("คุณแน่ใจหรือไม่ที่จะลบรายการนี้?")) {
      setFiles(files.filter(f => f.id !== id && f.parentId !== id));
    }
  };

  const saveFile = () => {
    setFiles(files.map(f => f.id === activeFile.id ? {...f, content: editorContent} : f));
    setSavedContent(editorContent);
  };

  const handleSearchCode = () => {
    const index = editorContent.indexOf(searchCode);
    if (index !== -1 && textareaRef.current) {
      textareaRef.current.focus();
      textareaRef.current.setSelectionRange(index, index + searchCode.length);
    } else {
      alert("ไม่พบคำที่ค้นหา");
    }
  };

  // --- Render Helpers ---
  const isDirty = editorContent !== savedContent;

  return (
    <div className={`h-screen w-full flex flex-col ${theme.bg} ${theme.text} font-sans transition-all`}>
      {/* Header */}
      <header className={`h-14 border-b ${theme.border} flex items-center justify-between px-4 shrink-0`}>
        <div className="flex items-center gap-2 text-sm">
          {view !== 'home' && (
            <button onClick={() => setView('home')} className="p-1 hover:bg-white/10 rounded"><ArrowLeft size={18}/></button>
          )}
          {path.map((p, i) => (
            <span key={i} className="flex items-center">
              <span className="hover:underline cursor-pointer opacity-70" onClick={() => {
                setCurrentDir(p.id);
                setPath(path.slice(0, i + 1));
                setView('home');
              }}>{p.name}</span>
              {i < path.length - 1 && <ChevronRight size={14} className="mx-1 opacity-40"/>}
            </span>
          ))}
        </div>
        
        <div className="flex items-center gap-2">
          {Object.values(THEMES).map(t => (
            <button key={t.id} onClick={() => setTheme(t)} className={`w-4 h-4 rounded-full border ${theme.border}`} style={{backgroundColor: t.id === 'light' ? '#ccc' : t.id === 'hacker' ? '#0f0' : '#222'}} />
          ))}
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 overflow-hidden relative">
        {view === 'home' && (
          <div className="p-6">
            <div className="flex justify-between items-center mb-8">
              <h1 className="text-2xl font-bold">Workspace</h1>
              <div className="flex gap-2">
                <button onClick={() => setModal('folder')} className={`flex items-center gap-2 px-4 py-2 rounded-lg border ${theme.border} hover:bg-white/5`}>
                  <Plus size={18}/> เพิ่มโฟลเดอร์
                </button>
                {currentDir && (
                  <button onClick={() => setModal('file')} className={`flex items-center gap-2 px-4 py-2 rounded-lg ${theme.accent} text-white`}>
                    <Plus size={18}/> สร้างไฟล์
                  </button>
                )}
              </div>
            </div>

            {currentItems.length === 0 ? (
              <div className="text-center py-20 opacity-30">
                <Folder size={64} className="mx-auto mb-4"/>
                <p>ยังไม่มีข้อมูลในโฟลเดอร์นี้</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                {currentItems.map(item => (
                  <div key={item.id} className={`group relative p-4 rounded-xl border ${theme.border} ${theme.card} hover:scale-105 transition-all cursor-pointer`}>
                    <div onClick={() => {
                      if (item.type === 'folder') {
                        setCurrentDir(item.id);
                        setPath([...path, {id: item.id, name: item.name}]);
                      } else {
                        openFile(item);
                      }
                    }} className="flex flex-col items-center gap-2">
                      {item.type === 'folder' ? <Folder size={40} className="text-blue-400 fill-current opacity-30"/> : <FileCode size={40} className="text-slate-500"/>}
                      <span className="text-sm truncate w-full text-center">{item.name}</span>
                    </div>
                    <button onClick={() => deleteItem(item.id)} className="absolute top-2 right-2 p-1 text-red-500 opacity-0 group-hover:opacity-100"><Trash2 size={14}/></button>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {view === 'editor' && (
          <div className="h-full flex flex-col">
            <div className={`h-12 border-b ${theme.border} flex items-center justify-between px-4 ${theme.card}`}>
              <div className="flex items-center gap-3">
                <div className="flex items-center bg-black/20 rounded px-2 border border-white/10">
                  <Search size={14} className="opacity-40 mr-2"/>
                  <input 
                    placeholder="ค้นหาโค้ด..." 
                    className="bg-transparent text-xs py-1 outline-none w-32"
                    value={searchCode}
                    onChange={e => setSearchCode(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && handleSearchCode()}
                  />
                </div>
              </div>
              <div className="flex gap-2">
                <button 
                  disabled={!isDirty} 
                  onClick={saveFile}
                  className={`px-4 py-1.5 rounded text-sm font-medium transition-all ${isDirty ? `${theme.accent} text-white shadow-lg` : 'bg-slate-700/50 text-slate-500 cursor-not-allowed'}`}
                >
                  <Save size={16} className="inline mr-1"/> เซฟ
                </button>
                <button onClick={() => setView('preview')} className="px-4 py-1.5 rounded text-sm font-medium bg-green-600 text-white hover:bg-green-500 transition-all">
                  <Play size={16} className="inline mr-1"/> รัน
                </button>
              </div>
            </div>
            <div className={`flex-1 flex overflow-hidden ${theme.editor}`}>
              <div className={`w-10 py-4 text-right pr-2 font-mono text-xs ${theme.line} select-none border-r ${theme.border}`}>
                {editorContent.split('\n').map((_, i) => <div key={i} className="h-6 leading-6">{i+1}</div>)}
              </div>
              <textarea 
                ref={textareaRef}
                spellCheck="false"
                className="flex-1 p-4 bg-transparent outline-none font-mono text-sm leading-6 resize-none"
                value={editorContent}
                onChange={e => setEditorContent(e.target.value)}
              />
            </div>
          </div>
        )}

        {view === 'preview' && (
          <div className="h-full flex flex-col bg-white">
            <div className="h-10 bg-slate-100 border-b flex items-center px-4 justify-between">
              <span className="text-xs text-slate-500 font-mono">Simulated Browser: {activeFile?.name}</span>
              <button onClick={() => setView('editor')} className="text-xs text-blue-600 font-bold underline">กลับไปแก้ไข</button>
            </div>
            <iframe title="output" className="flex-1 w-full border-none" srcDoc={editorContent} />
          </div>
        )}

        {/* Modal */}
        {modal && (
          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
            <div className={`w-80 p-6 rounded-2xl border ${theme.border} ${theme.card}`}>
              <h3 className="font-bold mb-4">สร้าง{modal === 'folder' ? 'โฟลเดอร์' : 'ไฟล์'}ใหม่</h3>
              <input 
                autoFocus
                placeholder="ชื่อ..." 
                className={`w-full p-2 mb-6 bg-black/20 border ${theme.border} rounded outline-none focus:border-blue-500`}
                value={input}
                onChange={e => setInput(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && handleCreate()}
              />
              <div className="flex justify-end gap-2">
                <button onClick={() => setModal(null)} className="px-4 py-2 opacity-50 text-sm">ยกเลิก</button>
                <button onClick={handleCreate} className={`px-4 py-2 rounded-lg ${theme.accent} text-white text-sm font-bold`}>สร้าง</button>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}