(function() {
  const BrandCatalog = {
    state: 'brands',
    _allBrands: [],
    _lastItems: [],
    _offset: 0,
    _limit: 50,
    _total: 0,
    _allowedBrands: [],

    // Navigation state
    nav: {
      brand: null,
      brandId: null,
      model: null,
      modelId: null,
      year: null,
      yearId: null,
      engine: null,
      myeId: null,
      category: null,
      categoryId: null
    },

    el: function(id) { return document.getElementById(id); },

    _getToken: function() {
      return localStorage.getItem('pos_token');
    },

    _headers: function() {
      var token = this._getToken();
      return {
        'Authorization': 'Bearer ' + (token || ''),
        'Content-Type': 'application/json'
      };
    },

    _checkAuth: function(resp) {
      if (resp.status === 401) {
        localStorage.removeItem('pos_token');
        window.location.href = '/pos/login';
        return false;
      }
      return true;
    },

    show: function() {
      if (!this._getToken()) {
        window.location.href = '/pos/login';
        return;
      }
      this.el('brandCatalogOverlay').style.display = 'block';
      document.body.style.overflow = 'hidden';
      this.loadBrands();
    },

    hide: function() {
      this.el('brandCatalogOverlay').style.display = 'none';
      document.body.style.overflow = '';
      this.reset();
    },

    reset: function() {
      this.state = 'brands';
      this.nav = { brand: null, brandId: null, model: null, modelId: null, year: null, yearId: null, engine: null, myeId: null, category: null, categoryId: null };
      this._allBrands = [];
      this._lastItems = [];
      this._offset = 0;
      this._total = 0;
      this.el('brandCatalogSearch').innerHTML = '';
    },

    loading: function(on) {
      var el = this.el('brandCatalogLoading');
      if (on) el.classList.add('is-visible');
      else el.classList.remove('is-visible');
    },

    setContent: function(html) {
      this.el('brandCatalogContent').innerHTML = html;
    },

    setSearch: function(html) {
      this.el('brandCatalogSearch').innerHTML = html;
    },

    setBreadcrumb: function(html) {
      this.el('brandCatalogBreadcrumb').innerHTML = html;
    },

    buildBreadcrumb: function() {
      var parts = [];
      parts.push('<a href="javascript:void(0)" class="breadcrumb__link" onclick="BrandCatalog.loadBrands()">Marcas</a>');
      if (this.nav.brand) {
        parts.push('<a href="javascript:void(0)" class="breadcrumb__link" onclick=\'BrandCatalog.selectBrand(' + JSON.stringify(this.nav.brand) + ',' + this.nav.brandId + ')\'>' + escapeHtml(this.nav.brand) + '</a>');
      }
      if (this.nav.model) {
        parts.push('<a href="javascript:void(0)" class="breadcrumb__link" onclick=\'BrandCatalog.selectModel(' + this.nav.modelId + ',' + JSON.stringify(this.nav.model) + ')\'>' + escapeHtml(this.nav.model) + '</a>');
      }
      if (this.nav.year) {
        parts.push('<a href="javascript:void(0)" class="breadcrumb__link" onclick=\'BrandCatalog.selectYear(' + this.nav.yearId + ',' + this.nav.year + ')\'>' + this.nav.year + '</a>');
      }
      if (this.nav.engine) {
        parts.push('<a href="javascript:void(0)" class="breadcrumb__link" onclick=\'BrandCatalog.selectEngine(' + this.nav.myeId + ',' + JSON.stringify(this.nav.engine) + ')\'>' + escapeHtml(this.nav.engine) + '</a>');
      }
      if (this.nav.category) {
        parts.push('<span class="breadcrumb__current">' + escapeHtml(this.nav.category) + '</span>');
      }
      this.setBreadcrumb('<nav class="breadcrumb">' + parts.join('<span class="breadcrumb__sep">&rsaquo;</span>') + '</nav>');
    },

    // ---------- BRANDS ----------
    loadBrands: function() {
      this.loading(true);
      this.state = 'brands';
      this.reset();
      this.setBreadcrumb('<nav class="breadcrumb"><span class="breadcrumb__current">Marcas de vehiculo</span></nav>');
      this.setSearch(
        '<input type="text" id="brandSearchInput" placeholder="Buscar marca..." ' +
        'class="level-filter" oninput="BrandCatalog.filterBrands(this.value)">'
      );
      var self = this;
      fetch('/pos/api/catalog/vehicle-brands', { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          self._allBrands = data.brands || [];
          if (!self._allBrands.length) {
            self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">No se encontraron marcas.</div></div>');
            return;
          }
          self.renderBrandList(self._allBrands);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar marcas</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderBrandList: function(brands) {
      var html = '<div class="nav-grid">';
      brands.forEach(function(b) {
        html += '<div class="nav-card" onclick=\'BrandCatalog.selectBrand(' + JSON.stringify(b.name) + ',' + b.id + ')\'>' +
          '<div class="nav-card__name">' + escapeHtml(b.name) + '</div>' +
          '</div>';
      });
      html += '</div>';
      this.setContent(html);
    },

    filterBrands: function(query) {
      var q = query.toLowerCase().trim();
      if (!q) {
        this.renderBrandList(this._allBrands);
        return;
      }
      var filtered = this._allBrands.filter(function(b) {
        return b.name.toLowerCase().indexOf(q) !== -1;
      });
      this.renderBrandList(filtered);
    },

    selectBrand: function(brandName, brandId) {
      this.nav.brand = brandName;
      this.nav.brandId = brandId;
      this.loadModels(brandId);
    },

    // ---------- MODELS ----------
    loadModels: function(brandId) {
      this.loading(true);
      this.state = 'models';
      this.setSearch('');
      this.buildBreadcrumb();
      var self = this;
      fetch('/pos/api/catalog/models?brand_id=' + encodeURIComponent(brandId), { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          var models = data.data || [];
          if (!models.length) {
            self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">No se encontraron modelos.</div></div>');
            return;
          }
          self.renderModelList(models);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar modelos</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderModelList: function(models) {
      var html = '<div class="nav-grid">';
      models.forEach(function(m) {
        html += '<div class="nav-card" onclick=\'BrandCatalog.selectModel(' + m.id_model + ',' + JSON.stringify(m.display_name || m.name_model) + ')\'>' +
          '<div class="nav-card__name">' + escapeHtml(m.display_name || m.name_model) + '</div>' +
          '</div>';
      });
      html += '</div>';
      this.setContent(html);
    },

    selectModel: function(modelId, modelName) {
      this.nav.model = modelName;
      this.nav.modelId = modelId;
      this.loadYears(modelId);
    },

    // ---------- YEARS ----------
    loadYears: function(modelId) {
      this.loading(true);
      this.state = 'years';
      this.setSearch('');
      this.buildBreadcrumb();
      var self = this;
      fetch('/pos/api/catalog/years?model_id=' + encodeURIComponent(modelId), { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          var years = data.data || [];
          if (!years.length) {
            self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">No se encontraron años.</div></div>');
            return;
          }
          self.renderYearList(years);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar años</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderYearList: function(years) {
      var html = '<div class="nav-grid nav-grid--years">';
      years.forEach(function(y) {
        html += '<div class="nav-card nav-card--year" onclick=\'BrandCatalog.selectYear(' + y.id_year + ',' + y.year_car + ')\'>' +
          '<div class="nav-card__name">' + y.year_car + '</div>' +
          '</div>';
      });
      html += '</div>';
      this.setContent(html);
    },

    selectYear: function(yearId, yearCar) {
      this.nav.year = yearCar;
      this.nav.yearId = yearId;
      this.loadEngines(this.nav.modelId, yearId);
    },

    // ---------- ENGINES ----------
    loadEngines: function(modelId, yearId) {
      this.loading(true);
      this.state = 'engines';
      this.setSearch('');
      this.buildBreadcrumb();
      var self = this;
      fetch('/pos/api/catalog/engines?model_id=' + encodeURIComponent(modelId) + '&year_id=' + encodeURIComponent(yearId), { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          var engines = data.data || [];
          if (!engines.length) {
            self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">No se encontraron motores.</div></div>');
            return;
          }
          self.renderEngineList(engines);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar motores</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderEngineList: function(engines) {
      var html = '<div class="nav-grid">';
      engines.forEach(function(e) {
        html += '<div class="nav-card" onclick=\'BrandCatalog.selectEngine(' + e.id_mye + ',' + JSON.stringify(e.name_engine) + ')\'>' +
          '<div class="nav-card__name">' + escapeHtml(e.name_engine) + '</div>' +
          '<div class="nav-card__sub">' + escapeHtml(e.trim_level || '') + '</div>' +
          '</div>';
      });
      html += '</div>';
      this.setContent(html);
    },

    selectEngine: function(myeId, engineName) {
      this.nav.engine = engineName;
      this.nav.myeId = myeId;
      this.loadCategories(myeId);
    },

    // ---------- CATEGORIES ----------
    loadCategories: function(myeId) {
      this.loading(true);
      this.state = 'categories';
      this.setSearch('');
      this.buildBreadcrumb();
      var self = this;
      fetch('/pos/api/catalog/categories?mye_id=' + encodeURIComponent(myeId) + '&mode=oem', { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          self._allowedBrands = data.allowed_brands || [];
          var categories = data.data || [];
          if (!categories.length) {
            var msg = 'No se encontraron categorias.';
            if (self._allowedBrands.length) {
              msg = 'Este vehiculo no tiene cobertura de ' + self._allowedBrands.join(', ') + '.';
            }
            self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">' + msg + '</div><div class="empty-state__subtitle">Prueba con otro vehiculo o contacta a soporte para ampliar el catalogo.</div></div>');
            return;
          }
          self.renderCategoryList(categories);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar categorias</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderCategoryList: function(categories) {
      var html = '<div class="nav-grid">';
      categories.forEach(function(c) {
        html += '<div class="nav-card" onclick=\'BrandCatalog.selectCategory(' + c.id_part_category + ',' + JSON.stringify(c.name) + ')\'>' +
          '<div class="nav-card__name">' + escapeHtml(c.name) + '</div>' +
          '<div class="nav-card__sub">' + (c.part_count || 0) + ' refacciones</div>' +
          '</div>';
      });
      html += '</div>';
      this.setContent(html);
    },

    selectCategory: function(catId, catName) {
      this.nav.category = catName;
      this.nav.categoryId = catId;
      this._offset = 0;
      this.loadParts(this.nav.myeId, catId, '');
    },

    // ---------- PARTS ----------
    loadParts: function(myeId, categoryId, searchTerm) {
      this.loading(true);
      this.state = 'parts';
      this.buildBreadcrumb();
      this.setSearch(
        '<div style="display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;">' +
          '<input type="text" id="partsSearchInput" placeholder="Buscar refaccion..." value="' + escapeHtml(searchTerm || '') + '" ' +
          'class="level-filter" ' +
          'onkeydown="if(event.key===\'Enter\')BrandCatalog.searchParts(this.value)">' +
          '<button class="btn btn-primary" onclick="BrandCatalog.searchParts(document.getElementById(\'partsSearchInput\').value)">Buscar</button>' +
          '<button class="btn btn-ghost" onclick="BrandCatalog.clearPartsSearch()">Limpiar</button>' +
        '</div>'
      );
      var url = '/pos/api/catalog/mye-parts?mye_id=' + encodeURIComponent(myeId) + '&category_id=' + encodeURIComponent(categoryId) +
                '&limit=' + this._limit + '&offset=' + this._offset;
      if (searchTerm) {
        url += '&search=' + encodeURIComponent(searchTerm);
      }
      var self = this;
      fetch(url, { headers: this._headers() })
        .then(function(r) {
          if (!self._checkAuth(r)) return null;
          return r.json();
        })
        .then(function(data) {
          if (!data) return;
          self.loading(false);
          self._allowedBrands = data.allowed_brands || [];
          self._lastItems = data.items || [];
          self._total = data.total || 0;
          self._offset = data.offset || 0;
          self.renderPartsList(data.items || [], searchTerm);
        })
        .catch(function(err) {
          self.loading(false);
          self.setContent('<div class="empty-state is-visible"><div class="empty-state__title">Error al cargar refacciones</div><div class="empty-state__subtitle">' + escapeHtml(err.message) + '</div></div>');
        });
    },

    renderPartsList: function(items, searchTerm) {
      var html = '';
      if (!items.length) {
        var msg = 'No se encontraron refacciones.';
        if (this._allowedBrands.length) {
          msg = 'No hay refacciones de ' + this._allowedBrands.join(', ') + ' en esta categoria.';
        }
        html += '<div class="empty-state is-visible">' +
          '<div class="empty-state__title">' + msg + '</div>' +
          '<div class="empty-state__subtitle"><button class="btn btn-primary" onclick="BrandCatalog.loadCategories(' + this.nav.myeId + ')">Volver a categorias</button></div>' +
          '</div>';
        this.setContent(html);
        return;
      }

      var startIdx = this._offset + 1;
      var endIdx = this._offset + items.length;
      html += '<div style="grid-column:1/-1;font-size:var(--text-body-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);">' +
        'Mostrando ' + startIdx + '-' + endIdx + ' de ' + this._total + ' refacciones' +
        '</div>';

      html += '<div class="nav-grid nav-grid--parts">';
      items.forEach(function(p) {
        var hasAm = !!p.manufacturer;
        var price = p.local_price
          ? '$' + Number(p.local_price).toFixed(2)
          : (p.price_usd ? '$' + Number(p.price_usd).toFixed(2) : 'Consultar precio');
        var stockBadge = p.local_stock > 0
          ? '<span class="stock-badge stock-badge--local">En stock</span>'
          : '<span class="stock-badge stock-badge--none">Sin stock local</span>';
        var imgHtml = p.image_url
          ? '<img src="' + escapeHtml(p.image_url) + '" alt="">'
          : '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>';
        var brandLine = hasAm
          ? '<div style="font-size:var(--text-caption);color:var(--color-accent);font-weight:600;">' + escapeHtml(p.manufacturer) + '</div>'
          : '';
        html += '<div class="part-card">' +
          '<div class="part-card__image">' + imgHtml + '</div>' +
          '<div class="part-card__body">' +
            brandLine +
            '<div class="part-card__oem">' + escapeHtml(p.oem_part_number || 'N/A') + '</div>' +
            '<div class="part-card__name">' + escapeHtml(p.name || '') + '</div>' +
          '</div>' +
          '<div class="part-card__footer">' +
            stockBadge +
            '<span class="part-card__price">' + price + '</span>' +
          '</div>' +
          '<button class="btn btn-primary" onclick="BrandCatalog.addToCart(' + p.id + ', event)">Agregar</button>' +
          '</div>';
      });
      html += '</div>';

      html += this.renderPagination();

      this.setContent(html);
    },

    renderPagination: function() {
      var hasPrev = this._offset > 0;
      var hasNext = (this._offset + this._limit) < this._total;
      var pageNum = Math.floor(this._offset / this._limit) + 1;
      var totalPages = Math.ceil(this._total / this._limit) || 1;
      var html = '<div class="pagination">' +
        '<button class="page-item" ' + (hasPrev ? '' : 'disabled') +
        ' onclick="BrandCatalog.goToPage(' + (this._offset - this._limit) + ')">&larr; Anterior</button>' +
        '<span style="font-size:var(--text-body-sm);color:var(--color-text-muted);">Pagina ' + pageNum + ' de ' + totalPages + '</span>' +
        '<button class="page-item" ' + (hasNext ? '' : 'disabled') +
        ' onclick="BrandCatalog.goToPage(' + (this._offset + this._limit) + ')">Siguiente &rarr;</button>' +
        '</div>';
      return html;
    },

    searchParts: function(term) {
      this._offset = 0;
      this.loadParts(this.nav.myeId, this.nav.categoryId, term);
    },

    clearPartsSearch: function() {
      this._offset = 0;
      this.loadParts(this.nav.myeId, this.nav.categoryId, '');
    },

    goToPage: function(newOffset) {
      if (newOffset < 0) return;
      this._offset = newOffset;
      var searchInput = document.getElementById('partsSearchInput');
      var term = searchInput ? searchInput.value : '';
      this.loadParts(this.nav.myeId, this.nav.categoryId, term);
    },

    addToCart: function(partId, event) {
      if (event) event.stopPropagation();
      var part = this._lastItems.find(function(p) { return p.id === partId; });
      if (!part) {
        alert('Error: no se encontro la refaccion');
        return;
      }
      if (window.CatalogApp && CatalogApp.addToCart) {
        var isAftermarket = !!part.manufacturer;
        CatalogApp.addToCart({
          id: part.oem_id || part.id,
          part_number: part.oem_part_number || 'N/A',
          name: part.name || 'Refaccion',
          brand: part.manufacturer || '',
          price: part.local_price || part.price_usd || 0,
          tax_rate: 0.16,
          unit: 'PZA',
          stock: part.local_stock || 0,
          source: isAftermarket ? 'aftermarket' : 'oem-brand',
          inventory_id: null
        }, 1);
        var btn = event.target;
        var oldText = btn.textContent;
        btn.textContent = 'Agregado!';
        btn.style.background = 'var(--color-success)';
        setTimeout(function() { btn.textContent = oldText; btn.style.background = ''; }, 1500);
        return;
      }
      alert('Carrito no disponible. Asegurate de que la pagina haya cargado completamente.');
    }
  };

  function escapeHtml(text) {
    if (!text) return '';
    var div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  window.BrandCatalog = BrandCatalog;
})();