/* global React */
const { useState: useStateAR, useMemo: useMemoAR, useRef: useRefAR, useEffect: useEffectAR } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Antiruptura Module — entrypoint with role switcher (mock-only) + sub-routing
// ─────────────────────────────────────────────────────────────────────────────
window.AntirupturaModule = function AntirupturaModule({ session, onMenu, onLogout }) {
  const MockAD = window.AntirupturaData;
  const mockMode = window.APP_CONFIG && window.APP_CONFIG.mockMode;
  const [remoteData, setRemoteData] = useStateAR(null);
  const [remoteLoading, setRemoteLoading] = useStateAR(!mockMode);
  const [remoteError, setRemoteError] = useStateAR(null);

  // Effective viewer role — defaults to session role, overridable in mock for demo
  const [demoRole, setDemoRole] = useStateAR(() => {
    if (!mockMode) return null;
    try { return localStorage.getItem('ar_demo_role') || 'supervisor'; } catch { return 'supervisor'; }
  });
  const effectiveRole = mockMode ? demoRole : session.role;

  // Which store the viewer is bound to (mock: pamplona is the rich store)
  const [viewStoreKey, setViewStoreKey] = useStateAR('pamplona');
  const AD = useMemoAR(() => {
    if (mockMode) return MockAD;
    if (!remoteData) return buildAntiRupturaDataFromApi({ rows: [] }, MockAD);
    return buildAntiRupturaDataFromApi(remoteData, MockAD);
  }, [mockMode, remoteData]);

  // Shared mutable state across role views — kept here so navigation preserves work
  const [items, setItems] = useStateAR(() => mockMode ? MockAD.ITEMS.map(it => ({ ...it })) : []);
  const [detailItem, setDetailItem] = useStateAR(null);  // for modal in mgr/admin
  const [toast, setToast] = useStateAR(null);
  const [confirm, setConfirm] = useStateAR(null);

  useEffectAR(() => {
    if (mockMode) return;
    let cancelled = false;
    setRemoteLoading(true);
    setRemoteError(null);
    window.IntradayAPI.getAntiRuptura()
      .then(data => {
        if (cancelled) return;
        setRemoteData(data);
        const built = buildAntiRupturaDataFromApi(data, MockAD);
        setItems(built.ITEMS.map(it => ({ ...it })));
        if (data.store) {
          const store = built.storeByAny(data.store) || built.STORES[0];
          if (store) setViewStoreKey(store.key);
        }
      })
      .catch(err => {
        if (cancelled) return;
        setRemoteError(err.message || 'anti_ruptura_fetch_failed');
      })
      .finally(() => {
        if (!cancelled) setRemoteLoading(false);
      });
    return () => { cancelled = true; };
  }, [mockMode]);

  const [subtab, setSubtab] = useStateAR(() => {
    if (effectiveRole === 'admin') return 'overview';
    return 'lista';
  });

  function setRole(r) {
    setDemoRole(r);
    try { localStorage.setItem('ar_demo_role', r); } catch {}
    setSubtab(r === 'admin' ? 'overview' : 'lista');
  }

  function showToast(message, kind) {
    setToast({ message, kind: kind || 'success' });
    setTimeout(() => setToast(null), 2200);
  }

  function updateItem(itemId, patch) {
    setItems(prev => prev.map(it => it.item_id === itemId ? { ...it, ...patch } : it));
  }

  // For operator view we hide info except for their store; for supervisor it's also store-bound
  const storeScopedItems = useMemoAR(() => {
    if (effectiveRole === 'admin') return items;
    return items.filter(it => it.store_key === viewStoreKey);
  }, [items, effectiveRole, viewStoreKey]);

  const isOperator = effectiveRole === 'operator';

  if (remoteLoading) {
    return (
      <div className="app-shell">
        <header className="top-bar">
          <img src="assets/logos/logo-shopper-red.svg" alt="Shopper" className="top-bar-logo-img" />
          <div className="top-bar-divider"></div>
          <div className="top-bar-context">
            <span className="top-bar-eyebrow">Anti-ruptura</span>
            <span className="top-bar-store">Carregando lista do dia...</span>
          </div>
        </header>
        <div className="page">
          <div className="panel" style={{ padding: 24 }}>Carregando dados reais do Worker.</div>
        </div>
      </div>
    );
  }

  if (remoteError) {
    return (
      <div className="app-shell">
        <header className="top-bar">
          <img src="assets/logos/logo-shopper-red.svg" alt="Shopper" className="top-bar-logo-img" />
          <div className="top-bar-divider"></div>
          <div className="top-bar-context">
            <span className="top-bar-eyebrow">Anti-ruptura</span>
            <span className="top-bar-store">Dados indisponíveis</span>
          </div>
          <div className="top-bar-spacer"></div>
          <button className="top-bar-logout" onClick={onMenu} title="Voltar ao menu">
            <window.Icon name="grid" size={14} />
            <span className="top-bar-logout-text">Menu</span>
          </button>
        </header>
        <div className="page">
          <div className="panel" style={{ padding: 24 }}>
            Não foi possível carregar anti-ruptura: {remoteError}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="top-bar">
        <img src="assets/logos/logo-shopper-red.svg" alt="Shopper" className="top-bar-logo-img" />
        <div className="top-bar-divider"></div>
        <div className="top-bar-context">
          <span className="top-bar-eyebrow">Anti-ruptura</span>
          <span className="top-bar-store">
            {isOperator
              ? `${AD.storeByKey(viewStoreKey).name} · ${AD.META.target_date.split('-').reverse().join('/')}`
              : `Lista do dia · ${AD.META.target_date.split('-').reverse().join('/')}`}
          </span>
        </div>
        <div className="top-bar-spacer"></div>
        <button className="top-bar-logout" onClick={onMenu} title="Voltar ao menu">
          <window.Icon name="grid" size={14} />
          <span className="top-bar-logout-text">Menu</span>
        </button>
        <button className="top-bar-logout" onClick={onLogout} title="Sair">
          <window.Icon name="log_out" size={14} />
          <span className="top-bar-logout-text">Sair</span>
        </button>
      </header>

      {/* ── DEMO role switcher (mock-only) ──────────────────────────────── */}
      {mockMode && (
        <div className="ar-role-switcher">
          <span className="ar-role-switcher-label">Demo · ver como:</span>
          {['operator','teamleader','supervisor','admin'].map(r => (
            <button
              key={r}
              className={`ar-role-btn ${effectiveRole === r ? 'active' : ''}`}
              onClick={() => setRole(r)}
            >
              {r === 'operator' ? 'Operador (mobile)'
                : r === 'teamleader' ? 'Team Leader'
                : r === 'supervisor' ? 'Supervisor'
                : 'Admin / Matriz'}
            </button>
          ))}
          {effectiveRole !== 'admin' && (
            <>
              <span className="ar-role-switcher-label" style={{ marginLeft: 16 }}>Loja:</span>
              <select
                style={{
                  padding: '6px 10px', borderRadius: 999,
                  border: '1px solid var(--border-1)',
                  background: 'var(--bg-1)', fontWeight: 700, fontSize: 12,
                  color: 'var(--fg-2)', fontFamily: 'inherit', cursor: 'pointer',
                }}
                value={viewStoreKey}
                onChange={e => setViewStoreKey(e.target.value)}
              >
                {AD.STORES.map(s => <option key={s.key} value={s.key}>{s.name}</option>)}
              </select>
            </>
          )}
        </div>
      )}

      {/* ── Meta strip (managers only) ──────────────────────────────────── */}
      {!isOperator && (
        <div className="ar-meta-strip">
          <span>Rodada <strong>{AD.META.run_id}</strong></span>
          <span className="dot"></span>
          <span>Gerada às <strong>{formatAntiRupturaTime(AD.META.run_at)}</strong></span>
          {effectiveRole === 'admin' && (
            <>
              <span className="dot"></span>
              <span>Agente <strong>{AD.META.agent_version}</strong></span>
            </>
          )}
        </div>
      )}

      {/* ── Content per role ────────────────────────────────────────────── */}
      {isOperator && (
        <window.AROperatorFlow
          items={storeScopedItems}
          store={AD.storeByKey(viewStoreKey)}
          session={session}
          onUpdate={updateItem}
          onToast={showToast}
          onConfirm={setConfirm}
        />
      )}

      {(effectiveRole === 'supervisor' || effectiveRole === 'teamleader') && (
        <window.ARStoreManager
          items={storeScopedItems}
          store={AD.storeByKey(viewStoreKey)}
          role={effectiveRole}
          onOpenDetail={setDetailItem}
          onUpdate={updateItem}
          onToast={showToast}
          onConfirm={setConfirm}
        />
      )}

      {effectiveRole === 'admin' && (
        <window.ARAdminView
          items={items}
          subtab={subtab} onSubtabChange={setSubtab}
          onOpenStore={(k) => { setViewStoreKey(k); setRole('supervisor'); }}
          onOpenDetail={setDetailItem}
        />
      )}

      {/* ── Detail modal (mgr/admin) ────────────────────────────────────── */}
      {detailItem && (
        <window.ARItemDetailModal
          item={detailItem}
          role={effectiveRole}
          onClose={() => setDetailItem(null)}
          onUpdate={updateItem}
          onToast={showToast}
          onConfirm={setConfirm}
        />
      )}

      {/* ── Toast ───────────────────────────────────────────────────────── */}
      {toast && (
        <div className={`ar-toast ${toast.kind}`}>
          <window.Icon name={toast.kind === 'error' ? 'alert' : 'check'} size={14} />
          {toast.message}
        </div>
      )}

      {/* ── Confirm dialog ──────────────────────────────────────────────── */}
      {confirm && (
        <window.ConfirmDialog
          title={confirm.title || 'Tem certeza?'}
          message={confirm.message}
          confirmLabel={confirm.confirmLabel || 'Confirmar'}
          danger={confirm.danger}
          onConfirm={() => { const fn = confirm.onConfirm; setConfirm(null); fn && fn(); }}
          onCancel={() => setConfirm(null)}
        />
      )}
    </div>
  );
};

function buildAntiRupturaDataFromApi(data, fallback) {
  const rows = Array.isArray(data && data.rows) ? data.rows : [];
  const norm = (s) => String(s || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[\s\-_]+/g, '');
  const storesByKey = {};
  rows.forEach(row => {
    const code = String(row.store_code || '').trim();
    const name = String(row.store_name || code || '').trim();
    const key = norm(name || code);
    if (!key || storesByKey[key]) return;
    storesByKey[key] = { code, key, name };
  });
  const STORES = Object.values(storesByKey);
  const storeByKey = (key) => STORES.find(s => s.key === key) || fallback.storeByKey(key) || STORES[0] || { code: '', key: '', name: '' };
  const storeByAny = (value) => {
    const n = norm(value);
    return STORES.find(s => norm(s.key) === n || norm(s.code) === n || norm(s.name) === n) || null;
  };
  const statusInfo = fallback.statusInfo;
  const summary = fallback.summary;
  const META = {
    run_id: data.run_id || '',
    run_at: data.fetched_at || '',
    target_date: data.target_date || '',
    agent_version: rows[0]?.agent_version || '',
  };
  const ITEMS = rows.map((row, i) => {
    const store = storeByAny(row.store_name) || storeByAny(row.store_code) || STORES[0] || { code: row.store_code || '', key: norm(row.store_name || row.store_code), name: row.store_name || row.store_code || '' };
    const addresses = Array.isArray(row.locations) ? row.locations : [];
    return {
      item_id: `${row.run_id || data.run_id || 'anti'}__${row.store_code || store.code}__${row.product_code || i}`,
      run_id: row.run_id || data.run_id || '',
      run_at: row.run_at || data.fetched_at || '',
      target_date: row.target_date || data.target_date || '',
      store_code: row.store_code || store.code,
      store_name: row.store_name || store.name,
      store_key: store.key,
      product_code: String(row.product_code || ''),
      product_name: String(row.product_name || ''),
      risk_score: Number(row.risk_score || 0),
      risk_level: String(row.risk_level || ''),
      network_sales_rank: row.network_sales_rank == null ? null : Number(row.network_sales_rank),
      front_reason: String(row.front_reason || ''),
      addresses: addresses,
      status: 'pendente',
      addresses_scanned: [],
      qty_found: null,
      operator: null,
      finished_at: null,
      observation: '',
      agent_version: row.agent_version || '',
      rationale_text: row.rationale_text || '',
      features_json: row.features || {},
      reasons_json: row.reasons || [],
      data_sources_json: row.data_sources || {},
    };
  });

  return {
    ...fallback,
    META,
    STORES,
    ITEMS,
    storeByKey,
    storeByCode: (code) => STORES.find(s => s.code === code) || fallback.storeByCode(code),
    storeByAny,
    statusInfo,
    summary,
  };
}

function formatAntiRupturaTime(value) {
  if (!value) return '--:--';
  if (String(value).indexOf(' ') >= 0) return String(value).split(' ')[1] || '--:--';
  const d = new Date(value);
  if (isNaN(d.getTime())) return String(value).slice(0, 5);
  return d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}

// ═════════════════════════════════════════════════════════════════════════════
// TELA 1 — OPERATOR MOBILE: continuous-flow execution
//
//   Goal: max speed. The operator lands directly on the next pending product.
//   Scan addresses, type qty, confirm → auto-advance to next pending.
//   Never shows: divergente status, score, risk, motivo, expected qty,
//   sales data, sources, rationale, comparisons, observation field.
//   The "Ver lista" button opens a slim sheet showing only Pendente/Concluído.
// ═════════════════════════════════════════════════════════════════════════════
window.AROperatorFlow = function AROperatorFlow({ items, store, session, onUpdate, onToast, onConfirm }) {
  const AD = window.AntirupturaData;

  // Operator-side status: Pendente or Concluído. Divergente is invisible here.
  function opStatus(it) {
    return (it.status === 'validado' || it.status === 'divergente') ? 'concluido' : 'pendente';
  }

  const totalCount = items.length;
  const doneCount  = items.filter(it => opStatus(it) === 'concluido').length;
  const pctDone    = totalCount ? Math.round((doneCount / totalCount) * 100) : 0;

  // Sticky pointer: which item is currently on screen.
  // We pick the first pending item and stay on it until confirmed,
  // then advance to next pending.
  const pendingIds = items.filter(it => opStatus(it) === 'pendente').map(it => it.item_id);
  const [currentId, setCurrentId] = useStateAR(() => pendingIds[0] || null);

  // If the current item was just confirmed (no longer pending), advance.
  useEffectAR(() => {
    if (currentId && !pendingIds.includes(currentId)) {
      setCurrentId(pendingIds[0] || null);
    }
    if (!currentId && pendingIds[0]) {
      setCurrentId(pendingIds[0]);
    }
  }, [items.map(it => it.status).join('|')]);

  const [showList, setShowList] = useStateAR(false);

  const currentItem = items.find(it => it.item_id === currentId) || null;
  const allDone = pendingIds.length === 0;

  // ── Empty / completion state ──────────────────────────────────────────────
  if (allDone) {
    return (
      <div className="ar-mobile-shell">
        <div className="ar-op-done">
          <div className="ar-op-done-check">
            <window.Icon name="check" size={42} stroke={3} />
          </div>
          <h1 className="ar-op-done-title">Lista do dia concluída</h1>
          <p className="ar-op-done-sub">
            {totalCount === 0
              ? 'Sem itens para conferir hoje.'
              : `Você conferiu todos os ${totalCount} produtos da lista.`}
          </p>
          {totalCount > 0 && (
            <button className="ar-mobile-cta secondary" onClick={() => setShowList(true)} style={{ marginTop: 16, height: 48 }}>
              <window.Icon name="list" size={16} /> Ver lista completa
            </button>
          )}
        </div>
        {showList && (
          <window.AROperatorListSheet
            items={items}
            opStatus={opStatus}
            currentId={currentId}
            onPick={(id) => { setCurrentId(id); setShowList(false); }}
            onClose={() => setShowList(false)}
          />
        )}
      </div>
    );
  }

  // ── Active product view ──────────────────────────────────────────────────
  const item = currentItem;
  const idx = items.findIndex(it => it.item_id === item.item_id);
  const positionLabel = `${doneCount + 1} de ${totalCount}`;

  return (
    <div className="ar-mobile-shell">
      {/* compact header with progress */}
      <div className="ar-op-head">
        <div>
          <div className="ar-op-head-eyebrow">Produto {positionLabel}</div>
          <div className="ar-op-head-progress">
            <div className="ar-op-head-progress-bar">
              <div className="ar-op-head-progress-bar-fill" style={{ width: `${pctDone}%` }}></div>
            </div>
            <span className="ar-op-head-progress-num">{pctDone}%</span>
          </div>
        </div>
        <button className="ar-op-list-btn" onClick={() => setShowList(true)}>
          <window.Icon name="list" size={14} /> Lista
        </button>
      </div>

      <window.AROperatorRunner
        key={item.item_id}
        item={item}
        session={session}
        positionLabel={positionLabel}
        onUpdate={onUpdate}
        onToast={onToast}
        onConfirm={onConfirm}
      />

      {showList && (
        <window.AROperatorListSheet
          items={items}
          opStatus={opStatus}
          currentId={currentId}
          onPick={(id) => { setCurrentId(id); setShowList(false); }}
          onClose={() => setShowList(false)}
        />
      )}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// Per-item runner — scan + qty + confirm. Confirm advances to next via state
// promotion in the parent (item.status flips to validado / divergente).
// ─────────────────────────────────────────────────────────────────────────────
window.AROperatorRunner = function AROperatorRunner({ item, session, positionLabel, onUpdate, onToast, onConfirm }) {
  const [scanned, setScanned] = useStateAR(item.addresses_scanned || []);
  const [qty, setQty] = useStateAR(item.qty_found != null ? item.qty_found : '');
  const [scanText, setScanText] = useStateAR('');
  const scanInputRef = useRefAR(null);

  useEffectAR(() => {
    if (scanInputRef.current) scanInputRef.current.focus();
  }, [item.item_id]);

  const totalAddrs = item.addresses.length;
  const allScanned = scanned.length === totalAddrs;

  function tryScan() {
    const s = scanText.trim().toUpperCase();
    if (!s) return;
    const match = item.addresses.find(a => a.full_address.toUpperCase() === s);
    if (!match) {
      onToast(`Endereço não pertence a este produto`, 'error');
      setScanText('');
      return;
    }
    if (scanned.includes(match.full_address)) {
      onToast(`Endereço já bipado`, 'error');
      setScanText('');
      return;
    }
    const next = [...scanned, match.full_address];
    setScanned(next);
    onUpdate(item.item_id, {
      status: 'em_execucao',
      addresses_scanned: next,
      operator: item.operator || session.name,
    });
    setScanText('');
  }

  // Simulate "scan next" — for demo / desktop preview
  function scanNext() {
    const remaining = item.addresses.find(a => !scanned.includes(a.full_address));
    if (!remaining) return;
    const next = [...scanned, remaining.full_address];
    setScanned(next);
    onUpdate(item.item_id, {
      status: 'em_execucao',
      addresses_scanned: next,
      operator: item.operator || session.name,
    });
  }

  function unscan(addr) {
    const next = scanned.filter(a => a !== addr);
    setScanned(next);
    onUpdate(item.item_id, { addresses_scanned: next });
  }

  function doConfirm() {
    if (qty === '' || qty === null) {
      onToast('Informe a quantidade encontrada', 'error');
      return;
    }
    onConfirm({
      title: 'Tem certeza?',
      message: `Você está confirmando ${qty} unidade${Number(qty) !== 1 ? 's' : ''} encontrada${Number(qty) !== 1 ? 's' : ''} em ${scanned.length} de ${totalAddrs} endereço${totalAddrs !== 1 ? 's' : ''}.`,
      confirmLabel: 'Sim, confirmar',
      onConfirm: () => {
        // Internal classification (for supervisor/admin) — operator never sees this label.
        const isDivergent = (scanned.length < totalAddrs || Number(qty) === 0);
        const internalStatus = isDivergent ? 'divergente' : 'validado';
        onUpdate(item.item_id, {
          status: internalStatus,
          qty_found: Number(qty),
          addresses_scanned: scanned,
          operator: session.name,
          finished_at: new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }),
        });
        // For the operator: always positive confirmation. No "divergente" wording.
        onToast(`Item confirmado · próximo produto`, 'success');
      },
    });
  }

  return (
    <>
      <div className="ar-product-hero">
        <h1 className="ar-product-name">{item.product_name}</h1>
        <div className="ar-product-code">cód. {item.product_code}</div>
      </div>

      <div className="ar-section-label">
        <span>Endereços do produto</span>
        <span className="ar-section-label-count">{scanned.length}/{totalAddrs}</span>
      </div>
      <div className="ar-addr-list">
        {item.addresses.map(a => {
          const isScan = scanned.includes(a.full_address);
          return (
            <div
              key={a.full_address}
              className={`ar-addr-row ${isScan ? 'scanned' : ''}`}
              onClick={() => isScan && unscan(a.full_address)}
              style={{ cursor: isScan ? 'pointer' : 'default' }}
            >
              <div className={`ar-addr-check ${isScan ? 'scanned' : ''}`}>
                {isScan && <window.Icon name="check" size={12} stroke={3} />}
              </div>
              <div className={`ar-addr-text ${isScan ? 'scanned' : ''}`}>{a.full_address}</div>
            </div>
          );
        })}
      </div>

      <div className="ar-section-label"><span>Bipar endereço</span></div>
      <div className="ar-scan-row">
        <input
          ref={scanInputRef}
          className="ar-scan-input"
          type="text"
          placeholder="Bipe ou digite o endereço…"
          value={scanText}
          onChange={e => setScanText(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); tryScan(); } }}
          autoComplete="off"
          spellCheck="false"
        />
        <button className="ar-scan-btn" onClick={tryScan} disabled={!scanText.trim()}>
          Bipar
        </button>
      </div>
      {!allScanned && (
        <button
          type="button"
          onClick={scanNext}
          style={{
            background: 'none', border: 'none', color: 'var(--shopper-navy)',
            fontSize: 12, fontWeight: 700, cursor: 'pointer',
            padding: 0, margin: '-8px 4px 18px',
            textDecoration: 'underline', fontFamily: 'inherit',
          }}
        >
          Bipar próximo (simulação)
        </button>
      )}

      <div className="ar-qty-card">
        <div className="ar-section-label" style={{ margin: 0 }}>
          <span>Quantidade encontrada</span>
        </div>
        <div className="ar-qty-row">
          <button className="ar-qty-btn" onClick={() => setQty(q => Math.max(0, (Number(q) || 0) - 1))}>−</button>
          <input
            className="ar-qty-input"
            type="number"
            min="0"
            placeholder="0"
            value={qty}
            onChange={e => setQty(e.target.value === '' ? '' : Math.max(0, Number(e.target.value)))}
            inputMode="numeric"
          />
          <button className="ar-qty-btn" onClick={() => setQty(q => (Number(q) || 0) + 1)}>+</button>
        </div>
      </div>

      <div className="ar-mobile-sticky">
        <button
          className="ar-mobile-cta"
          onClick={doConfirm}
          disabled={qty === '' || qty === null}
        >
          <window.Icon name="check" size={18} stroke={3} />
          Confirmar e próximo
        </button>
      </div>
    </>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
// "Ver lista" sheet — secondary view, no divergente label, just done/pending
// ─────────────────────────────────────────────────────────────────────────────
window.AROperatorListSheet = function AROperatorListSheet({ items, opStatus, currentId, onPick, onClose }) {
  // Sort: pendente first, then concluído
  const sorted = useMemoAR(() => {
    return [...items].sort((a, b) => {
      const ax = opStatus(a) === 'pendente' ? 0 : 1;
      const bx = opStatus(b) === 'pendente' ? 0 : 1;
      return ax - bx;
    });
  }, [items]);

  return (
    <div className="ar-sheet-overlay" onClick={onClose}>
      <div className="ar-sheet" onClick={e => e.stopPropagation()}>
        <div className="ar-sheet-handle"></div>
        <div className="ar-sheet-head">
          <h3 className="ar-sheet-title">Lista do dia</h3>
          <button className="ar-detail-close" onClick={onClose} aria-label="Fechar">×</button>
        </div>
        <div className="ar-sheet-body">
          {sorted.map(it => {
            const st = opStatus(it);
            const isCurrent = it.item_id === currentId;
            return (
              <div
                key={it.item_id}
                className={`ar-mobile-item-card ${st === 'concluido' ? 'done' : ''} ${isCurrent ? 'current' : ''}`}
                onClick={() => st === 'pendente' && onPick(it.item_id)}
                style={{ cursor: st === 'pendente' ? 'pointer' : 'default' }}
              >
                <div className={`ar-mobile-item-num ${st === 'concluido' ? 'done' : ''}`}>
                  {st === 'concluido'
                    ? <window.Icon name="check" size={18} stroke={3} />
                    : (isCurrent ? '•' : '')}
                </div>
                <div className="ar-mobile-item-body">
                  <div className="ar-mobile-item-name">{it.product_name}</div>
                  <div className="ar-mobile-item-meta">
                    <span>{it.addresses.length} endereço{it.addresses.length !== 1 ? 's' : ''}</span>
                    <span className="sep">·</span>
                    <span className={`ar-status-pill ${st === 'concluido' ? 'ok' : 'neutral'}`} style={{ padding: '2px 8px', fontSize: 10 }}>
                      <span className="ar-status-dot"></span>
                      {st === 'concluido' ? 'Concluído' : (isCurrent ? 'Atual' : 'Pendente')}
                    </span>
                  </div>
                </div>
                {st === 'pendente' && <div className="ar-mobile-item-chev"><window.Icon name="chevron_right" size={18} /></div>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};