import React, { useState } from 'react';
import { BlogOutlineSection, SourceMappingStats, GroundingInsights, OptimizationResults, ResearchCoverage, blogWriterApi } from '../../services/blogWriterApi';
import EnhancedOutlineInsights from './EnhancedOutlineInsights';
import OutlineIntelligenceChips from './OutlineIntelligenceChips';
import ImageGeneratorModal from '../ImageGen/ImageGeneratorModal';

interface Props {
  outline: BlogOutlineSection[];
  onRefine: (operation: string, sectionId?: string, payload?: any) => void;
  research?: any; // Research data for context
  sourceMappingStats?: SourceMappingStats | null;
  groundingInsights?: GroundingInsights | null;
  optimizationResults?: OptimizationResults | null;
  researchCoverage?: ResearchCoverage | null;
  sectionImages?: Record<string, string>;
  setSectionImages?: (images: Record<string, string> | ((prev: Record<string, string>) => Record<string, string>)) => void;
}

const EnhancedOutlineEditor: React.FC<Props> = ({ 
  outline, 
  onRefine, 
  research, 
  sourceMappingStats, 
  groundingInsights, 
  optimizationResults, 
  researchCoverage,
  sectionImages = {},
  setSectionImages
}) => {
  const [editingSection, setEditingSection] = useState<string | null>(null);
  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
  const [hoveredSection, setHoveredSection] = useState<string | null>(null);
  const [showAddSection, setShowAddSection] = useState(false);
  const [imageModalState, setImageModalState] = useState<{ open: boolean; sectionId?: string }>(() => ({ open: false }));
  const [newSectionData, setNewSectionData] = useState({
    heading: '',
    subheadings: '',
    key_points: '',
    target_words: 300
  });
  const [showRefineModal, setShowRefineModal] = useState(false);
  const [refineFeedback, setRefineFeedback] = useState('');
  const [isRefining, setIsRefining] = useState(false);

  const toggleExpanded = (sectionId: string) => {
    const newExpanded = new Set(expandedSections);
    if (newExpanded.has(sectionId)) {
      newExpanded.delete(sectionId);
    } else {
      newExpanded.add(sectionId);
    }
    setExpandedSections(newExpanded);
  };

  const handleRename = (sectionId: string, newHeading: string) => {
    if (newHeading.trim()) {
      onRefine('rename', sectionId, { heading: newHeading.trim() });
    }
    setEditingSection(null);
  };

  const handleMove = (sectionId: string, direction: 'up' | 'down') => {
    onRefine('move', sectionId, { direction });
  };

  const handleAddSection = () => {
    if (newSectionData.heading.trim()) {
      const subheadings = newSectionData.subheadings
        .split('\n')
        .map(s => s.trim())
        .filter(s => s.length > 0);
      
      const keyPoints = newSectionData.key_points
        .split('\n')
        .map(s => s.trim())
        .filter(s => s.length > 0);

      onRefine('add', undefined, {
        heading: newSectionData.heading.trim(),
        subheadings,
        key_points: keyPoints,
        target_words: newSectionData.target_words
      });

      setNewSectionData({
        heading: '',
        subheadings: '',
        key_points: '',
        target_words: 300
      });
      setShowAddSection(false);
    }
  };

  const handleRefineOutline = async () => {
    if (!refineFeedback.trim()) {
      alert('Please provide feedback on how you would like to refine the outline.');
      return;
    }

    setIsRefining(true);
    try {
      // Use the parent's onRefine callback which handles the API call and state update
      // The callback expects: operation, sectionId, payload
      await onRefine('refine', undefined, { feedback: refineFeedback.trim() });
      
      setRefineFeedback('');
      setShowRefineModal(false);
      
      // Show success message
      const toast = document.createElement('div');
      toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 16px 24px;
        border-radius: 8px;
        background-color: #4caf50;
        color: white;
        font-weight: 500;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      `;
      toast.textContent = '✅ Outline refined successfully!';
      document.body.appendChild(toast);
      setTimeout(() => document.body.removeChild(toast), 3000);
    } catch (error) {
      console.error('Failed to refine outline:', error);
      alert('Failed to refine outline. Please try again.');
    } finally {
      setIsRefining(false);
    }
  };

  const getTotalWords = () => {
    return outline.reduce((total, section) => total + (section.target_words || 0), 0);
  };


  return (
    <>
    <div style={{ 
      backgroundColor: 'white', 
      borderRadius: '12px', 
      border: '1px solid #e0e0e0',
      overflow: 'hidden'
    }}>
      {imageModalState.open && (
        <ImageGeneratorModal
          isOpen={imageModalState.open}
          onClose={() => setImageModalState({ open: false })}
          defaultPrompt={(() => {
            const sec = outline.find(s => s.id === imageModalState.sectionId);
            return sec?.heading || '';
          })()}
          context={(() => {
            const sec = outline.find(s => s.id === imageModalState.sectionId);
            return {
              title: sec?.heading,
              section: sec,
              outline,
              research,
              sectionId: imageModalState.sectionId
            };
          })()}
          onImageGenerated={(imageBase64, sectionId) => {
            if (sectionId && setSectionImages) {
              setSectionImages((prev: Record<string, string>) => ({ ...prev, [sectionId]: imageBase64 }));
            }
          }}
        />
      )}
      {/* Header */}
      <div style={{ 
        padding: '20px', 
        backgroundColor: '#f8f9fa',
        borderBottom: '1px solid #e0e0e0'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <div>
              <h2 style={{ margin: 0, color: '#333', fontSize: '20px' }}>
                📋 Blog Outline
              </h2>
              <p style={{ margin: '4px 0 0 0', color: '#666', fontSize: '14px' }}>
                {outline.length} sections • {getTotalWords()} words total
              </p>
            </div>
            {/* Intelligence Chips inline with title */}
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <OutlineIntelligenceChips
                sections={outline}
                sourceMappingStats={sourceMappingStats}
                groundingInsights={groundingInsights}
                optimizationResults={optimizationResults}
                researchCoverage={researchCoverage}
              />
            </div>
          </div>
          <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
            <button
              onClick={() => setShowRefineModal(true)}
              style={{
                backgroundColor: '#7b1fa2',
                color: 'white',
                border: 'none',
                padding: '10px 20px',
                borderRadius: '8px',
                cursor: 'pointer',
                fontSize: '14px',
                fontWeight: '500',
                display: 'flex',
                alignItems: 'center',
                gap: '8px'
              }}
              title="Refine the outline structure based on your feedback"
            >
              🔧 Refine Outline
            </button>
            <button
              onClick={() => setShowAddSection(!showAddSection)}
              style={{
                backgroundColor: '#1976d2',
                color: 'white',
                border: 'none',
                padding: '10px 20px',
                borderRadius: '8px',
                cursor: 'pointer',
                fontSize: '14px',
                fontWeight: '500',
                display: 'flex',
                alignItems: 'center',
                gap: '8px'
              }}
            >
              ➕ Add Section
            </button>
          </div>
        </div>
      </div>


      {/* Add Section Form */}
      {showAddSection && (
        <div style={{ 
          padding: '20px', 
          backgroundColor: '#f0f8ff',
          borderBottom: '1px solid #e0e0e0'
        }}>
          <h3 style={{ margin: '0 0 16px 0', color: '#333' }}>Add New Section</h3>
          <div style={{ display: 'grid', gap: '16px' }}>
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>
                Section Title
              </label>
              <input
                type="text"
                value={newSectionData.heading}
                onChange={(e) => setNewSectionData({...newSectionData, heading: e.target.value})}
                placeholder="Enter section title..."
                style={{
                  width: '100%',
                  padding: '8px 12px',
                  border: '1px solid #ddd',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
              />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
              <div>
                <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>
                  Subheadings (one per line)
                </label>
                <textarea
                  value={newSectionData.subheadings}
                  onChange={(e) => setNewSectionData({...newSectionData, subheadings: e.target.value})}
                  placeholder="Subheading 1&#10;Subheading 2&#10;Subheading 3"
                  rows={3}
                  style={{
                    width: '100%',
                    padding: '8px 12px',
                    border: '1px solid #ddd',
                    borderRadius: '6px',
                    fontSize: '14px',
                    resize: 'vertical'
                  }}
                />
              </div>
              <div>
                <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>
                  Key Points (one per line)
                </label>
                <textarea
                  value={newSectionData.key_points}
                  onChange={(e) => setNewSectionData({...newSectionData, key_points: e.target.value})}
                  placeholder="Key point 1&#10;Key point 2&#10;Key point 3"
                  rows={3}
                  style={{
                    width: '100%',
                    padding: '8px 12px',
                    border: '1px solid #ddd',
                    borderRadius: '6px',
                    fontSize: '14px',
                    resize: 'vertical'
                  }}
                />
              </div>
            </div>
            <div>
              <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}>
                Target Words
              </label>
              <input
                type="number"
                value={newSectionData.target_words}
                onChange={(e) => setNewSectionData({...newSectionData, target_words: parseInt(e.target.value) || 300})}
                min="100"
                max="2000"
                style={{
                  width: '120px',
                  padding: '8px 12px',
                  border: '1px solid #ddd',
                  borderRadius: '6px',
                  fontSize: '14px'
                }}
              />
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button
                onClick={handleAddSection}
                style={{
                  backgroundColor: '#1976d2',
                  color: 'white',
                  border: 'none',
                  padding: '10px 20px',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px',
                  fontWeight: '500'
                }}
              >
                Add Section
              </button>
              <button
                onClick={() => setShowAddSection(false)}
                style={{
                  backgroundColor: '#f5f5f5',
                  color: '#666',
                  border: 'none',
                  padding: '10px 20px',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px',
                  fontWeight: '500'
                }}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Outline Sections */}
      <div style={{ padding: '0' }}>
        {outline.map((section, index) => (
          <div key={section.id} style={{
            borderBottom: index < outline.length - 1 ? '1px solid #f0f0f0' : 'none',
            transition: 'all 0.2s ease'
          }}>
            {/* Section Header */}
            <div style={{
              padding: '16px 20px',
              backgroundColor: expandedSections.has(section.id) || hoveredSection === section.id ? '#f8f9fa' : 'white',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              transition: 'background-color 0.2s ease'
            }}
            onMouseEnter={() => setHoveredSection(section.id)}
            onMouseLeave={() => setHoveredSection(null)}
            onClick={() => toggleExpanded(section.id)}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
                <div style={{
                  width: '24px',
                  height: '24px',
                  backgroundColor: '#1976d2',
                  color: 'white',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '12px',
                  fontWeight: '600'
                }}>
                  {index + 1}
                </div>
                
                {editingSection === section.id ? (
                  <input
                    type="text"
                    defaultValue={section.heading}
                    onBlur={(e) => handleRename(section.id, e.target.value)}
                    onKeyPress={(e) => {
                      if (e.key === 'Enter') {
                        handleRename(section.id, e.currentTarget.value);
                      }
                    }}
                    autoFocus
                    style={{
                      fontSize: '16px',
                      fontWeight: '600',
                      border: '1px solid #1976d2',
                      borderRadius: '4px',
                      padding: '4px 8px',
                      backgroundColor: 'white'
                    }}
                  />
                ) : (
                  <h3 style={{ 
                    margin: 0, 
                    fontSize: '16px', 
                    fontWeight: '600', 
                    color: '#333',
                    flex: 1
                  }}>
                    {section.heading}
                  </h3>
                )}
                
                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <span style={{
                    backgroundColor: '#e3f2fd',
                    color: '#1976d2',
                    padding: '2px 8px',
                    borderRadius: '12px',
                    fontSize: '12px',
                    fontWeight: '500'
                  }}>
                    {section.target_words || 300} words
                  </span>
                  
                  {section.references && section.references.length > 0 && (
                    <span style={{
                      backgroundColor: '#e8f5e8',
                      color: '#388e3c',
                      padding: '2px 8px',
                      borderRadius: '12px',
                      fontSize: '12px',
                      fontWeight: '500'
                    }}>
                      {section.references.length} sources
                    </span>
                  )}
                </div>
              </div>
              
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setEditingSection(section.id);
                  }}
                  style={{
                    backgroundColor: 'transparent',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    padding: '4px 8px',
                    cursor: 'pointer',
                    fontSize: '12px',
                    color: '#666'
                  }}
                >
                  ✏️
                </button>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setImageModalState({ open: true, sectionId: section.id });
                  }}
                  title="Generate Image"
                  style={{
                    backgroundColor: '#1976d2',
                    border: 'none',
                    borderRadius: '4px',
                    padding: '4px 8px',
                    cursor: 'pointer',
                    fontSize: '12px',
                    color: '#fff'
                  }}
                >
                  🖼️ Generate Image
                </button>
                
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleMove(section.id, 'up');
                  }}
                  disabled={index === 0}
                  style={{
                    backgroundColor: 'transparent',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    padding: '4px 8px',
                    cursor: index === 0 ? 'not-allowed' : 'pointer',
                    fontSize: '12px',
                    color: index === 0 ? '#ccc' : '#666',
                    opacity: index === 0 ? 0.5 : 1
                  }}
                >
                  ⬆️
                </button>
                
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleMove(section.id, 'down');
                  }}
                  disabled={index === outline.length - 1}
                  style={{
                    backgroundColor: 'transparent',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    padding: '4px 8px',
                    cursor: index === outline.length - 1 ? 'not-allowed' : 'pointer',
                    fontSize: '12px',
                    color: index === outline.length - 1 ? '#ccc' : '#666',
                    opacity: index === outline.length - 1 ? 0.5 : 1
                  }}
                >
                  ⬇️
                </button>
                
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    if (window.confirm(`Are you sure you want to remove "${section.heading}"?`)) {
                      onRefine('remove', section.id);
                    }
                  }}
                  style={{
                    backgroundColor: 'transparent',
                    border: '1px solid #f44336',
                    borderRadius: '4px',
                    padding: '4px 8px',
                    cursor: 'pointer',
                    fontSize: '12px',
                    color: '#f44336'
                  }}
                >
                  🗑️
                </button>
                
                <div style={{
                  transform: expandedSections.has(section.id) ? 'rotate(180deg)' : 'rotate(0deg)',
                  transition: 'transform 0.2s ease',
                  fontSize: '14px',
                  color: '#666'
                }}>
                  ▼
                </div>
              </div>
            </div>

            {/* Expanded Section Content */}
            {(expandedSections.has(section.id) || hoveredSection === section.id) && (
              <div style={{ padding: '0 20px 20px 52px', backgroundColor: '#fafafa' }}>
                {/* Subheadings */}
                {section.subheadings && section.subheadings.length > 0 && (
                  <div style={{ marginBottom: '16px' }}>
                    <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#333' }}>
                      📝 Subheadings
                    </h4>
                    <ul style={{ margin: 0, paddingLeft: '20px' }}>
                      {section.subheadings.map((subheading, i) => (
                        <li key={i} style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                          {subheading}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* Key Points */}
                {section.key_points && section.key_points.length > 0 && (
                  <div style={{ marginBottom: '16px' }}>
                    <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#333' }}>
                      🎯 Key Points
                    </h4>
                    <ul style={{ margin: 0, paddingLeft: '20px' }}>
                      {section.key_points.map((point, i) => (
                        <li key={i} style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                          {point}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* Keywords */}
                {section.keywords && section.keywords.length > 0 && (
                  <div style={{ marginBottom: '16px' }}>
                    <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#333' }}>
                      🎯 SEO Keywords
                    </h4>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                      {section.keywords.map((keyword, i) => (
                        <span key={i} style={{
                          backgroundColor: '#e3f2fd',
                          color: '#1976d2',
                          padding: '4px 8px',
                          borderRadius: '12px',
                          fontSize: '12px',
                          fontWeight: '500'
                        }}>
                          {keyword}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

                {/* References */}
                {section.references && section.references.length > 0 && (
                  <div>
                    <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#333' }}>
                      📚 Sources ({section.references.length})
                    </h4>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                      {section.references.map((ref, i) => (
                        <div key={i} style={{
                          backgroundColor: 'white',
                          border: '1px solid #e0e0e0',
                          borderRadius: '6px',
                          padding: '8px 12px',
                          fontSize: '12px',
                          color: '#666',
                          maxWidth: '200px'
                        }}>
                          <div style={{ fontWeight: '500', marginBottom: '2px' }}>
                            {ref.title}
                          </div>
                          <div style={{ color: '#999' }}>
                            Credibility: {Math.round((ref.credibility_score || 0.8) * 100)}%
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Generated Image Display */}
                {sectionImages[section.id] && (
                  <div style={{ marginTop: 16, marginBottom: 16 }}>
                    <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#333' }}>
                      🖼️ Generated Image
                    </h4>
                    <div style={{ 
                      border: '1px solid #e0e0e0', 
                      borderRadius: '8px', 
                      overflow: 'hidden',
                      maxWidth: '600px',
                      backgroundColor: 'white'
                    }}>
                      <img 
                        src={`data:image/png;base64,${sectionImages[section.id]}`} 
                        alt={`Generated image for ${section.heading}`}
                        style={{ 
                          width: '100%', 
                          height: 'auto',
                          display: 'block'
                        }} 
                      />
                    </div>
                  </div>
                )}

                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      setImageModalState({ open: true, sectionId: section.id });
                    }}
                    style={{
                      backgroundColor: '#1976d2',
                      color: 'white',
                      border: 'none',
                      padding: '8px 12px',
                      borderRadius: '6px',
                      cursor: 'pointer',
                      fontSize: '13px',
                      fontWeight: 500
                    }}
                  >
                    Generate Image for this section
                  </button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Footer */}
      <div style={{ 
        padding: '16px 20px', 
        backgroundColor: '#f8f9fa',
        borderTop: '1px solid #e0e0e0',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
      }}>
        <div style={{ fontSize: '14px', color: '#666' }}>
          💡 Tip: Click on any section to expand and see details. Use the controls to reorder, edit, or remove sections.
        </div>
        <div style={{ fontSize: '14px', color: '#666' }}>
          Total: {getTotalWords()} words
        </div>
      </div>
    </div>

    {/* Refine Outline Modal */}
    {showRefineModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            borderRadius: '16px',
            padding: '32px',
            maxWidth: '600px',
            width: '90%',
            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
            border: '1px solid #e5e7eb'
          }}>
            <div style={{ marginBottom: '24px' }}>
              <h2 style={{ margin: '0 0 8px 0', color: '#1f2937', fontSize: '24px', fontWeight: '600' }}>
                🔧 Refine Outline
              </h2>
              <p style={{ margin: 0, color: '#6b7280', fontSize: '14px' }}>
                Provide feedback on how you'd like to improve the outline structure
              </p>
            </div>

            <div style={{ marginBottom: '24px' }}>
              <label style={{
                display: 'block',
                marginBottom: '8px',
                fontSize: '14px',
                fontWeight: '500',
                color: '#333'
              }}>
                Your Feedback
              </label>
              <textarea
                value={refineFeedback}
                onChange={(e) => setRefineFeedback(e.target.value)}
                placeholder="E.g., Add a section about best practices, merge sections 2 and 3, expand the introduction..."
                style={{
                  width: '100%',
                  minHeight: '120px',
                  padding: '12px',
                  border: '1px solid #e5e7eb',
                  borderRadius: '8px',
                  fontSize: '14px',
                  fontFamily: 'inherit',
                  resize: 'vertical'
                }}
              />
            </div>

            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
              <button
                onClick={() => {
                  setShowRefineModal(false);
                  setRefineFeedback('');
                }}
                disabled={isRefining}
                style={{
                  padding: '10px 20px',
                  backgroundColor: '#f5f5f5',
                  color: '#666',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: isRefining ? 'not-allowed' : 'pointer',
                  fontSize: '14px',
                  fontWeight: '500'
                }}
              >
                Cancel
              </button>
              <button
                onClick={handleRefineOutline}
                disabled={isRefining || !refineFeedback.trim()}
                style={{
                  padding: '10px 20px',
                  backgroundColor: isRefining || !refineFeedback.trim() ? '#9ca3af' : '#7b1fa2',
                  color: 'white',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: isRefining || !refineFeedback.trim() ? 'not-allowed' : 'pointer',
                  fontSize: '14px',
                  fontWeight: '500',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}
              >
                {isRefining ? (
                  <>
                    <span>⏳</span>
                    <span>Refining...</span>
                  </>
                ) : (
                  <>
                    <span>🔧</span>
                    <span>Refine Outline</span>
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default EnhancedOutlineEditor;
