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

export const demoFunc = () => html`
  <dees-demowrapper>
    <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;
        }
        
        .grid-layout {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        
        @media (max-width: 768px) {
          .grid-layout {
            grid-template-columns: 1fr;
          }
        }
        
        .output-preview {
          margin-top: 16px;
          padding: 16px;
          background: #f3f4f6;
          border-radius: 4px;
          font-size: 12px;
          color: #374151;
          word-break: break-all;
          max-height: 200px;
          overflow-y: auto;
        }
        
        @media (prefers-color-scheme: dark) {
          .output-preview {
            background: #2c2c2c;
            color: #e4e4e7;
          }
        }
        
        .tag-preview {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          padding: 12px;
          background: #f9fafb;
          border-radius: 4px;
          min-height: 40px;
          align-items: center;
        }
        
        @media (prefers-color-scheme: dark) {
          .tag-preview {
            background: #1f2937;
          }
        }
        
        .tag-preview-item {
          display: inline-block;
          padding: 4px 12px;
          background: #e0e7ff;
          color: #4338ca;
          border-radius: 12px;
          font-size: 14px;
        }
        
        @media (prefers-color-scheme: dark) {
          .tag-preview-item {
            background: #312e81;
            color: #c7d2fe;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic Tags Input'} .subtitle=${'Simple tag input with common programming languages'}>
        <dees-input-tags
          .label=${'Programming Languages'}
          .placeholder=${'Add a language...'}
          .value=${['JavaScript', 'TypeScript', 'Python', 'Go']}
          .description=${'Press Enter or comma to add tags'}
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=${'2. Tags with Suggestions'} .subtitle=${'Auto-complete suggestions for faster input'}>
        <dees-input-tags
          .label=${'Tech Stack'}
          .placeholder=${'Type to see suggestions...'}
          .suggestions=${[
            'React', 'Vue', 'Angular', 'Svelte', 'Lit', 'Next.js', 'Nuxt', 'SvelteKit',
            'Node.js', 'Deno', 'Bun', 'Express', 'Fastify', 'Nest.js', 'Koa',
            'MongoDB', 'PostgreSQL', 'Redis', 'MySQL', 'SQLite', 'Cassandra',
            'Docker', 'Kubernetes', 'AWS', 'Azure', 'GCP', 'Vercel', 'Netlify'
          ]}
          .value=${['React', 'Node.js', 'PostgreSQL', 'Docker']}
          .description=${'Start typing to see suggestions from popular technologies'}
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
        <div class="grid-layout">
          <dees-input-tags
            .label=${'Top 3 Skills'}
            .placeholder=${'Add up to 3 skills...'}
            .maxTags=${3}
            .value=${['Design', 'Development']}
            .description=${'Maximum 3 tags allowed'}
          ></dees-input-tags>
          
          <dees-input-tags
            .label=${'Categories (Max 5)'}
            .placeholder=${'Select categories...'}
            .maxTags=${5}
            .suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
            .value=${['Tutorial', 'Guide']}
            .description=${'Choose up to 5 categories'}
          ></dees-input-tags>
        </div>
      </dees-panel>

      <dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
        <dees-input-tags
          .label=${'Project Tags'}
          .placeholder=${'Add at least one tag...'}
          .required=${true}
          .description=${'This field is required - add at least one tag'}
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only tags display'}>
        <dees-input-tags
          .label=${'System Tags'}
          .value=${['System', 'Protected', 'Read-Only', 'Archive']}
          .disabled=${true}
          .description=${'These tags cannot be modified'}
        ></dees-input-tags>
      </dees-panel>

      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Tags input working within a form context'}>
        <dees-form>
          <dees-input-text
            .label=${'Project Name'}
            .placeholder=${'My Awesome Project'}
            .required=${true}
            .key=${'name'}
          ></dees-input-text>
          
          <div class="grid-layout">
            <dees-input-tags
              .label=${'Technologies Used'}
              .placeholder=${'Add technologies...'}
              .required=${true}
              .key=${'technologies'}
              .suggestions=${[
                'TypeScript', 'JavaScript', 'Python', 'Go', 'Rust',
                'React', 'Vue', 'Angular', 'Svelte',
                'Node.js', 'Deno', 'Express', 'FastAPI'
              ]}
            ></dees-input-tags>
            
            <dees-input-tags
              .label=${'Project Tags'}
              .placeholder=${'Add descriptive tags...'}
              .key=${'tags'}
              .maxTags=${10}
              .suggestions=${[
                'frontend', 'backend', 'fullstack', 'mobile', 'desktop',
                'web', 'api', 'database', 'devops', 'ui/ux',
                'opensource', 'saas', 'enterprise', 'startup'
              ]}
            ></dees-input-tags>
          </div>
          
          <dees-input-text
            .label=${'Description'}
            .inputType=${'textarea'}
            .placeholder=${'Describe your project...'}
            .key=${'description'}
          ></dees-input-text>
          
          <dees-form-submit .text=${'Create Project'}></dees-form-submit>
        </dees-form>
      </dees-panel>

      <dees-panel .title=${'7. Interactive Demo'} .subtitle=${'Add tags and see them collected in real-time'}>
        <dees-input-tags
          id="interactive-tags"
          .label=${'Your Interests'}
          .placeholder=${'Type your interests...'}
          .suggestions=${[
            'Music', 'Movies', 'Books', 'Travel', 'Photography',
            'Cooking', 'Gaming', 'Sports', 'Art', 'Technology',
            'Fashion', 'Fitness', 'Nature', 'Science', 'History'
          ]}
          @change=${(e: CustomEvent) => {
            const preview = document.querySelector('#tags-preview');
            const tags = e.detail.value;
            if (preview) {
              if (tags.length === 0) {
                preview.innerHTML = '<em style="color: #999;">No tags added yet...</em>';
              } else {
                preview.innerHTML = tags.map((tag: string) => 
                  `<span class="tag-preview-item">${tag}</span>`
                ).join('');
              }
            }
          }}
        ></dees-input-tags>
        
        <div class="tag-preview" id="tags-preview">
          <em style="color: #999;">No tags added yet...</em>
        </div>
        
        <div class="output-preview" id="tags-json">
          <em>JSON output will appear here...</em>
        </div>
        
        <script>
          // Update JSON preview
          const tagsInput = document.querySelector('#interactive-tags');
          tagsInput?.addEventListener('change', (e) => {
            const jsonPreview = document.querySelector('#tags-json');
            if (jsonPreview) {
              jsonPreview.textContent = JSON.stringify(e.detail.value, null, 2);
            }
          });
        </script>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;