import React, { useState, useEffect } from 'react';
import { Editor } from '@monaco-editor/react';
import { FileTree } from './FileTree';
// import { FilePreview } from './FilePreview';
// Removed external CSS import - styles are now inline

type FileType = {
  path: string;
  content: string;
  language: string;
};

export const TextEditorPage = () => {
  const [files, setFiles] = useState<FileType[]>([]);
  const [activeFile, setActiveFile] = useState<FileType | null>(null);
  const [editorTheme, setEditorTheme] = useState<'light' | 'vs-dark'>('vs-dark');

  // Initialize with sample files
  useEffect(() => {
    const sampleFiles: FileType[] = [
      {
        path: 'src/index.ts',
        content: '// TypeScript code here\nconst message = "Hello World";\nconsole.log(message);',
        language: 'typescript'
      },
      {
        path: 'package.json',
        content: '{\n  "name": "my-project",\n  "version": "1.0.0"\n}',
        language: 'json'
      }
    ];
    setFiles(sampleFiles);
    setActiveFile(sampleFiles[0]);
  }, []);

  const handleFileSelect = (filePath: string) => {
    const selectedFile = files.find(f => f.path === filePath);
    if (selectedFile) {
      setActiveFile(selectedFile);
    }
  };

  const handleEditorChange = (value: string | undefined) => {
    if (activeFile && value !== undefined) {
      setFiles(files.map(f =>
        f.path === activeFile.path ? { ...f, content: value } : f
      ));
    }
  };

  const [widths, setWidths] = useState({
    fileTree: 250,
    editor: window.innerWidth - 550, // Initial editor width (total width minus side panels)
    preview: 300
  });

  const containerStyle = {
    display: 'flex',
    height: '100vh',
    width: '100%'
  };

  const panelStyle = {
    height: '100%',
    overflow: 'hidden',
    position: 'relative' as const
  };

  const [isResizing, setIsResizing] = useState(false);
  const [startX, setStartX] = useState(0);
  const [startWidth, setStartWidth] = useState(0);

  const startResizing = (e: React.MouseEvent, panel: 'fileTree' | 'editor') => {
    setIsResizing(true);
    setStartX(e.clientX);
    setStartWidth(widths[panel]);
  };

  const resize = (e: MouseEvent) => {
    if (isResizing) {
      const dx = e.clientX - startX;
      const newFileTreeWidth = Math.max(200, Math.min(400, startWidth + dx));
      setWidths({
        fileTree: newFileTreeWidth,
        editor: window.innerWidth - newFileTreeWidth - widths.preview,
        preview: widths.preview
      });
    }
  };

  const stopResizing = () => {
    setIsResizing(false);
  };

  useEffect(() => {
    window.addEventListener('mousemove', resize);
    window.addEventListener('mouseup', stopResizing);
    return () => {
      window.removeEventListener('mousemove', resize);
      window.removeEventListener('mouseup', stopResizing);
    };
  }, [isResizing, startX, startWidth]);

  return (
    <div style={containerStyle}>
      <div style={{ ...panelStyle, width: widths.fileTree }}>
        <FileTree
          files={files}
          onSelect={handleFileSelect}
          activeFile={activeFile?.path}
        />
        <div 
          style={{
            width: '4px',
            height: '100%',
            cursor: 'col-resize',
            backgroundColor: isResizing ? '#aaa' : '#ddd',
            position: 'absolute',
            right: 0,
            top: 0,
            zIndex: 1
          }}
          onMouseDown={(e) => startResizing(e, 'fileTree')}
        />
      </div>

      <div style={{ ...panelStyle, width: widths.editor }}>
        {activeFile && (
          <Editor
            height="100%"
            path={activeFile.path}
            defaultLanguage={activeFile.language}
            defaultValue={activeFile.content}
            onChange={handleEditorChange}
            theme={editorTheme}
            options={{
              minimap: { enabled: false },
              fontSize: 14,
              wordWrap: 'on',
              automaticLayout: true
            }}
          />
        )}
      </div>

      <div style={{ ...panelStyle, width: widths.preview }}>
        <div 
          style={{
            width: '4px',
            height: '100%',
            cursor: 'col-resize',
            backgroundColor: isResizing ? '#aaa' : '#ddd',
            position: 'absolute',
            left: 0,
            top: 0,
            zIndex: 1
          }}
          onMouseDown={(e) => startResizing(e, 'editor')}
        />
        {activeFile && (
          <div></div>
          // <FilePreview 
          //   content={activeFile.content}
          //   language={activeFile.language}
          // />
        )}
      </div>
    </div>
  );
};