// Retos de gamificación — "estado sin terminar" para retención diaria
// Basado en framework Nick Saraev: progreso visible, recompensa clara, urgencia.

(function () {
  const RETOS_CSS = `
@keyframes reto-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes reto-ping {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes reto-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.reto-shine-bar {
  background: linear-gradient(90deg,
    oklch(0.58 0.12 155) 0%,
    oklch(0.78 0.18 90) 40%,
    oklch(0.58 0.12 155) 100%
  );
  background-size: 200% auto;
  animation: reto-shine 1.8s linear infinite;
}
.reto-badge-pop {
  animation: reto-pop 0.45s cubic-bezier(.2,.9,.3,1) both;
}
.reto-ping {
  animation: reto-ping 1.4s cubic-bezier(0,.2,.8,1) infinite;
}
`;

  if (!document.getElementById('retos-styles')) {
    const styleEl = document.createElement('style');
    styleEl.id = 'retos-styles';
    styleEl.textContent = RETOS_CSS;
    document.head.appendChild(styleEl);
  }

  // ── helpers ─────────────────────────────────────────────
  function mesActual(pedidos) {
    const now = new Date();
    return (pedidos || []).filter(
      (p) =>
        p.fechaCreacion.getMonth() === now.getMonth() &&
        p.fechaCreacion.getFullYear() === now.getFullYear()
    );
  }

  function diasRestantesMes() {
    const now = new Date();
    const ultimo = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    return ultimo.getDate() - now.getDate();
  }

  // ── Barra de progreso ────────────────────────────────────
  function BarraProgreso({ pct, completo }) {
    const T = window.T;
    return (
      <div
        style={{
          height: 5,
          background: 'oklch(0.88 0.005 75)',
          borderRadius: 999,
          overflow: 'hidden',
          marginTop: 10,
        }}
      >
        <div
          className={completo ? 'reto-shine-bar' : ''}
          style={{
            width: `${Math.min(100, pct)}%`,
            height: '100%',
            background: completo
              ? undefined
              : pct >= 70
              ? T.warn
              : T.accent,
            borderRadius: 999,
            transition: 'width 0.7s cubic-bezier(.2,.9,.3,1)',
          }}
        />
      </div>
    );
  }

  // ── Badge de completado ──────────────────────────────────
  function BadgeCompleto({ label }) {
    const T = window.T;
    return (
      <div
        className="reto-badge-pop"
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 5,
          background: 'linear-gradient(135deg, oklch(0.72 0.16 85), oklch(0.58 0.14 55))',
          color: '#fff',
          borderRadius: 999,
          padding: '3px 10px 3px 6px',
          fontFamily: T.mono,
          fontSize: 10,
          letterSpacing: 0.8,
          fontWeight: 700,
          boxShadow: '0 4px 12px oklch(0.72 0.16 85 / 0.35)',
        }}
      >
        <window.Icon name="check" size={13} color="#fff" strokeWidth={2.5} />
        {label}
      </div>
    );
  }

  // ── Tarjeta de reto individual ───────────────────────────
  function RetoCard({ icono, titulo, descripcion, pct, recompensa, diasRestantes, completo, valorActual, valorMeta, unidad }) {
    const T = window.T;
    const pctDisplay = Math.min(100, Math.round(pct));

    return (
      <div
        style={{
          background: completo
            ? 'linear-gradient(135deg, oklch(0.94 0.04 155 / 0.6), oklch(0.96 0.03 90 / 0.4))'
            : T.paperAlt,
          border: `1px solid ${completo ? 'oklch(0.72 0.1 155 / 0.35)' : T.hairline}`,
          borderRadius: 18,
          padding: '14px 16px',
          flex: '0 0 auto',
          width: 210,
          scrollSnapAlign: 'start',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        {/* Ping dot — solo si está incompleto y cerca */}
        {!completo && pct >= 60 && (
          <div
            style={{
              position: 'absolute',
              top: 12,
              right: 12,
              width: 8,
              height: 8,
              borderRadius: 999,
              background: T.warn,
            }}
          >
            <div
              className="reto-ping"
              style={{
                position: 'absolute',
                inset: 0,
                borderRadius: 999,
                background: T.warn,
              }}
            />
          </div>
        )}

        {/* Icono + título */}
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
          <div
            style={{
              width: 32,
              height: 32,
              borderRadius: 10,
              background: completo ? 'oklch(0.58 0.12 155 / 0.15)' : T.accentSoft,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <window.Icon
              name={icono}
              size={16}
              color={completo ? 'oklch(0.42 0.12 155)' : T.accent}
              strokeWidth={2}
            />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{
                fontFamily: T.serif,
                fontSize: 15,
                color: T.ink,
                letterSpacing: -0.3,
                lineHeight: 1.1,
              }}
            >
              {titulo}
            </div>
            <div
              style={{
                fontFamily: T.sans,
                fontSize: 11,
                color: T.inkMute,
                marginTop: 2,
                lineHeight: 1.3,
              }}
            >
              {descripcion}
            </div>
          </div>
        </div>

        {/* Progreso numérico */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: 8,
          }}
        >
          <span
            style={{
              fontFamily: T.mono,
              fontSize: 11,
              color: completo ? 'oklch(0.42 0.12 155)' : T.inkSoft,
              letterSpacing: 0.3,
            }}
          >
            {valorActual}
            <span style={{ color: T.inkMute, fontSize: 10 }}>
              {' '}/ {valorMeta} {unidad}
            </span>
          </span>
          <span
            style={{
              fontFamily: T.mono,
              fontSize: 12,
              color: completo ? 'oklch(0.42 0.12 155)' : pct >= 70 ? T.warn : T.accent,
              fontWeight: 600,
            }}
          >
            {pctDisplay}%
          </span>
        </div>

        <BarraProgreso pct={pct} completo={completo} />

        {/* Footer: recompensa o badge */}
        <div
          style={{
            marginTop: 10,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          {completo ? (
            <BadgeCompleto label={recompensa} />
          ) : (
            <span
              style={{
                fontFamily: T.sans,
                fontSize: 11,
                color: T.accentInk,
                background: T.accentSoft,
                padding: '3px 8px',
                borderRadius: 6,
              }}
            >
              {recompensa}
            </span>
          )}
          {!completo && (
            <span
              style={{
                fontFamily: T.mono,
                fontSize: 9,
                color: T.inkMute,
                letterSpacing: 0.5,
                textTransform: 'uppercase',
              }}
            >
              {diasRestantes}d
            </span>
          )}
        </div>
      </div>
    );
  }

  // ── Sección principal ────────────────────────────────────
  function RetosSection({ vendedora, pedidos, billing }) {
    const T = window.T;
    const { Icon } = window;

    const pedidosMes = mesActual(pedidos || []);
    const dias = diasRestantesMes();
    const state = billing && billing.state ? billing.state : { facturas: [], pagos: [] };

    // ── Reto 1: Inicio Rápido ──
    // "3 productos en un solo pedido" — mide el pedido con más productos
    const maxProductosEnPedido = (pedidos || []).reduce(
      (max, p) => Math.max(max, (p.productos || []).reduce((s, x) => s + (x.cantidad || 1), 0)),
      0
    );
    const META_PRODUCTOS = 3;
    const pctInicio = (maxProductosEnPedido / META_PRODUCTOS) * 100;

    // ── Reto 2: Facturación mensual ──
    const facturasAprobadas = (state.facturas || []).filter(
      (f) => !f.estado || f.estado === 'procesada'
    );
    const now = new Date();
    const facturasEstesMes = facturasAprobadas.filter((f) => {
      const d = f.fecha ? new Date(f.fecha) : null;
      return d && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();
    });
    const totalFacturado = facturasEstesMes.reduce(
      (s, f) => s + (f.total || f.monto || 0),
      0
    );
    // fallback: suma de pedidos del mes si no hay facturas
    const totalFallback = pedidosMes.reduce(
      (s, p) => s + (p.productos || []).reduce((a, x) => a + x.precio * x.cantidad, 0),
      0
    );
    const totalMes = totalFacturado > 0 ? totalFacturado : totalFallback;
    const META_FACTURACION = 200;
    const pctFacturacion = (totalMes / META_FACTURACION) * 100;

    // ── Reto 3: Diversidad de marcas ──
    const MARCAS_CONOCIDAS = ['Lbel', 'CyZone', 'Esika', 'lbel', 'cyzone', 'esika'];
    const marcasUnicas = new Set(
      (pedidosMes || []).flatMap((p) =>
        (p.productos || []).map((x) => (x.catalogo || x.marca || '').toLowerCase())
      )
    ).size;
    const META_MARCAS = 2;
    const pctMarcas = (marcasUnicas / META_MARCAS) * 100;

    const retos = [
      {
        id: 'inicio',
        icono: 'bolt',
        titulo: 'Arranque fuerte',
        descripcion: '3+ productos en un pedido',
        pct: pctInicio,
        completo: maxProductosEnPedido >= META_PRODUCTOS,
        valorActual: maxProductosEnPedido,
        valorMeta: META_PRODUCTOS,
        unidad: 'prod.',
        recompensa: '⚡ Vendedora activa',
        diasRestantes: dias,
      },
      {
        id: 'facturacion',
        icono: 'trending',
        titulo: 'Meta del mes',
        descripcion: `Factura $${META_FACTURACION} este mes`,
        pct: pctFacturacion,
        completo: totalMes >= META_FACTURACION,
        valorActual: '$' + totalMes.toFixed(0),
        valorMeta: '$' + META_FACTURACION,
        unidad: '',
        recompensa: '🏆 Top vendedora',
        diasRestantes: dias,
      },
      {
        id: 'diversidad',
        icono: 'sparkle',
        titulo: 'Colección completa',
        descripcion: 'Vende de 2 marcas distintas',
        pct: pctMarcas,
        completo: marcasUnicas >= META_MARCAS,
        valorActual: marcasUnicas,
        valorMeta: META_MARCAS,
        unidad: 'marcas',
        recompensa: '✨ Catálogo Pro',
        diasRestantes: dias,
      },
    ];

    const completados = retos.filter((r) => r.completo).length;

    return (
      <div style={{ marginBottom: 24 }}>
        {/* Encabezado de sección */}
        <div
          style={{
            padding: '0 24px',
            marginBottom: 12,
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <div
              style={{
                fontFamily: T.mono,
                fontSize: 9,
                letterSpacing: 1.8,
                textTransform: 'uppercase',
                color: T.inkMute,
                marginBottom: 2,
              }}
            >
              Campaña activa
            </div>
            <div
              style={{
                fontFamily: T.serif,
                fontSize: 22,
                color: T.ink,
                letterSpacing: -0.5,
                lineHeight: 1,
              }}
            >
              Retos
            </div>
          </div>
          <div
            style={{
              fontFamily: T.mono,
              fontSize: 10,
              color: completados === retos.length ? 'oklch(0.42 0.12 155)' : T.inkMute,
              letterSpacing: 0.5,
            }}
          >
            {completados}/{retos.length} completados
          </div>
        </div>

        {/* Carrusel de tarjetas */}
        <div
          style={{
            display: 'flex',
            gap: 10,
            padding: '0 24px',
            overflowX: 'auto',
            scrollSnapType: 'x mandatory',
            WebkitOverflowScrolling: 'touch',
            scrollBehavior: 'smooth',
          }}
        >
          {retos.map((r) => (
            <RetoCard key={r.id} {...r} />
          ))}
        </div>

        {/* Hint de estado incompleto */}
        {completados < retos.length && (
          <div
            style={{
              margin: '10px 24px 0',
              fontFamily: T.sans,
              fontSize: 11,
              color: T.inkMute,
              display: 'flex',
              alignItems: 'center',
              gap: 4,
            }}
          >
            <Icon name="clock" size={11} color={T.inkMute} />
            {dias === 0
              ? 'Último día de campaña'
              : `${dias} ${dias === 1 ? 'día' : 'días'} para cerrar esta campaña`}
          </div>
        )}
      </div>
    );
  }

  window.RetosSection = RetosSection;
})();