// VerifyFacturaScreen — pantalla intermedia entre "enviar pedido" y "siendo procesada"
// La vendedora revisa exactamente lo que pidió, total y ganancia estimada,
// y confirma con un botón. Reduce errores y disputas posteriores.
function VerifyFacturaScreen({ vendedora, factura, pedido, onConfirm, onBack }) {
  const T = window.T;
  const { Icon, ProductTile } = window;

  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');

  const productos = (factura?.productosOriginales && factura.productosOriginales.length)
    ? factura.productosOriginales
    : (pedido?.productos || []);

  const total = productos.reduce((s, p) => s + (+p.precio || 0) * (+p.cantidad || 0), 0);
  const items = productos.reduce((s, p) => s + (+p.cantidad || 0), 0);
  const descuentoPct = factura?.descuentoPct || 20;
  const ganancia = +(total * descuentoPct / 100).toFixed(2);
  const aPagar = +(total * (100 - descuentoPct) / 100).toFixed(2);
  const paymentCampaignId = factura?.campaignId || pedido?.campaignId || pedido?.campanaId || pedido?.campana;
  const hasPaymentPlan = window.getPaymentPlanForCampaign && window.getPaymentPlanForCampaign(paymentCampaignId);
  const paymentPlanLabel = hasPaymentPlan?.label || paymentCampaignId || 'esta campana';

  async function handleConfirm() {
    if (submitting || !factura?.id) return;
    setSubmitting(true);
    setError('');
    try {
      const updated = await window.pedidosApi.verificarFactura(factura.id);
      onConfirm && onConfirm(updated);
    } catch (e) {
      console.error('verificar err', e);
      setError(e.message || 'No se pudo confirmar la factura');
      setSubmitting(false);
    }
  }

  return (
    <div style={{ width: '100%', minHeight: '100%', background: T.paper, paddingBottom: 140 }}>
      {/* Header */}
      <div style={{ padding: '52px 24px 16px' }}>
        <button onClick={onBack} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          fontFamily: T.mono, fontSize: 11, letterSpacing: 1.4,
          color: T.inkSoft, padding: 0, marginBottom: 18,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <Icon name="chevronL" size={14} color={T.inkSoft} /> ATRÁS
        </button>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase', color: T.accent, marginBottom: 6 }}>
          Paso 2 de 2 · Verifica tu factura
        </div>
        <div style={{ fontFamily: T.serif, fontSize: 30, letterSpacing: -0.6, lineHeight: 1.1, color: T.ink }}>
          ¿Confirmas que esta es tu factura?
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, marginTop: 6, lineHeight: 1.4 }}>
          Revisa que todos los productos y cantidades estén correctos. Una vez confirmes, Elizabeth procesará tu pedido.
        </div>
      </div>

      {/* Card de resumen */}
      <div style={{ padding: '0 24px', marginBottom: 18 }}>
        <div style={{
          background: T.ink, color: T.paper, borderRadius: 22, padding: '20px 22px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', right: -25, top: -15, fontSize: 180, lineHeight: 1,
            fontFamily: T.serif, fontStyle: 'italic', color: 'rgba(255,255,255,0.04)',
            pointerEvents: 'none',
          }}>$</div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: T.mono, fontSize: 9, letterSpacing: 1.6, textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>
                Total del pedido
              </div>
              <div style={{ fontFamily: T.serif, fontSize: 48, lineHeight: 1, letterSpacing: -1.8, marginTop: 4 }}>
                ${total.toFixed(2)}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>
                {items} {items === 1 ? 'unidad' : 'unidades'} · {productos.length} {productos.length === 1 ? 'producto' : 'productos'}
              </div>
            </div>
            <div style={{
              background: 'oklch(0.55 0.14 155 / 0.18)',
              border: '1.5px solid oklch(0.65 0.16 155 / 0.5)',
              borderRadius: 14, padding: '10px 14px', textAlign: 'right',
              minWidth: 120,
            }}>
              <div style={{ fontFamily: T.mono, fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase', color: 'oklch(0.85 0.12 155)' }}>
                Ganancia estimada
              </div>
              <div style={{ fontFamily: T.serif, fontSize: 22, lineHeight: 1.1, color: 'oklch(0.85 0.12 155)', fontWeight: 600, marginTop: 2 }}>
                ${ganancia.toFixed(2)}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 1 }}>
                {descuentoPct}% sobre total
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Lista de productos a confirmar */}
      <div style={{ padding: '0 24px' }}>
        <div style={{
          fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6, textTransform: 'uppercase',
          color: T.inkMute, marginBottom: 10,
        }}>
          Productos en tu pedido
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {productos.map((p, i) => (
            <div key={`${p.codigo}-${i}`} style={{
              padding: '12px 14px', borderRadius: 14,
              background: T.paperAlt, border: `1px solid ${T.hairline}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <ProductTile tono={p.tono} catalogo={p.catalogo} imagen={p.imagen} imagenFallback={p.imagenFallback} imagenSwatch={p.imagenSwatch} imagenSwatchFallback={p.imagenSwatchFallback} imageKind={p.imageKind} size={48} radius={10} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: T.mono, fontSize: 9, letterSpacing: 1, color: T.inkMute }}>
                  {p.codigo} · {p.catalogo}
                </div>
                <div style={{
                  fontFamily: T.serif, fontSize: 14, color: T.ink,
                  letterSpacing: -0.2, lineHeight: 1.2, marginTop: 2,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>
                  {p.nombre}
                </div>
                {p.tono && (
                  <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 11, color: T.inkSoft, marginTop: 2 }}>
                    {p.tono}
                  </div>
                )}
                {p.descripcion && (
                  <div style={{ fontFamily: T.sans, fontSize: 11, color: T.inkSoft, marginTop: 3, lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {p.descripcion}
                  </div>
                )}
                {p.notaOferta && (
                  <div style={{
                    fontFamily: T.sans, fontSize: 10.5, color: 'oklch(0.46 0.13 55)',
                    marginTop: 4, lineHeight: 1.25, display: '-webkit-box',
                    WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden',
                  }}>
                    {p.notaOferta}
                  </div>
                )}
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{ fontFamily: T.mono, fontSize: 10, color: T.inkMute }}>
                  ×{p.cantidad}
                </div>
                <div style={{ fontFamily: T.serif, fontSize: 16, color: T.ink, fontWeight: 600, marginTop: 2 }}>
                  ${(+p.precio * +p.cantidad).toFixed(2)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {hasPaymentPlan && window.PaymentPlanCard && (
        <div style={{ padding: '24px 24px 8px' }}>
          <window.PaymentPlanCard
            campaignId={paymentCampaignId}
            aPagar={aPagar}
            compact
            showAmounts={false}
            note={`Fechas oficiales ${paymentPlanLabel}. El monto final puede ajustarse si algun producto no llega.`}
          />
        </div>
      )}

      {!hasPaymentPlan && (
        <>
      {/* Note about cuotas */}
      <div style={{ padding: '24px 24px 8px' }}>
        <div style={{
          background: 'oklch(0.96 0.02 80)',
          border: '1px solid oklch(0.85 0.04 80)',
          borderRadius: 14, padding: '12px 14px',
          display: 'flex', gap: 10,
        }}>
          <Icon name="info" size={16} color={T.inkSoft} />
          <div style={{ fontFamily: T.sans, fontSize: 12, color: T.inkSoft, lineHeight: 1.4 }}>
            Las <b>cuotas y fechas de pago</b> aparecerán cuando Elizabeth procese tu factura. Si algún producto no llega, el total se ajusta antes de pagar.
          </div>
        </div>
      </div>

        </>
      )}

      {/* Error */}
      {error && (
        <div style={{ padding: '0 24px 8px' }}>
          <div style={{
            background: 'oklch(0.94 0.06 25)', color: 'oklch(0.35 0.16 25)',
            borderRadius: 12, padding: '10px 14px',
            fontFamily: T.sans, fontSize: 12,
          }}>
            {error}
          </div>
        </div>
      )}

      {/* CTA flotante */}
      <div style={{
        position: 'fixed', left: 0, right: 0, bottom: 0,
        padding: '14px 18px calc(20px + env(safe-area-inset-bottom, 0px))',
        background: `linear-gradient(to top, ${T.paper} 70%, ${T.paper}00)`,
        zIndex: 30, pointerEvents: 'none',
      }}>
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 8,
          maxWidth: 480, margin: '0 auto', pointerEvents: 'auto',
        }}>
          <button onClick={handleConfirm} disabled={submitting} style={{
            padding: '18px 22px', borderRadius: 16,
            background: submitting ? T.inkSoft : (T.accent || '#E89B6E'),
            color: '#fff', border: 'none', cursor: submitting ? 'wait' : 'pointer',
            fontFamily: T.sans, fontSize: 16, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 12px 24px rgba(232,155,110,0.35)',
          }}>
            {submitting ? 'Confirmando…' : <>✓ Estoy de acuerdo, esta es mi factura</>}
          </button>
          <button onClick={onBack} disabled={submitting} style={{
            padding: '12px 18px', borderRadius: 14,
            background: 'transparent', color: T.inkSoft,
            border: 'none', cursor: 'pointer',
            fontFamily: T.sans, fontSize: 13,
          }}>
            Editar productos
          </button>
        </div>
      </div>
    </div>
  );
}

window.VerifyFacturaScreen = VerifyFacturaScreen;