import { html, css, cssManager } from '@design.estate/dees-element';
import { DeesModal } from '../elements/dees-modal/dees-modal.js';
import { DeesToast } from '../elements/dees-toast/dees-toast.js';
import { DeesContextmenu } from '../elements/dees-contextmenu/dees-contextmenu.js';
import '../elements/00group-button/dees-button/dees-button.js';
import '../elements/00group-input/dees-input-dropdown/dees-input-dropdown.js';
import '../elements/00group-form/dees-form/dees-form.js';
import '../elements/dees-panel/dees-panel.js';
import '../elements/00group-input/dees-input-text/dees-input-text.js';
import '../elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
import '../elements/00group-input/dees-input-tags/dees-input-tags.js';
import '../elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
import '../elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.js';

export const zIndexShowcase = () => html`
  <style>
    ${css`
      .page-wrapper {
        display: block;
        background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
        min-height: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .showcase-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 48px 24px;
      }

      .showcase-header {
        text-align: center;
        margin-bottom: 48px;
      }

      .showcase-title {
        font-size: 48px;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
      }

      .showcase-subtitle {
        font-size: 20px;
        color: ${cssManager.bdTheme('#666', '#999')};
        margin: 0 0 32px 0;
        line-height: 1.6;
      }

      .showcase-section {
        margin-bottom: 48px;
      }
      
      .showcase-section:last-child {
        margin-bottom: 0;
        padding-bottom: 48px;
      }

      /* Ensure all headings are theme-aware */
      h1, h2, h3, h4, h5, h6 {
        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
        margin: 0;
      }

      p {
        color: ${cssManager.bdTheme('#666', '#999')};
        line-height: 1.6;
      }

      strong {
        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
      }

      .section-header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 32px;
      }

      .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
      }

      .section-icon.layers { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
      .section-icon.registry { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
      .section-icon.demo { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
      .section-icon.guidelines { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; }

      .section-title {
        font-size: 32px;
        font-weight: 600;
        margin: 0;
        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
      }

      .section-description {
        color: ${cssManager.bdTheme('#666', '#999')};
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px;
      }

      .demo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        margin-bottom: 40px;
      }

      .demo-card {
        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
        border-radius: 12px;
        padding: 24px;
        transition: all 0.2s ease;
      }

      .demo-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
      }

      .demo-card h4 {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 600;
      }

      .hierarchy-visual {
        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
        border-radius: 12px;
        padding: 32px;
        margin-bottom: 40px;
      }

      .hierarchy-visual h3 {
        margin-top: 0;
        margin-bottom: 24px;
        font-size: 24px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#1a1a1a', '#fff')};
      }

      .layer-stack {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 16px;
      }

      .layer {
        padding: 16px 20px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: 'Geist Mono', monospace;
        font-size: 14px;
        transition: all 0.2s;
        border: 1px solid transparent;
      }

      .layer:hover {
        transform: translateX(4px);
        border-color: ${cssManager.bdTheme('#e0e0e0', '#444')};
      }

      .layer.base {
        background: ${cssManager.bdTheme('#f0f0f0', '#222')};
        color: ${cssManager.bdTheme('#666', '#999')};
      }

      .layer.fixed {
        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
        color: ${cssManager.bdTheme('#1976d2', '#90caf9')};
      }

      .layer.dropdown {
        background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')};
        color: ${cssManager.bdTheme('#7b1fa2', '#ce93d8')};
      }

      .layer.modal {
        background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')};
        color: ${cssManager.bdTheme('#388e3c', '#81c784')};
      }

      .layer.context {
        background: ${cssManager.bdTheme('#fff3e0', '#e65100')};
        color: ${cssManager.bdTheme('#f57c00', '#ffb74d')};
      }

      .layer.toast {
        background: ${cssManager.bdTheme('#ffebee', '#b71c1c')};
        color: ${cssManager.bdTheme('#d32f2f', '#ef5350')};
      }

      .layer-name {
        font-weight: 600;
      }

      .layer-value {
        opacity: 0.8;
      }

      .warning-box {
        background: ${cssManager.bdTheme('#fff8e1', '#332701')};
        border: 1px solid ${cssManager.bdTheme('#ffe082', '#664400')};
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 32px;
        color: ${cssManager.bdTheme('#f57f17', '#ffecb5')};
        display: flex;
        align-items: flex-start;
        gap: 12px;
      }

      .warning-box::before {
        content: '⚠️';
        font-size: 20px;
        flex-shrink: 0;
      }

      .warning-box strong {
        color: ${cssManager.bdTheme('#f57f17', '#ffd93d')};
      }

      code {
        background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')};
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Geist Mono', monospace;
        font-size: 14px;
      }

      /* Consistent panel spacing */
      dees-panel {
        display: block;
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }

      .test-area {
        position: relative;
        height: 200px;
        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
        border: 2px dashed ${cssManager.bdTheme('#ccc', '#444')};
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
      }

      .profile-demo {
        position: relative;
        display: inline-block;
      }
      
      .registry-status {
        background: ${cssManager.bdTheme('#e8f5e9', '#1a2e1a')};
        border: 1px solid ${cssManager.bdTheme('#4caf50', '#2e7d32')};
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 32px;
        position: relative;
        overflow: hidden;
      }

      .registry-status::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: ${cssManager.bdTheme('#4caf50', '#2e7d32')};
      }
      
      .registry-status h4 {
        margin-top: 0;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
        font-size: 18px;
        font-weight: 600;
      }
      
      .registry-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        color: ${cssManager.bdTheme('#558b2f', '#aed581')};
        font-family: 'Geist Mono', monospace;
        font-size: 14px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e0f2e1', '#1b5e20')};
      }

      .registry-item:last-child {
        border-bottom: none;
      }
      
      .registry-item.active {
        color: ${cssManager.bdTheme('#2e7d32', '#4ade80')};
        font-weight: 600;
      }

      .registry-item span:last-child {
        font-weight: 600;
      }
    `}
  </style>

  <div class="page-wrapper">
    <div class="showcase-container">
      <div class="showcase-header">
        <h1 class="showcase-title">Z-Index Management</h1>
        <p class="showcase-subtitle">
          A comprehensive system for managing overlay stacking order across all components.
          Test different scenarios to see how the dynamic z-index registry ensures proper layering.
        </p>
      </div>

      <div class="warning-box">
        <div>
          <strong>Important:</strong> The z-index values are managed centrally in <code>00zindex.ts</code>. 
          Never use arbitrary z-index values in components - always import and use the z-index registry.
        </div>
      </div>

      <!-- Registry Status Section -->
      <div class="showcase-section">
        <div class="section-header">
          <div class="section-icon registry">📊</div>
          <div>
            <h2 class="section-title">Live Registry Status</h2>
          </div>
        </div>
        <div class="registry-status" id="registryStatus">
          <h4>Z-Index Registry</h4>
          <div class="registry-item">
            <span>Active Elements:</span>
            <span id="activeCount">0</span>
          </div>
          <div class="registry-item">
            <span>Current Z-Index:</span>
            <span id="currentZIndex">1000</span>
          </div>
        </div>
      </div>
      
      <script>
        // Update registry status periodically
        setInterval(() => {
          const registryDiv = document.getElementById('registryStatus');
          if (registryDiv && window.zIndexRegistry) {
            const activeCount = document.getElementById('activeCount');
            const currentZIndex = document.getElementById('currentZIndex');
            
            if (activeCount) activeCount.textContent = window.zIndexRegistry.getActiveCount();
            if (currentZIndex) currentZIndex.textContent = window.zIndexRegistry.getCurrentZIndex();
            
            // Update active state
            const items = registryDiv.querySelectorAll('.registry-item');
            const count = window.zIndexRegistry.getActiveCount();
            if (count > 0) {
              items[0].classList.add('active');
            } else {
              items[0].classList.remove('active');
            }
          }
        }, 500);
        
        // Make registry available globally for the demo
        import('../elements/00zindex.js').then(module => {
          window.zIndexRegistry = module.zIndexRegistry;
        });
      </script>

      <!-- Layer Hierarchy Section -->
      <div class="showcase-section">
        <div class="section-header">
          <div class="section-icon layers">📚</div>
          <div>
            <h2 class="section-title">Layer Hierarchy</h2>
          </div>
        </div>
        <p class="section-description">
          The traditional z-index layers are still defined for reference, but the new registry system
          dynamically assigns z-indexes based on creation order.
        </p>
        <div class="hierarchy-visual">
          <h3>Legacy Z-Index Layers (Reference)</h3>
          <div class="layer-stack">
            <div class="layer base">
              <span class="layer-name">Base Content</span>
              <span class="layer-value">z-index: auto</span>
            </div>
            <div class="layer fixed">
              <span class="layer-name">Fixed Navigation</span>
              <span class="layer-value">z-index: 10-250</span>
            </div>
            <div class="layer dropdown">
              <span class="layer-name">Dropdown Overlays</span>
              <span class="layer-value">z-index: 1999-2000</span>
            </div>
            <div class="layer modal">
              <span class="layer-name">Modal Dialogs</span>
              <span class="layer-value">z-index: 2999-3000</span>
            </div>
            <div class="layer context">
              <span class="layer-name">Context Menus</span>
              <span class="layer-value">z-index: 4000</span>
            </div>
            <div class="layer toast">
              <span class="layer-name">Toast Notifications</span>
              <span class="layer-value">z-index: 5000</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Interactive Demos Section -->
      <div class="showcase-section">
        <div class="section-header">
          <div class="section-icon demo">🎮</div>
          <div>
            <h2 class="section-title">Interactive Demos</h2>
          </div>
        </div>
        <p class="section-description">
          Test the z-index registry in action with these interactive examples. Each element gets the next
          available z-index when created, ensuring proper stacking order.
        </p>
        
        <dees-panel .title=${'Basic Overlay Tests'} .subtitle=${'Test individual overlay components'}>
          <div class="demo-grid">
            <div class="demo-card">
              <h4>Dropdown Test</h4>
            <dees-input-dropdown
              .label=${'Select Option'}
              .options=${[
                {option: 'Show Toast', key: 'toast', payload: 'toast'},
                {option: 'Option 2', key: 'opt2', payload: '2'},
                {option: 'Option 3', key: 'opt3', payload: '3'},
                {option: 'Option 4', key: 'opt4', payload: '4'},
              ]}
              @change=${async (e: CustomEvent) => {
                if (e.detail.value?.payload === 'toast') {
                  DeesToast.createAndShow({ message: 'Toast appears above dropdown!', type: 'success' });
                }
              }}
            ></dees-input-dropdown>
            </div>

            <div class="demo-card">
              <h4>Context Menu Test</h4>
            <div class="test-area" @contextmenu=${(e: MouseEvent) => {
              DeesContextmenu.openContextMenuWithOptions(e, [
                { name: 'Show Toast', iconName: 'bell', action: async () => {
                  DeesToast.createAndShow({ message: 'Toast from context menu!', type: 'info' });
                }},
                { divider: true },
                { name: 'Item 2', iconName: 'check', action: async () => {} },
                { name: 'Item 3', iconName: 'copy', action: async () => {} },
              ]);
            }}>
              <span style="color: ${cssManager.bdTheme('#999', '#666')}">Right-click here for context menu</span>
            </div>
            </div>

            <div class="demo-card">
              <h4>Toast Notification</h4>
              <dees-button @click=${async () => {
                DeesToast.createAndShow({ message: 'I appear on top of everything!', type: 'success' });
              }}>Show Toast</dees-button>
            </div>
          </div>
        </dees-panel>

        <dees-panel .title=${'Modal with Dropdown'} .subtitle=${'Critical test: Dropdown inside modal should appear above modal'}>
        <p>This tests the most common z-index conflict scenario.</p>
        <dees-button @click=${async () => {
          const modal = await DeesModal.createAndShow({
            heading: 'Modal with Dropdown',
            width: 'medium',
            showHelpButton: true,
            onHelp: async () => {
              DeesToast.createAndShow({ message: 'Help requested! Toast appears above modal.', type: 'info' });
            },
            content: html`
              <p>The dropdown below should appear <strong>above</strong> this modal:</p>
              <dees-form>
                <dees-input-dropdown
                  .label=${'Select Country'}
                  .options=${[
                    {option: 'United States', key: 'us', payload: 'US'},
                    {option: 'Canada', key: 'ca', payload: 'CA'},
                    {option: 'United Kingdom', key: 'uk', payload: 'UK'},
                    {option: 'Germany', key: 'de', payload: 'DE'},
                    {option: 'France', key: 'fr', payload: 'FR'},
                    {option: 'Japan', key: 'jp', payload: 'JP'},
                    {option: 'Australia', key: 'au', payload: 'AU'},
                    {option: 'Brazil', key: 'br', payload: 'BR'},
                  ]}
                  .required=${true}
                ></dees-input-dropdown>
                
                <dees-input-text
                  .label=${'Additional Field'}
                  .placeholder=${'Just to show form context'}
                ></dees-input-text>
                
                <dees-input-tags
                  .label=${'Tags'}
                  .placeholder=${'Add tags...'}
                  .suggestions=${['urgent', 'bug', 'feature', 'documentation', 'testing']}
                  .description=${'Add relevant tags'}
                ></dees-input-tags>
              </dees-form>
              <p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
                You can also right-click anywhere in this modal to test context menus.
              </p>
            `,
            menuOptions: [
              { name: 'Cancel', action: async (modal) => modal.destroy() },
              { name: 'Save', action: async (modal) => modal.destroy() }
            ]
          });

          // Add context menu to modal content
          const modalContent = modal.shadowRoot.querySelector('.modal .content');
          if (modalContent) {
            modalContent.addEventListener('contextmenu', async (e: MouseEvent) => {
              DeesContextmenu.openContextMenuWithOptions(e, [
                { name: 'Context menu in modal', iconName: 'check', action: async () => {} },
                { divider: true },
                { name: 'Show Toast', iconName: 'bell', action: async () => {
                  DeesToast.createAndShow({ message: 'Toast from modal context menu!', type: 'warning' });
                }}
              ]);
            });
          }
        }}>Open Modal with Dropdown</dees-button>
      </dees-panel>

        <dees-panel .title=${'Complex Stacking Scenario'} .subtitle=${'Multiple overlays active simultaneously'}>
        <p>This creates a complex scenario with multiple overlays to test the complete hierarchy.</p>
        <dees-button @click=${async () => {
          // Show base modal
          await DeesModal.createAndShow({
            heading: 'Base Modal',
            width: 'large',
            content: html`
              <h4>Level 1: Modal</h4>
              <p>This is the base modal. Try the following:</p>
              <ol>
                <li>Open the dropdown below</li>
                <li>Right-click for context menu</li>
                <li>Click "Show Second Modal" to stack modals</li>
              </ol>
              
              <dees-input-dropdown
                .label=${'Test Dropdown in Modal'}
                .options=${[
                  {option: 'Trigger Toast', key: 'toast', payload: 'toast'},
                  {option: 'Option 2', key: 'opt2', payload: '2'},
                  {option: 'Option 3', key: 'opt3', payload: '3'},
                ]}
                @change=${async (e: CustomEvent) => {
                  if (e.detail.value?.payload === 'toast') {
                    DeesToast.createAndShow({ message: 'Toast triggered from dropdown in modal!', type: 'success' });
                  }
                }}
              ></dees-input-dropdown>
              
              <div style="margin-top: 16px;">
                <dees-button @click=${async () => {
                  await DeesModal.createAndShow({
                    heading: 'Second Modal',
                    width: 'small',
                    content: html`
                      <h4>Level 2: Stacked Modal</h4>
                      <p>This modal appears on top of the first one.</p>
                      <p>The dropdown here should still work:</p>
                      <dees-input-dropdown
                        .label=${'Nested Dropdown'}
                        .options=${[
                          {option: 'Option A', key: 'a'},
                          {option: 'Option B', key: 'b'},
                          {option: 'Option C', key: 'c'},
                        ]}
                      ></dees-input-dropdown>
                    `,
                    menuOptions: [
                      { name: 'Close', action: async (modal) => modal.destroy() }
                    ]
                  });
                }}>Show Second Modal</dees-button>
              </div>
            `,
            menuOptions: [
              { name: 'Close All', action: async (modal) => {
                modal.destroy();
                // Also show a toast
                DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' });
              }}
            ]
          });
        }}>Start Complex Stack Test</dees-button>
      </dees-panel>

        <dees-panel .title=${'Profile Dropdown'} .subtitle=${'Testing app UI dropdowns'}>
        <p>Profile dropdowns and similar UI elements use the dropdown z-index layer.</p>
        <div class="profile-demo">
          <dees-appui-profiledropdown
            .user=${{
              name: 'Test User',
              email: 'test@example.com',
              avatar: 'https://randomuser.me/api/portraits/lego/1.jpg',
              status: 'online' as const
            }}
            .menuItems=${[
              { name: 'Show Toast', iconName: 'bell', shortcut: '', action: async () => {
                DeesToast.createAndShow({ message: 'Profile action triggered!', type: 'success' });
              }},
              { divider: true } as const,
              { name: 'Settings', iconName: 'settings', shortcut: '', action: async () => {} },
              { name: 'Logout', iconName: 'logOut', shortcut: '', action: async () => {} }
            ]}
          ></dees-appui-profiledropdown>
        </div>
      </dees-panel>

        <dees-panel .title=${'Edge Cases'} .subtitle=${'Special scenarios and gotchas'}>
        <div class="demo-grid">
          <div class="demo-card">
            <h4>Multiple Toasts</h4>
            <dees-button @click=${async () => {
              DeesToast.createAndShow({ message: 'First toast', type: 'info' });
              setTimeout(() => {
                DeesToast.createAndShow({ message: 'Second toast', type: 'warning' });
              }, 500);
              setTimeout(() => {
                DeesToast.createAndShow({ message: 'Third toast', type: 'success' });
              }, 1000);
            }}>Show Multiple Toasts</dees-button>
          </div>

          <div class="demo-card">
            <h4>Modal with WYSIWYG Editor</h4>
            <dees-button @click=${async () => {
              await DeesModal.createAndShow({
                heading: 'WYSIWYG Editor Test',
                width: 'large',
                content: html`
                  <p>Test the WYSIWYG editor slash commands and formatting menus in a modal:</p>
                  <dees-form>
                    <dees-input-wysiwyg
                      .label=${'Document Content'}
                      .placeholder=${'Type "/" to see slash commands or select text to format...'}
                      .outputFormat=${'html'}
                      .description=${'The slash menu and formatting menu should appear above this modal'}
                      .value=${`<p>Welcome to the WYSIWYG editor demo!</p>
<p>This editor demonstrates proper z-index management:</p>
<ul>
<li>Type <strong>/</strong> to open the slash command menu</li>
<li>Select any text to see the formatting toolbar</li>
<li>Both menus will appear <em>above</em> this modal</li>
</ul>
<p>Try it now: Type / here or select this text to format it.</p>`}
                    ></dees-input-wysiwyg>
                  </dees-form>
                  <div style="margin-top: 16px; padding: 16px; background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; border-radius: 8px;">
                    <strong style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">✨ Z-Index Fix Applied!</strong><br>
                    <span style="color: ${cssManager.bdTheme('#1976d2', '#90caf9')}">
                      The WYSIWYG menus now properly use the dynamic z-index registry.<br>
                      They will always appear above the modal, regardless of stacking order.
                    </span>
                  </div>
                `,
                menuOptions: [
                  { name: 'Cancel', action: async (modal) => modal.destroy() },
                  { name: 'Save', action: async (modal) => {
                    DeesToast.createAndShow({ message: 'Document saved!', type: 'success' });
                    modal.destroy();
                  }}
                ]
              });
            }}>Test WYSIWYG in Modal</dees-button>
          </div>
          
          <div class="demo-card">
            <h4>Modal with Tags Input</h4>
            <dees-button @click=${async () => {
              await DeesModal.createAndShow({
                heading: 'Tags Input Test',
                width: 'medium',
                content: html`
                  <p>Test the tags input component in a modal:</p>
                  <dees-form>
                    <dees-input-tags
                      .label=${'Search Terms'}
                      .placeholder=${'Enter search terms...'}
                      .value=${['typescript', 'modal']}
                      .suggestions=${[
                        'javascript', 'typescript', 'css', 'html',
                        'react', 'vue', 'angular', 'svelte',
                        'modal', 'dropdown', 'form', 'input'
                      ]}
                      .description=${'Add search terms to filter results'}
                    ></dees-input-tags>
                    
                    <dees-input-tags
                      .label=${'Categories'}
                      .placeholder=${'Add categories...'}
                      .required=${true}
                      .maxTags=${3}
                      .description=${'Select up to 3 categories'}
                    ></dees-input-tags>
                  </dees-form>
                `,
                menuOptions: [
                  { name: 'Cancel', action: async (modal) => modal.destroy() },
                  { name: 'Apply', action: async (modal) => {
                    DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
                    modal.destroy();
                  }}
                ]
              });
            }}>Test Tags in Modal</dees-button>
          </div>

          <div class="demo-card">
            <h4>Fullscreen Modal</h4>
            <dees-button @click=${async () => {
              await DeesModal.createAndShow({
                heading: 'Fullscreen Modal Test',
                width: 'fullscreen',
                content: html`
                  <p>Even in fullscreen, overlays should work properly:</p>
                  <dees-input-radiogroup
                    .label=${'Select Option'}
                    .options=${['Option 1', 'Option 2', 'Option 3']}
                  ></dees-input-radiogroup>
                  <dees-input-dropdown
                    .label=${'Dropdown in Fullscreen'}
                    .options=${[
                      {option: 'Works properly', key: '1'},
                      {option: 'Above modal', key: '2'},
                    ]}
                  ></dees-input-dropdown>
                `,
                menuOptions: [
                  { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() }
                ]
              });
            }}>Open Fullscreen</dees-button>
          </div>
        </div>
      </dees-panel>
      </div>

      <!-- Guidelines Section -->
      <div class="showcase-section">
        <div class="section-header">
          <div class="section-icon guidelines">📖</div>
          <div>
            <h2 class="section-title">Usage Guidelines</h2>
          </div>
        </div>
        <dees-panel>
        <h4>Best Practices:</h4>
        <ul>
          <li>Always use the z-index registry from <code>00zindex.ts</code></li>
          <li>Never use arbitrary z-index values like <code>z-index: 9999</code></li>
          <li>Get z-index from registry when showing elements: <code>zIndexRegistry.getNextZIndex()</code></li>
          <li>Register elements to track them: <code>zIndexRegistry.register(element, zIndex)</code></li>
          <li>Unregister on cleanup: <code>zIndexRegistry.unregister(element)</code></li>
          <li>Elements created later automatically appear on top</li>
          <li>Test overlay interactions, especially dropdowns in modals</li>
          <li>WYSIWYG menus (slash commands, formatting) now use dynamic z-index</li>
        </ul>

        <h4>Import Example:</h4>
        <pre style="background: ${cssManager.bdTheme('#f5f5f5', '#2a2a2a')}; padding: 16px; border-radius: 6px; overflow-x: auto;">
<code>import { zIndexRegistry } from './00zindex.js';

// In your component:
const myZIndex = zIndexRegistry.getNextZIndex();
element.style.zIndex = myZIndex.toString();
zIndexRegistry.register(element, myZIndex);

// On cleanup:
zIndexRegistry.unregister(element);</code></pre>
      </dees-panel>
      </div>
    </div>
  </div>
`;