// recovery.jsx — Pop-up de carrinho abandonado
// Aparece quando o usuário tem itens no carrinho mas saiu da página de checkout sem concluir.

const RECOVERY_KEY = 'cc26.recover';
const RECOVERY_DELAY = 25 * 1000;       // 25s para aparecer pela primeira vez
const RECOVERY_COOLDOWN = 12 * 60 * 60 * 1000; // 12h depois de fechar/converter

function CartRecovery({ navigate, route }) {
  const cart = React.useContext(CartContext);
  const [show, setShow] = React.useState(false);
  const [timeLeft, setTimeLeft] = React.useState(15 * 60); // 15min countdown

  // Verifica se deve mostrar o pop-up
  React.useEffect(() => {
    if (!cart || !cart.items.length) {
      setShow(false);
      return;
    }
    // Não exibe nas páginas de checkout / confirmação / carrinho
    if (['cart', 'checkout', 'confirmation'].includes(route.name)) {
      setShow(false);
      return;
    }
    // Cooldown — não chateia o usuário
    try {
      const last = +localStorage.getItem(RECOVERY_KEY) || 0;
      if (Date.now() - last < RECOVERY_COOLDOWN) return;
    } catch (e) {}

    const t = setTimeout(() => setShow(true), RECOVERY_DELAY);
    return () => clearTimeout(t);
  }, [cart && cart.items.length, route.name]);

  // Countdown do cupom
  React.useEffect(() => {
    if (!show) return;
    const i = setInterval(() => setTimeLeft((t) => Math.max(0, t - 1)), 1000);
    return () => clearInterval(i);
  }, [show]);

  // Exit-intent: usuário move o mouse pra cima da janela
  React.useEffect(() => {
    if (!cart || !cart.items.length) return;
    if (['cart', 'checkout', 'confirmation'].includes(route.name)) return;
    try {
      const last = +localStorage.getItem(RECOVERY_KEY) || 0;
      if (Date.now() - last < RECOVERY_COOLDOWN) return;
    } catch (e) {}

    const onLeave = (e) => {
      if (e.clientY < 10 && !show) {
        setShow(true);
      }
    };
    document.addEventListener('mouseleave', onLeave);
    return () => document.removeEventListener('mouseleave', onLeave);
  }, [cart && cart.items.length, route.name, show]);

  if (!show || !cart || !cart.items.length) return null;

  const close = () => {
    setShow(false);
    try { localStorage.setItem(RECOVERY_KEY, String(Date.now())); } catch (e) {}
  };

  const apply = () => {
    cart.setCoupon('VOLTA10');
    navigate('cart');
    close();
  };

  const items = cart.items.map((i) => PRODUCTS.find((p) => p.id === i.id)).filter(Boolean);
  const visibleItems = items.slice(0, 3);
  const hidden = items.length - visibleItems.length;

  const mins = Math.floor(timeLeft / 60).toString().padStart(2, '0');
  const secs = (timeLeft % 60).toString().padStart(2, '0');

  return (
    <div className="recover-pop">
      <div className="recover-pop__head">
        <strong>⚽ ESPERA AÍ, COLECIONADOR!</strong>
        <button className="recover-pop__close" onClick={close} aria-label="Fechar"><Icon name="close" size={14} /></button>
      </div>
      <div className="recover-pop__body">
        <div className="recover-pop__items">
          {visibleItems.map((p) => (
            <div key={p.id} className="recover-pop__art"><ProductImage product={p} /></div>
          ))}
          {hidden > 0 && <div className="recover-pop__more">+{hidden}</div>}
        </div>
        <p>
          Você deixou <strong>{cart.totalCount} {cart.totalCount === 1 ? 'item' : 'itens'}</strong> no carrinho. Estamos guardando para você — mas o estoque é limitado.
        </p>
        <div className="recover-pop__coupon">
          <div>
            <div className="recover-pop__coupon-code">VOLTA10</div>
            <div className="recover-pop__coupon-off">10% off · válido só agora</div>
          </div>
          <div className="recover-pop__timer">
            <span className="recover-pop__timer-dot" />
            {mins}:{secs}
          </div>
        </div>
        <div className="recover-pop__cta">
          <button className="btn btn--ghost btn--sm" onClick={close}>Agora não</button>
          <button className="btn btn--gold btn--sm" onClick={apply}>Aplicar e finalizar</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CartRecovery });