'use client';

import { useEffect, useRef, useState } from 'react';

const SummernoteEditor = ({ value, onChange }) => {
  const editorRef = useRef(null);
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    let $note;
    let $;
    let isDestroyed = false;

    const initEditor = async () => {
      try {
        if (isInitialized || isDestroyed) return;

        console.log('🚀 Starting Summernote initialization...');

        const [jquery, summernoteJS, summernoteCSS] = await Promise.all([
          import('jquery').then(jq => {
            $ = jq.default;
            window.$ = $;
            window.jQuery = $;
            console.log('✅ jQuery loaded successfully');
            return $;
          }),
          import('summernote/dist/summernote-lite.js').then(module => {
            console.log('✅ Summernote JS loaded');
            return module;
          }),
          import('summernote/dist/summernote-lite.css').then(module => {
            console.log('✅ Summernote CSS loaded');
            return module;
          }),
        ]);

        if (!editorRef.current || isDestroyed) {
          console.log('❌ Editor ref not available or destroyed');
          return;
        }

        // Custom button function
        var CustomButton = function (context) {
          var ui = $.summernote.ui;

          var button = ui.button({
            contents: '<i class="fa fa-hand-pointer-o"></i> Button',
            click: function () {
              const link = prompt('Enter button URL:', 'https://');
              if (!link) return;
              
              const text = prompt('Enter button text:', 'Click Here');
              if (!text) return;

              const style = prompt('Choose button style:\n\nblue - Primary Blue\ngreen - Success Green\nred - Danger Red\norange - Warning Orange\ngray - Secondary Gray\npurple - Info Purple', 'blue');
              
              if (link && text && style) {
                const buttonHtml = `
                  <a href="${link}" class="custom-btn custom-btn-${style}" target="_blank">
                    ${text}
                  </a>
                `;
                context.invoke('editor.pasteHTML', buttonHtml);
              } else {
                alert('Please fill all fields');
              }
            }
          });

          return button.render();
        };

        $note = $(editorRef.current);
        
        console.log('🔄 Checking for existing Summernote instance...');
        if ($note.summernote && typeof $note.summernote === 'function') {
          console.log('🗑️ Destroying existing Summernote instance');
          $note.summernote('destroy');
        }

        // Helper function to get selected table
        const getSelectedTable = (context) => {
          try {
            const layoutInfo = context.layoutInfo;
            if (!layoutInfo || !layoutInfo.editable) {
              console.log('❌ Layout info not available');
              return $();
            }
            
            const $editable = $(layoutInfo.editable);
            const range = context.invoke('editor.createRange');
            
            if (!range || !range.commonAncestor) {
              return $editable.find('table').first();
            }
            
            const commonAncestor = $(range.commonAncestor());
            const $table = commonAncestor.closest('table');
            
            return $table.length ? $table : $editable.find('table').first();
          } catch (error) {
            console.log('❌ Error getting selected table:', error);
            return $();
          }
        };

        // ENHANCED: Table style application that preserves Summernote functionality
        const applyTableStyle = ($table, style) => {
          if (!$table || !$table.length) return;
          
          // Remove all existing table classes
          const allTableClasses = [
            'sn-table-basic', 'sn-table-striped', 'sn-table-bordered', 
            'sn-table-hover', 'sn-table-modern', 'sn-table-elegant', 
            'sn-table-minimal', 'sn-table-corporate', 'sn-table-creative',
            'sn-table-dark', 'sn-table-gradient', 'sn-table-material',
            'sn-table-rounded'
          ];
          
          allTableClasses.forEach(className => {
            $table.removeClass(className);
          });

          // Add the selected class
          let selectedClass = 'sn-table-' + style;
          $table.addClass(selectedClass);
          
          // Ensure table has the base class
          $table.addClass('sn-table');
          
          console.log(`✅ Applied table style: ${selectedClass}`);
        };

        // FIXED: Function to add/remove header from table that works with Summernote
        const toggleTableHeader = (context) => {
          const $table = getSelectedTable(context);
          
          if (!$table.length) {
            alert('Please select or click inside a table first.');
            return;
          }

          const hasHeader = $table.find('thead').length > 0;
          
          if (hasHeader) {
            // Remove header - convert th to td and remove thead
            $table.find('thead th').each(function() {
              const $th = $(this);
              const content = $th.html();
              $th.replaceWith(`<td>${content}</td>`);
            });
            $table.find('thead').contents().unwrap();
            
            // Ensure all rows are in tbody
            if ($table.find('tbody').length === 0) {
              $table.find('tr').wrapAll('<tbody></tbody>');
            }
          } else {
            // Add header - convert first row to thead
            const $firstRow = $table.find('tr').first();
            
            // If there's a tbody, get first row from there
            if ($table.find('tbody').length > 0) {
              const $tbody = $table.find('tbody');
              const $firstBodyRow = $tbody.find('tr').first();
              $firstBodyRow.find('td').each(function() {
                const $td = $(this);
                const content = $td.html();
                $td.replaceWith(`<th>${content}</th>`);
              });
              $firstBodyRow.wrap('<thead></thead>');
              $firstBodyRow.parent().detach().prependTo($table);
            } else {
              $firstRow.find('td').each(function() {
                const $td = $(this);
                const content = $td.html();
                $td.replaceWith(`<th>${content}</th>`);
              });
              $firstRow.wrap('<thead></thead>');
              $table.find('tr').not($firstRow).wrapAll('<tbody></tbody>');
            }
          }
          
          // Re-apply current table style
          const currentStyle = $table.attr('class')?.match(/sn-table-(\w+)/)?.[1] || 'modern';
          applyTableStyle($table, currentStyle);
          
          context.invoke('editor.triggerChange');
        };

        // FIXED: Show table style modal for existing tables
        const showTableStyleModal = (context) => {
          const $table = getSelectedTable(context);
          
          if (!$table.length) {
            alert('Please select or click inside a table first to apply styles.');
            return;
          }

          const currentStyle = $table.attr('class')?.match(/sn-table-(\w+)/)?.[1] || 'modern';

          const modalHTML = `
            <div class="sn-table-style-modal-overlay" style="
              position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
              background: rgba(0,0,0,0.5); display: flex; align-items: center; 
              justify-content: center; z-index: 10000; font-family: 'Inter', sans-serif;
            ">
              <div style="
                background: white; padding: 25px; border-radius: 12px; 
                box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 400px; 
                width: 90%; max-height: 80vh; overflow-y: auto;
              ">
                <h3 style="margin: 0 0 20px 0; color: #1f2937;">🎨 Change Table Style</h3>
                
                <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 8px; font-weight: 600;">Style:</label>
                  <select id="sn-table-style-edit" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; font-family: 'Inter', sans-serif;">
                    <option value="modern" ${currentStyle === 'modern' ? 'selected' : ''}>Modern - Gradient Headers</option>
                    <option value="elegant" ${currentStyle === 'elegant' ? 'selected' : ''}>Elegant - Glass Design</option>
                    <option value="minimal" ${currentStyle === 'minimal' ? 'selected' : ''}>Minimal - Clean Style</option>
                    <option value="corporate" ${currentStyle === 'corporate' ? 'selected' : ''}>Corporate - Professional</option>
                    <option value="creative" ${currentStyle === 'creative' ? 'selected' : ''}>Creative - Colorful</option>
                    <option value="dark" ${currentStyle === 'dark' ? 'selected' : ''}>Dark - Dark Theme</option>
                    <option value="gradient" ${currentStyle === 'gradient' ? 'selected' : ''}>Gradient - Colorful Headers</option>
                    <option value="material" ${currentStyle === 'material' ? 'selected' : ''}>Material - Material Design</option>
                    <option value="striped" ${currentStyle === 'striped' ? 'selected' : ''}>Striped - Alternating Rows</option>
                    <option value="bordered" ${currentStyle === 'bordered' ? 'selected' : ''}>Bordered - Strong Borders</option>
                    <option value="hover" ${currentStyle === 'hover' ? 'selected' : ''}>Hover - Hover Effects</option>
                    <option value="rounded" ${currentStyle === 'rounded' ? 'selected' : ''}>Rounded - Rounded Corners</option>
                  </select>
                </div>

                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                  <button class="sn-style-cancel-btn" style="
                    padding: 8px 16px; background: #6b7280; color: white; 
                    border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: 'Inter', sans-serif;
                  ">Cancel</button>
                  <button class="sn-style-apply-btn" style="
                    padding: 8px 16px; background: #3b82f6; color: white; 
                    border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: 'Inter', sans-serif;
                  ">Apply Style</button>
                </div>
              </div>
            </div>
          `;

          const $modal = $(modalHTML).appendTo('body');

          // Apply style
          $modal.find('.sn-style-apply-btn').on('click', function() {
            const selectedStyle = $modal.find('#sn-table-style-edit').val();
            applyTableStyle($table, selectedStyle);
            context.invoke('editor.triggerChange');
            $modal.remove();
          });

          // Cancel
          $modal.find('.sn-style-cancel-btn').on('click', function() {
            $modal.remove();
          });
        };

        // Table Style Button
        var TableStyleButton = function (context) {
          var ui = $.summernote.ui;

          var button = ui.button({
            contents: '<i class="fa fa-paint-brush"></i> Style',
            tooltip: 'Apply Table Styles',
            click: function () {
              showTableStyleModal(context);
            }
          });

          return button.render();
        };

        // Table Header Toggle Button
        var TableHeaderButton = function (context) {
          var ui = $.summernote.ui;

          var button = ui.button({
            contents: '<i class="fa fa-header"></i> Header',
            tooltip: 'Toggle Table Header',
            click: function () {
              toggleTableHeader(context);
            }
          });

          return button.render();
        };

        console.log('🎯 Initializing Summernote with enhanced table features...');
        
        // FIXED: Initialize Summernote with proper table configuration
        $note.summernote({
          placeholder: 'Start writing here...',
          tabsize: 2,
          height: 400,
          focus: true,
          dialogsInBody: true,
          disableDragAndDrop: false,
          
          // Enhanced Toolbar configuration
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview']],
            ['mytable', ['tableStyleButton', 'tableHeaderButton']],
            ['mybutton', ['customButton']]
          ],

          popover: {
            image: [
              ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
              ['float', ['floatLeft', 'floatRight', 'floatNone']],
              ['remove', ['removeMedia']]
            ],
            link: [
              ['link', ['linkDialogShow', 'unlink']]
            ],
            table: [
              ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
              ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
              ['style', ['tableStyleButton', 'tableHeaderButton']]
            ],
            air: [
              ['color', ['color']],
              ['font', ['bold', 'underline', 'clear']],
              ['para', ['ul', 'paragraph']],
              ['table', ['table']],
              ['insert', ['link', 'picture']]
            ]
          },

          // Enhanced buttons configuration
          buttons: {
            tableStyleButton: TableStyleButton,
            tableHeaderButton: TableHeaderButton,
            customButton: CustomButton
          },

          // Font families
          fontNames: [
            'Inter', 'SF Pro Display', 'Segoe UI', 'Roboto', 'Open Sans',
            'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
            'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
            'Tahoma', 'Times New Roman', 'Verdana', 'Georgia'
          ],

          // Font sizes
          fontSizes: ['12', '14', '16', '18', '20', '24', '28', '32', '36'],

          // Style tags
          styleTags: [
            'p',
            'blockquote',
            'pre',
            'h1',
            'h2', 
            'h3',
            'h4'
          ],

          callbacks: {
            onInit: function () {
              if (isDestroyed) return;
              setIsInitialized(true);
              console.log('✅ Summernote initialized successfully with table features!');
              
              setTimeout(() => {
                if (isDestroyed) return;
                const $editable = $note.next().find('.note-editable');
                applyListStyles($editable);
                applyHeadingStyles($editable);
                applyAllTableStyles($editable);
                
                console.log('🔍 Enhanced editor initialized with table features');
              }, 100);
            },
            
            onChange: function (contents) {
              if (isDestroyed) return;
              
              const processedContent = processContentForFrontend(contents);
              
              if (onChange && typeof onChange === 'function') {
                onChange(processedContent);
              }
            },

            onBlur: function () {
              if (isDestroyed) return;
              const content = $note.summernote('code');
              const processedContent = processContentForFrontend(content);
              if (onChange && typeof onChange === 'function') {
                onChange(processedContent);
              }
            },

            // FIXED: Handle content changes and re-apply table styles
            onChange: function (contents, $editable) {
              if (isDestroyed) return;
              
              setTimeout(() => {
                if (isDestroyed) return;
                applyAllTableStyles($editable);
              }, 50);
              
              const processedContent = processContentForFrontend(contents);
              if (onChange && typeof onChange === 'function') {
                onChange(processedContent);
              }
            },

            // Enhanced style change handler
            onChangeStyle: function ($node, styleName, styleValue) {
              setTimeout(() => {
                if (isDestroyed) return;
                
                $node.removeClass('sn-heading sn-heading-1 sn-heading-2 sn-heading-3 sn-heading-4 sn-paragraph sn-blockquote');
                
                let appliedClass = '';
                switch(styleValue) {
                  case 'h1':
                    $node.addClass('sn-heading sn-heading-1');
                    appliedClass = 'sn-heading-1';
                    break;
                  case 'h2':
                    $node.addClass('sn-heading sn-heading-2');
                    appliedClass = 'sn-heading-2';
                    break;
                  case 'h3':
                    $node.addClass('sn-heading sn-heading-3');
                    appliedClass = 'sn-heading-3';
                    break;
                  case 'h4':
                    $node.addClass('sn-heading sn-heading-4');
                    appliedClass = 'sn-heading-4';
                    break;
                  case 'blockquote':
                    $node.addClass('sn-blockquote');
                    appliedClass = 'sn-blockquote';
                    break;
                  default:
                    $node.addClass('sn-paragraph');
                    appliedClass = 'sn-paragraph';
                }
                
                updateHeadingFontSize($node, styleValue);
              }, 10);
            },

            // Handle paste events
            onPaste: function (e) {
              setTimeout(() => {
                if (isDestroyed) return;
                const $editable = $note.next().find('.note-editable');
                applyHeadingStyles($editable);
                applyListStyles($editable);
                applyAllTableStyles($editable);
              }, 100);
            },

            // Handle image upload
            onImageUpload: function (files) {
              if (isDestroyed) return;
              for (let i = 0; i < files.length; i++) {
                uploadImage(files[i], $note);
              }
            },

            // FIXED: Handle table modifications to maintain styles
            onTableModified: function (table) {
              if (isDestroyed) return;
              console.log('📊 Table modified, reapplying styles...');
              setTimeout(() => {
                const $table = $(table);
                applyAllTableStyles($table.closest('.note-editable'));
              }, 100);
            },

            // Handle table creation
            onTableInserted: function (table) {
              if (isDestroyed) return;
              console.log('📊 Table inserted, applying styles...');
              setTimeout(() => {
                const $table = $(table);
                applyTableStyle($table, 'modern'); // Default style for new tables
              }, 100);
            }
          }
        });

        // Function to update font size based on heading level
        function updateHeadingFontSize($node, headingLevel) {
          if (!$node || !headingLevel) return;
          
          const fontSizeMap = {
            'h1': '2.5em',
            'h2': '2em', 
            'h3': '1.5em',
            'h4': '1.25em'
          };
          
          const newSize = fontSizeMap[headingLevel];
          if (newSize) {
            $node.css('font-size', newSize);
          }
        }

        // Function to apply heading styles to existing content
        function applyHeadingStyles($editable) {
          if (isDestroyed || !$editable || !$editable.length) return;
          
          $editable.find('h1').addClass('sn-heading sn-heading-1').css('font-size', '2.5em');
          $editable.find('h2').addClass('sn-heading sn-heading-2').css('font-size', '2em');
          $editable.find('h3').addClass('sn-heading sn-heading-3').css('font-size', '1.5em');
          $editable.find('h4').addClass('sn-heading sn-heading-4').css('font-size', '1.25em');
          $editable.find('p').addClass('sn-paragraph');
          $editable.find('blockquote').addClass('sn-blockquote');
        }

        // Function to apply styles to all tables
        function applyAllTableStyles($editable) {
          if (isDestroyed || !$editable || !$editable.length) return;
          
          $editable.find('table').each(function() {
            const $table = $(this);
            
            // Add base table class if not present
            if (!$table.hasClass('sn-table')) {
              $table.addClass('sn-table');
            }
            
            // If no specific style class is present, add modern as default
            const hasStyle = $table.hasClass('sn-table-striped') || 
                           $table.hasClass('sn-table-bordered') ||
                           $table.hasClass('sn-table-hover') ||
                           $table.hasClass('sn-table-modern') ||
                           $table.hasClass('sn-table-elegant') ||
                           $table.hasClass('sn-table-minimal') ||
                           $table.hasClass('sn-table-corporate') ||
                           $table.hasClass('sn-table-creative') ||
                           $table.hasClass('sn-table-dark') ||
                           $table.hasClass('sn-table-gradient') ||
                           $table.hasClass('sn-table-material') ||
                           $table.hasClass('sn-table-rounded');
            
            if (!hasStyle) {
              $table.addClass('sn-table-modern');
            }
          });
        }

        // Function to apply list styles in editor
        function applyListStyles($editable) {
          if (isDestroyed) return;
          $editable.find('ul').addClass('sn-list sn-ul');
          $editable.find('ol').addClass('sn-list sn-ol');
          $editable.find('li').addClass('sn-list-item');
        }

        // Function to process content for frontend
        function processContentForFrontend(content) {
          if (!content) return content;
          
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = content;
          
          // Add classes to elements
          tempDiv.querySelectorAll('h1').forEach(el => {
            el.classList.add('sn-heading', 'sn-heading-1');
          });
          tempDiv.querySelectorAll('h2').forEach(el => {
            el.classList.add('sn-heading', 'sn-heading-2');
          });
          tempDiv.querySelectorAll('h3').forEach(el => {
            el.classList.add('sn-heading', 'sn-heading-3');
          });
          tempDiv.querySelectorAll('h4').forEach(el => {
            el.classList.add('sn-heading', 'sn-heading-4');
          });
          tempDiv.querySelectorAll('p').forEach(el => {
            el.classList.add('sn-paragraph');
          });
          tempDiv.querySelectorAll('blockquote').forEach(el => {
            el.classList.add('sn-blockquote');
          });
          
          // Apply table styles
          tempDiv.querySelectorAll('table').forEach(el => {
            // Ensure table has base class
            el.classList.add('sn-table');
            
            // Check if table already has a style class
            const hasStyle = el.classList.contains('sn-table-striped') || 
                           el.classList.contains('sn-table-bordered') ||
                           el.classList.contains('sn-table-hover') ||
                           el.classList.contains('sn-table-modern') ||
                           el.classList.contains('sn-table-elegant') ||
                           el.classList.contains('sn-table-minimal') ||
                           el.classList.contains('sn-table-corporate') ||
                           el.classList.contains('sn-table-creative') ||
                           el.classList.contains('sn-table-dark') ||
                           el.classList.contains('sn-table-gradient') ||
                           el.classList.contains('sn-table-material') ||
                           el.classList.contains('sn-table-rounded');
            
            // If no style is present, add modern as default
            if (!hasStyle) {
              el.classList.add('sn-table-modern');
            }
          });
          
          tempDiv.querySelectorAll('ul').forEach(el => {
            el.classList.add('sn-list', 'sn-ul');
          });
          tempDiv.querySelectorAll('ol').forEach(el => {
            el.classList.add('sn-list', 'sn-ol');
          });
          tempDiv.querySelectorAll('li').forEach(el => {
            el.classList.add('sn-list-item');
          });

          // FIX: Only apply sn-link to regular links, NOT custom buttons
          tempDiv.querySelectorAll('a').forEach(el => {
            // Check if it's a custom button - if it has custom-btn class, don't add sn-link
            if (!el.classList.contains('custom-btn')) {
              el.classList.add('sn-link');
            }
          });
          
          return tempDiv.innerHTML;
        }

        // Set initial value
        if (value) {
          console.log('📥 Setting initial value');
          const processedValue = processContentForFrontend(value);
          $note.summernote('code', processedValue);
          
          setTimeout(() => {
            if (isDestroyed) return;
            const $editable = $note.next().find('.note-editable');
            applyHeadingStyles($editable);
            applyAllTableStyles($editable);
          }, 200);
        }

      } catch (error) {
        console.error('❌ Error initializing SummernoteEditor:', error);
      }
    };

    const uploadImage = async (file, $note) => {
      try {
        const reader = new FileReader();
        
        reader.onload = function (e) {
          const image = $('<img>')
            .attr('src', e.target.result)
            .css('max-width', '100%')
            .attr('alt', 'Uploaded image')
            .addClass('sn-image');
          $note.summernote('insertNode', image[0]);
        };
        
        reader.readAsDataURL(file);
        
      } catch (error) {
        console.error('❌ Error uploading image:', error);
        alert('Error uploading image. Please try again.');
      }
    };

    initEditor();

    return () => {
      isDestroyed = true;
      console.log('🧹 Cleaning up Summernote editor...');
      if ($note && typeof $note.summernote === 'function') {
        try {
          $note.summernote('destroy');
          setIsInitialized(false);
        } catch (error) {
          console.error('❌ Error destroying SummernoteEditor:', error);
        }
      }
      
      if (window.$) {
        delete window.$;
        delete window.jQuery;
      }
    };
  }, []);

  return (
    <div className="summernote-editor-wrapper">
      <div ref={editorRef} />
      
      <style jsx global>{`
        /* Import beautiful fonts */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@300;400;700&display=swap');
        
        .summernote-editor-wrapper {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
          width: 100%;
        }
        
        /* Editor Container */
        .note-editor.note-frame {
          border: 1px solid #d1d5db;
          border-radius: 8px;
          overflow: hidden;
        }
        
        /* Toolbar */
        .note-editor.note-frame .note-toolbar {
          background: #f8f9fa;
          border-bottom: 1px solid #e5e7eb;
          padding: 12px;
        }
        
        .note-btn-group {
          margin-right: 8px;
          margin-bottom: 4px;
        }
        
        .note-btn-group .note-btn {
          background: white;
          border: 1px solid #d1d5db;
          padding: 6px 10px;
          font-size: 13px;
          color: #374151;
          border-radius: 6px;
          font-family: 'Inter', sans-serif;
        }
        
        .note-btn-group .note-btn:hover {
          background: #f3f4f6;
          border-color: #9ca3af;
        }
        
        .note-btn-group .note-btn.active {
          background: #3b82f6;
          color: white;
          border-color: #3b82f6;
        }
        
        /* Style dropdown styling */
        .note-style .dropdown-menu a {
          font-family: 'Inter', sans-serif;
          padding: 8px 12px;
          font-size: 14px;
        }
        
        .note-style .dropdown-menu a:hover {
          background: #f3f4f6;
        }
        
        .note-style .dropdown-menu .active {
          background: #3b82f6;
          color: white;
        }
        
        /* Editor Area */
        .note-editable {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
          line-height: 1.7;
          padding: 24px;
          min-height: 400px;
          font-size: 16px;
          color: #374151;
          background: white;
        }
        
        /* FIXED: Ensure Summernote table popover works properly */
        .note-popover {
          z-index: 1000;
        }
        
        .note-popover .popover-content {
          padding: 5px;
        }
        
        .note-popover .note-table .dropdown-menu {
          min-width: auto;
          padding: 5px;
        }
        
        .note-popover .note-table .dropdown-menu a {
          padding: 5px 10px;
          font-size: 12px;
        }
        
        /* ALL TABLE STYLES */
        .note-editable .sn-table {
          border-collapse: collapse;
          width: 100%;
          margin: 1.5em 0;
          font-family: 'Inter', sans-serif;
          transition: all 0.3s ease;
        }
        
        .note-editable .sn-table th,
        .note-editable .sn-table td {
          padding: 12px;
          text-align: left;
          border: 1px solid #e5e7eb;
          transition: all 0.3s ease;
        }
        
        .note-editable .sn-table th {
          font-weight: 600;
        }

        /* Modern Table */
        .note-editable .sn-table-modern {
          border: none;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .note-editable .sn-table-modern th {
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 100%);
          color: white;
          font-weight: 600;
          padding: 16px;
          border: none;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .note-editable .sn-table-modern td {
          padding: 14px 16px;
          border-bottom: 1px solid #f1f5f9;
          background: white;
        }
        
        .note-editable .sn-table-modern tr:last-child td {
          border-bottom: none;
        }
        
        /* Elegant Table */
        .note-editable .sn-table-elegant {
          border: none;
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 100%);
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .note-editable .sn-table-elegant th {
          background: rgba(255, 255, 255, 0.1);
          color: white;
          font-weight: 500;
          padding: 18px 20px;
          border: none;
          backdrop-filter: blur(10px);
          font-size: 15px;
        }
        
        .note-editable .sn-table-elegant td {
          padding: 16px 20px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          background: rgba(255, 255, 255, 0.05);
          color: white;
          backdrop-filter: blur(5px);
        }
        
        .note-editable .sn-table-elegant tr:hover td {
          background: rgba(255, 255, 255, 0.1);
        }
        
        /* Minimal Table */
        .note-editable .sn-table-minimal {
          border: none;
          background: transparent;
        }
        
        .note-editable .sn-table-minimal th {
          background: transparent;
          color: #1F4E79;
          font-weight: 500;
          padding: 12px 16px;
          border-bottom: 2px solid #2D7F99;
          font-size: 13px;
        }
        
        .note-editable .sn-table-minimal td {
          padding: 12px 16px;
          border-bottom: 1px solid #f1f5f9;
          background: transparent;
        }
        
        .note-editable .sn-table-minimal tr:last-child td {
          border-bottom: 2px solid #f1f5f9;
        }
        
        /* Corporate Table */
        .note-editable .sn-table-corporate {
          border: 1px solid #e5e7eb;
          background: white;
          border-radius: 8px;
          overflow: hidden;
        }
        
        .note-editable .sn-table-corporate th {
          background: #1F4E79;
          color: white;
          font-weight: 600;
          padding: 14px 16px;
          border: none;
          font-size: 13px;
        }
        
        .note-editable .sn-table-corporate td {
          padding: 12px 16px;
          border-bottom: 1px solid #f3f4f6;
          background: white;
          font-size: 14px;
        }
        
        .note-editable .sn-table-corporate tr:nth-child(even) {
          background: #f9fafb;
        }
        
        /* Creative Table */
        .note-editable .sn-table-creative {
          border: none;
          border-radius: 16px;
          overflow: hidden;
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 100%);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        .note-editable .sn-table-creative th {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          font-weight: 600;
          padding: 16px 20px;
          border: none;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
        
        .note-editable .sn-table-creative td {
          padding: 14px 20px;
          background: rgba(255, 255, 255, 0.1);
          color: white;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
        }
        
        .note-editable .sn-table-creative tr:hover td {
          background: rgba(255, 255, 255, 0.2);
        }
        
        /* Dark Table */
        .note-editable .sn-table-dark {
          border: none;
          background: #1f2937;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .note-editable .sn-table-dark th {
          background: #1F4E79;
          color: #f3f4f6;
          font-weight: 600;
          padding: 16px;
          border: none;
          font-size: 14px;
        }
        
        .note-editable .sn-table-dark td {
          padding: 14px 16px;
          color: #d1d5db;
          border-bottom: 1px solid #374151;
          background: #1f2937;
        }
        
        .note-editable .sn-table-dark tr:hover td {
          background: #374151;
        }
        
        /* Gradient Table */
        .note-editable .sn-table-gradient {
          border: none;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .note-editable .sn-table-gradient th {
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 50%, #3b82f6 100%);
          color: white;
          font-weight: 600;
          padding: 16px;
          border: none;
          font-size: 14px;
          text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .note-editable .sn-table-gradient td {
          padding: 14px 16px;
          border-bottom: 1px solid #f1f5f9;
          background: white;
        }
        
        .note-editable .sn-table-gradient tr:nth-child(even) td {
          background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
        }
        
        /* Material Design Table */
        .note-editable .sn-table-material {
          border: none;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          background: white;
        }
        
        .note-editable .sn-table-material th {
          background: #1F4E79;
          color: white;
          font-weight: 500;
          padding: 16px 20px;
          border: none;
          font-size: 14px;
        }
        
        .note-editable .sn-table-material td {
          padding: 16px 20px;
          border-bottom: 1px solid #e0e0e0;
          background: white;
          transition: background 0.3s ease;
        }
        
        .note-editable .sn-table-material tr:hover td {
          background: #f5f5f5;
        }
        
        /* Striped Table */
        .note-editable .sn-table-striped tbody tr:nth-child(odd) {
          background-color: #f9fafb;
        }
        
        .note-editable .sn-table-striped tbody tr:nth-child(even) {
          background-color: white;
        }
        
        .note-editable .sn-table-striped th {
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 100%);
          color: white;
          border: none;
        }
        
        /* Bordered Table */
        .note-editable .sn-table-bordered {
          border: 2px solid #1F4E79;
        }
        
        .note-editable .sn-table-bordered th,
        .note-editable .sn-table-bordered td {
          border: 1px solid #d1d5db;
        }
        
        .note-editable .sn-table-bordered th {
          background: #1F4E79;
          color: white;
          border-color: #1F4E79;
        }
        
        /* Hover Table */
        .note-editable .sn-table-hover tbody tr:hover {
          background-color: #f0f9ff;
          transition: background-color 0.3s ease;
          cursor: pointer;
        }
        
        /* Rounded Table */
        .note-editable .sn-table-rounded {
          border-radius: 20px;
          overflow: hidden;
          border: none;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .note-editable .sn-table-rounded th {
          border-radius: 0;
          background: linear-gradient(135deg, #1F4E79 0%, #2D7F99 100%);
          color: white;
        }
        
        /* Table Responsive Design */
        @media (max-width: 768px) {
          .note-editable .sn-table {
            font-size: 14px;
          }
          
          .note-editable .sn-table th,
          .note-editable .sn-table td {
            padding: 8px 10px;
          }
        }

        /* Rest of your existing styles... */
        .note-editable .sn-heading-1,
        .note-editable h1.sn-heading-1 {
          font-family: 'Merriweather', 'Georgia', serif;
          font-size: 2.5em !important;
          font-weight: 700;
          margin: 1.2em 0 0.8em 0;
          line-height: 1.2;
          color: #1f2937;
          border-bottom: 3px solid #1F4E79;
          padding-bottom: 0.5em;
        }
        
        .note-editable .sn-heading-2,
        .note-editable h2.sn-heading-2 {
          font-family: 'Merriweather', 'Georgia', serif;
          font-size: 2em !important;
          font-weight: 600;
          margin: 1.5em 0 0.6em 0;
          line-height: 1.3;
          color: #374151;
        }
        
        .note-editable .sn-heading-3,
        .note-editable h3.sn-heading-3 {
          font-family: 'Inter', sans-serif;
          font-size: 1.5em !important;
          font-weight: 600;
          margin: 1.3em 0 0.5em 0;
          line-height: 1.4;
          color: #4b5563;
        }
        
        .note-editable .sn-heading-4,
        .note-editable h4.sn-heading-4 {
          font-family: 'Inter', sans-serif;
          font-size: 1.25em !important;
          font-weight: 600;
          margin: 1.2em 0 0.4em 0;
          line-height: 1.4;
          color: #6b7280;
        }
        
        .note-editable .sn-paragraph,
        .note-editable p.sn-paragraph {
          margin-bottom: 1.2em;
          line-height: 1.7;
          font-size: 16px;
          color: #4b5563;
        }
        
        .note-editable .sn-blockquote,
        .note-editable blockquote.sn-blockquote {
          font-family: 'Merriweather', 'Georgia', serif;
          font-size: 1.3em;
          font-style: italic;
          margin: 2em 0;
          padding: 2em 2em 2em 3em;
          background: #f8fafc;
          border-left: 6px solid #1F4E79;
          border-radius: 0 8px 8px 0;
          color: #475569;
        }
        
        .note-editable .sn-link,
        .note-editable a.sn-link {
          color: #1F4E79 !important;
          text-decoration: none !important;
          border-bottom: 2px solid #2D7F99 !important;
          transition: all 0.3s ease !important;
          padding-bottom: 1px !important;
        }
        
        .note-editable .sn-link:hover,
        .note-editable a.sn-link:hover {
          color: #2D7F99 !important;
          border-bottom-color: #1F4E79 !important;
          background-color: #f0f9ff !important;
        }
        
        .note-editable .sn-list,
        .note-editable ul.sn-list,
        .note-editable ol.sn-list {
          margin: 1.2em 0 !important;
          padding-left: 2.5em !important;
          list-style-position: outside !important;
        }
        
        .note-editable .sn-ul,
        .note-editable ul.sn-ul {
          list-style-type: disc !important;
        }
        
        .note-editable .sn-ol,
        .note-editable ol.sn-ol {
          list-style-type: decimal !important;
        }
        
        .note-editable .sn-list-item,
        .note-editable li.sn-list-item {
          margin-bottom: 0.5em !important;
          line-height: 1.6 !important;
          font-size: 16px !important;
          color: #4b5563 !important;
          display: list-item !important;
        }

         /* Custom Buttons */
        .custom-btn {
          display: inline-block;
          padding: 12px 24px;
          margin: 8px;
          border: none;
          border-radius: 8px;
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          line-height: 1;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          text-align: center;
          min-width: 120px;
          font-family: 'Inter', sans-serif;
        }
        
        .custom-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        
        .custom-btn-blue {
          background: linear-gradient(135deg, #3b82f6, #1d4ed8);
          color: white;
        }
        
        .custom-btn-green {
          background: linear-gradient(135deg, #10b981, #047857);
          color: white;
        }
        
        .custom-btn-red {
          background: linear-gradient(135deg, #ef4444, #dc2626);
          color: white;
        }
        
        .custom-btn-orange {
          background: linear-gradient(135deg, #f59e0b, #d97706);
          color: white;
        }
        
        .custom-btn-gray {
          background: linear-gradient(135deg, #6b7280, #4b5563);
          color: white;
        }
        
        .custom-btn-purple {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
          color: white;
        }
        
        /* Font Awesome */
        @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
      `}</style>
    </div>
  );
};

export default SummernoteEditor;