function ResRow({ hour, name, meta, note, src, highlight, lang, status, cancellationReason, onConfirm, onCancel, onDetail, animClass }) {
  const { useRef } = React;
  const srcLabel = { bot: "WhatsApp · bot", web: "Web", manual: "Manual" }[src] || src;

  // Swipe detection (mobile)
  const touchX = useRef(0);
  const touchT = useRef(0);

  function onTouchStart(e) {
    touchX.current = e.touches[0].clientX;
    touchT.current = Date.now();
  }

  function onTouchEnd(e) {
    const dx = e.changedTouches[0].clientX - touchX.current;
    const dt = Date.now() - touchT.current;
    if (dt > 500) return;
    if (dx > 80 && onConfirm) onConfirm();
    else if (dx < -80 && onCancel) onCancel();
  }

  const hasActions = onConfirm || onCancel || onDetail;
  const isCancelled = status === "cancelled";
  const isNoshow    = status === "noshow";
  const statusBadgeLabel = isCancelled
    ? (lang === "es" ? "Cancelada" : "Cancel·lada")
    : isNoshow
      ? (lang === "es" ? "No acudió" : "No-show")
      : null;
  const cls = "res-row swipeable "
    + (highlight ? "highlight " : "")
    + (isCancelled ? "is-cancelled " : "")
    + (animClass || "");

  const actBtnBase = {
    border: "none", borderRadius: 6, padding: "4px 8px", cursor: "pointer",
    fontSize: 14, display: "inline-flex", alignItems: "center", lineHeight: 1,
  };

  return (
    <li
      className={cls}
      onTouchStart={hasActions ? onTouchStart : undefined}
      onTouchEnd={hasActions ? onTouchEnd : undefined}
    >
      <div className="res-row-hour">{hour}</div>
      <div>
        <div className="res-row-name">{name}</div>
        <div className="res-row-meta">{meta}</div>
        {note && <div className="res-row-note">{note}</div>}
      </div>
      <span className={"src-badge src-" + src}>{srcLabel}</span>
      {statusBadgeLabel && (
        <span className={"status-badge status-" + status}>{statusBadgeLabel}</span>
      )}
      {isCancelled && cancellationReason && (
        <small className="cancel-reason">{lang === "es" ? "Motivo" : "Motiu"}: {cancellationReason}</small>
      )}
      {hasActions && (
        <div className="res-row-actions">
          {onConfirm && (
            <button
              onClick={e => { e.stopPropagation(); onConfirm(); }}
              title={lang === "es" ? "Confirmar" : "Confirmar"}
              style={{...actBtnBase, background: "var(--oliva-50)", color: "var(--oliva-700)"}}
            ><i className="ph ph-check"></i></button>
          )}
          {onCancel && (
            <button
              onClick={e => { e.stopPropagation(); onCancel(); }}
              title={lang === "es" ? "Cancelar" : "Cancel·lar"}
              style={{...actBtnBase, background: "var(--terra-50, #FEF2F2)", color: "var(--terra-700)"}}
            ><i className="ph ph-x"></i></button>
          )}
          {onDetail && (
            <button
              onClick={e => { e.stopPropagation(); onDetail(); }}
              title={lang === "es" ? "Detalle" : "Detall"}
              style={{...actBtnBase, background: "var(--vinya-50, #F5F3FF)", color: "var(--vinya-700, #6D28D9)"}}
            ><i className="ph ph-caret-right"></i></button>
          )}
        </div>
      )}
    </li>
  );
}

window.ResRow = ResRow;