// factura-express.jsx - Link directo C09 para verificar factura sin login.

function FacturaExpressScreen({ facturaId, vendedoraId }) {
  const T = window.T;
  const { ProductTile } = window;
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [data, setData] = React.useState(null);
  const [mode, setMode] = React.useState('review');
  const [nota, setNota] = React.useState('');
  const [producto, setProducto] = React.useState({ codigo: '', nombre: '', cantidad: 1 });
  const [submitting, setSubmitting] = React.useState(false);
  const [pagoModal, setPagoModal] = React.useState(false);

  const reload = React.useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const result = await window.pedidosApi.obtenerFacturaExpress({ facturaId, vendedoraId });
      setData(result);
    } catch (e) {
      console.error('factura express load', e);
      setError(e.message || 'No pude abrir la factura');
    } finally {
      setLoading(false);
    }
  }, [facturaId, vendedoraId]);

  React.useEffect(() => { reload(); }, [reload]);

  if (loading) {
    return (
      <div style={{ width: '100%', minHeight: '100%', background: T.paper, padding: '90px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: T.serif, fontSize: 22, color: T.ink }}>Abriendo tu factura...</div>
      </div>
    );
  }

  if (error || !data?.factura) {
    return (
      <div style={{ width: '100%', minHeight: '100%', background: T.paper, padding: '80px 24px', textAlign: 'center' }}>
        <div style={{ fontFamily: T.serif, fontSize: 24, color: T.ink }}>No pude abrir esta factura</div>
        <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, marginTop: 8, lineHeight: 1.4 }}>
          {error || 'Pide a Inova que te envie el link nuevamente.'}
        </div>
      </div>
    );
  }

  const factura = data.factura;
  const vendedora = data.vendedora || { id: vendedoraId, nombre: 'Vendedora' };
  const resolvedVendedoraId = vendedora?.id || vendedoraId;
  const pagos = data.pagos || [];
  const feedback = data.feedback || window.pedidosApi.latestFacturaFeedback?.(factura);
  const productos = (factura.productosFinales && factura.productosFinales.length)
    ? factura.productosFinales
    : (factura.productosOriginales || []);
  const saldo = window.facturaSaldo ? window.facturaSaldo(factura, pagos) : Math.max(0, +factura.aPagar || 0);
  const isProcesada = window.facturaEsCobrable ? window.facturaEsCobrable(factura) : factura.estado === 'procesada';
  const resumenPagos = window.facturaPagosResumen
    ? window.facturaPagosResumen(factura, pagos)
    : { montoVerificado: 0, montoPendiente: 0, saldoConPendientes: saldo };
  const hasIssue = feedback && feedback.respuesta !== 'aceptada';
  const accepted = feedback?.respuesta === 'aceptada';
  const paymentPlan = window.getPaymentPlanForCampaign ? window.getPaymentPlanForCampaign(factura.campaignId) : null;
  const paymentPlanLabel = paymentPlan?.label || factura.campaignId || 'esta campana';

  async function submitFeedback(tipo) {
    if (submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const cleanProduct = {
        codigo: String(producto.codigo || '').trim(),
        nombre: String(producto.nombre || '').trim(),
        cantidad: Math.max(1, parseInt(producto.cantidad, 10) || 1),
      };
      if (tipo === 'falta_producto' && !cleanProduct.codigo && !cleanProduct.nombre) {
        setError('Indica al menos el codigo o el nombre del producto que falta.');
        setSubmitting(false);
        return;
      }
      const result = await window.pedidosApi.enviarFeedbackFacturaExpress({
        facturaId: factura.id || facturaId,
        vendedoraId: resolvedVendedoraId,
        tipo,
        nota,
        producto: tipo === 'falta_producto' ? cleanProduct : null,
      });
      setData(prev => ({ ...prev, factura: result.factura, feedback: result.feedback }));
      setMode('sent');
    } catch (e) {
      console.error('factura express feedback', e);
      setError(e.message || 'No pude guardar tu respuesta');
    } finally {
      setSubmitting(false);
    }
  }

  const feedbackLabel = {
    aceptada: 'Factura aceptada',
    falta_producto: 'Reporto producto faltante',
    producto_sobra: 'Reporto producto de mas',
    cambio_cantidad: 'Reporto cantidad incorrecta',
    identidad_incorrecta: 'Reporto que esta factura no es suya',
  }[feedback?.respuesta];

  return (
    <div style={{ width: '100%', minHeight: '100%', background: T.paper, paddingBottom: 120 }}>
      <div style={{ padding: '54px 24px 14px' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', color: T.accent }}>
          Verificacion {factura.campaignId || ''}
        </div>
        <div style={{ fontFamily: T.serif, fontSize: 32, lineHeight: 1.02, color: T.ink, letterSpacing: -0.8, marginTop: 6 }}>
          Revisa tu factura
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.42, marginTop: 8 }}>
          {vendedora.nombre}, confirma si estos son los productos correctos. Si falta algo o ves algo de mas, avisanos aqui.
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 12, color: T.accentInk || T.ink, lineHeight: 1.35, marginTop: 10, padding: '10px 12px', borderRadius: 14, background: T.accentSoft }}>
          Para esta campana no necesitas clave ni descargar la app. Usa este link para revisar tu factura.
        </div>
      </div>

      <div style={{ padding: '0 24px 16px' }}>
        <div style={{
          padding: 18,
          borderRadius: 22,
          background: accepted ? 'oklch(0.94 0.06 155)' : hasIssue ? 'oklch(0.95 0.06 55)' : T.ink,
          color: accepted || hasIssue ? T.ink : '#fff',
        }}>
          <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.3, textTransform: 'uppercase', opacity: 0.7 }}>
            {isProcesada ? 'Factura final' : 'En revision antes de cerrar'}
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, marginTop: 8 }}>
            <div>
              <div style={{ fontFamily: T.serif, fontSize: 44, lineHeight: 0.95, letterSpacing: -1.6 }}>
                ${(+factura.aPagar || 0).toFixed(2)}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 12, opacity: 0.75, marginTop: 4 }}>
                A pagar a Inova · total pedido ${(+factura.total || 0).toFixed(2)}
              </div>
            </div>
            <div style={{ textAlign: 'right', minWidth: 96 }}>
              <div style={{ fontFamily: T.mono, fontSize: 10, opacity: 0.7 }}>Tu 20%</div>
              <div style={{ fontFamily: T.serif, fontSize: 22, lineHeight: 1 }}>
                ${(+factura.ganancia || 0).toFixed(2)}
              </div>
            </div>
          </div>
          {feedbackLabel && (
            <div style={{ marginTop: 12, fontFamily: T.sans, fontSize: 12, fontWeight: 700 }}>
              {feedbackLabel}
            </div>
          )}
        </div>
      </div>

      {isProcesada && (resumenPagos.montoVerificado > 0.01 || resumenPagos.montoPendiente > 0.01 || saldo > 0.01) && (
        <div style={{ padding: '0 24px 16px' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
            padding: 10, borderRadius: 16, background: T.paperAlt, border: `1px solid ${T.hairline}`,
          }}>
            <FacturaMini label="Pagado" value={window.fmtMoney ? window.fmtMoney(resumenPagos.montoVerificado) : `$${resumenPagos.montoVerificado.toFixed(2)}`} T={T} />
            <FacturaMini label="En revision" value={window.fmtMoney ? window.fmtMoney(resumenPagos.montoPendiente) : `$${resumenPagos.montoPendiente.toFixed(2)}`} T={T} />
            <FacturaMini label="Si aprueba" value={window.fmtMoney ? window.fmtMoney(resumenPagos.saldoConPendientes) : `$${resumenPagos.saldoConPendientes.toFixed(2)}`} T={T} />
          </div>
        </div>
      )}

      {window.PaymentPlanCard && (
        <div style={{ padding: '0 24px 16px' }}>
          <window.PaymentPlanCard
            factura={factura}
            compact
            showAmounts={isProcesada}
            note={isProcesada
              ? `Fechas oficiales para pagar esta factura ${paymentPlanLabel}.`
              : `Las fechas de pago ${paymentPlanLabel} ya estan definidas; el monto final se confirma cuando Elizabeth cierre la factura.`}
          />
        </div>
      )}

      {isProcesada && (
        <div style={{ padding: '0 24px 18px' }}>
          <button onClick={() => setPagoModal(true)} disabled={saldo <= 0.01} style={primaryBtn(T, saldo <= 0.01)}>
            {saldo > 0.01 ? `Registrar pago - saldo ${window.fmtMoney ? window.fmtMoney(saldo) : `$${saldo.toFixed(2)}`}` : 'Factura pagada'}
          </button>
        </div>
      )}

      <div style={{ padding: '0 24px' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, textTransform: 'uppercase', color: T.inkMute, marginBottom: 10 }}>
          Productos
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {productos.map((p, i) => {
            const unavailable = !!p.no_disponible;
            return (
              <div key={`${p.codigo}-${i}`} style={{
                padding: 12,
                borderRadius: 14,
                background: unavailable ? 'oklch(0.96 0.025 25)' : T.paperAlt,
                border: `1px solid ${unavailable ? 'oklch(0.78 0.08 25)' : T.hairline}`,
                display: 'grid',
                gridTemplateColumns: '48px 1fr auto',
                gap: 10,
                alignItems: 'center',
                opacity: unavailable ? 0.78 : 1,
              }}>
                <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={{ minWidth: 0 }}>
                  <div style={{ fontFamily: T.mono, fontSize: 9, color: T.inkMute }}>
                    {p.codigo} · {p.catalogo || 'Catalogo'}
                  </div>
                  <div style={{
                    fontFamily: T.serif,
                    fontSize: 15,
                    color: T.ink,
                    lineHeight: 1.18,
                    textDecoration: unavailable ? 'line-through' : 'none',
                    marginTop: 2,
                  }}>
                    {p.nombre}
                  </div>
                  {p.tono && (
                    <div style={{ fontFamily: T.serif, fontStyle: 'italic', fontSize: 12, color: T.inkSoft, marginTop: 2 }}>
                      {p.tono}
                    </div>
                  )}
                  {unavailable && (
                    <div style={{ fontFamily: T.sans, fontSize: 11, color: T.danger, marginTop: 4, fontWeight: 700 }}>
                      {p.motivo_no_disponible === 'recepcion_venezuela'
                        ? 'No llego a Venezuela / no se cobra'
                        : 'Agotado / no se cobra'}
                    </div>
                  )}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: T.mono, fontSize: 11, color: T.inkMute }}>x{p.cantidad}</div>
                  <div style={{ fontFamily: T.serif, fontSize: 16, color: T.ink, textDecoration: unavailable ? 'line-through' : 'none' }}>
                    ${((+p.precio || 0) * (+p.cantidad || 0)).toFixed(2)}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {!isProcesada && mode !== 'sent' && (
        <div style={{ padding: '20px 24px 0' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button onClick={() => submitFeedback('aceptada')} disabled={submitting} style={primaryBtn(T, submitting)}>
              Si, esta correcta
            </button>
            <button onClick={() => setMode(mode === 'missing' ? 'review' : 'missing')} style={secondaryBtn(T)}>
              Me falta un producto
            </button>
            <button onClick={() => setMode(mode === 'extra' ? 'review' : 'extra')} style={secondaryBtn(T)}>
              Hay un producto de mas o cantidad incorrecta
            </button>
          </div>
        </div>
      )}

      {!isProcesada && mode === 'missing' && (
        <FeedbackForm
          T={T}
          title="Producto faltante"
          producto={producto}
          setProducto={setProducto}
          nota={nota}
          setNota={setNota}
          submitting={submitting}
          onSubmit={() => submitFeedback('falta_producto')}
        />
      )}

      {!isProcesada && mode === 'extra' && (
        <FeedbackForm
          T={T}
          title="Producto de mas / cantidad incorrecta"
          nota={nota}
          setNota={setNota}
          submitting={submitting}
          onSubmit={() => submitFeedback('producto_sobra')}
          simple
        />
      )}

      {mode === 'sent' && (
        <div style={{ padding: '20px 24px 0' }}>
          <div style={{
            padding: 16,
            borderRadius: 16,
            background: hasIssue ? 'oklch(0.95 0.06 55)' : 'oklch(0.94 0.06 155)',
            border: `1px solid ${hasIssue ? 'oklch(0.75 0.1 55)' : T.good}`,
            fontFamily: T.sans,
            fontSize: 13,
            color: T.ink,
            lineHeight: 1.4,
          }}>
            Respuesta guardada. Inova la vera en el admin antes de cerrar la factura.
          </div>
        </div>
      )}

      {isProcesada && (
        <div style={{ padding: '20px 24px 0' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button onClick={() => setPagoModal(true)} disabled={saldo <= 0.01} style={primaryBtn(T, saldo <= 0.01)}>
              {saldo > 0.01 ? 'Registrar pago' : 'Factura pagada'}
            </button>
            <button onClick={() => setMode(mode === 'identity' ? 'review' : 'identity')} disabled={submitting} style={secondaryBtn(T)}>
              Esta factura no es mia
            </button>
          </div>
        </div>
      )}

      {isProcesada && mode === 'identity' && (
        <FeedbackForm
          T={T}
          title="Factura incorrecta"
          nota={nota}
          setNota={setNota}
          submitting={submitting}
          onSubmit={() => submitFeedback('identidad_incorrecta')}
          simple
          placeholder="Ej. este link no es mio / estos productos no son de mi pedido"
        />
      )}

      {error && (
        <div style={{ padding: '14px 24px 0' }}>
          <div style={{ padding: 12, borderRadius: 12, background: T.dangerSoft, color: T.danger, fontFamily: T.sans, fontSize: 12 }}>
            {error}
          </div>
        </div>
      )}

      {pagoModal && (
        <window.RegistrarPagoModal
          factura={factura}
          vendedora={vendedora}
          pagosOverride={pagos}
          campaignsOverride={data.campaigns || []}
          onClose={() => setPagoModal(false)}
          onSaved={() => { setPagoModal(false); reload(); }}
        />
      )}
    </div>
  );
}

function FeedbackForm({ T, title, producto, setProducto, nota, setNota, submitting, onSubmit, simple, placeholder }) {
  return (
    <div style={{ padding: '14px 24px 0' }}>
      <div style={{ padding: 14, borderRadius: 16, background: T.paperAlt, border: `1px solid ${T.hairline}` }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.3, textTransform: 'uppercase', color: T.inkMute, marginBottom: 10 }}>
          {title}
        </div>
        {!simple && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 76px', gap: 8, marginBottom: 8 }}>
            <input value={producto.codigo} onChange={e => setProducto({ ...producto, codigo: e.target.value })} placeholder="Codigo" style={inputStyle(T)} />
            <input value={producto.nombre} onChange={e => setProducto({ ...producto, nombre: e.target.value })} placeholder="Producto" style={inputStyle(T)} />
            <input value={producto.cantidad} onChange={e => setProducto({ ...producto, cantidad: e.target.value })} type="number" min="1" style={inputStyle(T)} />
          </div>
        )}
        <textarea
          value={nota}
          onChange={e => setNota(e.target.value)}
          rows={3}
          placeholder={placeholder || (simple ? 'Ej. ese producto no lo pedi / la cantidad correcta es 1' : 'Nota opcional para Elizabeth')}
          style={{ ...inputStyle(T), resize: 'vertical', minHeight: 74 }}
        />
        <button onClick={onSubmit} disabled={submitting} style={{ ...primaryBtn(T, submitting), marginTop: 10 }}>
          Enviar a Inova
        </button>
      </div>
    </div>
  );
}

function inputStyle(T) {
  return {
    width: '100%',
    padding: '11px 12px',
    borderRadius: 12,
    border: `1px solid ${T.hairline}`,
    background: T.paper,
    fontFamily: T.sans,
    fontSize: 13,
    color: T.ink,
    boxSizing: 'border-box',
    outline: 'none',
  };
}

function primaryBtn(T, disabled) {
  return {
    width: '100%',
    padding: '15px 18px',
    borderRadius: 16,
    background: disabled ? T.inkMute : T.accent,
    color: '#fff',
    border: 'none',
    cursor: disabled ? 'wait' : 'pointer',
    fontFamily: T.sans,
    fontSize: 14,
    fontWeight: 700,
  };
}

function secondaryBtn(T) {
  return {
    width: '100%',
    padding: '13px 16px',
    borderRadius: 16,
    background: T.paperAlt,
    color: T.ink,
    border: `1px solid ${T.hairlineStrong || T.hairline}`,
    cursor: 'pointer',
    fontFamily: T.sans,
    fontSize: 13,
    fontWeight: 600,
  };
}

function FacturaMini({ label, value, T }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div style={{ fontFamily: T.mono, fontSize: 8, letterSpacing: 1, textTransform: 'uppercase', color: T.inkMute, whiteSpace: 'nowrap' }}>
        {label}
      </div>
      <div style={{ fontFamily: T.serif, fontSize: 18, lineHeight: 1.05, letterSpacing: -0.3, color: T.ink, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis' }}>
        {value}
      </div>
    </div>
  );
}

window.FacturaExpressScreen = FacturaExpressScreen;