import { formateaMoneda, formateaNumero } from "../utils.js";

// ===== Clase =====
class TiradaCard {
  constructor({ id, titulo, unidades, precioUnidad, precioTotal, selected = false, name = 'tirada',
    labels = {}, locale = (document.documentElement.lang || navigator.language || 'es-ES')
  }) {
    this.id = id;
    this.titulo = titulo;
    this.unidades = unidades;
    this.precioUnidad = precioUnidad;
    this.precioTotal = precioTotal;
    this.selected = selected;
    this.name = name;
    this.locale = locale;
    this.labels = Object.assign({
      perUnit: 'Precio por unidad',
      total: 'Total',
      select: 'Seleccionar tirada',
      selected: 'Seleccionada',
      units: 'UNIDADES'
    }, labels);
    this.$container = null; // se establece al renderizar
  }


  #title() {
    if (this.titulo) return this.titulo;
    if (this.unidades != null) return `${formateaNumero({valor: this.unidades, locale: this.locale, digits: 0})} ${this.labels.units}`;
    return '';
  }

  // pásale el contenedor donde van todas las tarjetas de este grupo
  renderCol($container) {
    this.$container = $container ? $($container) : $(document.body);

    const col = $(`
      <div class="col d-flex">
        <label class="tirada-card ${this.selected ? 'selected' : ''} w-100 h-100" for="tirada-${this.id}">
          <input type="radio" name="${this.name}" id="tirada-${this.id}" value="${this.unidades}" ${this.selected ? 'checked' : ''}>
          <div class="title">${this.#title()}</div>

          <div class="per muted">${this.labels.perUnit}</div>
          <div class="price-big">${formateaMoneda(this.precioUnidad, 4, this.locale)}</div>

          <div class="price-row">
            <div class="muted">${this.labels.total}</div>
            <div class="price-total fw-bold">${formateaMoneda(this.precioTotal, 2, this.locale)}</div>
          </div>

          <button type="button" class="btn btn-select-tirada">${this.labels.select}</button>
        </label>
      </div>
    `);

    // --- Delegación de eventos en el contenedor (una sola vez por grupo) ---
    const boundKey = `tirada-bound-${this.name}`;
    const groupName = this.name;
    const $group = this.$container;
    const labels = this.labels;

    if (!$group.data(boundKey)) {
      $group.on('change', `input[type="radio"][name="${groupName}"]`, function () {
        // radios del grupo
        const $groupRadios = $group.find(`input[type="radio"][name="${groupName}"]`);

        // resetear todas las tarjetas del grupo
        $groupRadios
          .closest('.tirada-card')
          .removeClass('selected')
          .find('.btn-select-tirada')
          .html(labels.select || 'Seleccionar tirada');

        // marcar la tarjeta seleccionada y su botón
        const $card = $(this).closest('.tirada-card');
        $card.find('.btn-select-tirada')
          .html(labels.selected + ' <i class="mdi mdi-check-circle ms-1"></i>');
        $card.addClass('selected');

        const $input = $(this);
        const detail = {
          id: $input.attr('id'),
          name: $input.attr('name'),
          unidades: Number($input.data('unidades') ?? $input.val()),
          precioUnidad: Number($input.data('precioUnidad')),
          precioTotal: Number($input.data('precioTotal'))
        };
        // jQuery: pasa 'detail' como segundo argumento del handler
        $group.trigger('tirada:changed', [detail]);
        
      });

      $group.data(boundKey, true);
    }

    const $btnLocal = col.find('.btn-select-tirada');
    if (this.selected) {
      $btnLocal.html(labels.selected + ' <i class="mdi mdi-check-circle ms-1"></i>');
    }

    // --- Comportamiento de la tarjeta/botón (local a esta tarjeta) ---
    const card = col.find('.tirada-card');

    col.find('.btn-select-tirada').on('click', (e) => {
      e.preventDefault();
      card.find('input[type="radio"]').prop('checked', true).trigger('change');
    });

    card.on('click', function (e) {
      if ($(e.target).is('.btn-select-tirada')) return;
      $(this).find('input[type="radio"]').prop('checked', true).trigger('change');
    });

    return col;
  }
}

export default TiradaCard;
