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

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 800px;
          margin: 0 auto;
        }

        .demo-buttons {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
        }
      `}
    </style>

    <div class="demo-container">
      <dees-panel .title=${'Mobile Navigation'} .subtitle=${'Shadcn-style slide-in navigation menu with icons'}>
        <div class="demo-buttons">
          <dees-button 
            @click=${async () => {
              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
              DeesMobilenavigation.createAndShow([
                {
                  name: 'Dashboard',
                  iconName: 'lucide:layout-dashboard',
                  action: async (nav) => {
                    console.log('Navigate to dashboard');
                  },
                },
                {
                  name: 'Profile',
                  iconName: 'lucide:user',
                  action: async (nav) => {
                    console.log('Navigate to profile');
                  },
                },
                {
                  name: 'Messages',
                  iconName: 'lucide:mail',
                  action: async (nav) => {
                    console.log('Navigate to messages');
                  },
                },
                {
                  name: 'Settings',
                  iconName: 'lucide:settings',
                  action: async (nav) => {
                    console.log('Navigate to settings');
                  },
                },
                { divider: true } as any,
                {
                  name: 'Help & Support',
                  iconName: 'lucide:help-circle',
                  action: async (nav) => {
                    console.log('Show help');
                  },
                },
                {
                  name: 'Sign Out',
                  iconName: 'lucide:log-out',
                  action: async (nav) => {
                    console.log('Sign out');
                  },
                },
              ]);
            }}
          >
            Open Navigation Menu
          </dees-button>

          <dees-button 
            type="secondary"
            @click=${async () => {
              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
              const nav = await DeesMobilenavigation.createAndShow([
                {
                  name: 'New Document',
                  iconName: 'lucide:file-plus',
                  action: async () => console.log('New document'),
                },
                {
                  name: 'Upload File',
                  iconName: 'lucide:upload',
                  action: async () => console.log('Upload file'),
                },
                {
                  name: 'Download',
                  iconName: 'lucide:download',
                  action: async () => console.log('Download'),
                },
                { divider: true } as any,
                {
                  name: 'Share',
                  iconName: 'lucide:share-2',
                  action: async () => console.log('Share'),
                },
                {
                  name: 'Export',
                  iconName: 'lucide:export',
                  action: async () => console.log('Export'),
                },
              ]);
              nav.heading = 'File Actions';
            }}
          >
            File Actions Menu
          </dees-button>

          <dees-button 
            type="outline"
            @click=${async () => {
              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
              const nav = await DeesMobilenavigation.createAndShow([
                {
                  name: 'Cut',
                  iconName: 'lucide:scissors',
                  action: async () => console.log('Cut'),
                },
                {
                  name: 'Copy',
                  iconName: 'lucide:copy',
                  action: async () => console.log('Copy'),
                },
                {
                  name: 'Paste',
                  iconName: 'lucide:clipboard',
                  action: async () => console.log('Paste'),
                },
                { divider: true } as any,
                {
                  name: 'Select All',
                  iconName: 'lucide:square-check',
                  action: async () => console.log('Select all'),
                },
                {
                  name: 'Find',
                  iconName: 'lucide:search',
                  action: async () => console.log('Find'),
                },
                {
                  name: 'Replace',
                  iconName: 'lucide:replace',
                  action: async () => console.log('Replace'),
                },
              ]);
              nav.heading = 'Edit';
            }}
          >
            Edit Menu
          </dees-button>
        </div>
      </dees-panel>

      <dees-panel .title=${'Features'} .subtitle=${'Modern shadcn-inspired mobile navigation'}>
        <div style="padding: 16px;">
          <ul style="margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px;">
            <li>Smooth slide-in animation from the right</li>
            <li>Z-index registry integration for proper stacking</li>
            <li>Backdrop blur with window layer</li>
            <li>Support for icons using Lucide icons</li>
            <li>Menu item dividers for grouping</li>
            <li>Staggered animation for menu items</li>
            <li>Responsive design that adapts to mobile screens</li>
            <li>Clean, modern shadcn-style aesthetics</li>
            <li>Dark/light theme support</li>
            <li>Singleton pattern ensures only one instance</li>
          </ul>
        </div>
      </dees-panel>

      <dees-panel .title=${'Code Example'} .subtitle=${'How to use the mobile navigation'}>
        <div style="padding: 16px; background: var(--background-secondary); border-radius: 8px;">
          <pre style="margin: 0; font-family: monospace; font-size: 13px; line-height: 1.6;"><code>import { DeesMobilenavigation } from '@design.estate/dees-catalog';

DeesMobilenavigation.createAndShow([
  {
    name: 'Dashboard',
    iconName: 'lucide:layout-dashboard',
    action: async (nav) => {
      console.log('Navigate to dashboard');
    },
  },
  {
    name: 'Settings',
    iconName: 'lucide:settings',
    action: async (nav) => {
      console.log('Navigate to settings');
    },
  },
  { divider: true },
  {
    name: 'Sign Out',
    iconName: 'lucide:log-out',
    action: async (nav) => {
      console.log('Sign out');
    },
  },
]);</code></pre>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;