'use client'

import type { ContentEditorMode } from '@admin/utils/editor/content-editor-mode'
import { Card, CardContent } from '@admin/components/ui/card'
import { useContentEditor } from '@admin/hooks/content-editor/use-content-editor'
import { useContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
import { cn } from '@admin/utils/shared/cn'
import { EditorContent, EditorContext } from '@tiptap/react'
import { EditorToolbar } from './editor-toolbar'
import { MainToolbarContent } from './main-toolbar-content'
import { MathBubbleMenu } from './math-popover'
import { ModeToggleButton } from './mode-toggle-button'
import { SelectionBubbleMenu } from './selection-bubble-menu'
import { SlashCommandMenu } from './slash-command-menu'
import { SourceMode } from './source-mode'
import { TableAddControls } from './table-add-controls'
import { TableBubbleMenu } from './table-bubble-menu'

export interface ContentEditorProps {
  value?: string
  onChange?: (value: string) => void
  placeholder?: string
  disabled?: boolean
  className?: string
  defaultMode: ContentEditorMode
}

export function ContentEditor({
  value = '',
  onChange,
  placeholder,
  disabled = false,
  className,
  defaultMode
}: ContentEditorProps) {
  const {
    activeSlashIndex,
    closeSlashMenu,
    editor,
    filteredSlashCommands,
    handleModeChange,
    handleSourceChange,
    handleSourceSelectionChange,
    mode,
    selectSlashCommand,
    setActiveSlashIndex,
    setSlashSearch,
    slashMenu,
    slashSearchQuery,
    sourceValue,
    sourceSelectionRequest
  } = useContentEditor({
    value,
    onChange,
    placeholder,
    disabled,
    defaultMode
  })

  const isSourceMode = mode === 'source'
  const tableAddControls = useContentEditorTableAddControls(!editor || isSourceMode ? null : editor)

  if (!editor) return null

  return (
    <Card
      className={cn(
        'content-editor-wrapper relative flex min-h-60',
        { 'opacity-50': disabled },
        className
      )}
    >
      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
        <EditorContext.Provider value={{ editor }}>
          {isSourceMode ? (
            <SourceMode
              value={sourceValue}
              onChange={handleSourceChange}
              placeholder={placeholder}
              disabled={disabled}
              selectionRequest={sourceSelectionRequest}
              onSelectionChange={handleSourceSelectionChange}
              toolbarEnd={
                <ModeToggleButton isSourceMode={isSourceMode} onClick={handleModeChange} />
              }
              className="max-h-none min-h-0 flex-1 resize-none rounded-none border-0"
            />
          ) : (
            <>
              <EditorToolbar ariaLabel="Content editor toolbar" className="shrink-0">
                <MainToolbarContent onModeChange={handleModeChange} editor={editor} />
              </EditorToolbar>

              <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
                <SelectionBubbleMenu editor={editor} />
                <MathBubbleMenu editor={editor} />
                <TableBubbleMenu editor={editor} />
                <TableAddControls controls={tableAddControls} />

                <SlashCommandMenu
                  activeIndex={activeSlashIndex}
                  commands={filteredSlashCommands}
                  onActiveIndexChange={setActiveSlashIndex}
                  onClose={closeSlashMenu}
                  onCommandSelect={selectSlashCommand}
                  onSearchChange={setSlashSearch}
                  slashMenu={slashMenu}
                  searchQuery={slashSearchQuery}
                />

                <EditorContent
                  editor={editor}
                  role="presentation"
                  className="simple-editor-content min-h-0 flex-1 cursor-text overflow-y-auto bg-input p-10 [&_.ProseMirror]:min-h-full"
                />
              </div>
            </>
          )}
        </EditorContext.Provider>
      </CardContent>
    </Card>
  )
}