import { html, css, cssManager, domtools } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-form/dees-form/dees-form.js';
import '../../00group-form/dees-form-submit/dees-form-submit.js';
import '../../00group-input/dees-input-text/dees-input-text.js';
import '../../dees-icon/dees-icon.js';
import type { DeesButton } from '../dees-button/dees-button.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      dees-panel {
        margin-bottom: 24px;
      }
      
      dees-panel:last-child {
        margin-bottom: 0;
      }
      
      .button-group {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      
      .vertical-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 300px;
      }
      
      .horizontal-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      
      .demo-output {
        margin-top: 16px;
        padding: 12px;
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
        border-radius: 6px;
        font-size: 14px;
        font-family: monospace;
        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
      }
      
      .icon-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 0;
      }
      
      .code-snippet {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
        padding: 8px 12px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 13px;
        display: inline-block;
        margin: 4px 0;
      }
    `}
  </style>
  
  <div class="demo-container">
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Log button clicks for demo purposes
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button) => {
        button.addEventListener('clicked', () => {
          const type = button.getAttribute('type') || 'default';
          console.log(`Button variant clicked: ${type}`);
        });
      });
    }}>
      <dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
        <div class="button-group">
          <dees-button type="default">Default</dees-button>
          <dees-button type="secondary">Secondary</dees-button>
          <dees-button type="destructive">Destructive</dees-button>
          <dees-button type="outline">Outline</dees-button>
          <dees-button type="ghost">Ghost</dees-button>
          <dees-button type="link">Link Button</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate size differences programmatically
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button) => {
        button.addEventListener('clicked', () => {
          const size = button.getAttribute('size') || 'default';
          console.log(`Button size: ${size}`);
        });
      });
    }}>
      <dees-panel .title=${'2. Button Sizes'} .subtitle=${'Multiple sizes for different contexts and use cases'}>
        <div class="button-group">
          <dees-button size="sm">Small Button</dees-button>
          <dees-button size="default">Default Size</dees-button>
          <dees-button size="lg">Large Button</dees-button>
          <dees-button size="icon" type="outline" .text=${'🚀'}></dees-button>
        </div>
        
        <div class="button-group" style="margin-top: 16px;">
          <dees-button size="sm" type="secondary">Small Secondary</dees-button>
          <dees-button size="default" type="destructive">Default Destructive</dees-button>
          <dees-button size="lg" type="outline">Large Outline</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Track icon button clicks
      const iconButtons = elementArg.querySelectorAll('dees-button');
      iconButtons.forEach((button) => {
        button.addEventListener('clicked', () => {
          const hasIcon = button.querySelector('dees-icon');
          if (hasIcon) {
            const iconName = hasIcon.getAttribute('iconFA') || 'unknown';
            console.log(`Icon button clicked: ${iconName}`);
          }
        });
      });
    }}>
      <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
        <div class="icon-row">
          <dees-button>
            <dees-icon icon="fa:plus"></dees-icon>
            Add Item
          </dees-button>
          <dees-button type="destructive">
            <dees-icon icon="fa:trash"></dees-icon>
            Delete
          </dees-button>
          <dees-button type="outline">
            <dees-icon icon="lucide:Download"></dees-icon>
            Download
          </dees-button>
        </div>

        <div class="icon-row">
          <dees-button type="secondary" size="sm">
            <dees-icon icon="fa:gear"></dees-icon>
            Settings
          </dees-button>
          <dees-button type="ghost">
            <dees-icon icon="fa:caretLeft"></dees-icon>
            Back
          </dees-button>
          <dees-button type="ghost">
            Next
            <dees-icon icon="fa:caretRight"></dees-icon>
          </dees-button>
        </div>

        <div class="icon-row">
          <dees-button size="icon" type="default">
            <dees-icon icon="fa:plus"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="secondary">
            <dees-icon icon="fa:gear"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="outline">
            <dees-icon icon="lucide:Search"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="ghost">
            <dees-icon icon="lucide:MoreVertical"></dees-icon>
          </dees-button>
          <dees-button size="icon" type="destructive">
            <dees-icon icon="fa:trash"></dees-icon>
          </dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Track icon property button clicks
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button) => {
        button.addEventListener('clicked', () => {
          const icon = button.getAttribute('icon') || 'none';
          const position = button.getAttribute('iconPosition') || 'left';
          console.log(`Icon property button: icon=${icon}, position=${position}`);
        });
      });
    }}>
      <dees-panel .title=${'4. Icons via Property'} .subtitle=${'Simplified icon syntax using the icon property'}>
        <div class="icon-row">
          <dees-button icon="fa:plus">Add Item</dees-button>
          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
        </div>

        <div class="icon-row">
          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
        </div>

        <div class="icon-row">
          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
        </div>

        <div style="margin-top: 16px;">
          <div class="code-snippet">
            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
          </div>
        </div>
      </dees-panel>
    </dees-demowrapper>

    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Demonstrate status changes
      const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
      const successButton = elementArg.querySelector('dees-button[status="success"]');
      const errorButton = elementArg.querySelector('dees-button[status="error"]');
      
      // Simulate status changes
      if (pendingButton) {
        setTimeout(() => {
          console.log('Pending button is showing loading state');
        }, 1000);
      }
      
      if (successButton) {
        successButton.addEventListener('clicked', () => {
          console.log('Success state button clicked');
        });
      }
      
      if (errorButton) {
        errorButton.addEventListener('clicked', () => {
          console.log('Error state button clicked');
        });
      }
    }}>
      <dees-panel .title=${'5. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
        <div class="button-group">
          <dees-button status="normal">Normal</dees-button>
          <dees-button status="pending">Processing...</dees-button>
          <dees-button status="success">Success!</dees-button>
          <dees-button status="error">Error!</dees-button>
          <dees-button disabled>Disabled</dees-button>
        </div>
        
        <div class="button-group" style="margin-top: 16px;">
          <dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
          <dees-button type="outline" status="pending">Default Loading</dees-button>
          <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Set up click handlers with the output element
      const output = elementArg.querySelector('#click-output');
      
      const clickMeBtn = elementArg.querySelector('dees-button:first-of-type');
      const dataBtn = elementArg.querySelector('dees-button[type="secondary"]');
      const asyncBtn = elementArg.querySelector('dees-button[type="destructive"]');
      
      if (clickMeBtn && output) {
        clickMeBtn.addEventListener('clicked', () => {
          output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
        });
      }
      
      if (dataBtn && output) {
        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
        });
      }
      
      if (asyncBtn && output) {
        asyncBtn.addEventListener('clicked', async () => {
          output.textContent = 'Processing...';
          await domtools.plugins.smartdelay.delayFor(2000);
          output.textContent = 'Action completed!';
        });
      }
    }}>
      <dees-panel .title=${'6. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
        <div class="button-group">
          <dees-button>Click Me</dees-button>
          <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
            Click with Data
          </dees-button>
          <dees-button type="destructive">Async Action</dees-button>
        </div>
        
        <div id="click-output" class="demo-output">
          <em>Click a button to see the result...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Set up form submission handling
      const form = elementArg.querySelector('dees-form');
      const output = elementArg.querySelector('#form-output');
      
      if (form && output) {
        form.addEventListener('formData', (e: CustomEvent) => {
          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
            JSON.stringify(e.detail.data, null, 2);
        });
      }
      
      // Track non-submit button clicks
      const draftBtn = elementArg.querySelector('dees-button[type="secondary"]');
      const cancelBtn = elementArg.querySelector('dees-button[type="ghost"]');
      
      if (draftBtn) {
        draftBtn.addEventListener('clicked', () => {
          console.log('Save Draft clicked');
        });
      }
      
      if (cancelBtn) {
        cancelBtn.addEventListener('clicked', () => {
          console.log('Cancel clicked');
        });
      }
    }}>
      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
        <dees-form>
          <dees-input-text label="Name" key="name" required></dees-input-text>
          <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
          <dees-input-text label="Message" key="message" isMultiline></dees-input-text>
          
          <dees-button type="secondary">Save Draft</dees-button>
          <dees-button type="ghost">Cancel</dees-button>
          <dees-form-submit>Submit Form</dees-form-submit>
        </dees-form>
        
        <div id="form-output" class="demo-output" style="white-space: pre-wrap;">
          <em>Submit the form to see the data...</em>
        </div>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Log legacy type mappings
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button) => {
        const type = button.getAttribute('type');
        if (type) {
          console.log(`Legacy type "${type}" is supported for backward compatibility`);
        }
      });
    }}>
      <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
        <div class="button-group">
          <dees-button type="normal">Normal → Default</dees-button>
          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
          <dees-button type="discreet">Discreet → Outline</dees-button>
          <dees-button type="big">Big → Large Size</dees-button>
        </div>
        
        <p style="margin-top: 16px; font-size: 14px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};">
          These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
        </p>
      </dees-panel>
    </dees-demowrapper>
    
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Track action group clicks
      const actionGroup = elementArg.querySelectorAll('.vertical-group')[0];
      const dangerGroup = elementArg.querySelectorAll('.vertical-group')[1];
      
      if (actionGroup) {
        const buttons = actionGroup.querySelectorAll('dees-button');
        buttons.forEach((button, index) => {
          button.addEventListener('clicked', () => {
            const action = ['Save Changes', 'Discard', 'Help'][index];
            console.log(`Action group: ${action} clicked`);
          });
        });
      }
      
      if (dangerGroup) {
        const buttons = dangerGroup.querySelectorAll('dees-button');
        buttons.forEach((button, index) => {
          button.addEventListener('clicked', () => {
            const action = ['Delete Account', 'Archive Data', 'Not Available'][index];
            if (index !== 2) { // Skip disabled button
              console.log(`Danger zone: ${action} clicked`);
            }
          });
        });
      }
    }}>
      <dees-panel .title=${'9. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
        <div class="horizontal-group">
          <div class="vertical-group">
            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
            <dees-button type="default" size="sm">
              <dees-icon icon="lucide:Save"></dees-icon>
              Save Changes
            </dees-button>
            <dees-button type="secondary" size="sm">
              <dees-icon icon="lucide:Undo2"></dees-icon>
              Discard
            </dees-button>
            <dees-button type="ghost" size="sm">
              <dees-icon icon="lucide:HelpCircle"></dees-icon>
              Help
            </dees-button>
          </div>

          <div class="vertical-group">
            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
            <dees-button type="destructive" size="sm">
              <dees-icon icon="fa:trash"></dees-icon>
              Delete Account
            </dees-button>
            <dees-button type="outline" size="sm">
              <dees-icon icon="lucide:Archive"></dees-icon>
              Archive Data
            </dees-button>
            <dees-button type="ghost" size="sm" disabled>
              <dees-icon icon="lucide:Ban"></dees-icon>
              Not Available
            </dees-button>
          </div>
        </div>
        
        <div style="margin-top: 24px;">
          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
          <div class="code-snippet">
            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
            &nbsp;&nbsp;Save Changes<br>
            &lt;/dees-button&gt;
          </div>
        </div>
      </dees-panel>
    </dees-demowrapper>
  </div>
`;