const app = document.getElementById('app');
let mesas = [];

// Cargar datos del Local Storage al iniciar
loadData();

// Generar UI
function render() {
  app.innerHTML = '';

  const addButton = document.createElement('button');
  addButton.className = 'btn btn-success btn-block';
  addButton.textContent = '+ Añadir Mesa';
  addButton.onclick = () => {
    let mesaNumero = 1;
    if (mesas.length > 0) {
      mesaNumero = mesas[mesas.length - 1].numero + 1;
    }
    const mesaInput = document.createElement('div');
    mesaInput.className = 'mesa-input';
    mesaInput.innerHTML = `
        <div class="mesa-controls">
          <button class="btn btn-outline-secondary decrease-mesa">-</button>
          <span class="mesa-number">${mesaNumero}</span>
          <button class="btn btn-outline-secondary increase-mesa">+</button>
        </div>
        <button class="btn btn-primary confirm-mesa">Confirmar</button>
      `;
    app.innerHTML = '';
    app.appendChild(mesaInput);

    mesaInput.querySelector('.decrease-mesa').onclick = (event) => {
      event.stopPropagation();
      if (mesaNumero > 1) {
        mesaNumero--;
        mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
      }
    };

    mesaInput.querySelector('.increase-mesa').onclick = (event) => {
      event.stopPropagation();
      mesaNumero++;
      mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
    };

    mesaInput.querySelector('.confirm-mesa').onclick = (event) => {
      event.stopPropagation();
      mesas.push({ numero: mesaNumero, pedidos: [] });
      saveData();
      render();
    };
  };
  app.appendChild(addButton);

  const mesasContainer = document.createElement('div');
  mesasContainer.className = 'mesas-container';

  mesas.forEach((mesa, index) => {
    const mesaDiv = document.createElement('div');
    mesaDiv.className = 'mesa-card';
    mesaDiv.innerHTML = `
        <div class="mesa-card-body">
          <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
          <button class="btn btn-danger btn-sm delete-mesa">Eliminar</button>
        </div>
      `;
    mesaDiv.style.cursor = 'pointer';
    mesaDiv.onclick = () => gestionarMesa(index);

    mesaDiv.querySelector('.delete-mesa').onclick = (event) => {
      event.stopPropagation();
      if (confirm(`¿Estás seguro de que quieres eliminar la Mesa ${mesa.numero}?`)) {
        mesas.splice(index, 1);
        saveData();
        render();
      }
    };

    mesasContainer.appendChild(mesaDiv);
  });

  app.appendChild(mesasContainer);
}

function gestionarMesa(index) {
  const mesa = mesas[index];
  app.innerHTML = '';

  const titulo = document.createElement('h1');
  titulo.textContent = `Mesa ${mesa.numero}`;
  titulo.className = 'mesa-heading';
  app.appendChild(titulo);

  const pedidosContainer = document.createElement('div');
  pedidosContainer.className = 'pedidos-container';
  pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
  app.appendChild(pedidosContainer);

  const categorias = [
    { nombre: 'Refresco', precio: 1.5, opciones: ['Cola', 'Cola 0', 'Fanta Limón/Naranja', 'Isotónica', 'Nestea'] },
    { nombre: 'Cerveza', precio: 2.0, opciones: ['San Miguel', '0 Alcohol', 'Magna', 'Águila', 'Amstel'] },
    { nombre: 'Vino', precio: 2.0, opciones: ['Tinto', 'Blanco', 'Moscatel', 'Vermuth'] },
    { nombre: 'Copa', precio: 4.5, opciones: ['Larios', 'Whisky', 'Ron'] },
    { nombre: 'Pescado Entero', precio: 7.0, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
    { nombre: 'Pescado Media', precio: 4.5, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
    { nombre: 'Otros', precio: 8.0, opciones: ['Queso', 'Gambas'] },
  ];

  const buttonsContainer = document.createElement('div');
  buttonsContainer.className = 'buttons-container';
  app.appendChild(buttonsContainer)

  categorias.forEach(categoria => {
    const button = document.createElement('button');
    button.className = 'btn btn-info btn-block mb-2';
    button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
    button.onclick = () => {
      const opcionesContainer = document.createElement('div');
      opcionesContainer.className = 'opciones-container';

      categoria.opciones.forEach(opcion => {
        const opcionDiv = document.createElement('div');
        opcionDiv.className = 'opcion-item';
        opcionDiv.innerHTML = `
            <span>${opcion}</span>
            <div class="cantidad-controls" data-opcion="${opcion}" data-categoria="${categoria.nombre}" data-precio="${categoria.precio}">
              <button class="btn btn-outline-secondary decrease">-</button>
              <span class="cantidad">0</span>
              <button class="btn btn-outline-secondary increase">+</button>
            </div>
          `;
        opcionesContainer.appendChild(opcionDiv);

        const cantidadControls = opcionDiv.querySelector('.cantidad-controls');
        const cantidadSpan = cantidadControls.querySelector('.cantidad');
        cantidadControls.querySelector('.decrease').onclick = (event) => {
          event.stopPropagation();
          let cantidad = parseInt(cantidadSpan.textContent, 10);
          if (cantidad > 0) {
            cantidad--;
            cantidadSpan.textContent = cantidad;
          }
        };

        cantidadControls.querySelector('.increase').onclick = (event) => {
          event.stopPropagation();
          let cantidad = parseInt(cantidadSpan.textContent, 10);
          cantidad++;
          cantidadSpan.textContent = cantidad;
        };
      });

      const confirmarButton = document.createElement('button');
      confirmarButton.textContent = '✔ Confirmar';
      confirmarButton.className = 'btn btn-success btn-block';
      confirmarButton.onclick = () => {
        const cantidadControls = opcionesContainer.querySelectorAll('.cantidad-controls');
        cantidadControls.forEach(control => {
          const cantidad = parseInt(control.querySelector('.cantidad').textContent, 10);
          if (cantidad > 0) {
            const opcion = control.dataset.opcion;
            const categoria = control.dataset.categoria;
            const precio = parseFloat(control.dataset.precio);
            mesa.pedidos.push({ item: categoria, opcion, cantidad, precio });
          }
        });
        saveData();
        gestionarMesa(index);
      };
      opcionesContainer.appendChild(confirmarButton);

      app.innerHTML = '';
      app.appendChild(opcionesContainer);

      const volverButton = document.createElement('button');
      volverButton.textContent = '← Volver';
      volverButton.className = 'btn btn-outline-danger btn-block';
      volverButton.onclick = () => gestionarMesa(index);
      app.appendChild(volverButton);
    };
    buttonsContainer.appendChild(button);
  });

  const atrasButton = document.createElement('button');
  atrasButton.textContent = '← Atrás';
  atrasButton.className = 'btn btn-outline-secondary btn-block mb-2';
  atrasButton.onclick = () => render();
  app.appendChild(atrasButton);

  const totalButton = document.createElement('button');
  totalButton.textContent = 'Calcular Total';
  totalButton.className = 'btn btn-warning btn-block mb-2';
  totalButton.onclick = () => {
    const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
    alert(`El total de la mesa es: €${total.toFixed(2)}`);
  };
  app.appendChild(totalButton);

  const shareButton = document.createElement('button');
  shareButton.textContent = 'Compartir Ticket';
  shareButton.className = 'btn btn-primary btn-block';
  shareButton.onclick = () => {
    const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
    if (total > 0) {
      compartirTicket(index, total);
    } else {
      alert("La mesa no tiene productos");
    }
  };
  app.appendChild(shareButton);
}

// Compartir ticket
function compartirTicket(index, total) {
  const mesa = mesas[index];
  const ticketText = `*Chiringuito Miguelito*\n*Mesa ${mesa.numero}*\n${mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('\n')}\n*Total: €${total.toFixed(2)}*`;

  if (navigator.share) {
    navigator.share({
      title: `Ticket Mesa ${mesa.numero}`,
      text: ticketText,
    })
    .then(() => console.log('Ticket compartido'))
    .catch((error) => console.log('Error al compartir', error));
  } else {
      alert(`Tu navegador no soporta la función de compartir. Copia el ticket manualmente:\n\n${ticketText}`);
  }
}

// Guardar datos en Local Storage
function saveData() {
  localStorage.setItem('mesas', JSON.stringify(mesas));
}

// Cargar datos del Local Storage
function loadData() {
  const storedMesas = localStorage.getItem('mesas');
  if (storedMesas) {
    mesas = JSON.parse(storedMesas);
  }
}

// Inicializar la aplicación
render();