class TechnicalSheetEnhanced extends HTMLElement {
  connectedCallback() {
    const equipment = JSON.parse(this.getAttribute('equipment') || '{}');
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const syncStatus = equipment.sync_status || "synchronized";
    const statusConfig = {
      synchronized: {
        label: "✓ Sincronizado",
        color: "bg-green-500/20 text-green-700 border-green-300",
      },
      recovered: {
        label: "↑ Recuperado",
        color: "bg-blue-500/20 text-blue-700 border-blue-300",
      },
      orphaned: {
        label: "⚠ Orfanato",
        color: "bg-orange-500/20 text-orange-700 border-orange-300",
      },
    };
    const status = statusConfig[syncStatus];

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-bottom: 1rem;
        }
        .card {
          background: rgba(255, 255, 255, 0.5);
          border-radius: 0.5rem;
          border: 2px solid #e5e7eb;
          padding: 1.25rem;
          position: relative;
          overflow: hidden;
          transition: all 0.2s ease;
        }
        .card:hover {
          border-color: rgba(59, 130, 246, 0.5);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .bg-linear-to-br {
          background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.05), transparent);
        }
        .absolute {
          position: absolute;
        }
        .inset-0 {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
        .opacity-0 {
          opacity: 0;
        }
        .group:hover .group-hover-opacity-100 {
          opacity: 1;
        }
        .transition-opacity {
          transition: opacity 0.2s ease;
        }
        .relative {
          position: relative;
        }
        .flex {
          display: flex;
        }
        .gap-1 {
          gap: 0.25rem;
        }
        .p-2 {
          padding: 0.5rem;
        }
        .text-xs {
          font-size: 0.75rem;
          line-height: 1rem;
        }
        .font-bold {
          font-weight: 700;
        }
        .border {
          border-width: 1px;
        }
        .rounded-full {
          border-radius: 9999px;
        }
        .items-start {
          align-items: flex-start;
        }
        .justify-between {
          justify-content: space-between;
        }
        .mb-4 {
          margin-bottom: 1rem;
        }
        .pt-6 {
          padding-top: 1.5rem;
        }
        .flex-1 {
          flex: 1 1 0%;
        }
        .min-w-0 {
          min-width: 0;
        }
        .mb-2 {
          margin-bottom: 0.5rem;
        }
        .text-lg {
          font-size: 1.125rem;
          line-height: 1.75rem;
        }
        .mb-1 {
          margin-bottom: 0.25rem;
        }
        .truncate {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .text-sm {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
        .text-muted-foreground {
          color: #6b7280;
        }
        .shrink-0 {
          flex-shrink: 0;
        }
        .ml-3 {
          margin-left: 0.75rem;
        }
        .w-16 {
          width: 4rem;
        }
        .h-16 {
          height: 4rem;
        }
        .rounded-xl {
          border-radius: 0.75rem;
        }
        .border-2 {
          border-width: 2px;
        }
        .border-border\/50 {
          border-color: rgba(229, 231, 235, 0.5);
        }
        .items-center {
          align-items: center;
        }
        .justify-center {
          justify-content: center;
        }
        .overflow-hidden {
          overflow: hidden;
        }
        .w-full {
          width: 100%;
        }
        .h-full {
          height: 100%;
        }
        .object-contain {
          object-fit: contain;
        }
        .p-2 {
          padding: 0.5rem;
        }
        .grid {
          display: grid;
        }
        .grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .gap-2 {
          gap: 0.5rem;
        }
        .p-2 {
          padding: 0.5rem;
        }
        .rounded-lg {
          border-radius: 0.5rem;
        }
        .bg-muted\/30 {
          background-color: rgba(243, 244, 246, 0.3);
        }
        .text-accent {
          color: #3b82f6;
        }
        .space-y-2 > * + * {
          margin-top: 0.5rem;
        }
        .p-3 {
          padding: 0.75rem;
        }
        .bg-accent\/5 {
          background-color: rgba(59, 130, 246, 0.05);
        }
        .border-accent\/20 {
          border-color: rgba(59, 130, 246, 0.2);
        }
        .text-2xl {
          font-size: 1.5rem;
          line-height: 2rem;
        }
        .mb-0\.5 {
          margin-bottom: 0.125rem;
        }
        .pt-2 {
          padding-top: 0.5rem;
        }
        button {
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.375rem;
          font-weight: 500;
          transition: all 0.2s ease;
        }
        .bg-linear-to-r {
          background: linear-gradient(to right, #3b82f6, rgba(59, 130, 246, 0.9));
        }
        .hover-bg-accent\/10:hover {
          background-color: rgba(59, 130, 246, 0.1);
        }
        .bg-green-500\/10 {
          background-color: rgba(16, 185, 129, 0.1);
        }
        .border-green-500\/20 {
          border-color: rgba(16, 185, 129, 0.2);
        }
        .text-green-600 {
          color: #059669;
        }
        .text-green-700 {
          color: #047857;
        }
        .font-semibold {
          font-weight: 600;
        }
        .text-green-600\/70 {
          color: rgba(5, 150, 105, 0.7);
        }
      </style>
      <div class="card group">
        <div class="absolute inset-0 bg-linear-to-br opacity-0 group-hover-opacity-100 transition-opacity"></div>

        <div class="relative">
          <!-- Status badge -->
          <div class="absolute top-0 right-0 flex gap-1 p-2">
            <span class="text-xs font-bold ${status.color} border rounded-full px-2 py-1">
              ${status.label}
            </span>
          </div>

          <div class="flex items-start justify-between mb-4 pt-6">
            <div class="flex-1 min-w-0">
              <span class="text-xs font-bold border rounded-full px-2 py-1 mb-2 inline-block">
                ${equipment.category?.toUpperCase() || 'CATEGORY'}
              </span>
              <h3 class="text-lg font-bold mb-1 truncate">
                ${equipment.manufacturer || 'Manufacturer'}
              </h3>
              <p class="text-sm text-muted-foreground truncate">
                ${equipment.model || 'Model'}
              </p>
            </div>
            <div class="shrink-0 ml-3">
              <div class="w-16 h-16 rounded-xl bg-linear-to-br from-muted/50 to-muted/20 flex items-center justify-center overflow-hidden border-2 border-border/50">
                <img src="${equipment.image_url}" 
                     alt="${equipment.manufacturer} ${equipment.model}"
                     class="w-full h-full object-contain p-2">
              </div>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-2 mb-4">
            <div class="flex items-center gap-2 p-2 rounded-lg bg-muted/30">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor">
                <path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l-14.95-42.29a8,8,0,0,0-15.15,0L108.1,90.82,45.47,112.43a8,8,0,0,0,0,15.15l62.63,21.61,14.92,42.19a8,8,0,0,0,15.15,0l14.92-42.19,62.63-21.61A8,8,0,0,0,215.79,118.17Z"></path>
              </svg>
              <div class="min-w-0">
                <div class="text-xs text-muted-foreground truncate">Saída</div>
                <div class="text-sm font-bold truncate">${equipment.power_kw || 0} kW</div>
              </div>
            </div>

            <div class="flex items-center gap-2 p-2 rounded-lg bg-muted/30">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor">
                <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path>
              </svg>
              <div class="min-w-0">
                <div class="text-xs text-muted-foreground truncate">Conexão</div>
                <div class="text-sm font-bold truncate">${equipment.voltage_v || 0}V</div>
              </div>
            </div>

            ${equipment.mppt_count ? `
            <div class="flex items-center gap-2 p-2 rounded-lg bg-muted/30">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor">
                <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z"></path>
              </svg>
              <div class="min-w-0">
                <div class="text-xs text-muted-foreground truncate">Rastreadores</div>
                <div class="text-sm font-bold truncate">${equipment.mppt_count}</div>
              </div>
            </div>
            ` : ''}

            ${equipment.efficiency_percent ? `
            <div class="flex items-center gap-2 p-2 rounded-lg bg-muted/30">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor">
                <path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34Z"></path>
              </svg>
              <div class="min-w-0">
                <div class="text-xs text-muted-foreground truncate">Rendimento</div>
                <div class="text-sm font-bold truncate">${equipment.efficiency_percent}%</div>
              </div>
            </div>
            ` : ''}
          </div>

          <div class="mb-4 space-y-2">
            ${equipment.price_brl != null ? `
            <div class="p-3 rounded-lg bg-accent/5 border border-accent/20">
              <div class="text-2xl font-bold text-accent mb-0.5">
                R$ ${equipment.price_brl.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}
              </div>
              <div class="text-xs text-muted-foreground">
                Orçamento disponível
              </div>
            </div>
            ` : ''}

            ${equipment.recovered_value && equipment.recovered_value > 0 ? `
            <div class="p-2 rounded-lg bg-green-500/10 border border-green-500/20">
              <div class="flex items-center gap-1 text-xs">
                <svg width="14" height="14" viewBox="0 0 256 256" fill="#059669" class="text-green-600 fill-current">
                  <path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l-14.95-42.29a8,8,0,0,0-15.15,0L108.1,90.82,45.47,112.43a8,8,0,0,0,0,15.15l62.63,21.61,14.92,42.19a8,8,0,0,0,15.15,0l14.92-42.19,62.63-21.61A8,8,0,0,0,215.79,118.17Z"></path>
                </svg>
                <span class="text-green-700 font-semibold">
                  +R$ ${equipment.recovered_value.toLocaleString("pt-BR", { maximumFractionDigits: 0 })}
                </span>
              </div>
              <div class="text-xs text-green-600/70">
                Valor sincronizado
              </div>
            </div>
            ` : ''}
          </div>

          <div class="flex gap-2 pt-2">
            <button class="flex-1 bg-linear-to-r text-white py-2 px-4 text-sm">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor" class="mr-1">
                <path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
              </svg>
              Saiba Mais
            </button>
            <button class="hover-bg-accent/10 border border-gray-200 py-2 px-3 text-sm">
              <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor">
                <path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    `;

    // Add event listeners
    const viewBtn = this.shadowRoot.querySelector('button:first-of-type');
    viewBtn.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('view-details', {
        detail: equipment,
        bubbles: true,
        composed: true
      }));
    });
  }
}

customElements.define('technical-sheet-enhanced', TechnicalSheetEnhanced);