import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../dees-panel/dees-panel.js';
import type { DeesShoppingProductcard } from '../dees-shopping-productcard/dees-shopping-productcard.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;
        }
        
        .product-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 20px;
        }

        .cart-summary {
          margin-top: 24px;
          padding: 20px;
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
          border-radius: 8px;
        }

        .cart-summary-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        }

        .cart-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;
          font-size: 14px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
        }

        .cart-total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 16px;
          margin-top: 16px;
          border-top: 2px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
          font-size: 18px;
          font-weight: 600;
          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        }

        .selected-products {
          padding: 16px;
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 6px;
          font-size: 14px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'Basic Product Cards'} .subtitle=${'Simple product display with various configurations'}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{
              name: 'Wireless Bluetooth Headphones',
              category: 'Audio',
              description: 'Premium sound quality with active noise cancellation',
              price: 149.99,
              originalPrice: 199.99,
              iconName: 'lucide:headphones'
            }}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'Smart Watch Series 7',
              category: 'Wearables',
              description: 'Track your fitness and stay connected on the go',
              price: 399.00,
              iconName: 'lucide:watch'
            }}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'USB-C Hub',
              category: 'Accessories',
              price: 49.99,
              iconName: 'lucide:usb',
              inStock: false
            }}
            .quantity=${0}
          ></dees-shopping-productcard>
        </div>
      </dees-panel>

      <dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
        const products = [
          { id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
          { id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
          { id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
        ];

        const updateCartSummary = () => {
          let total = 0;
          const items = [];
          
          products.forEach(product => {
            const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
            if (element && element.quantity > 0) {
              const subtotal = product.data.price * element.quantity;
              total += subtotal;
              items.push(`
                <div class="cart-item">
                  <span>${product.data.name} (${element.quantity})</span>
                  <span>$${subtotal.toFixed(2)}</span>
                </div>
              `);
            }
          });
          
          const summary = elementArg.querySelector('#interactive-cart-summary');
          if (summary) {
            summary.innerHTML = `
              ${items.join('')}
              ${items.length === 0 ? '<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>' : ''}
              <div class="cart-total">
                <span>Total</span>
                <span>$${total.toFixed(2)}</span>
              </div>
            `;
          }
        };
        
        // Initial update
        setTimeout(updateCartSummary, 100);
        
        // Set up listeners
        elementArg.querySelectorAll('dees-shopping-productcard').forEach(card => {
          card.addEventListener('quantityChange', updateCartSummary);
        });
      }}>
        <div class="product-grid">
          <dees-shopping-productcard
            id="laptop"
            .productData=${{
              name: 'MacBook Pro 14"',
              category: 'Computers',
              description: 'M3 Pro chip with 18GB RAM',
              price: 1999,
              originalPrice: 2199,
              iconName: 'lucide:laptop'
            }}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            id="ipad"
            .productData=${{
              name: 'iPad Air',
              category: 'Tablets', 
              description: '10.9" Liquid Retina display',
              price: 599,
              iconName: 'lucide:tablet'
            }}
            .quantity=${0}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            id="keyboard"
            .productData=${{
              name: 'Magic Keyboard',
              category: 'Accessories',
              description: 'Wireless keyboard with Touch ID',
              price: 149,
              iconName: 'lucide:keyboard'
            }}
            .quantity=${2}
          ></dees-shopping-productcard>
        </div>

        <div class="cart-summary">
          <h3 class="cart-summary-title">Shopping Cart</h3>
          <div id="interactive-cart-summary">
            <!-- Dynamically updated -->
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${'Selectable Product Cards'} .subtitle=${'Click cards or checkboxes to select products'}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{
              name: 'Sony Alpha 7 IV',
              category: 'Cameras',
              description: 'Full-frame mirrorless camera',
              price: 2498,
              iconName: 'lucide:camera'
            }}
            .selectable=${true}
            .showQuantitySelector=${false}
            @selectionChange=${(e: CustomEvent) => {
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
                const selectedProducts = [];
                selectedCards.forEach((card: DeesShoppingProductcard) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
                });
                output.textContent = selectedProducts.length > 0 
                  ? `Selected: ${selectedProducts.join(', ')}` 
                  : 'No products selected';
              }
            }}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'DJI Mini 3 Pro',
              category: 'Drones',
              description: 'Lightweight drone with 4K camera',
              price: 759,
              iconName: 'lucide:plane'
            }}
            .selectable=${true}
            .showQuantitySelector=${false}
            @selectionChange=${(e: CustomEvent) => {
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
                const selectedProducts = [];
                selectedCards.forEach((card: DeesShoppingProductcard) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
                });
                output.textContent = selectedProducts.length > 0 
                  ? `Selected: ${selectedProducts.join(', ')}` 
                  : 'No products selected';
              }
            }}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'GoPro HERO12',
              category: 'Action Cameras',
              description: '5.3K video with HyperSmooth 6.0',
              price: 399,
              originalPrice: 449,
              iconName: 'lucide:video'
            }}
            .selectable=${true}
            .showQuantitySelector=${false}
            @selectionChange=${(e: CustomEvent) => {
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
                const selectedProducts = [];
                selectedCards.forEach((card: DeesShoppingProductcard) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
                });
                output.textContent = selectedProducts.length > 0 
                  ? `Selected: ${selectedProducts.join(', ')}` 
                  : 'No products selected';
              }
            }}
          ></dees-shopping-productcard>
        </div>
        
        <div class="selected-products" id="selection-output" style="margin-top: 16px;">
          No products selected
        </div>
      </dees-panel>

      <dees-panel .title=${'Product Variations'} .subtitle=${'Different states and configurations'}>
        <div class="product-grid">
          <dees-shopping-productcard
            .productData=${{
              name: 'Limited Edition Sneakers',
              category: 'Footwear',
              description: 'Exclusive colorway - Only 500 pairs',
              price: 299,
              iconName: 'lucide:footprints',
              inStock: false,
              stockText: 'Sold Out'
            }}
            .quantity=${0}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'Minimalist Wallet',
              price: 39.99,
              iconName: 'lucide:wallet'
            }}
            .quantity=${1}
          ></dees-shopping-productcard>

          <dees-shopping-productcard
            .productData=${{
              name: 'Premium Coffee Beans',
              category: 'Food & Beverage',
              description: 'Single origin, medium roast',
              price: 18.50,
              iconName: 'lucide:coffee',
              currency: '€'
            }}
            .quantity=${2}
          ></dees-shopping-productcard>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;