import { useCallback } from 'react';
import { Button, Dropdown, Tooltip } from 'antd';
import {
  BoldOutlined,
  ItalicOutlined,
  StrikethroughOutlined,
  HighlightOutlined,
  CodeOutlined,
  FontSizeOutlined,
  AlertOutlined,
  PlusOutlined,
  DownOutlined,
  LinkOutlined,
  FileMarkdownOutlined,
  TableOutlined,
} from '@ant-design/icons';
import type { editor as monacoEditor } from 'monaco-editor';
import { SNIPPETS, PLATFORM_INSERT_IDS, applySnippet } from './mkdocs-snippets';

interface DocsEditorToolbarProps {
  editorRef: React.RefObject<monacoEditor.IStandaloneCodeEditor | null>;
  monacoRef: React.RefObject<typeof import('monaco-editor') | null>;
  /** If true, show platform-specific inserts (video card, donate, etc.) */
  showPlatformInserts?: boolean;
  /** Custom handler for snippet IDs that need special treatment (modals, etc.) */
  onCustomSnippet?: (snippetId: string) => boolean;
  /** Background color — defaults to transparent */
  background?: string;
  /** Border color — defaults to rgba(255,255,255,0.08) */
  borderColor?: string;
}

export default function DocsEditorToolbar({
  editorRef,
  monacoRef,
  showPlatformInserts = false,
  onCustomSnippet,
  background = 'transparent',
  borderColor = 'rgba(255,255,255,0.08)',
}: DocsEditorToolbarProps) {
  const handleSnippet = useCallback((snippetId: string) => {
    if (onCustomSnippet?.(snippetId)) return;

    const snippet = SNIPPETS.find(s => s.id === snippetId);
    if (!snippet || !editorRef.current || !monacoRef.current) return;
    applySnippet(editorRef.current, snippet, monacoRef.current);
  }, [editorRef, monacoRef, onCustomSnippet]);

  const insertSnippets = SNIPPETS.filter(s =>
    s.group === 'insert' && (showPlatformInserts || !PLATFORM_INSERT_IDS.has(s.id))
  );

  const getInsertIcon = (id: string) => {
    if (id === 'link') return <LinkOutlined />;
    if (id === 'image') return <FileMarkdownOutlined />;
    if (id === 'table') return <TableOutlined />;
    return <PlusOutlined />;
  };

  const btnStyle = { width: 26, height: 24 };

  return (
    <div
      style={{
        height: 28,
        display: 'flex',
        alignItems: 'center',
        padding: '0 8px',
        background,
        borderBottom: `1px solid ${borderColor}`,
        gap: 2,
        flexShrink: 0,
        overflow: 'hidden',
      }}
    >
      <Tooltip title="Bold (Ctrl+B)" mouseEnterDelay={0.4}>
        <Button type="text" size="small" icon={<BoldOutlined />} onClick={() => handleSnippet('bold')} style={btnStyle} />
      </Tooltip>
      <Tooltip title="Italic (Ctrl+I)" mouseEnterDelay={0.4}>
        <Button type="text" size="small" icon={<ItalicOutlined />} onClick={() => handleSnippet('italic')} style={btnStyle} />
      </Tooltip>
      <Tooltip title="Strikethrough" mouseEnterDelay={0.4}>
        <Button type="text" size="small" icon={<StrikethroughOutlined />} onClick={() => handleSnippet('strikethrough')} style={btnStyle} />
      </Tooltip>
      <Tooltip title="Highlight" mouseEnterDelay={0.4}>
        <Button type="text" size="small" icon={<HighlightOutlined />} onClick={() => handleSnippet('highlight')} style={btnStyle} />
      </Tooltip>
      <Tooltip title="Inline Code" mouseEnterDelay={0.4}>
        <Button type="text" size="small" icon={<CodeOutlined />} onClick={() => handleSnippet('inline-code')} style={btnStyle} />
      </Tooltip>
      <Tooltip title="Keyboard Key" mouseEnterDelay={0.4}>
        <Button type="text" size="small" style={{ ...btnStyle, fontSize: 11, fontWeight: 700 }} onClick={() => handleSnippet('kbd')}>K</Button>
      </Tooltip>

      <div style={{ width: 1, height: 16, background: borderColor, margin: '0 4px' }} />

      <Dropdown menu={{ items: SNIPPETS.filter(s => s.group === 'heading').map(s => ({ key: s.id, label: s.label, icon: <FontSizeOutlined />, onClick: () => handleSnippet(s.id) })) }} trigger={['click']}>
        <Button type="text" size="small" style={{ height: 24, fontSize: 12 }}>
          <FontSizeOutlined /> H <DownOutlined style={{ fontSize: 8 }} />
        </Button>
      </Dropdown>

      <div style={{ width: 1, height: 16, background: borderColor, margin: '0 4px' }} />

      <Dropdown menu={{ items: SNIPPETS.filter(s => s.group === 'admonition').map(s => ({ key: s.id, label: s.label, icon: <AlertOutlined />, onClick: () => handleSnippet(s.id) })) }} trigger={['click']}>
        <Button type="text" size="small" style={{ height: 24, fontSize: 12 }}>
          <AlertOutlined /> Admonitions <DownOutlined style={{ fontSize: 8 }} />
        </Button>
      </Dropdown>

      <Dropdown menu={{ items: SNIPPETS.filter(s => s.group === 'code').map(s => ({ key: s.id, label: s.label, icon: <CodeOutlined />, onClick: () => handleSnippet(s.id) })) }} trigger={['click']}>
        <Button type="text" size="small" style={{ height: 24, fontSize: 12 }}>
          <CodeOutlined /> Code <DownOutlined style={{ fontSize: 8 }} />
        </Button>
      </Dropdown>

      <Dropdown menu={{ items: insertSnippets.map(s => ({
        key: s.id,
        label: s.label,
        icon: getInsertIcon(s.id),
        onClick: () => handleSnippet(s.id),
      })) }} trigger={['click']}>
        <Button type="text" size="small" style={{ height: 24, fontSize: 12 }}>
          <PlusOutlined /> Insert <DownOutlined style={{ fontSize: 8 }} />
        </Button>
      </Dropdown>
    </div>
  );
}
