// Basic Quill modules configuration (syntax module is handled in the component)
export const customModules = (toggleCodeView: any) => ({
    toolbar: {
        container: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            // ['code-block'],
            [{ size: [] }],
            [{ font: [] }],
            [{ align: ['right', 'center', 'justify'] }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['code-view'], // Add code view button
            [
                {
                    color: [
                        '#000000',
                        '#444444',
                        '#666666',
                        '#999999',
                        '#cccccc',
                        '#ffffff',
                        '#e60000',
                        '#ff9900',
                        '#ffff00',
                        '#00b300',
                        '#0066cc',
                        '#003399',
                        '#9933ff',
                        '#ff66cc',
                        '#8b4513',
                        '#785412',
                    ],
                },
            ],
            [
                {
                    background: [
                        '#000000',
                        '#444444',
                        '#666666',
                        '#999999',
                        '#cccccc',
                        '#ffffff',
                        '#ffecec',
                        '#fff3e0',
                        '#fffde0',
                        '#e8ffe8',
                        '#e8f0ff',
                        '#f0e8ff',
                        '#fff0f8',
                        '#f7efe0',
                        '#f2e5d0',
                        '#785412',
                    ],
                },
            ],
            ['clean'],
        ],
        handlers: {
            'code-view': toggleCodeView,
        },
    },
    clipboard: {
        matchVisual: false,
    },
    imageResize: {
        parchment: true,
        modules: ['Resize', 'DisplaySize'],
    },
});

export const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',

    'list',
    'bullet',
    'link',
    'color',
    'image',
    'background',
    'align',
    'size',
    'font',
];

// Add custom CSS to fix border-radius issues and syntax highlighting
// This injects a style tag to ensure border-radius works on all Quill editor elements
export const quillEditorStyles = `
.quill-editor {
  border-radius: 0.5rem !important;
}
.quill-editor .ql-container,
.quill-editor .ql-toolbar,
.quill-editor .ql-editor {
  border-radius: 0.5rem !important;
}
.quill-editor .ql-toolbar {
  border: 1.8px solid oklch(87.1% 0.006 286.286);
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  
}
.quill-editor .ql-container {
  border: 1.8px solid oklch(87.1% 0.006 286.286);
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

/* Code block styling - Simple version without syntax highlighting */
.ql-editor pre {
  background-color: #2d3748;
  color: #e2e8f0;
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 0.5rem 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  border: 1px solid #4a5568;
}

/* Dark theme adjustments */
.quill-editor[data-theme="dark"] .ql-editor pre {
  background-color: #1a202c;
  color: #e2e8f0;
  border-color: #2d3748;
}

/* Light theme code blocks */
.quill-editor:not([data-theme="dark"]) .ql-editor pre {
  background-color: #f7fafc;
  color: #2d3748;
  border-color: #e2e8f0;
}

/* Custom code-view button styling */
.ql-toolbar .ql-code-view {
  width: 28px;
  height: 28px;
}

.ql-toolbar .ql-code-view:before {
  content: "</>";
  font-size: 14px;
}

.ql-toolbar .ql-code-view.ql-active:before {
  content: "👁️";
}

.ql-toolbar .ql-code-view:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
}
`;