import { html, css, cssManager } from '@design.estate/dees-element';
import '../elements/index.js';

export const inputShowcase = () => html`
  <div class="page-wrapper">
    <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;
        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')};
      }

      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.text { background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; }
      .section-icon.selection { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
      .section-icon.numeric { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
      .section-icon.special { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
      .section-icon.rich { background: ${cssManager.bdTheme('#fce4ec', '#880e4f')}; }
      .section-icon.form { 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')};
        margin: 0 0 32px 64px;
        font-size: 16px;
        line-height: 1.6;
      }

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

      @media (max-width: 900px) {
        .demo-grid {
          grid-template-columns: 1fr;
        }
      }

      .nav-menu {
        position: sticky;
        top: 24px;
        float: right;
        margin-left: 24px;
        margin-bottom: 24px;
        background: ${cssManager.bdTheme('white', '#1a1a1a')};
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)')};
        z-index: 100;
      }

      @media (max-width: 1200px) {
        .nav-menu {
          display: none;
        }
      }

      .nav-item {
        display: block;
        padding: 8px 12px;
        color: ${cssManager.bdTheme('#666', '#999')};
        text-decoration: none;
        font-size: 14px;
        border-radius: 6px;
        transition: all 0.2s;
      }

      .nav-item:hover {
        background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')};
        color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
      }

      dees-form {
        margin-top: 32px;
      }

      dees-panel {
        margin-bottom: 24px;
      }

      dees-panel:last-child {
        margin-bottom: 0;
      }

      .code-example {
        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
        border-radius: 8px;
        padding: 16px;
        margin-top: 16px;
        font-family: 'Fira Code', monospace;
        font-size: 14px;
        overflow-x: auto;
        color: ${cssManager.bdTheme('#333', '#e0e0e0')};
      }

      .feature-badge {
        display: inline-block;
        padding: 4px 12px;
        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
        color: ${cssManager.bdTheme('#1976d2', '#64b5f6')};
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        margin-left: 8px;
      }

      /* Form section specific styles */
      .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        margin-top: 16px;
      }

      .feature-card {
        padding: 16px;
        border-radius: 8px;
      }

      .feature-card p {
        margin: 8px 0 0 0;
        font-size: 14px;
      }

    `}
  </style>

  <div class="showcase-container">
    <!-- Navigation Menu -->
    <nav class="nav-menu">
      <a href="#text-inputs" class="nav-item">📝 Text Inputs</a>
      <a href="#selection-inputs" class="nav-item">☑️ Selection Inputs</a>
      <a href="#numeric-inputs" class="nav-item">🔢 Numeric Inputs</a>
      <a href="#special-inputs" class="nav-item">✨ Special Inputs</a>
      <a href="#rich-editors" class="nav-item">📄 Rich Editors</a>
      <a href="#form-integration" class="nav-item">📋 Form Integration</a>
    </nav>
    
    <div class="showcase-header">
      <h1 class="showcase-title">Input Components Showcase</h1>
      <p class="showcase-subtitle">
        A comprehensive collection of input components for building modern web forms and interfaces.
        <br>All components support dark mode, validation, and integrate seamlessly with dees-form.
      </p>
    </div>

    <!-- Text Inputs Section -->
    <section id="text-inputs" class="showcase-section">
      <div class="section-header">
        <div class="section-icon text">📝</div>
        <h2 class="section-title">Text Inputs</h2>
      </div>
      <p class="section-description">
        Standard text input components for collecting various types of textual data. 
        Includes password fields, validation, and specialized formatting.
      </p>

      <dees-panel .title=${'Basic Text Inputs'}>
        <div class="demo-grid">
          <dees-input-text 
            .label=${'Username'}
            .placeholder=${'Enter your username'}
            .description=${'Choose a unique username'}
            .required=${true}
          ></dees-input-text>

          <dees-input-text 
            .label=${'Email Address'}
            .inputType=${'email'}
            .placeholder=${'user@example.com'}
            .validationText=${'Please enter a valid email'}
            .required=${true}
          ></dees-input-text>

          <dees-input-text 
            .label=${'Password'}
            .isPasswordBool=${true}
            .placeholder=${'Enter secure password'}
            .description=${'Must be at least 8 characters'}
          ></dees-input-text>

          <dees-input-text 
            .label=${'Website URL'}
            .inputType=${'url'}
            .placeholder=${'https://example.com'}
            .value=${'https://design.estate'}
          ></dees-input-text>
        </div>
      </dees-panel>

      <dees-panel .title=${'Search Bar'} .subtitle=${'Advanced search with suggestions'}>
        <dees-searchbar
          .placeholder=${'Search for anything...'}
        ></dees-searchbar>
        
        <div class="code-example">
// Search with custom suggestions
&lt;dees-searchbar
  .placeholder="Search products..."
  .suggestions=${['Laptop', 'Phone', 'Tablet']}
&gt;&lt;/dees-searchbar&gt;
        </div>
      </dees-panel>
    </section>

    <!-- Selection Inputs Section -->
    <section id="selection-inputs" class="showcase-section">
      <div class="section-header">
        <div class="section-icon selection">☑️</div>
        <h2 class="section-title">Selection Inputs</h2>
      </div>
      <p class="section-description">
        Components for selecting from predefined options. Includes checkboxes, radio buttons, 
        dropdowns, and multi-select controls.
      </p>

      <dees-panel .title=${'Checkboxes and Radio Buttons'}>
        <div class="demo-grid">
          <div>
            <dees-input-checkbox 
              .label=${'Accept Terms & Conditions'}
              .description=${'You must accept to continue'}
              .required=${true}
            ></dees-input-checkbox>

            <dees-input-checkbox 
              .label=${'Subscribe to Newsletter'}
              .value=${true}
            ></dees-input-checkbox>

            <dees-input-checkbox 
              .label=${'Enable Notifications'}
              .disabled=${true}
            ></dees-input-checkbox>
          </div>

          <div>
            <dees-input-radiogroup
              .label=${'Select Plan'}
              .options=${['Free', 'Pro', 'Enterprise']}
              .selectedOption=${'Pro'}
              .required=${true}
            ></dees-input-radiogroup>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${'Dropdown Selection'}>
        <div class="demo-grid">
          <dees-input-dropdown
            .label=${'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'}
            ]}
            .placeholder=${'Select your country'}
            .required=${true}
          ></dees-input-dropdown>

          <dees-input-dropdown
            .label=${'Preferred Language'}
            .options=${[
              {option: 'English', key: 'en', payload: 'EN'},
              {option: 'Spanish', key: 'es', payload: 'ES'},
              {option: 'French', key: 'fr', payload: 'FR'},
              {option: 'German', key: 'de', payload: 'DE'},
              {option: 'Japanese', key: 'ja', payload: 'JA'}
            ]}
            .value=${{option: 'English', key: 'en', payload: 'EN'}}
          ></dees-input-dropdown>
        </div>
      </dees-panel>

      <dees-panel .title=${'Multi Toggle'} .subtitle=${'Toggle between multiple options'}>
        <dees-input-multitoggle
          .label=${'Theme Preference'}
          .options=${['Light', 'Dark', 'Auto']}
          .value=${'Auto'}
        ></dees-input-multitoggle>

        <dees-input-multitoggle
          .label=${'View Mode'}
          .options=${['Grid', 'List', 'Cards']}
          .value=${'Grid'}
          .description=${'Choose how to display items'}
        ></dees-input-multitoggle>
      </dees-panel>

      <dees-panel .title=${'Type List'} .subtitle=${'Dynamic list of typed items'}>
        <dees-input-typelist
          .label=${'Skills'}
          .description=${'Add your technical skills'}
          .placeholder=${'Type and press Enter'}
        ></dees-input-typelist>
      </dees-panel>
    </section>

    <!-- Numeric Inputs Section -->
    <section id="numeric-inputs" class="showcase-section">
      <div class="section-header">
        <div class="section-icon numeric">🔢</div>
        <h2 class="section-title">Numeric Inputs</h2>
      </div>
      <p class="section-description">
        Specialized inputs for numeric values, including quantity selectors and formatted inputs.
      </p>

      <dees-panel .title=${'Quantity Selector'}>
        <div class="demo-grid">
          <dees-input-quantityselector
            .label=${'Product Quantity'}
            .value=${1}
            .min=${1}
            .max=${100}
            .description=${'Select quantity (1-100)'}
          ></dees-input-quantityselector>

          <dees-input-quantityselector
            .label=${'Team Size'}
            .value=${5}
            .min=${1}
            .max=${50}
            .step=${5}
          ></dees-input-quantityselector>
        </div>
      </dees-panel>
    </section>

    <!-- Special Inputs Section -->
    <section id="special-inputs" class="showcase-section">
      <div class="section-header">
        <div class="section-icon special">✨</div>
        <h2 class="section-title">Special Inputs</h2>
      </div>
      <p class="section-description">
        Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
      </p>

      <dees-panel .title=${'Phone & IBAN'}>
        <div class="demo-grid">
          <dees-input-phone
            .label=${'Phone Number'}
            .placeholder=${'+1 (555) 123-4567'}
            .required=${true}
            .description=${'International format supported'}
          ></dees-input-phone>

          <dees-input-iban
            .label=${'Bank Account (IBAN)'}
            .placeholder=${'DE89 3704 0044 0532 0130 00'}
            .description=${'European IBAN format'}
          ></dees-input-iban>
        </div>
      </dees-panel>

      <dees-panel .title=${'File Upload'} .subtitle=${'Drag & drop or click to upload'}>
        <dees-input-fileupload
          .label=${'Upload Documents'}
          .description=${'PDF, DOC, DOCX up to 10MB'}
          .accept=${'.pdf,.doc,.docx'}
          .multiple=${true}
        ></dees-input-fileupload>

        <dees-input-fileupload
          .label=${'Profile Picture'}
          .description=${'JPG, PNG up to 5MB'}
          .accept=${'image/*'}
        ></dees-input-fileupload>
      </dees-panel>
    </section>

    <!-- Rich Editors Section -->
    <section id="rich-editors" class="showcase-section">
      <div class="section-header">
        <div class="section-icon rich">📄</div>
        <h2 class="section-title">Rich Text Editors</h2>
        <span class="feature-badge">New!</span>
      </div>
      <p class="section-description">
        Advanced text editors for creating rich content with formatting, images, and structured blocks.
      </p>

      <dees-panel .title=${'Rich Text Editor'} .subtitle=${'TipTap-based rich text editing'}>
        <dees-input-richtext
          .label=${'Article Content'}
          .placeholder=${'Start writing...'}
          .description=${'Full formatting toolbar with markdown shortcuts'}
          .minHeight=${300}
          .showWordCount=${true}
        ></dees-input-richtext>
      </dees-panel>

      <dees-panel .title=${'WYSIWYG Block Editor'} .subtitle=${'Block-based editor with slash commands'}>
        <dees-input-wysiwyg
          .label=${'Page Content'}
          .description=${'Type "/" for commands or use markdown shortcuts'}
          .outputFormat=${'html'}
        ></dees-input-wysiwyg>
      </dees-panel>
    </section>

    <!-- Form Integration Section -->
    <section id="form-integration" class="showcase-section">
      <div class="section-header">
        <div class="section-icon form">📋</div>
        <h2 class="section-title">Form Integration</h2>
      </div>
      <p class="section-description">
        All input components integrate seamlessly with dees-form for validation, 
        submission handling, and data management.
      </p>

      <dees-panel .title=${'Complete Form Example'} .subtitle=${'All inputs working together'}>
        <dees-form>
          <h3>User Registration</h3>
          
          <div class="demo-grid">
            <dees-input-text
              .label=${'First Name'}
              .required=${true}
              .key=${'firstName'}
            ></dees-input-text>

            <dees-input-text
              .label=${'Last Name'}
              .required=${true}
              .key=${'lastName'}
            ></dees-input-text>
          </div>

          <dees-input-text
            .label=${'Email'}
            .inputType=${'email'}
            .required=${true}
            .key=${'email'}
          ></dees-input-text>

          <dees-input-phone
            .label=${'Phone Number'}
            .required=${true}
            .key=${'phone'}
          ></dees-input-phone>

          <dees-input-dropdown
            .label=${'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'}
            ]}
            .required=${true}
            .key=${'country'}
          ></dees-input-dropdown>

          <dees-input-radiogroup
            .label=${'Account Type'}
            .options=${['Personal', 'Business']}
            .required=${true}
            .key=${'accountType'}
            .selectedOption=${'Personal'}
          ></dees-input-radiogroup>

          <dees-input-richtext
            .label=${'Bio'}
            .placeholder=${'Tell us about yourself...'}
            .minHeight=${150}
            .key=${'bio'}
          ></dees-input-richtext>

          <dees-input-checkbox
            .label=${'I agree to the Terms of Service'}
            .required=${true}
            .key=${'terms'}
          ></dees-input-checkbox>

          <dees-input-checkbox
            .label=${'Subscribe to newsletter'}
            .key=${'newsletter'}
          ></dees-input-checkbox>

          <dees-form-submit .text=${'Create Account'}></dees-form-submit>
        </dees-form>
      </dees-panel>

      <dees-panel .title=${'Form Features'}>
        <div class="feature-grid">
          <div class="feature-card" style="background: rgba(0, 150, 136, 0.1);">
            <strong>✅ Validation</strong>
            <p>Built-in validation for all input types</p>
          </div>
          <div class="feature-card" style="background: rgba(33, 150, 243, 0.1);">
            <strong>🔄 Two-way Binding</strong>
            <p>Automatic data synchronization</p>
          </div>
          <div class="feature-card" style="background: rgba(156, 39, 176, 0.1);">
            <strong>📊 Data Collection</strong>
            <p>Easy form data extraction</p>
          </div>
          <div class="feature-card" style="background: rgba(255, 152, 0, 0.1);">
            <strong>🎨 Theming</strong>
            <p>Consistent styling across all inputs</p>
          </div>
        </div>
      </dees-panel>
    </section>
  </div>
  </div>
`;