import { useEffect, useRef } from 'react';
import Editor, { type OnMount } from '@monaco-editor/react';
import type { editor as MonacoEditor } from 'monaco-editor';
import { toast } from 'sonner';
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
import { useFilesAPI } from '../../hooks/useFilesAPI';
import { FileTree } from './FileTree';
import { EditorTabs } from './EditorTabs';
import { useEditorState } from './useEditorState';
import { getLanguage } from './language-map';

type CodeEditorViewProps = {
  className?: string;
  theme?: string;
  root?: string;
  initialPath?: string;
};

export const CodeEditorView = ({ className, theme = 'vs-dark', root = 'home', initialPath }: CodeEditorViewProps) => {
  const { files, activePath, setActivePath, openFile, closeFile, setContent, markSaved, getActiveFile } =
    useEditorState();
  const { readFile, writeFile } = useFilesAPI(root);
  const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null);

  const activeFile = getActiveFile();

  const handleOpenFile = async (path: string, name: string) => {
    const existing = files.find((f) => f.path === path);
    if (existing) {
      setActivePath(path);
      return;
    }
    try {
      const res = await readFile(path);
      openFile(path, name, res.content);
    } catch {
      toast.error('Failed to read file');
    }
  };

  const handleSave = async () => {
    if (!activeFile || !activeFile.isDirty) return;
    try {
      await writeFile(activeFile.path, activeFile.content);
      markSaved(activeFile.path, activeFile.content);
      toast.success('File saved');
    } catch {
      toast.error('Failed to save file');
    }
  };

  const handleEditorMount: OnMount = (editor, monaco) => {
    editorRef.current = editor;
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
      handleSave();
    });
  };

  useEffect(() => {
    const handler = (ev: KeyboardEvent) => {
      if ((ev.ctrlKey || ev.metaKey) && ev.key === 's') {
        ev.preventDefault();
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  const bg = theme === 'vs-dark' ? '#1e1e1e' : theme === 'vs' ? '#ffffff' : '#1e1e1e';
  const borderColor = theme === 'vs-dark' ? '#333' : '#e0e0e0';

  return (
    <div className={className} style={{ background: bg }}>
      <ResizablePanelGroup direction="horizontal" className="h-full rounded-lg" style={{ borderColor }}>
        <ResizablePanel defaultSize={20} minSize={10} maxSize={40}>
          <div className="h-full flex flex-col" style={{ background: bg }}>
            <div
              className="px-3 py-2 text-xs font-semibold uppercase tracking-wider"
              style={{ color: '#888', borderBottom: `1px solid ${borderColor}` }}
            >
              Explorer
            </div>
            <FileTree root={root} basePath={initialPath ?? '/'} onOpenFile={handleOpenFile} />
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={80}>
          <div className="h-full flex flex-col" style={{ background: bg }}>
            <EditorTabs
              files={files}
              activePath={activePath}
              onSelect={setActivePath}
              onClose={closeFile}
              theme={theme}
            />
            {activeFile ? (
              <Editor
                key={activeFile.path}
                theme={theme}
                language={getLanguage(activeFile.name)}
                value={activeFile.content}
                onChange={(value) => setContent(activeFile.path, value ?? '')}
                onMount={handleEditorMount}
                options={{
                  automaticLayout: true,
                  minimap: { enabled: true },
                  fontSize: 14,
                  tabSize: 2,
                  wordWrap: 'on',
                  scrollBeyondLastLine: false,
                  renderWhitespace: 'selection',
                  smoothScrolling: true,
                  cursorBlinking: 'smooth',
                  cursorSmoothCaretAnimation: 'on',
                  padding: { top: 8 },
                }}
              />
            ) : (
              <div className="flex-1 flex items-center justify-center text-sm" style={{ color: '#888' }}>
                Open a file from the explorer to start editing
              </div>
            )}
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
};
