'use client';

import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
import SimpleEditor from './simple-editor';

// Dynamic import untuk CKEditor dengan error handling
const CKEditorWrapper = dynamic(
  () => import('./ckeditor-wrapper'),
  {
    ssr: false,
    loading: () => (
      <div className="flex items-center justify-center p-8 border border-gray-200 rounded-lg">
        <div className="text-gray-500">Loading editor...</div>
      </div>
    )
  }
);

interface EditorProps {
  data?: string;
  onChange?: (data: string) => void;
  onReady?: (editor: any) => void;
  onBlur?: (event: any, editor: any) => void;
  onFocus?: (event: any, editor: any) => void;
  config?: any;
  disabled?: boolean;
  className?: string;
  fallbackToSimple?: boolean;
}

export default function Editor({
  data = '',
  onChange,
  onReady,
  onBlur,
  onFocus,
  config = {},
  disabled = false,
  className = '',
  fallbackToSimple = true
}: EditorProps) {
  const [useSimpleEditor, setUseSimpleEditor] = useState(false);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  useEffect(() => {
    // Check if CKEditor is available
    const checkCKEditor = async () => {
      try {
        await import('@ckeditor/ckeditor5-react');
        await import('ckeditor5');
        setUseSimpleEditor(false);
      } catch (error) {
        console.warn('CKEditor not available, falling back to simple editor:', error);
        if (fallbackToSimple) {
          setUseSimpleEditor(true);
        }
      }
    };

    if (isMounted) {
      checkCKEditor();
    }
  }, [isMounted, fallbackToSimple]);

  if (!isMounted) {
    return (
      <div className={`flex items-center justify-center p-8 border border-gray-200 rounded-lg ${className}`}>
        <div className="text-gray-500">Loading editor...</div>
      </div>
    );
  }

  if (useSimpleEditor) {
    return (
      <SimpleEditor
        data={data}
        onChange={onChange}
        className={className}
        disabled={disabled}
      />
    );
  }

  return (
    <CKEditorWrapper
      data={data}
      onChange={onChange}
      onReady={onReady}
      onBlur={onBlur}
      onFocus={onFocus}
      config={config}
      disabled={disabled}
      className={className}
    />
  );
}