import { useEffect, useState } from 'react';
import QRCode from 'qrcode';

// La tienda del comensal vive en el app de pedidos (otro dominio).
const PROD = import.meta.env.PROD;
const TIENDA = PROD ? 'https://pedir.gustitoxpress.app' : 'http://localhost:5173';

function urlMesa(slug: string, n: number) {
  return `${TIENDA}/${slug}?mesa=${n}`;
}

export default function MesasQR({ slug, cantidad }: { slug: string; cantidad: number }) {
  const [qrs, setQrs] = useState<{ n: number; qr: string }[]>([]);

  useEffect(() => {
    let cancelado = false;
    (async () => {
      const arr: { n: number; qr: string }[] = [];
      for (let n = 1; n <= cantidad; n++) {
        const qr = await QRCode.toDataURL(urlMesa(slug, n), { width: 240, margin: 1 });
        arr.push({ n, qr });
      }
      if (!cancelado) setQrs(arr);
    })();
    return () => {
      cancelado = true;
    };
  }, [slug, cantidad]);

  // Descarga el QR con el numero de mesa rotulado arriba (para identificarlo facil al imprimir).
  async function descargar(n: number) {
    const SIZE = 560;
    const PAD = 28;
    const TOP = 76;
    const BOT = 44;
    const qrUrl = await QRCode.toDataURL(urlMesa(slug, n), { width: SIZE, margin: 1 });
    const img = new Image();
    await new Promise((res, rej) => {
      img.onload = res;
      img.onerror = rej;
      img.src = qrUrl;
    });
    const canvas = document.createElement('canvas');
    canvas.width = SIZE + PAD * 2;
    canvas.height = TOP + SIZE + BOT + PAD;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // Numero de mesa arriba (discreto)
    ctx.fillStyle = '#0D0F1E';
    ctx.font = 'bold 40px Arial, sans-serif';
    ctx.fillText(`Mesa ${n}`, canvas.width / 2, TOP / 2 + PAD / 2);
    // QR
    ctx.drawImage(img, PAD, TOP, SIZE, SIZE);
    // Pie discreto
    ctx.fillStyle = '#8A8FAF';
    ctx.font = '20px Arial, sans-serif';
    ctx.fillText('Escanea para ver el menú y pedir', canvas.width / 2, TOP + SIZE + BOT / 2 + 6);
    const a = document.createElement('a');
    a.href = canvas.toDataURL('image/png');
    a.download = `mesa-${n}.png`;
    a.click();
  }

  return (
    <div className="rounded-xl border bg-superficie p-4">
      <h3 className="font-bold text-white">QR de mesas</h3>
      <p className="mb-3 text-xs text-niebla">
        Imprime un QR por mesa. El cliente lo escanea, pide y su cuenta se va acumulando; paga al final desde la mesa.
      </p>
      {cantidad === 0 ? (
        <p className="text-sm text-niebla">Pon cuantas mesas tienes en la pestana "Mesas" y aqui apareceran sus QR.</p>
      ) : (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
          {qrs.map(({ n, qr }) => (
            <div key={n} className="rounded-xl border border-white/10 bg-white p-2 text-center">
              <p className="mb-1 text-sm font-bold text-stone-900">Mesa {n}</p>
              <img src={qr} alt={`Mesa ${n}`} className="w-full" />
              <button onClick={() => descargar(n)} className="text-xs font-bold text-stone-700 underline">
                Descargar
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
