import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './dees-panel.js';
import './dees-form.js';
import './dees-input-text.js';
import './dees-form-submit.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;
          }
        }
        
        .feature-note {
          margin-top: 12px;
          padding: 12px;
          background: #eff6ff;
          border-left: 3px solid #3b82f6;
          border-radius: 4px;
          font-size: 13px;
          color: #1e40af;
        }
        
        @media (prefers-color-scheme: dark) {
          .feature-note {
            background: #1e3a5f;
            color: #93c5fd;
          }
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Basic List Input'} .subtitle=${'Simple list management with add, edit, and delete'}>
        <dees-input-list
          .label=${'Shopping List'}
          .placeholder=${'Add item to your list...'}
          .value=${['Milk', 'Bread', 'Eggs', 'Cheese']}
          .description=${'Double-click to edit items, or use the edit button'}
        ></dees-input-list>
        <div class="feature-note">
          💡 Double-click any item to quickly edit it inline
        </div>
      </dees-panel>

      <dees-panel .title=${'2. Sortable List'} .subtitle=${'Drag and drop to reorder items'}>
        <dees-input-list
          .label=${'Task Priority'}
          .placeholder=${'Add a task...'}
          .sortable=${true}
          .value=${[
            'Review pull requests',
            'Fix critical bug',
            'Update documentation',
            'Deploy to production',
            'Team standup meeting'
          ]}
          .description=${'Drag items using the handle to reorder them'}
        ></dees-input-list>
        <div class="feature-note">
          🔄 Drag the grip handle to reorder tasks by priority
        </div>
      </dees-panel>

      <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
        <div class="grid-layout">
          <dees-input-list
            .label=${'Team Members (Min 2, Max 5)'}
            .placeholder=${'Add team member...'}
            .minItems=${2}
            .maxItems=${5}
            .value=${['Alice', 'Bob']}
            .required=${true}
            .description=${'Add 2-5 team members'}
          ></dees-input-list>
          
          <dees-input-list
            .label=${'Unique Tags (No Duplicates)'}
            .placeholder=${'Add unique tag...'}
            .allowDuplicates=${false}
            .value=${['frontend', 'backend', 'database']}
            .description=${'Duplicate items are not allowed'}
          ></dees-input-list>
        </div>
      </dees-panel>

      <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
        <dees-input-list
          .label=${'Important Documents'}
          .placeholder=${'Add document name...'}
          .confirmDelete=${true}
          .value=${[
            'Contract_2024.pdf',
            'Financial_Report_Q3.xlsx',
            'Project_Proposal.docx',
            'Meeting_Notes.txt'
          ]}
          .description=${'Deletion requires confirmation for safety'}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${'5. Disabled State'} .subtitle=${'Read-only list display'}>
        <dees-input-list
          .label=${'System Defaults'}
          .value=${['Default Setting 1', 'Default Setting 2', 'Default Setting 3']}
          .disabled=${true}
          .description=${'These items cannot be modified'}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${'6. Form Integration'} .subtitle=${'List input working within a form context'}>
        <dees-form>
          <dees-input-text
            .label=${'Recipe Name'}
            .placeholder=${'My Amazing Recipe'}
            .required=${true}
            .key=${'name'}
          ></dees-input-text>
          
          <div class="grid-layout">
            <dees-input-list
              .label=${'Ingredients'}
              .placeholder=${'Add ingredient...'}
              .required=${true}
              .minItems=${3}
              .key=${'ingredients'}
              .sortable=${true}
              .value=${[
                '2 cups flour',
                '1 cup sugar',
                '3 eggs'
              ]}
              .description=${'Add at least 3 ingredients'}
            ></dees-input-list>
            
            <dees-input-list
              .label=${'Instructions'}
              .placeholder=${'Add instruction step...'}
              .required=${true}
              .minItems=${2}
              .key=${'instructions'}
              .sortable=${true}
              .value=${[
                'Preheat oven to 350°F',
                'Mix dry ingredients'
              ]}
              .description=${'Add cooking instructions in order'}
            ></dees-input-list>
          </div>
          
          <dees-input-text
            .label=${'Notes'}
            .inputType=${'textarea'}
            .placeholder=${'Any special notes or tips...'}
            .key=${'notes'}
          ></dees-input-text>
          
          <dees-form-submit .text=${'Save Recipe'}></dees-form-submit>
        </dees-form>
      </dees-panel>

      <dees-panel .title=${'7. Interactive Demo'} .subtitle=${'Build your own feature list and see the data'}>
        <dees-input-list
          id="interactive-list"
          .label=${'Product Features'}
          .placeholder=${'Add a feature...'}
          .sortable=${true}
          .confirmDelete=${false}
          .allowDuplicates=${false}
          .maxItems=${10}
          @change=${(e: CustomEvent) => {
            const preview = document.querySelector('#list-json');
            if (preview) {
              const data = {
                items: e.detail.value,
                count: e.detail.value.length,
                timestamp: new Date().toISOString()
              };
              preview.textContent = JSON.stringify(data, null, 2);
            }
          }}
        ></dees-input-list>
        
        <div class="output-preview" id="list-json">
          {
            "items": [],
            "count": 0,
            "timestamp": "${new Date().toISOString()}"
          }
        </div>
        
        <div class="feature-note">
          ✨ Add, edit, remove, and reorder items to see the JSON output update in real-time
        </div>
      </dees-panel>

      <dees-panel .title=${'8. Advanced Configuration'} .subtitle=${'Combine all features for complex use cases'}>
        <dees-input-list
          .label=${'Project Milestones'}
          .placeholder=${'Add milestone...'}
          .value=${[
            'Project Kickoff - Week 1',
            'Requirements Gathering - Week 2-3',
            'Design Phase - Week 4-6',
            'Development Sprint 1 - Week 7-9',
            'Testing & QA - Week 10-11',
            'Deployment - Week 12'
          ]}
          .sortable=${true}
          .confirmDelete=${true}
          .allowDuplicates=${false}
          .minItems=${3}
          .maxItems=${12}
          .required=${true}
          .description=${'Manage project milestones (3-12 items, sortable, no duplicates)'}
        ></dees-input-list>
      </dees-panel>

      <dees-panel .title=${'9. Empty State'} .subtitle=${'How the component looks with no items'}>
        <dees-input-list
          .label=${'Your Ideas'}
          .placeholder=${'Share your ideas...'}
          .value=${[]}
          .description=${'Start adding items to build your list'}
        ></dees-input-list>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;