import type { Editor } from "@tiptap/react"
import { AlignmentControls } from "./components/AlignmentControls"
import { ColorControl } from "./components/ColorControl"
import { FontFamilyControl } from "./components/FontFamilyControl"
import { FontSizeControl } from "./components/FontSizeControl"
import { IndentControls } from "./components/IndentControls"
import { LineHeightControl } from "./components/LineHeightControl"
import { ListControls } from "./components/ListControls"
import { ToolbarButton } from "./components/ToolbarButton"

interface ToolbarProps {
  editor: Editor | null
}

export function Toolbar({ editor }: React.PropsWithChildren<ToolbarProps>) {
  if (!editor) {
    return null
  }

  return (
    <div className="flex flex-wrap items-center gap-4 p-3 border-b border-gray-200 bg-white">
      {/* Undo/Redo */}
      <div className="flex items-center gap-2">
        <ToolbarButton
          onClick={() => editor.chain().focus().undo().run()}
          disabled={!editor.can().undo()}
          icon="material-symbols:undo"
          title="Undo"
        />
        <ToolbarButton
          onClick={() => editor.chain().focus().redo().run()}
          disabled={!editor.can().redo()}
          icon="material-symbols:redo"
          title="Redo"
        />
      </div>

      {/* Font Settings */}
      <div className="flex items-center gap-2">
        <FontFamilyControl editor={editor} />
        <FontSizeControl editor={editor} />
      </div>

      {/* Text Style */}
      <div className="flex items-center gap-2">
        <ToolbarButton
          onClick={() => editor.chain().focus().toggleBold().run()}
          isActive={editor.isActive("bold")}
          icon="mdi:format-bold"
          title="Bold"
        />
        <ToolbarButton
          onClick={() => editor.chain().focus().toggleItalic().run()}
          isActive={editor.isActive("italic")}
          icon="mdi:format-italic"
          title="Italic"
        />
        <ToolbarButton
          onClick={() => editor.chain().focus().toggleUnderline().run()}
          isActive={editor.isActive("underline")}
          icon="mdi:format-underline"
          title="Underline"
        />
        <ToolbarButton
          onClick={() => editor.chain().focus().toggleStrike().run()}
          isActive={editor.isActive("strike")}
          icon="mdi:format-strikethrough"
          title="Strikethrough"
        />
        <ColorControl editor={editor} />
      </div>

      {/* Lists */}
      <ListControls editor={editor} />

      {/* Alignment */}
      <AlignmentControls editor={editor} />

      {/* Spacing and Indent */}
      <div className="flex items-center gap-2">
        <LineHeightControl editor={editor} />
        <IndentControls editor={editor} />
      </div>

      {/* Links and Media */}
      <div className="flex items-center gap-2">
        <ToolbarButton
          onClick={() => {
            const url = window.prompt("Enter link URL:")
            if (url?.trim()) {
              editor.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run()
            }
          }}
          isActive={editor.isActive("link")}
          icon="mdi:link"
          title="Add Link"
        />
        <ToolbarButton
          onClick={() => {
            editor.chain().focus().setImageUploadNode().run()
          }}
          icon="mdi:image"
          title="Upload Image"
        />
      </div>

      {/* Clear Format */}
      <ToolbarButton
        onClick={() => editor.chain().focus().clearNodes().unsetAllMarks().run()}
        icon="mdi:format-clear"
        title="Clear Format"
      />
    </div>
  )
}