import { useState, useCallback, useRef } from 'react';
import { useEditor } from '../context/EditorContext';
import Toolbar from './Toolbar';
import TiptapEditor from './TiptapEditor';
import { Save, AlertCircle } from 'lucide-react';

const Editor = () => {
  const { content, viewMode, isFullscreen } = useEditor();
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const editorRef = useRef<HTMLDivElement>(null);

  const handleSave = useCallback(async () => {
    try {
      setIsSaving(true);
      setError(null);
      
      // Simulate saving
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // Show success briefly
      setTimeout(() => {
        setIsSaving(false);
      }, 1000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
      setIsSaving(false);
    }
  }, [content]);

  return (
    <div 
      className={`flex flex-col h-full transition-all duration-300 ${
        isFullscreen ? 'fixed inset-0 z-50 bg-white dark:bg-gray-900' : 'relative'
      }`}
    >
      <Toolbar onSave={handleSave} />
      
      {error && (
        <div className="flex items-center gap-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-2 text-sm">
          <AlertCircle size={16} />
          <span>{error}</span>
        </div>
      )}
      
      <div className="flex-1 overflow-hidden">
        <div 
          ref={editorRef}
          className="overflow-auto h-full bg-white dark:bg-gray-900"
        >
          <TiptapEditor />
        </div>
      </div>
      
      <div className="p-3 border-t dark:border-gray-700 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900">
        <div>
          {content.length} characters
        </div>
        <button
          onClick={handleSave}
          disabled={isSaving}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
        >
          <Save size={16} />
          <span>{isSaving ? 'Saving...' : 'Save'}</span>
        </button>
      </div>
    </div>
  );
};

export default Editor;