/* Modal base + Pix / Cartão dialogs */

const { useEffect: useEffect_m, useState: useState_m } = React;

/* ---------- Modal shell ---------- */
function Modal({ open, onClose, title, children, footer }) {
  useEffect_m(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" role="dialog" aria-modal="true" onClick={e => e.stopPropagation()}>
        <button className="modal-close" aria-label="Fechar" onClick={onClose}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
            <path d="M6 6l12 12M6 18L18 6" />
          </svg>
        </button>
        <div className="modal-frame" />
        <div className="modal-body">
          {title && <h3 className="modal-title">{title}</h3>}
          {children}
          {footer && <div className="modal-footer">{footer}</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------- Pix dialog ---------- */
function PixDialog({ open, onClose, gift }) {
  const [copied, setCopied] = useState_m(false);
  const info = window.PIX_INFO || {};

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(info.key || "");
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    } catch (e) {
      // Fallback for older browsers
      const ta = document.createElement("textarea");
      ta.value = info.key || "";
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    }
  };

  const fmt = (n) => "R$ " + n.toLocaleString("pt-BR") + ",00";
  const remaining = gift ? Math.max(0, gift.price - gift.raised) : null;

  return (
    <Modal open={open} onClose={onClose} title="Presentear via Pix">
      {gift && (
        <p className="modal-lede">
          Você está presenteando <em>{gift.name}</em>.
          {remaining > 0 && (
            <> Sugestão: <strong>{fmt(remaining)}</strong> para concluir, ou qualquer outro valor.</>
          )}
        </p>
      )}

      {info.qrcodeUrl && (
        <div className="qrcode">
          <img src={info.qrcodeUrl} alt="QR Code Pix" />
        </div>
      )}

      <div className="pix-key">
        <div className="pix-key-row">
          <div>
            <span className="caps">{info.keyType || "Chave Pix"}</span>
            <div className="key">{info.key}</div>
          </div>
          <button className="btn copy-btn" onClick={copy}>
            {copied ? "✓ Copiado" : "Copiar"}
          </button>
        </div>
        <div className="pix-meta">
          <div>
            <span className="caps">Titular</span>
            <div>{info.holder}</div>
          </div>
          {info.bank && (
            <div>
              <span className="caps">Banco</span>
              <div>{info.bank}</div>
            </div>
          )}
        </div>
      </div>

      <p className="modal-note">{info.message}</p>
    </Modal>
  );
}

/* ---------- Cartão dialog ---------- */
function CartaoDialog({ open, onClose, gift }) {
  const info = window.CARTAO_INFO || {};
  const fmt = (n) => "R$ " + n.toLocaleString("pt-BR") + ",00";

  const waNumber = (info.whatsapp || "").replace(/[^\d+]/g, "");
  const waText = gift
    ? `Oi! Quero presentear "${gift.name}" (${fmt(gift.price)}) no cartão. Pode me mandar o link?`
    : "Oi! Quero pagar um presente no cartão. Pode me mandar o link?";
  const waUrl = `https://wa.me/${waNumber.replace(/^\+/, "")}?text=${encodeURIComponent(waText)}`;

  return (
    <Modal open={open} onClose={onClose} title="Comprar presente no cartão">
      {gift && (
        <p className="modal-lede">
          Você quer presentear <em>{gift.name}</em> — valor total <strong>{fmt(gift.price)}</strong>.
        </p>
      )}
      <p className="modal-note" style={{ marginTop: 18 }}>{info.message}</p>

      <a className="btn wa-btn" href={waUrl} target="_blank" rel="noopener">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M20.5 3.5A11.4 11.4 0 0 0 12.1 0C5.7 0 .6 5.1.6 11.5c0 2 .5 4 1.5 5.7L0 24l7-1.8c1.7.9 3.6 1.4 5.5 1.4 6.4 0 11.5-5.1 11.5-11.5 0-3.1-1.2-6-3.4-8.2zM12 21.4c-1.7 0-3.4-.5-4.9-1.3l-.4-.2-4.1 1.1 1.1-4-.3-.4a9.5 9.5 0 1 1 17.7-4.8 9.5 9.5 0 0 1-9.1 9.6zm5.3-7.1c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.8-.7-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5-.1-.1-.7-1.6-.9-2.2-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1.1 2.8 1.2 3c.1.2 2.2 3.3 5.3 4.6 2.6 1.1 3.1.9 3.7.8.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.6-.4z"/>
        </svg>
        Falar com os noivos no WhatsApp
      </a>
    </Modal>
  );
}

Object.assign(window, { Modal, PixDialog, CartaoDialog });