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 urlTienda(slug: string) {
  return `${TIENDA}/${slug}`;
}

export default function CompartirTienda({ slug, nombre }: { slug: string; nombre: string }) {
  const link = urlTienda(slug);
  const [qr, setQr] = useState<string | null>(null);
  const [copiado, setCopiado] = useState(false);

  useEffect(() => {
    QRCode.toDataURL(link, { width: 260, margin: 1 })
      .then(setQr)
      .catch(() => setQr(null));
  }, [link]);

  function copiar() {
    navigator.clipboard.writeText(link).then(() => {
      setCopiado(true);
      setTimeout(() => setCopiado(false), 1500);
    });
  }

  const msg = encodeURIComponent(`Haz tu pedido en ${nombre}: ${link}`);
  const wa = `https://wa.me/?text=${msg}`;
  const fb = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(link)}`;

  return (
    <div className="bg-superficie border rounded-xl p-4">
      <h3 className="font-bold">Comparte tu tienda</h3>
      <p className="text-xs text-niebla mb-3">
        Este es tu enlace. Pegalo en tu bio de Instagram y compartelo por donde quieras.
      </p>

      <div className="flex items-center gap-2 mb-3">
        <input
          readOnly
          value={link}
          onFocus={(e) => e.target.select()}
          className="input flex-1 text-xs"
        />
        <button onClick={copiar} className="btn bg-white/10 text-white ring-1 ring-white/15 whitespace-nowrap">
          {copiado ? 'Copiado' : 'Copiar'}
        </button>
      </div>

      <div className="grid grid-cols-3 gap-2 mb-4">
        <a href={wa} target="_blank" rel="noreferrer" className="btn bg-green-500 text-white text-center">
          WhatsApp
        </a>
        <a href={fb} target="_blank" rel="noreferrer" className="btn bg-blue-600 text-white text-center">
          Facebook
        </a>
        <button onClick={copiar} className="btn bg-pink-600 text-white" title="Copia el link para tu bio">
          Instagram
        </button>
      </div>

      {qr && (
        <div className="flex flex-col items-center border-t pt-3">
          <p className="text-xs text-niebla mb-2">Codigo QR para tu local o volantes</p>
          <img src={qr} alt="Codigo QR" className="w-40 h-40" />
          <a
            href={qr}
            download={`gustito-express-${slug}.png`}
            className="text-sm text-dorado font-bold mt-2"
          >
            Descargar QR
          </a>
        </div>
      )}
    </div>
  );
}
