import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => html`
  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
    // Get editor instances
    const programmaticEditor = elementArg.querySelector('#programmatic-demo') as any;
    const articleEditor = elementArg.querySelector('#article-editor') as any;
    const dragDemoEditor = elementArg.querySelector('#drag-demo') as any;
    
    // Programmatically set content for the article editor after render
    if (articleEditor) {
      const articleBlocks = [
        {
          id: 'intro-heading-' + Date.now(),
          type: 'heading-2' as const,
          content: 'Introduction'
        },
        {
          id: 'intro-para-' + Date.now(),
          type: 'paragraph' as const,
          content: 'Modern web development has evolved significantly over the past decade. In this article, we\'ll explore the key technologies and best practices that define web development in 2024.'
        },
        {
          id: 'tech-heading-' + Date.now(),
          type: 'heading-3' as const,
          content: 'Key Technologies'
        },
        {
          id: 'tech-list-' + Date.now(),
          type: 'list' as const,
          content: 'TypeScript - Type-safe JavaScript development\nWeb Components - Native component model\nES Modules - Modern module system',
          metadata: { listType: 'ordered' }
        },
        {
          id: 'start-heading-' + Date.now(),
          type: 'heading-3' as const,
          content: 'Getting Started'
        },
        {
          id: 'start-para-' + Date.now(),
          type: 'paragraph' as const,
          content: 'To begin building modern web applications, you\'ll need:'
        },
        {
          id: 'req-list-' + Date.now(),
          type: 'list' as const,
          content: 'A solid understanding of JavaScript fundamentals\nFamiliarity with component-based architecture\nKnowledge of build tools and bundlers',
          metadata: { listType: 'bullet' }
        },
        {
          id: 'quote-' + Date.now(),
          type: 'quote' as const,
          content: 'The best way to predict the future is to invent it. - Alan Kay'
        },
        {
          id: 'example-heading-' + Date.now(),
          type: 'heading-3' as const,
          content: 'Code Example'
        },
        {
          id: 'code-example-' + Date.now(),
          type: 'code' as const,
          content: 'class ModernWebApp extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: \'open\' });\n  }\n  \n  connectedCallback() {\n    this.render();\n  }\n}'
        },
        {
          id: 'divider-' + Date.now(),
          type: 'divider' as const,
          content: ' '
        },
        {
          id: 'conclusion-heading-' + Date.now(),
          type: 'heading-3' as const,
          content: 'Conclusion'
        },
        {
          id: 'conclusion-para-' + Date.now(),
          type: 'paragraph' as const,
          content: 'Embracing modern web standards and tools enables developers to build faster, more maintainable applications.'
        }
      ];
      
      // Set the blocks instead of using .value with HTML
      setTimeout(() => {
        articleEditor.importBlocks(articleBlocks);
      }, 500);
    }
    
    // Initialize drag demo editor with sample content
    if (dragDemoEditor) {
      const dragDemoBlocks = [
        {
          id: 'drag-title-' + Date.now(),
          type: 'heading-1' as const,
          content: 'Drag & Drop Demo'
        },
        {
          id: 'drag-intro-' + Date.now(),
          type: 'paragraph' as const,
          content: 'This editor demonstrates drag and drop functionality. Try dragging these blocks around!'
        },
        {
          id: 'drag-heading-' + Date.now(),
          type: 'heading-2' as const,
          content: 'How It Works'
        },
        {
          id: 'drag-list-' + Date.now(),
          type: 'list' as const,
          content: 'Hover over any block to see the drag handle\nClick and hold the handle to start dragging\nDrag to reorder blocks\nRelease to drop in the new position',
          metadata: { listType: 'ordered' }
        },
        {
          id: 'drag-quote-' + Date.now(),
          type: 'quote' as const,
          content: 'The drag and drop feature makes it easy to reorganize your content without cutting and pasting.'
        },
        {
          id: 'drag-code-' + Date.now(),
          type: 'code' as const,
          content: '// Example: The blocks can be reordered\nconst blocks = editor.exportBlocks();\n// Rearrange blocks array\neditor.importBlocks(blocks);'
        },
        {
          id: 'drag-divider-' + Date.now(),
          type: 'divider' as const,
          content: ' '
        },
        {
          id: 'drag-footer-' + Date.now(),
          type: 'paragraph' as const,
          content: 'Note: Divider blocks cannot be dragged, but other blocks can be moved around them.'
        }
      ];
      
      setTimeout(() => {
        dragDemoEditor.importBlocks(dragDemoBlocks);
      }, 600);
    }
    
    // Setup button handlers for programmatic demo
    const generateReportBtn = elementArg.querySelector('#generate-report-btn');
    const generateRecipeBtn = elementArg.querySelector('#generate-recipe-btn');
    const clearEditorBtn = elementArg.querySelector('#clear-editor-btn');
    
    if (generateReportBtn) {
      generateReportBtn.addEventListener('click', () => {
        const blocks = [
          {
            id: 'title-' + Date.now(),
            type: 'heading-1' as const,
            content: 'System Performance Report'
          },
          {
            id: 'date-' + Date.now(),
            type: 'paragraph' as const,
            content: 'Generated on: ' + new Date().toLocaleString()
          },
          {
            id: 'summary-heading-' + Date.now(),
            type: 'heading-2' as const,
            content: 'Executive Summary'
          },
          {
            id: 'summary-' + Date.now(),
            type: 'paragraph' as const,
            content: 'This report provides an analysis of system performance metrics over the last 30 days.'
          },
          {
            id: 'metrics-heading-' + Date.now(),
            type: 'heading-2' as const,
            content: 'Key Metrics'
          },
          {
            id: 'metrics-list-' + Date.now(),
            type: 'list' as const,
            content: 'Average response time: 124ms\nUptime: 99.97%\nCPU utilization: 45%\nMemory usage: 2.3GB / 8GB',
            metadata: { listType: 'bullet' }
          },
          {
            id: 'analysis-heading-' + Date.now(),
            type: 'heading-2' as const,
            content: 'Performance Analysis'
          },
          {
            id: 'analysis-quote-' + Date.now(),
            type: 'quote' as const,
            content: 'System performance remains within acceptable parameters with room for optimization in memory management.'
          },
          {
            id: 'code-heading-' + Date.now(),
            type: 'heading-3' as const,
            content: 'Sample Query Performance'
          },
          {
            id: 'code-block-' + Date.now(),
            type: 'code' as const,
            content: 'SELECT AVG(response_time) as avg_time,\n       COUNT(*) as total_requests,\n       DATE(created_at) as date\nFROM performance_logs\nWHERE created_at >= NOW() - INTERVAL 30 DAY\nGROUP BY DATE(created_at)\nORDER BY date DESC;'
          },
          {
            id: 'divider-' + Date.now(),
            type: 'divider' as const,
            content: ' '
          },
          {
            id: 'footer-' + Date.now(),
            type: 'paragraph' as const,
            content: 'Report generated automatically by System Monitor v2.5.0'
          }
        ];
        
        programmaticEditor.importBlocks(blocks);
      });
    }
    
    if (generateRecipeBtn) {
      generateRecipeBtn.addEventListener('click', () => {
        const blocks = [
          {
            id: 'recipe-title-' + Date.now(),
            type: 'heading-1' as const,
            content: 'Classic Margherita Pizza'
          },
          {
            id: 'recipe-intro-' + Date.now(),
            type: 'paragraph' as const,
            content: 'A traditional Italian pizza with fresh basil, mozzarella, and tomato sauce.'
          },
          {
            id: 'ingredients-heading-' + Date.now(),
            type: 'heading-2' as const,
            content: '🍕 Ingredients'
          },
          {
            id: 'dough-heading-' + Date.now(),
            type: 'heading-3' as const,
            content: 'For the Dough:'
          },
          {
            id: 'dough-list-' + Date.now(),
            type: 'list' as const,
            content: '500g tipo "00" flour\n325ml warm water\n10g salt\n7g active dry yeast\n2 tbsp olive oil',
            metadata: { listType: 'bullet' }
          },
          {
            id: 'toppings-heading-' + Date.now(),
            type: 'heading-3' as const,
            content: 'For the Toppings:'
          },
          {
            id: 'toppings-list-' + Date.now(),
            type: 'list' as const,
            content: '400g canned San Marzano tomatoes\n250g fresh mozzarella\nFresh basil leaves\nExtra virgin olive oil\nSalt and pepper to taste',
            metadata: { listType: 'bullet' }
          },
          {
            id: 'instructions-heading-' + Date.now(),
            type: 'heading-2' as const,
            content: '👨‍🍳 Instructions'
          },
          {
            id: 'steps-list-' + Date.now(),
            type: 'list' as const,
            content: 'Dissolve yeast in warm water and let stand for 5 minutes\nMix flour and salt, create a well in center\nAdd yeast mixture and olive oil\nKnead for 10 minutes until smooth\nLet rise for 1-2 hours until doubled\nPunch down and divide into portions\nRoll out each portion to 12-inch circles\nTop with crushed tomatoes, mozzarella, and basil\nBake at 475°F (245°C) for 10-12 minutes',
            metadata: { listType: 'ordered' }
          },
          {
            id: 'tip-' + Date.now(),
            type: 'quote' as const,
            content: 'Pro tip: For an authentic taste, use a pizza stone and preheat it in the oven for at least 30 minutes before baking.'
          },
          {
            id: 'divider-2-' + Date.now(),
            type: 'divider' as const,
            content: ' '
          },
          {
            id: 'servings-' + Date.now(),
            type: 'paragraph' as const,
            content: 'Servings: 4 pizzas | Prep time: 2 hours | Cook time: 12 minutes'
          }
        ];
        
        programmaticEditor.importBlocks(blocks);
      });
    }
    
    if (clearEditorBtn) {
      clearEditorBtn.addEventListener('click', () => {
        programmaticEditor.importBlocks([]);
      });
    }
  }}>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 32px;
        }
        
        dees-panel p {
          margin-top: 0;
          margin-bottom: 24px;
          color: #666;
          font-size: 15px;
          line-height: 1.6;
        }
        
        @media (prefers-color-scheme: dark) {
          dees-panel p {
            color: #999;
          }
        }

        .feature-list {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px;
          margin-bottom: 24px;
        }

        .feature-item {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #555;
          font-size: 14px;
        }

        .feature-icon {
          color: #0066cc;
          font-weight: 600;
        }

        @media (prefers-color-scheme: dark) {
          .feature-item {
            color: #aaa;
          }
          .feature-icon {
            color: #4d94ff;
          }
        }

        .keyboard-shortcuts {
          background: rgba(0, 102, 204, 0.05);
          border: 1px solid rgba(0, 102, 204, 0.2);
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }

        @media (prefers-color-scheme: dark) {
          .keyboard-shortcuts {
            background: rgba(77, 148, 255, 0.1);
            border-color: rgba(77, 148, 255, 0.3);
          }
        }

        .keyboard-shortcuts h4 {
          margin: 0 0 12px 0;
          font-size: 14px;
          color: #0066cc;
        }

        @media (prefers-color-scheme: dark) {
          .keyboard-shortcuts h4 {
            color: #4d94ff;
          }
        }

        .shortcut-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 8px;
        }

        .shortcut {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          color: #555;
        }

        .shortcut code {
          background: #f0f0f0;
          padding: 2px 6px;
          border-radius: 4px;
          font-family: monospace;
          font-size: 12px;
          color: #333;
        }

        @media (prefers-color-scheme: dark) {
          .shortcut {
            color: #bbb;
          }
          .shortcut code {
            background: #333;
            color: #ddd;
          }
        }

        .output-section {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 24px;
          margin-top: 24px;
        }

        @media (max-width: 768px) {
          .output-section {
            grid-template-columns: 1fr;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .heading=${'🚀 Modern WYSIWYG Editor'}>
        <p>A powerful block-based editor with slash commands, keyboard shortcuts, and multiple output formats. Perfect for content creation, blog posts, documentation, and more.</p>
        
        <div class="feature-list">
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Slash commands (/)</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Keyboard shortcuts</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Block-based editing</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Drag & drop reordering</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>HTML & Markdown output</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Dark mode support</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">✓</span>
            <span>Mobile responsive</span>
          </div>
        </div>
        
        <dees-input-wysiwyg 
          .label=${'Rich Text Editor'} 
          .description=${'Start typing or use "/" to insert different block types'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>

        <div class="keyboard-shortcuts">
          <h4>⌨️ Keyboard Shortcuts</h4>
          <div class="shortcut-grid">
            <div class="shortcut">
              <code>/</code> Slash commands
            </div>
            <div class="shortcut">
              <code>#</code> Heading 1
            </div>
            <div class="shortcut">
              <code>##</code> Heading 2
            </div>
            <div class="shortcut">
              <code>###</code> Heading 3
            </div>
            <div class="shortcut">
              <code>></code> Quote
            </div>
            <div class="shortcut">
              <code>\`\`\`</code> Code block
            </div>
            <div class="shortcut">
              <code>* </code> or <code>- </code> Bullet list
            </div>
            <div class="shortcut">
              <code>1.</code> Numbered list
            </div>
            <div class="shortcut">
              <code>---</code> Divider
            </div>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .heading=${'📝 Blog Post Example'}>
        <p>Perfect for creating rich content with multiple block types. The editor preserves formatting and provides a clean editing experience.</p>
        
        <dees-input-wysiwyg 
          .label=${'Blog Post Content'} 
          .description=${'Write your article using various formatting options'}
          .value=${'<h1>Welcome to Our Blog</h1><p>This is an example blog post that demonstrates the capabilities of our WYSIWYG editor.</p><h2>Features Overview</h2><p>Our editor supports multiple block types including headings, paragraphs, quotes, and more.</p><blockquote>The best way to predict the future is to invent it.</blockquote><p>You can also create lists and code blocks for technical content.</p>'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .heading=${'🔀 Drag & Drop Reordering'}>
        <p>Easily rearrange your content blocks by dragging them. Hover over any block to reveal the drag handle on the left side.</p>
        
        <dees-input-wysiwyg 
          id="drag-demo"
          .label=${'Drag & Drop Demo'} 
          .description=${'Try dragging blocks to reorder them - hover to see drag handles'}
        ></dees-input-wysiwyg>
        
        <div style="margin-top: 16px; padding: 12px; background: #f0f8ff; border-radius: 8px; font-size: 14px; line-height: 1.6;">
          <strong>💡 Tips:</strong>
          <ul style="margin: 8px 0 0 0; padding-left: 24px;">
            <li>Hover over any block to see the drag handle (⋮⋮) on the left</li>
            <li>Click and hold the drag handle to start dragging</li>
            <li>Blue indicators show where the block will be dropped</li>
            <li>Divider blocks cannot be dragged</li>
            <li>The editor maintains focus on the moved block after dropping</li>
          </ul>
        </div>
      </dees-panel>

      <dees-panel .heading=${'📚 Tutorial & Documentation'}>
        <p>Create comprehensive tutorials and documentation with code examples, lists, and structured content.</p>
        
        <dees-input-wysiwyg 
          .label=${'Git Tutorial'} 
          .description=${'Step-by-step guide with commands and explanations'}
          .outputFormat=${'markdown'}
          .value=${'# Git Tutorial for Beginners\n\nGit is a distributed version control system that helps you track changes in your code over time. This tutorial will guide you through the basics.\n\n## Prerequisites\n\nBefore starting, ensure you have:\n\n- Git installed on your system\n- A text editor or IDE\n- Basic command line knowledge\n\n## Getting Started\n\n### 1. Configure Git\n\nFirst, set up your identity:\n\n```bash\ngit config --global user.name "Your Name"\ngit config --global user.email "your.email@example.com"\n```\n\n### 2. Initialize a Repository\n\nCreate a new Git repository:\n\n```bash\nmkdir my-project\ncd my-project\ngit init\n```\n\n### 3. Basic Git Workflow\n\n#### Adding Files\n\nCreate a file and add it to staging:\n\n```bash\necho "# My Project" > README.md\ngit add README.md\n```\n\n#### Committing Changes\n\n```bash\ngit commit -m "Initial commit"\n```\n\n> **Best Practice:** Write clear, descriptive commit messages that explain what changes were made and why.\n\n### 4. Working with Branches\n\nBranches allow you to work on features independently:\n\n```bash\n# Create and switch to a new branch\ngit checkout -b feature-branch\n\n# Make changes and commit\ngit add .\ngit commit -m "Add new feature"\n\n# Switch back to main\ngit checkout main\n\n# Merge the feature\ngit merge feature-branch\n```\n\n---\n\n## Common Commands Reference\n\n| Command | Description |\n|---------|-------------|\n| `git status` | Check repository status |\n| `git log` | View commit history |\n| `git diff` | Show changes |\n| `git pull` | Fetch and merge changes |\n| `git push` | Upload changes to remote |\n\n## Next Steps\n\n1. Learn about remote repositories\n2. Explore advanced Git features\n3. Practice with real projects\n4. Contribute to open source\n\n**Happy coding!** 🚀'}
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .heading=${'🔄 Output Formats'}>
        <p>Choose between HTML and Markdown output formats depending on your needs. Perfect for static site generators, documentation systems, or any content management workflow.</p>
        
        <div class="output-section">
          <div>
            <dees-input-wysiwyg 
              .label=${'Meeting Notes'} 
              .description=${'Structured meeting documentation'}
              .outputFormat=${'html'}
              .value=${'<h2>Q4 Planning Meeting</h2><p><strong>Date:</strong> December 15, 2024<br><strong>Attendees:</strong> Product Team, Engineering, Design</p><h3>Agenda Items'}><ol><li>Review Q3 achievements</li><li>Set Q4 objectives</li><li>Resource allocation</li><li>Timeline discussion</li></ol><h3>Key Decisions'}><ul><li>Launch new dashboard feature by end of January</li><li>Increase engineering team by 2 developers</li><li>Implement weekly design reviews</li></ul><blockquote>"Focus on user experience improvements based on Q3 feedback" - Product Manager</blockquote><h3>Action Items'}><ul><li>Sarah: Create detailed project timeline</li><li>Mike: Draft technical requirements</li><li>Lisa: Schedule user research sessions</li></ul><hr><p>Next meeting: January 5, 2025</p>'}
            ></dees-input-wysiwyg>
          </div>
          
          <div>
            <dees-input-wysiwyg 
              .label=${'Recipe Blog Post'} 
              .description=${'Food blog with mixed content'}
              .outputFormat=${'markdown'}
              .value=${'# Ultimate Chocolate Chip Cookies\n\nThere\'s nothing quite like the smell of freshly baked chocolate chip cookies. This recipe has been perfected over years of testing!\n\n## Ingredients\n\n- 2¼ cups all-purpose flour\n- 1 tsp baking soda\n- 1 tsp salt\n- 1 cup butter, softened\n- ¾ cup granulated sugar\n- ¾ cup packed brown sugar\n- 2 large eggs\n- 2 tsp vanilla extract\n- 2 cups chocolate chips\n\n## Instructions\n\n### Step 1: Preparation\n\nPreheat your oven to **375°F (190°C)**. This temperature is crucial for achieving the perfect texture.\n\n### Step 2: Mix Dry Ingredients\n\nIn a medium bowl, whisk together:\n\n1. Flour\n2. Baking soda\n3. Salt\n\n### Step 3: Cream Butter and Sugars\n\n```\nCream butter and sugars for 3-4 minutes\nuntil light and fluffy\n```\n\n> **Pro tip:** Room temperature ingredients mix better and create a more uniform dough.\n\n### Step 4: Add Wet Ingredients\n\nBeat in eggs one at a time, then add vanilla extract.\n\n### Step 5: Combine and Bake\n\nGradually blend in flour mixture, then stir in chocolate chips. Drop rounded tablespoons onto ungreased cookie sheets.\n\n---\n\n**Baking time:** 9-11 minutes or until golden brown\n\n**Yield:** About 5 dozen cookies'}
            ></dees-input-wysiwyg>
          </div>
        </div>
      </dees-panel>

      <dees-panel .heading=${'🎨 Advanced Editing'}>
        <p>Create complex documents with mixed content types. The editor handles all formatting seamlessly.</p>
        
        <dees-input-wysiwyg 
          .label=${'Technical Documentation'} 
          .description=${'Create technical docs with code examples and structured content'}
          .value=${'<h1>API Documentation</h1><p>Welcome to our API documentation. Below you\'ll find examples of how to use our endpoints.</p><h2>Authentication</h2><p>All API requests require authentication using an API key:</p><pre><code>Authorization: Bearer YOUR_API_KEY</code></pre><h2>Endpoints</h2><h3>GET /users'}><p>Retrieve a list of users from the system.</p><pre><code>curl -X GET https://api.example.com/users \\\n  -H "Authorization: Bearer YOUR_API_KEY"</code></pre><blockquote>Note: Rate limiting applies to all endpoints. You can make up to 100 requests per minute.</blockquote><h3>POST /users'}><p>Create a new user in the system.</p><pre><code>{\n  "name": "John Doe",\n  "email": "john@example.com",\n  "role": "user"\n}</code></pre><hr><p>For more information, please refer to our complete documentation.</p>'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>
      </dees-panel>

      <dees-panel .heading=${'⚙️ Form Integration'}>
        <p>Seamlessly integrates with dees-form for complete form solutions. All standard form features like validation, required fields, and data binding work out of the box.</p>
        
        <dees-form>
          <dees-input-text 
            .label=${'Article Title'} 
            .required=${true}
            .value=${'How to Build Modern Web Applications'}
          ></dees-input-text>
          
          <dees-input-wysiwyg 
            id="article-editor"
            .label=${'Article Content'} 
            .description=${'This content was created programmatically using blocks'}
            .required=${true}
            .outputFormat=${'markdown'}
          ></dees-input-wysiwyg>
          
          <dees-input-tags
            .label=${'Tags'}
            .description=${'Add relevant tags for your article'}
            .tags=${['web-development', 'javascript', 'tutorial']}
          ></dees-input-tags>
        </dees-form>
      </dees-panel>

      <dees-panel .heading=${'🧩 Programmatic Block Creation'}>
        <p>Create content programmatically using the block API for dynamic document generation.</p>
        
        <dees-input-wysiwyg
          id="programmatic-demo"
          .label=${'Programmatically Generated Content'}
          .description=${'This content was created using the importBlocks API'}
        ></dees-input-wysiwyg>
        
        <div style="margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;">
          <button 
            id="generate-report-btn"
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
          >Generate Report</button>
          
          <button 
            id="generate-recipe-btn"
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
          >Generate Recipe</button>
          
          <button 
            id="clear-editor-btn"
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
          >Clear Editor</button>
        </div>
      </dees-panel>

      <dees-panel .heading=${'📤 Export/Import Features'}>
        <p>The WYSIWYG editor provides multiple export formats and lossless save/restore capabilities for maximum flexibility.</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px;">
          <div style="background: rgba(0, 102, 204, 0.1); padding: 16px; border-radius: 8px;">
            <strong style="color: #0066cc;">Lossless Blocks</strong>
            <p style="margin: 8px 0 0 0; font-size: 14px;">Export and import raw block structure for perfect round-trip editing</p>
          </div>
          <div style="background: rgba(76, 175, 80, 0.1); padding: 16px; border-radius: 8px;">
            <strong style="color: #4CAF50;">HTML Export</strong>
            <p style="margin: 8px 0 0 0; font-size: 14px;">Get clean, semantic HTML regardless of output format setting</p>
          </div>
          <div style="background: rgba(255, 152, 0, 0.1); padding: 16px; border-radius: 8px;">
            <strong style="color: #FF9800;">Markdown Export</strong>
            <p style="margin: 8px 0 0 0; font-size: 14px;">Export as Markdown for docs, READMEs, and static sites</p>
          </div>
          <div style="background: rgba(156, 39, 176, 0.1); padding: 16px; border-radius: 8px;">
            <strong style="color: #9C27B0;">State Management</strong>
            <p style="margin: 8px 0 0 0; font-size: 14px;">Save and restore complete editor state including settings</p>
          </div>
        </div>
        
        <dees-input-wysiwyg
          id="export-demo"
          .label=${'Export Demo Editor'}
          .description=${'Try the export buttons below to see different output formats'}
          .value=${'<h1>Software Release Notes</h1><p><strong>Version 2.5.0</strong> - Released December 15, 2024</p><h2>🎉 New Features</h2><ul><li>Added dark mode support across all components</li><li>Implemented real-time collaboration features</li><li>New dashboard analytics widgets</li><li>Export functionality for all report types</li></ul><h2>🐛 Bug Fixes</h2><ul><li>Fixed memory leak in data processing module</li><li>Resolved authentication timeout issues</li><li>Corrected timezone handling in scheduled tasks</li></ul><h2>⚡ Performance Improvements</h2><blockquote>Page load times reduced by 40% through lazy loading and code splitting</blockquote><h2>🔧 Technical Details</h2><pre><code>// New API endpoint for batch operations\nPOST /api/v2/batch\n{\n  "operations": [\n    { "method": "GET", "path": "/users/123" },\n    { "method": "PUT", "path": "/settings", "body": {...} }\n  ]\n}</code></pre><h2>💡 Migration Guide</h2><ol><li>Update your dependencies to the latest versions</li><li>Run database migrations: <code>npm run migrate</code></li><li>Clear cache: <code>npm run cache:clear</code></li><li>Restart all services</li></ol><hr><p>For questions or issues, please contact the development team or file a ticket in our issue tracker.</p>'}
        ></dees-input-wysiwyg>
        
        <div style="margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;">
          <button 
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
            @click=${(e: MouseEvent) => {
              const editor = (e.target as HTMLElement).closest('.demo-section').querySelector('#export-demo') as any;
              const blocks = editor.exportBlocks();
              console.log('Exported blocks:', blocks);
              alert('Blocks exported to console! Check developer tools.');
            }}
          >Export Blocks</button>
          
          <button 
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
            @click=${(e: MouseEvent) => {
              const editor = (e.target as HTMLElement).closest('.demo-section').querySelector('#export-demo') as any;
              const html = editor.exportAsHtml();
              console.log('HTML Export:', html);
              alert('HTML exported to console! Check developer tools.');
            }}
          >Export as HTML</button>
          
          <button 
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
            @click=${(e: MouseEvent) => {
              const editor = (e.target as HTMLElement).closest('.demo-section').querySelector('#export-demo') as any;
              const markdown = editor.exportAsMarkdown();
              console.log('Markdown Export:', markdown);
              alert('Markdown exported to console! Check developer tools.');
            }}
          >Export as Markdown</button>
          
          <button 
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
            @click=${(e: MouseEvent) => {
              const editor = (e.target as HTMLElement).closest('.demo-section').querySelector('#export-demo') as any;
              const state = editor.exportState();
              console.log('State Export:', state);
              (window as any).savedEditorState = state;
              alert('State saved to window.savedEditorState!');
            }}
          >Save State</button>
          
          <button 
            style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; background: #f8f8f8; cursor: pointer;"
            @click=${(e: MouseEvent) => {
              if ((window as any).savedEditorState) {
                const editor = (e.target as HTMLElement).closest('.demo-section').querySelector('#export-demo') as any;
                editor.importState((window as any).savedEditorState);
                alert('State restored!');
              } else {
                alert('No saved state found. Save state first!');
              }
            }}
          >Restore State</button>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;