import {
  customElement,
  property,
  html,
  css,
  cssManager,
  type TemplateResult,
  DeesElement,
} from '@design.estate/dees-element';
import { demoFunc } from './dees-shopping-productcard.demo.js';
import { themeDefaultStyles } from '../00theme.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-shopping-productcard': DeesShoppingProductcard;
  }
}

export interface IProductData {
  name: string;
  category?: string;
  description?: string;
  price: number;
  originalPrice?: number;
  currency?: string;
  inStock?: boolean;
  stockText?: string;
  imageUrl?: string;
  iconName?: string;
}

@customElement('dees-shopping-productcard')
export class DeesShoppingProductcard extends DeesElement {
  public static demo = demoFunc;

  @property({ type: Object })
  accessor productData: IProductData = {
    name: 'Product Name',
    price: 0,
  };

  @property({ type: Number })
  accessor quantity: number = 0;

  @property({ type: Boolean })
  accessor showQuantitySelector: boolean = true;

  @property({ type: Boolean })
  accessor selectable: boolean = false;

  @property({ type: Boolean })
  accessor selected: boolean = false;

  public static styles = [
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
      :host {
        display: block;
      }

      .product-card {
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
      }

      .product-card:hover {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

      .product-card.selectable {
        cursor: pointer;
      }

      .product-card.selected {
        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.1)', 'hsl(213.1 93.9% 67.8% / 0.1)')};
      }

      .product-image {
        width: 100%;
        height: 180px;
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .product-image dees-icon {
        font-size: 48px;
        color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
      }

      .selection-checkbox {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 20px;
        height: 20px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 30% 6.8%)')};
        border: 2px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        cursor: pointer;
      }

      .selection-checkbox.checked {
        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
      }

      .selection-checkbox dees-icon {
        color: white;
        font-size: 12px;
        opacity: 0;
        transform: scale(0);
        transition: all 0.2s ease;
      }

      .selection-checkbox.checked dees-icon {
        opacity: 1;
        transform: scale(1);
      }

      .product-content {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
      }
      
      .product-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .product-category {
        font-size: 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1.3;
      }
      
      .product-name {
        font-size: 16px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        line-height: 1.4;
      }

      .product-description {
        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        line-height: 1.5;
        flex: 1;
      }
      
      .product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 12px;
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .product-price {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .price-current {
        font-size: 20px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .price-original {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        text-decoration: line-through;
      }

      .stock-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        margin-top: 8px;
      }

      .stock-status.in-stock {
        color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
      }

      .stock-status.out-of-stock {
        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
      }

      .stock-status dees-icon {
        font-size: 14px;
      }
    `,
  ];

  public render(): TemplateResult {
    const {
      name,
      category,
      description,
      price,
      originalPrice,
      currency = '$',
      inStock = true,
      stockText = inStock ? 'In Stock' : 'Out of Stock',
      imageUrl,
      iconName = 'lucide:package',
    } = this.productData;

    const formatPrice = (value: number) => {
      return `${currency}${value.toFixed(2)}`;
    };

    return html`
      <div 
        class="product-card ${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
        @click=${this.handleCardClick}
      >
        <div class="product-image">
          ${imageUrl ? html`
            <img src="${imageUrl}" alt="${name}">
          ` : html`
            <dees-icon .icon=${iconName}></dees-icon>
          `}
          ${this.selectable ? html`
            <div 
              class="selection-checkbox ${this.selected ? 'checked' : ''}"
              @click=${(e: Event) => {
                e.stopPropagation();
                this.handleSelectionToggle();
              }}
            >
              <dees-icon .icon=${'lucide:check'}></dees-icon>
            </div>
          ` : ''}
        </div>
        <div class="product-content">
          <div class="product-header">
            ${category ? html`<div class="product-category">${category}</div>` : ''}
            <div class="product-name">${name}</div>
          </div>
          ${description ? html`
            <div class="product-description">${description}</div>
          ` : ''}
          <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
            <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
            ${stockText}
          </div>
          <div class="product-footer">
            <div class="product-price">
              <span class="price-current">${formatPrice(price)}</span>
              ${originalPrice && originalPrice > price ? html`
                <span class="price-original">${formatPrice(originalPrice)}</span>
              ` : ''}
            </div>
            ${this.showQuantitySelector ? html`
              <dees-input-quantityselector
                .value=${this.quantity}
                @changeSubject=${(e: CustomEvent) => {
                  this.quantity = e.detail.getValue();
                  this.dispatchEvent(new CustomEvent('quantityChange', {
                    detail: { 
                      quantity: this.quantity,
                      productData: this.productData 
                    },
                    bubbles: true,
                    composed: true
                  }));
                }}
              ></dees-input-quantityselector>
            ` : ''}
          </div>
        </div>
      </div>
    `;
  }

  private handleCardClick() {
    if (this.selectable) {
      this.selected = !this.selected;
      this.dispatchEvent(new CustomEvent('selectionChange', {
        detail: { 
          selected: this.selected,
          productData: this.productData 
        },
        bubbles: true,
        composed: true
      }));
    }
  }

  private handleSelectionToggle() {
    this.selected = !this.selected;
    this.dispatchEvent(new CustomEvent('selectionChange', {
      detail: { 
        selected: this.selected,
        productData: this.productData 
      },
      bubbles: true,
      composed: true
    }));
  }
}