/* global React, ReactDOM, RIFA_DATA, Nav, Hero, Galeria, FichaTecnica, ComoFunciona, Mecanica, Selector, FAQ, CtaBanner, Footer, FloatCta, fmtMoney, pad3 */
// (useState/useRef ya están en scope desde components.jsx)

function App() {
  const D = RIFA_DATA;
  const API_BASE = 'https://www.rifasanpedro.com';

  const [ocupadosArr, setOcupadosArr] = useState([]);
  const [lugaresVendidos, setLugaresVendidos] = useState(0);
  const [loadingNumeros, setLoadingNumeros] = useState(true);

  // Fetch al backend al cargar — reemplaza datos hardcoded por reales de Supabase
  React.useEffect(() => {
    let cancel = false;
    async function load() {
      try {
        const r = await fetch(`${API_BASE}/api/numeros`, { cache: 'no-store' });
        if (!r.ok) throw new Error('http ' + r.status);
        const data = await r.json();
        if (cancel) return;
        // El backend devuelve números expandidos (0–999). Para el grid visible (0–499)
        // filtramos a los < 500; los del 500–999 son los pares automáticos.
        const visibles = (data.ocupados || []).filter(n => n < 500);
        setOcupadosArr(visibles);
        setLugaresVendidos(data.total_lugares_vendidos || 0);
      } catch (e) {
        console.error('Error fetching /api/numeros:', e);
      } finally {
        if (!cancel) setLoadingNumeros(false);
      }
    }
    load();
    return () => { cancel = true; };
  }, []);

  const takenSet = React.useMemo(() => new Set(ocupadosArr), [ocupadosArr]);
  const ocupados = ocupadosArr.length;
  const vendidos = lugaresVendidos;

  // Sync con data.js para que componentes que leen D.boletosOcupados / D.lugaresVendidos
  // tengan la data fresca (ej. CtaBanner usa restantes = lugaresTotales - vendidos)
  React.useEffect(() => {
    D.boletosOcupados = ocupadosArr;
  }, [ocupadosArr, D]);

  const [selected, setSelected] = useState([]);
  const [gracias, setGracias] = useState(null);
  // Trigger para que el FloatCta abra el flujo de pago del Selector (no solo scroll).
  // Cada incremento dispara `handlePay()` dentro del Selector vía useEffect.
  const [payTrigger, setPayTrigger] = useState(0);

  const selectorRef = useRef(null);

  function onFloatCtaClick() {
    if (selected.length > 0) {
      setPayTrigger(p => p + 1);
    } else {
      scrollToSelector();
    }
  }

  function scrollToSelector() {
    const el = selectorRef.current;
    if (!el) return;
    // El <section> tiene padding-top grande (la "franja negra" arriba del eyebrow).
    // Saltamos el padding sumándolo al top, para aterrizar justo en "Aparta tu lugar".
    const paddingTop = parseFloat(window.getComputedStyle(el).paddingTop) || 0;
    const top = el.getBoundingClientRect().top + window.scrollY + paddingTop - 16;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  // Scroll directo al grid (usado por el botón "Busca tu número" del toolbar).
  function scrollToGrid() {
    if (document.activeElement && typeof document.activeElement.blur === 'function') {
      document.activeElement.blur();
    }
    const el = document.querySelector('.tickets-grid');
    if (!el) return scrollToSelector();
    const top = el.getBoundingClientRect().top + window.scrollY - 16;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  // Scroll al toolbar (buscador + dado) — usado por el banner flotante para que
  // el usuario llegue donde están los 2 botones, no directo al grid.
  function scrollToToolbar() {
    if (document.activeElement && typeof document.activeElement.blur === 'function') {
      document.activeElement.blur();
    }
    const el = document.querySelector('.selector-toolbar');
    if (!el) return scrollToSelector();
    const top = el.getBoundingClientRect().top + window.scrollY - 16;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  async function refetchNumeros() {
    try {
      const r = await fetch(`${API_BASE}/api/numeros`, { cache: 'no-store' });
      if (!r.ok) return;
      const fresh = await r.json();
      const visibles = (fresh.ocupados || []).filter(n => n < 500);
      setOcupadosArr(visibles);
      setLugaresVendidos(fresh.total_lugares_vendidos || 0);
    } catch (e) { /* swallow — no es crítico para el overlay */ }
  }

  function onSubmit(data) {
    setGracias(data);
    setSelected([]);
    // Refrescamos disponibilidad para que el grid muestre el lugar como ocupado
    refetchNumeros();
    // Esperar al render del overlay y luego scroll arriba
    setTimeout(() => window.scrollTo({ top: 0, behavior: 'instant' }), 50);
  }

  function closeGracias() {
    setGracias(null);
  }

  // Para el float CTA: cada selección = 1 lugar = $2,400 (su par +500 va automático)
  const sumaParcial = selected.length * D.boletos.precioLugar;

  return (
    <>
      <Nav onCtaClick={scrollToSelector} />
      <div className="page-banner">
        <div className="container">
          <h1 className="page-banner-title">
            Rifa <span className="y">San Pedro</span>
          </h1>
        </div>
      </div>
      <Hero ocupados={ocupados} vendidos={vendidos} onCtaClick={scrollToSelector} />
      <Galeria />
      <Selector
        takenSet={takenSet}
        selected={selected}
        setSelected={setSelected}
        sectionRef={selectorRef}
        onSubmit={onSubmit}
        apiBase={API_BASE}
        vendidos={vendidos}
        payTrigger={payTrigger}
      />
      <FAQ />
      <Footer />
      <FloatCta onCtaClick={onFloatCtaClick} selected={selected} total={sumaParcial} />

      {gracias && <Gracias data={gracias} onClose={closeGracias} />}
    </>
  );
}

// ============================================================
// GRACIAS overlay
// ============================================================
function Gracias({ data, onClose }) {
  const { method, numbers, form, amount, whatsappUrl, reservationId } = data;
  const isInstant = method === 'tarjeta';
  const D = RIFA_DATA;
  const sorted = [...numbers].sort((a, b) => a - b);
  const waHref = whatsappUrl || D.contacto.whatsappLink;
  const cardRef = useRef(null);
  const [exporting, setExporting] = useState(false);

  async function downloadAsImage() {
    if (!cardRef.current || !window.html2canvas) return;
    setExporting(true);

    const card = cardRef.current;
    const parent = card.parentNode;
    const nextSibling = card.nextSibling;

    // Esconde botones de acción y close durante la captura
    const actionsEl = card.querySelector('.gracias-actions');
    const closeEl = card.querySelector('.gracias-close');
    const prevActionsDisplay = actionsEl ? actionsEl.style.display : '';
    const prevCloseDisplay = closeEl ? closeEl.style.display : '';
    if (actionsEl) actionsEl.style.display = 'none';
    if (closeEl) closeEl.style.display = 'none';

    // Mover el card fuera del overlay (el padre `.gracias` tiene backdrop-filter
    // y rgba que confunden a html2canvas, opacando los colores). Lo ponemos
    // temporalmente al body con position fija fuera de pantalla, capturamos y
    // restauramos.
    const prevPosition = card.style.position;
    const prevTop = card.style.top;
    const prevLeft = card.style.left;
    const prevTransform = card.style.transform;
    const prevAnimation = card.style.animation;
    const prevZIndex = card.style.zIndex;

    document.body.appendChild(card);
    card.style.position = 'fixed';
    card.style.top = '0';
    card.style.left = '0';
    card.style.transform = 'none';
    card.style.animation = 'none';
    card.style.zIndex = '-1';        // ponlo detrás de todo para que no se vea
    card.style.opacity = '1';

    try {
      const canvas = await window.html2canvas(card, {
        backgroundColor: '#16130f',
        scale: 2,
        useCORS: true,
        logging: false,
        allowTaint: true
      });

      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        const idSuffix = reservationId ? reservationId.slice(0, 8) : Date.now();
        a.download = `rifa-san-pedro-comprobante-${idSuffix}.png`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(() => URL.revokeObjectURL(url), 1000);
      }, 'image/png');
    } catch (e) {
      console.error('export error:', e);
      alert('No se pudo generar la imagen. Intenta otra vez.');
    } finally {
      // Restaurar todo
      card.style.position = prevPosition;
      card.style.top = prevTop;
      card.style.left = prevLeft;
      card.style.transform = prevTransform;
      card.style.animation = prevAnimation;
      card.style.zIndex = prevZIndex;
      card.style.opacity = '';
      if (actionsEl) actionsEl.style.display = prevActionsDisplay;
      if (closeEl) closeEl.style.display = prevCloseDisplay;
      // Regresar el card al overlay
      if (nextSibling) parent.insertBefore(card, nextSibling);
      else parent.appendChild(card);
      setExporting(false);
    }
  }

  return (
    <div className="gracias" role="dialog" aria-modal="true">
      <div className="gracias-card" ref={cardRef}>
        <button className="gracias-close" onClick={onClose} aria-label="Cerrar">×</button>

        {/* Banner export — visible siempre en el overlay y se captura al descargar */}
        <div className="gracias-banner">
          Rifa <span className="y">San Pedro</span>
        </div>

        <div className={`gracias-check ${isInstant ? '' : 'gracias-clock'}`}>
          {isInstant ? (
            <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          ) : (
            <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="12 7 12 12 15 14"/>
            </svg>
          )}
        </div>

        {isInstant ? (
          <>
            <h2>¡Boletos confirmados!</h2>
            <p>
              <b style={{ color: 'var(--ink)' }}>{form.nombre || 'Tus boletos'}</b>,
              tu pago está confirmado. Tus boletos están listos para el sorteo.
            </p>
          </>
        ) : (
          <>
            <h2>¡Boletos apartados a tu nombre!</h2>
            <p>
              <b style={{ color: 'var(--ink)' }}>{form.nombre || 'Tus boletos'}</b>,
              tus números quedan <b style={{ color: 'var(--y)' }}>separados a tu nombre</b> hasta que confirmemos tu pago.
            </p>
          </>
        )}
        <div className="nums">
          {sorted.map(n => <span className="n" key={n}>#{pad3(n)}</span>)}
        </div>

        <div className="gracias-meta">
          <div className="row">
            <span className="k">Nombre</span>
            <span className="v">{form.nombre || '—'}</span>
          </div>
          <div className="row">
            <span className="k">WhatsApp</span>
            <span className="v">{form.telefono || '—'}</span>
          </div>
          <div className="row">
            <span className="k">Método de pago</span>
            <span className="v" style={{ textTransform: 'capitalize' }}>{method}</span>
          </div>
          <div className="row">
            <span className="k">Monto</span>
            <span className="v" style={{ color: 'var(--y)' }}>${fmtMoney(amount)} MXN</span>
          </div>
        </div>

        <div className="small">
          Sorteo: últimos 3 dígitos · Lotería Nacional · fecha por confirmar
        </div>
        <div className="small" style={{ marginTop: 6, opacity: 0.6 }}>
          {(() => {
            const mty = new Date(Date.now() - 6 * 60 * 60 * 1000);
            return `Apartado: ${mty.toISOString().slice(0, 10)} · ${mty.toISOString().slice(11, 16)} MTY`;
          })()}
        </div>

        <div className="actions gracias-actions" style={{ flexDirection: 'column', gap: 10 }}>
          <button
            type="button"
            className="btn-download"
            onClick={downloadAsImage}
            disabled={exporting}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="7 10 12 15 17 10"/>
              <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            {exporting ? 'Generando…' : 'Descargar comprobante'}
          </button>
          <a
            className="btn-wa btn-wa-lg btn-wa-pulse"
            href={waHref}
            target="_blank"
            rel="noreferrer"
            onClick={() => setTimeout(onClose, 200)}
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A11 11 0 0 0 3.6 17.3L2 22l4.8-1.5A11 11 0 1 0 20.5 3.5ZM12 20.2c-1.7 0-3.4-.4-4.8-1.3l-.3-.2-2.9.9.9-2.8-.2-.3A8.9 8.9 0 1 1 12 20.2Z"/></svg>
            Continuar
          </a>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// ============================================================
// Auto-reload: detecta nuevos deploys y refresca al cliente
// que tiene el sitio abierto sin tocar nada.
// ============================================================
(function setupAutoReload() {
  let lastVersion = null;
  async function check() {
    try {
      const r = await fetch('/api/version', { cache: 'no-store' });
      if (!r.ok) return;
      const { version } = await r.json();
      if (!lastVersion) {
        lastVersion = version;
        return;
      }
      if (version && version !== lastVersion) {
        console.log('[auto-reload] Nueva versión detectada, recargando…');
        window.location.reload();
      }
    } catch (_) { /* sin red, ignorar */ }
  }
  check();
  setInterval(check, 60000); // cada 60 segundos
})();