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

// 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: [] });
      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);
        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 });
          }
        });
        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 qrButton = document.createElement('button');
  qrButton.textContent = 'Generar QR';
  qrButton.className = 'btn btn-primary btn-block';
  qrButton.onclick = () => {
        const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
    if (total > 0) {
      generarTicket(index, total);
    } else {
      alert("La mesa no tiene productos");
    }
  };
  app.appendChild(qrButton);
}

// Generación del PDF con jsPDF
function generarTicket(index, total) {
  const mesa = mesas[index];

  // Crear un nuevo documento PDF
  const doc = new jsPDF();

  // Agregar contenido al PDF
  doc.setFontSize(16);
  doc.text(`Chiringuito Miguelito`, 80, 15);
  doc.setFontSize(12);
  doc.text(`Mesa ${mesa.numero}`, 10, 25);
  let yOffset = 35;
  mesa.pedidos.forEach(pedido => {
    doc.text(`${pedido.item} (${pedido.opcion || ''}) x${pedido.cantidad} - €${(pedido.precio * pedido.cantidad).toFixed(2)}`, 10, yOffset);
    yOffset += 10;
  });
  doc.text(`Total: €${total.toFixed(2)}`, 10, yOffset);

  // Generar el PDF y descargarlo
  doc.save(`ticket-mesa-${mesa.numero}.pdf`);

  // Ocultar los elementos existentes en app
  app.querySelectorAll('*').forEach(el => el.style.display = 'none');

  // Mostrar el total debajo del QR
  const totalText = document.createElement('p');
  totalText.textContent = `Total: €${total.toFixed(2)}`;
  totalText.className = 'text-center';
  app.appendChild(totalText);

  // Mostrar el QR
  const qrContainer = document.createElement('div');
  qrContainer.className = 'text-center';
  app.appendChild(qrContainer);

  const qrContent = `Mesa ${mesa.numero}\n${mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('\n')}\nTotal: €${total.toFixed(2)}`;
  const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrContent)}&size=256x256`;

  const qrImage = document.createElement('img');
  qrImage.src = qrUrl;
  qrImage.alt = 'QR Code';
  qrContainer.appendChild(qrImage);

  // Botón "Volver"
  const volverButton = document.createElement('button');
  volverButton.textContent = '← Volver';
  volverButton.className = 'btn btn-outline-danger btn-block';
  volverButton.onclick = () => {
    // Mostrar los elementos ocultos
    app.querySelectorAll('*').forEach(el => el.style.display = 'block');
    mesa.pedidos = [];
    render(); // Volver a renderizar la UI principal
  };
  app.appendChild(volverButton);
}
// Inicializar la aplicación
render();