// Painel de Andamentos — monitoramento proativo via DataJud (CNJ)

const Andamentos = () => {
  const [processos, setProcessos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filtros, setFiltros] = React.useState({ client_id: '', tribunal: '', data_inicio: '', data_fim: '' });
  const [clientes, setClientes] = React.useState([]);
  const [expandido, setExpandido] = React.useState({}); // id -> bool
  const [movimentos, setMovimentos] = React.useState({}); // id -> []
  const [loadingMovs, setLoadingMovs] = React.useState({});
  const [descartando, setDescartando] = React.useState({});
  const [showImport, setShowImport] = React.useState(false);
  const [showManual, setShowManual] = React.useState(false);

  const [verTodos, setVerTodos] = React.useState({}); // id -> bool (showAll movements)
  const [totalMonitorados, setTotalMonitorados] = React.useState(0);
  // 'pendentes' = só quem tem movimento novo | 'todos' = todos os monitorados,
  // para consultar o histórico já puxado do DataJud.
  const [modo, setModo] = React.useState('pendentes');

  const carregar = React.useCallback(async () => {
    setLoading(true);
    try {
      const params = {};
      if (filtros.client_id) params.client_id = filtros.client_id;
      if (filtros.tribunal) params.tribunal = filtros.tribunal;
      if (filtros.data_inicio) params.data_inicio = filtros.data_inicio;
      if (filtros.data_fim) params.data_fim = filtros.data_fim;
      // Total sob monitoramento. Sem isso o estado vazio ("nenhum pendente") é
      // indistinguível de "nada cadastrado" — o que acontece logo após importar,
      // já que todo o histórico entra como lido (RN-12).
      const todos = await window.OctaleApi.andamentos.listar(
        filtros.client_id ? { client_id: filtros.client_id } : {},
      );
      setTotalMonitorados(todos.length);

      if (modo === 'todos') {
        setProcessos(
          todos
            .filter(p => !filtros.tribunal || p.tribunal_code === filtros.tribunal)
            .map(p => ({ ...p, pending_count: 0, latest_movement_date: p.last_pulled_at })),
        );
      } else {
        setProcessos(await window.OctaleApi.andamentos.pendentes(params));
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, [filtros, modo]);

  React.useEffect(() => {
    carregar();
    window.OctaleApi.clients.list().then(setClientes).catch(() => {});
  }, [carregar]);

  const toggleExpand = async (id) => {
    const next = !expandido[id];
    setExpandido(e => ({ ...e, [id]: next }));
    if (next && !movimentos[id]) {
      setLoadingMovs(l => ({ ...l, [id]: true }));
      try {
        const movs = await window.OctaleApi.andamentos.movimentos(id);
        setMovimentos(m => ({ ...m, [id]: movs }));
      } catch {}
      setLoadingMovs(l => ({ ...l, [id]: false }));
    }
  };

  const refreshMovimentos = React.useCallback(async (processId) => {
    setLoadingMovs(l => ({ ...l, [processId]: true }));
    try {
      const movs = await window.OctaleApi.andamentos.movimentos(processId);
      setMovimentos(m => ({ ...m, [processId]: movs }));
      // Atualiza pending_count. No modo "com novidades" o card sai da lista ao
      // zerar; no modo "todos" ele permanece, pois ali a lista é o cadastro.
      const pendentes = movs.filter(mv => mv.status === 'pendente').length;
      setProcessos(ps => (pendentes === 0 && modo === 'pendentes')
        ? ps.filter(p => p.id !== processId)
        : ps.map(p => p.id === processId ? { ...p, pending_count: pendentes } : p)
      );
    } catch {}
    setLoadingMovs(l => ({ ...l, [processId]: false }));
  }, [modo]);

  const marcarLidos = async (proc) => {
    if (!confirm(`Isso vai descartar ${proc.pending_count} andamento(s) do processo ${fmtCnj(proc.cnj_number)}. Continuar?`)) return;
    setDescartando(d => ({ ...d, [proc.id]: true }));
    try {
      await window.OctaleApi.andamentos.marcarLidos(proc.id);
      setMovimentos(m => { const n = { ...m }; delete n[proc.id]; return n; });
      setProcessos(ps => modo === 'pendentes'
        ? ps.filter(p => p.id !== proc.id)
        : ps.map(p => p.id === proc.id ? { ...p, pending_count: 0 } : p));
    } catch (e) {
      alert('Erro ao descartar: ' + e.message);
    } finally {
      setDescartando(d => ({ ...d, [proc.id]: false }));
    }
  };

  const fmtCnj = (n) => {
    const d = String(n).replace(/\D/g, '');
    if (d.length !== 20) return n;
    return `${d.slice(0, 7)}-${d.slice(7, 9)}.${d.slice(9, 13)}.${d.slice(13, 14)}.${d.slice(14, 16)}.${d.slice(16)}`;
  };

  const fmtData = (iso) => {
    if (!iso) return '—';
    try { return new Date(iso).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' }); }
    catch { return iso; }
  };

  const tribunaisUsados = [...new Set(processos.map(p => p.tribunal_code).filter(Boolean))].sort();

  const inp = { width: '100%', boxSizing: 'border-box', padding: '7px 10px', borderRadius: 6, border: '1.5px solid #dde', fontSize: 12.5, background: 'var(--bg)', color: 'var(--fg)', fontFamily: 'inherit', outline: 'none' };

  return (
    <div style={{ padding: '20px 24px', maxWidth: 1100, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <h1 style={{ fontSize: 22, fontWeight: 800, color: 'var(--octale-navy)', margin: 0 }}>
          Andamentos
          {processos.length > 0 && (
            <span style={{ marginLeft: 10, fontSize: 13, fontWeight: 600, background: 'var(--octale-neon)', color: '#fff', borderRadius: 20, padding: '2px 9px', verticalAlign: 'middle' }}>
              {processos.length}
            </span>
          )}
        </h1>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn ghost sm" onClick={() => setShowManual(true)}>
            <Icon name="plus" size={13} /> Processo individual
          </button>
          <button className="btn sm" onClick={() => setShowImport(true)}>
            <Icon name="upload" size={13} /> Importar processos
          </button>
        </div>
      </div>
      <p style={{ fontSize: 12.5, color: 'var(--fg-muted)', margin: '0 0 14px' }}>
        Movimentos novos detectados pelo pull diário do DataJud (CNJ). Marque como lido para descartar.
      </p>

      {/* Alternador: pendentes x histórico completo */}
      <div style={{ display: 'inline-flex', gap: 2, marginBottom: 16, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 8, padding: 3 }}>
        {[
          { k: 'pendentes', label: 'Com novidades' },
          { k: 'todos', label: `Todos os monitorados${totalMonitorados ? ` (${totalMonitorados})` : ''}` },
        ].map(t => (
          <button
            key={t.k}
            onClick={() => setModo(t.k)}
            style={{
              border: 'none', cursor: 'pointer', borderRadius: 6, padding: '5px 12px',
              fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit',
              background: modo === t.k ? 'var(--octale-navy)' : 'transparent',
              color: modo === t.k ? '#fff' : 'var(--fg-muted)',
            }}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* Filtros */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 160px 140px 140px auto', gap: 10, marginBottom: 20, alignItems: 'end' }}>
        <div>
          <label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .4, color: 'var(--fg-muted)', display: 'block', marginBottom: 4 }}>Cliente</label>
          <select style={inp} value={filtros.client_id} onChange={e => setFiltros(f => ({ ...f, client_id: e.target.value }))}>
            <option value="">Todos os clientes</option>
            {clientes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
        <div>
          <label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .4, color: 'var(--fg-muted)', display: 'block', marginBottom: 4 }}>Tribunal</label>
          <select style={inp} value={filtros.tribunal} onChange={e => setFiltros(f => ({ ...f, tribunal: e.target.value }))}>
            <option value="">Todos</option>
            {tribunaisUsados.map(t => <option key={t} value={t}>{t.toUpperCase()}</option>)}
          </select>
        </div>
        <div>
          <label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .4, color: 'var(--fg-muted)', display: 'block', marginBottom: 4 }}>De</label>
          <input type="date" style={inp} value={filtros.data_inicio} onChange={e => setFiltros(f => ({ ...f, data_inicio: e.target.value }))} />
        </div>
        <div>
          <label style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .4, color: 'var(--fg-muted)', display: 'block', marginBottom: 4 }}>Até</label>
          <input type="date" style={inp} value={filtros.data_fim} onChange={e => setFiltros(f => ({ ...f, data_fim: e.target.value }))} />
        </div>
        <button className="btn ghost sm" style={{ height: 34 }} onClick={carregar}>
          <Icon name="refresh" size={12} />
        </button>
      </div>

      {/* Conteúdo */}
      {loading ? (
        <div style={{ textAlign: 'center', padding: 48, color: 'var(--fg-muted)' }}>
          <span className="spinner" style={{ width: 20, height: 20, display: 'inline-block', marginBottom: 12 }} />
          <p style={{ margin: 0, fontSize: 13 }}>Carregando andamentos...</p>
        </div>
      ) : processos.length === 0 ? (
        <div className="panel" style={{ textAlign: 'center', padding: '48px 24px' }}>
          <div style={{ fontSize: 32, marginBottom: 12 }}>{totalMonitorados > 0 ? '✅' : '📭'}</div>
          <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--octale-navy)', marginBottom: 6 }}>
            {totalMonitorados > 0 ? 'Nenhum andamento novo' : 'Nenhum processo monitorado'}
          </div>
          <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 20, maxWidth: 460, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
            {totalMonitorados > 0 ? (
              <>
                {totalMonitorados} processo{totalMonitorados !== 1 ? 's' : ''} sob monitoramento, {totalMonitorados !== 1 ? 'todos' : ''} em dia.
                O histórico completo de andamentos fica na aba <strong>Andamentos</strong> de cada caso.
                Movimentos novos aparecem aqui após o pull diário.
              </>
            ) : (
              'Importe uma planilha com números CNJ para começar a monitorar. Todo o histórico é puxado do DataJud no momento do cadastro.'
            )}
          </div>
          <button className="btn" onClick={() => setShowImport(true)}>
            <Icon name="upload" size={13} /> Importar processos
          </button>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {processos.map(proc => (
            <ProcessoCard
              key={proc.id}
              proc={proc}
              expandido={!!expandido[proc.id]}
              movimentos={movimentos[proc.id]}
              loadingMovs={!!loadingMovs[proc.id]}
              descartando={!!descartando[proc.id]}
              showAll={!!verTodos[proc.id]}
              clientes={clientes}
              onToggle={() => toggleExpand(proc.id)}
              onShowAll={() => setVerTodos(v => ({ ...v, [proc.id]: true }))}
              onMarcarLidos={() => marcarLidos(proc)}
              onRefreshMovimentos={refreshMovimentos}
              onRecarregar={carregar}
              fmtCnj={fmtCnj}
              fmtData={fmtData}
            />
          ))}
        </div>
      )}

      {showImport && <ModalImportacao onClose={() => { setShowImport(false); carregar(); }} clientes={clientes} />}
      {showManual && <ModalManual onClose={() => { setShowManual(false); carregar(); }} clientes={clientes} />}
    </div>
  );
};

// ── Card de processo ──────────────────────────────────────────────────────────

const ProcessoCard = ({ proc, expandido, movimentos, loadingMovs, descartando, showAll, clientes, onToggle, onShowAll, onMarcarLidos, onRefreshMovimentos, onRecarregar, fmtCnj, fmtData }) => {
  const [tarefaMovId, setTarefaMovId] = React.useState(null);
  const [tarefaTitulo, setTarefaTitulo] = React.useState('');
  const [criandoTarefa, setCriandoTarefa] = React.useState(false);
  const [showCapa, setShowCapa] = React.useState(false);

  const movs = movimentos || [];
  const totalMovs = movs.length;
  const pendentesCount = movs.filter(m => m.status === 'pendente').length;
  const temNovidade = (proc.pending_count ?? 0) > 0;
  const visibleMovs = showAll ? movs : movs.slice(0, 5);
  const clientName = proc.clients?.name || proc.clients?.short_name || '—';

  const processTitle = proc.parties_summary
    || [clientName, proc.process_class, proc.subject].filter(Boolean).join(' · ');

  const fmtDataRelativa = (iso) => {
    if (!iso) return '—';
    try {
      const d = new Date(iso);
      const hoje = new Date();
      const isHoje = d.toDateString() === hoje.toDateString();
      const ontem = new Date(hoje); ontem.setDate(hoje.getDate() - 1);
      const isOntem = d.toDateString() === ontem.toDateString();
      const hora = d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
      if (isHoje) return `Hoje - ${hora}`;
      if (isOntem) return `Ontem - ${hora}`;
      return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }) + ' - ' + hora;
    } catch { return iso; }
  };

  const fmtDataCurta = (iso) => {
    if (!iso) return '—';
    try { return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' }); }
    catch { return iso; }
  };

  const criarTarefa = async (movId) => {
    if (!tarefaTitulo.trim()) return;
    setCriandoTarefa(true);
    try {
      await window.OctaleApi.andamentos.criarTarefaDeAndamento(movId, {
        title: tarefaTitulo.trim(),
        case_id: proc.case_id || undefined,
      });
      setTarefaMovId(null);
      setTarefaTitulo('');
      onRefreshMovimentos && onRefreshMovimentos(proc.id);
    } catch (e) {
      alert('Erro ao criar tarefa: ' + e.message);
    } finally {
      setCriandoTarefa(false);
    }
  };

  const marcarUmLido = async (movId) => {
    try {
      await window.OctaleApi.andamentos.marcarMovimentoLido(movId);
      onRefreshMovimentos && onRefreshMovimentos(proc.id);
    } catch (e) {
      alert('Erro: ' + e.message);
    }
  };

  const linkBtn = {
    background: 'none', border: 'none', padding: 0, cursor: 'pointer',
    fontSize: 11, fontWeight: 700, color: '#555', letterSpacing: 0.5,
    textTransform: 'uppercase', fontFamily: 'inherit',
  };
  const sep = <span style={{ color: '#ddd', margin: '0 10px', userSelect: 'none' }}>|</span>;

  return (
    <div style={{ border: '1px solid #e0e4e8', background: 'var(--bg)', marginBottom: 1 }}>
      {/* ── Cabeçalho ── */}
      <div style={{ padding: '10px 16px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <input type="checkbox" style={{ cursor: 'pointer', margin: 0 }} />
          <span style={{ color: temNovidade ? '#f59e0b' : '#ccc', fontSize: 15, lineHeight: 1 }}>★</span>
          <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--fg)' }}>
            {temNovidade ? 'Andamento recebido' : 'Processo monitorado'}
          </span>
        </div>
        <span style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{fmtDataRelativa(proc.latest_movement_date)}</span>
      </div>

      {/* ── Info do processo ── */}
      <div style={{ padding: '2px 16px 10px', paddingLeft: 43 }}>
        <div style={{ fontSize: 13, color: 'var(--fg)', lineHeight: 1.5, marginBottom: 1 }}>
          {processTitle}
        </div>
        <div style={{ fontSize: 12, color: '#1a73e8', fontFamily: 'monospace', fontWeight: 600, marginBottom: 3 }}>
          {fmtCnj(proc.cnj_number)}
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>
          {expandido && totalMovs > 0
            ? `${totalMovs} andamento(s) encontrado(s) - ${pendentesCount} importante(s)`
            : temNovidade
            ? `${proc.pending_count} andamento(s) novo(s)`
            : 'Sem novidades · clique em Exibir andamentos para ver o histórico'}
        </div>
      </div>

      {/* ── Movimentos expandidos ── */}
      {expandido && (
        <div style={{ borderTop: '1px solid var(--border)' }}>
          {loadingMovs ? (
            <div style={{ padding: '12px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
              <span className="spinner" style={{ width: 11, height: 11 }} /> Carregando andamentos...
            </div>
          ) : movs.length === 0 ? (
            <div style={{ padding: '12px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>
              Nenhum andamento encontrado. O pull histórico pode estar em andamento.
            </div>
          ) : (
            <>
              {visibleMovs.map((m, i) => {
                const isPendente = m.status === 'pendente';
                const isCreating = tarefaMovId === m.id;
                return (
                  <div key={m.id || i} style={{
                    padding: '9px 16px',
                    background: isPendente ? '#fffbeb' : 'var(--bg)',
                    borderBottom: '1px solid var(--border)',
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                  }}>
                    {/* Data */}
                    <div style={{ fontSize: 11, color: '#999', minWidth: 78, flexShrink: 0, paddingTop: 2 }}>
                      {fmtDataCurta(m.movement_date)}
                    </div>
                    {/* Ícone */}
                    <div style={{ flexShrink: 0, paddingTop: 1, fontSize: 14 }}>
                      {isPendente
                        ? <span style={{ color: '#f59e0b' }}>★</span>
                        : <span style={{ color: '#bbb' }}>↓</span>}
                    </div>
                    {/* Descrição */}
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: 'var(--fg)', lineHeight: 1.5 }}>
                        {m.texto_completo || m.description}
                      </div>
                      {Array.isArray(m.complementary_info) && m.complementary_info.length > 0 && (
                        <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 2, lineHeight: 1.5 }}>
                          {m.complementary_info.map((c, ci) => (
                            <span key={ci} style={{ marginRight: 10 }}>
                              <span style={{ color: '#aaa' }}>{(c.descricao || '').replace(/_/g, ' ')}:</span> {c.nome}
                            </span>
                          ))}
                        </div>
                      )}
                      {m.code && <div style={{ fontSize: 11, color: '#ccc', marginTop: 1 }}>Cód. {m.code}</div>}
                      {isCreating && (
                        <div style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}>
                          <input
                            autoFocus
                            value={tarefaTitulo}
                            onChange={e => setTarefaTitulo(e.target.value)}
                            onKeyDown={e => { if (e.key === 'Enter') criarTarefa(m.id); if (e.key === 'Escape') { setTarefaMovId(null); setTarefaTitulo(''); } }}
                            placeholder="Título da tarefa…"
                            style={{ flex: 1, padding: '4px 8px', borderRadius: 5, border: '1.5px solid #dde', fontSize: 12, fontFamily: 'inherit', outline: 'none', background: 'var(--bg)', color: 'var(--fg)' }}
                          />
                          <button className="btn sm" onClick={() => criarTarefa(m.id)} disabled={criandoTarefa || !tarefaTitulo.trim()}>
                            {criandoTarefa ? '…' : 'Criar'}
                          </button>
                          <button className="btn ghost sm" onClick={() => { setTarefaMovId(null); setTarefaTitulo(''); }}>×</button>
                        </div>
                      )}
                    </div>
                    {/* Ações por movimento (só pendentes, quando não está criando tarefa) */}
                    {isPendente && !isCreating && (
                      <div style={{ display: 'flex', gap: 10, flexShrink: 0, paddingTop: 2 }}>
                        <button style={{ ...linkBtn, color: 'var(--octale-navy)' }} onClick={() => { setTarefaMovId(m.id); setTarefaTitulo(''); }}>
                          + Tarefa
                        </button>
                        <button style={{ ...linkBtn, color: '#aaa' }} onClick={() => marcarUmLido(m.id)}>
                          Lido
                        </button>
                      </div>
                    )}
                  </div>
                );
              })}

              {!showAll && totalMovs > 5 && (
                <div style={{ padding: '8px 16px 8px 43px' }}>
                  <button style={{ ...linkBtn, color: '#1a73e8', textTransform: 'none', fontSize: 12.5 }} onClick={onShowAll}>
                    Ver todos {totalMovs} andamentos
                  </button>
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* ── Barra de ações ── */}
      <div style={{ borderTop: '1px solid var(--border)', padding: '7px 16px 7px 43px', display: 'flex', alignItems: 'center' }}>
        <button style={linkBtn} onClick={onToggle}>Tratar andamentos</button>
        {sep}
        <button style={linkBtn} onClick={() => setShowCapa(true)}>Ver capa / partes</button>
        {proc.case_id && sep}
        {proc.case_id && (
          <button style={linkBtn} onClick={() => window.dispatchEvent(new CustomEvent('pac:nav', { detail: 'cases' }))}>
            Ver processo
          </button>
        )}
        {sep}
        <button style={linkBtn} onClick={onToggle}>
          {expandido ? 'Recolher ▲' : 'Exibir andamentos ▼'}
        </button>
        <div style={{ flex: 1 }} />
        {temNovidade && (
          <button style={{ ...linkBtn, color: descartando ? '#ccc' : '#999' }} onClick={onMarcarLidos} disabled={descartando}>
            {descartando ? <span className="spinner" style={{ width: 10, height: 10 }} /> : 'Descartar alerta'}
          </button>
        )}
      </div>

      {showCapa && (
        <ModalCapa
          processo={proc}
          clientes={clientes || []}
          onClose={() => setShowCapa(false)}
          onChange={onRecarregar}
        />
      )}
    </div>
  );
};

// ── Modal da capa do processo ─────────────────────────────────────────────────
// Mostra os dados que o DataJud fornece e permite completar o que ele não
// fornece (partes, juiz, valor da causa), classificando cada parte como
// cliente, parte contrária ou terceiro interessado.

const ModalCapa = ({ processo, clientes, onClose, onChange }) => {
  const [dados, setDados] = React.useState(null);
  const [partes, setPartes] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [salvando, setSalvando] = React.useState(false);
  const [valorCausa, setValorCausa] = React.useState('');
  const [juiz, setJuiz] = React.useState('');
  const [nova, setNova] = React.useState({ name: '', document: '', polo: 'passivo', role: 'terceiro_interessado', advogado: '', client_id: '', criar_cliente: false });
  const [addingParte, setAddingParte] = React.useState(false);

  const carregar = React.useCallback(async () => {
    try {
      const d = await window.OctaleApi.andamentos.capa(processo.id);
      setDados(d.processo);
      setPartes(d.partes || []);
      setValorCausa(d.processo.valor_causa != null ? String(d.processo.valor_causa) : '');
      setJuiz(d.processo.juiz || '');
    } catch (e) { console.error(e); }
    setLoading(false);
  }, [processo.id]);

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

  const salvarManuais = async () => {
    setSalvando(true);
    try {
      await window.OctaleApi.andamentos.salvarCapa(processo.id, {
        valor_causa: valorCausa === '' ? null : Number(String(valorCausa).replace(',', '.')),
        juiz: juiz.trim() || null,
      });
      onChange && onChange();
    } catch (e) { alert('Erro ao salvar: ' + e.message); }
    setSalvando(false);
  };

  const adicionarParte = async () => {
    if (!nova.name.trim()) return;
    setAddingParte(true);
    try {
      await window.OctaleApi.andamentos.adicionarParte(processo.id, {
        name: nova.name.trim(),
        document: nova.document.trim() || null,
        polo: nova.polo,
        role: nova.role,
        advogado: nova.advogado.trim() || null,
        client_id: nova.client_id || null,
        criar_cliente: nova.criar_cliente,
      });
      setNova({ name: '', document: '', polo: 'passivo', role: 'terceiro_interessado', advogado: '', client_id: '', criar_cliente: false });
      await carregar();
      onChange && onChange();
    } catch (e) { alert('Erro: ' + e.message); }
    setAddingParte(false);
  };

  const removerParte = async (id) => {
    if (!confirm('Remover esta parte do processo?')) return;
    try { await window.OctaleApi.andamentos.removerParte(id); await carregar(); }
    catch (e) { alert('Erro: ' + e.message); }
  };

  const inp = { width: '100%', boxSizing: 'border-box', padding: '7px 10px', borderRadius: 6, border: '1.5px solid #dde', fontSize: 12.5, background: 'var(--bg)', color: 'var(--fg)', fontFamily: 'inherit', outline: 'none' };
  const lbl = { fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .4, color: 'var(--fg-muted)', display: 'block', marginBottom: 4 };
  const fmtCnj = (n) => { const d = String(n).replace(/\D/g, ''); return d.length === 20 ? `${d.slice(0,7)}-${d.slice(7,9)}.${d.slice(9,13)}.${d.slice(13,14)}.${d.slice(14,16)}.${d.slice(16)}` : n; };

  const POLO = { ativo: 'Polo ativo', passivo: 'Polo passivo', terceiro: 'Terceiro' };
  const ROLE = { cliente: 'Cliente', parte_contraria: 'Parte contrária', terceiro_interessado: 'Terceiro interessado' };
  const corRole = { cliente: '#16a34a', parte_contraria: '#C2253E', terceiro_interessado: '#888' };

  const campo = (k, v) => (
    <div>
      <div style={lbl}>{k}</div>
      <div style={{ fontSize: 13, color: v ? 'var(--fg)' : '#bbb' }}>{v || '—'}</div>
    </div>
  );

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 1100, width: '95vw' }}>
        <div className="modal-head">
          <h3>Capa do processo · {fmtCnj(processo.cnj_number)}</h3>
          <button className="btn ghost sm icon" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ maxHeight: '75vh', overflow: 'auto' }}>
          {loading ? (
            <div style={{ padding: 30, textAlign: 'center', color: 'var(--fg-muted)' }}>
              <span className="spinner" style={{ width: 18, height: 18 }} /> Carregando…
            </div>
          ) : (
            <>
              {/* Dados vindos do DataJud */}
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, color: 'var(--fg-muted)', marginBottom: 10 }}>
                Dados do DataJud (CNJ)
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14, padding: '14px 16px', background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 8, marginBottom: 20 }}>
                {campo('Tribunal', dados?.tribunal_code?.toUpperCase())}
                {campo('Classe', dados?.process_class)}
                {campo('Assunto', dados?.subject)}
                {campo('Órgão julgador', dados?.orgao_julgador)}
                {campo('Grau', dados?.grau)}
                {campo('Ajuizamento', dados?.data_ajuizamento ? new Date(dados.data_ajuizamento).toLocaleDateString('pt-BR') : null)}
                {campo('Sistema', dados?.sistema)}
                {campo('Formato', dados?.formato)}
                {campo('Nível de sigilo', dados?.nivel_sigilo != null ? String(dados.nivel_sigilo) : null)}
              </div>

              {/* Campos que a API não fornece */}
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, color: 'var(--fg-muted)', marginBottom: 4 }}>
                Preenchimento manual
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 10 }}>
                A API pública do CNJ não fornece valor da causa nem o nome do juiz.
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr auto', gap: 10, alignItems: 'end', marginBottom: 22 }}>
                <div>
                  <label style={lbl}>Valor da causa (R$)</label>
                  <input style={inp} value={valorCausa} onChange={e => setValorCausa(e.target.value)} placeholder="0,00" />
                </div>
                <div>
                  <label style={lbl}>Juiz</label>
                  <input style={inp} value={juiz} onChange={e => setJuiz(e.target.value)} placeholder="Nome do magistrado" />
                </div>
                <button className="btn sm" style={{ height: 33 }} onClick={salvarManuais} disabled={salvando}>
                  {salvando ? '…' : 'Salvar'}
                </button>
              </div>

              {/* Partes */}
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, color: 'var(--fg-muted)', marginBottom: 4 }}>
                Partes do processo
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 10 }}>
                O DataJud não retorna as partes. Cadastre-as aqui e defina o papel de cada uma.
              </div>

              {partes.length > 0 && (
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5, marginBottom: 16 }}>
                  <thead>
                    <tr style={{ borderBottom: '2px solid var(--border)' }}>
                      {['Nome', 'Documento', 'Polo', 'Papel', 'Advogado', ''].map((h, i) => (
                        <th key={i} style={{ padding: '6px 8px', textAlign: 'left', fontSize: 11, color: 'var(--fg-muted)' }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {partes.map(p => (
                      <tr key={p.id} style={{ borderBottom: '1px solid var(--border)' }}>
                        <td style={{ padding: '7px 8px', fontWeight: 600 }}>{p.name}</td>
                        <td style={{ padding: '7px 8px', fontFamily: 'monospace', fontSize: 11.5 }}>{p.document || '—'}</td>
                        <td style={{ padding: '7px 8px' }}>
                          <select style={{ ...inp, padding: '3px 6px', fontSize: 11.5 }} value={p.polo}
                            onChange={async e => { await window.OctaleApi.andamentos.atualizarParte(p.id, { polo: e.target.value }); carregar(); }}>
                            {Object.entries(POLO).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                          </select>
                        </td>
                        <td style={{ padding: '7px 8px' }}>
                          <span style={{ fontSize: 11, fontWeight: 700, color: corRole[p.role] }}>{ROLE[p.role]}</span>
                          {p.clients && <div style={{ fontSize: 10.5, color: 'var(--fg-muted)' }}>→ {p.clients.name}</div>}
                        </td>
                        <td style={{ padding: '7px 8px', color: 'var(--fg-muted)' }}>{p.advogado || '—'}</td>
                        <td style={{ padding: '7px 8px', textAlign: 'right' }}>
                          <button className="btn ghost sm" style={{ fontSize: 11 }} onClick={() => removerParte(p.id)}>Remover</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}

              {/* Nova parte */}
              <div style={{ padding: '14px 16px', border: '1px dashed var(--border)', borderRadius: 8, background: 'var(--bg-subtle)' }}>
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 1.4fr', gap: 10, marginBottom: 10 }}>
                  <div>
                    <label style={lbl}>Nome da parte *</label>
                    <input style={inp} value={nova.name} onChange={e => setNova(n => ({ ...n, name: e.target.value }))} placeholder="Nome completo / razão social" />
                  </div>
                  <div>
                    <label style={lbl}>CPF / CNPJ</label>
                    <input style={inp} value={nova.document} onChange={e => setNova(n => ({ ...n, document: e.target.value }))} placeholder="Somente números" />
                  </div>
                  <div>
                    <label style={lbl}>Polo</label>
                    <select style={inp} value={nova.polo} onChange={e => setNova(n => ({ ...n, polo: e.target.value }))}>
                      {Object.entries(POLO).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={lbl}>Advogado</label>
                    <input style={inp} value={nova.advogado} onChange={e => setNova(n => ({ ...n, advogado: e.target.value }))} placeholder="Opcional" />
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1.6fr auto', gap: 10, alignItems: 'end' }}>
                  <div>
                    <label style={lbl}>Papel</label>
                    <select style={inp} value={nova.role} disabled={nova.criar_cliente || !!nova.client_id}
                      onChange={e => setNova(n => ({ ...n, role: e.target.value }))}>
                      {Object.entries(ROLE).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={lbl}>Vincular a cliente</label>
                    <select style={inp} value={nova.client_id}
                      onChange={e => setNova(n => ({ ...n, client_id: e.target.value, criar_cliente: false }))}>
                      <option value="">Não vincular</option>
                      {clientes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                    </select>
                  </div>
                  <button className="btn sm" style={{ height: 33 }} onClick={adicionarParte} disabled={addingParte || !nova.name.trim()}>
                    {addingParte ? '…' : 'Adicionar parte'}
                  </button>
                </div>
                <label style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 10, fontSize: 12.5, cursor: 'pointer' }}>
                  <input type="checkbox" checked={nova.criar_cliente}
                    onChange={e => setNova(n => ({ ...n, criar_cliente: e.target.checked, client_id: '' }))} />
                  Cadastrar esta parte como <strong>novo cliente</strong> da banca
                </label>
              </div>
            </>
          )}
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Fechar</button>
        </div>
      </div>
    </div>
  );
};

// ── Modal de importação em lote ───────────────────────────────────────────────

const ModalImportacao = ({ onClose, clientes }) => {
  const [passo, setPasso] = React.useState(1); // 1=upload, 2=progress, 3=preview
  const [sessionId, setSessionId] = React.useState(null);
  const [sessionData, setSessionData] = React.useState(null);
  const [clienteSelecionado, setClienteSelecionado] = React.useState({}); // cnj -> client_id
  const [selecionados, setSelecionados] = React.useState(new Set());
  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const fileRef = React.useRef();

  const processarArquivo = async (file) => {
    setErro('');
    try {
      // Backend faz o parse real (suporta XLSX, XLS, CSV, TXT)
      const { cnj_numbers: validos } = await window.OctaleApi.andamentos.parseFile(file);

      if (!validos || validos.length === 0) {
        setErro('Nenhum número CNJ válido (20 dígitos) encontrado no arquivo.');
        return;
      }

      setPasso(2);
      const { session_id } = await window.OctaleApi.andamentos.uploadImportacao(file.name, validos);
      setSessionId(session_id);

      // Polling até status != processing
      for (let i = 0; i < 60; i++) {
        await new Promise(r => setTimeout(r, 2000));
        const s = await window.OctaleApi.andamentos.previewImportacao(session_id);
        if (s.status !== 'processing') {
          setSessionData(s);
          // Pré-selecionar os encontrados e não monitorados
          const presel = new Set(
            (s.preview_data || []).filter(r => r.found && !r.alreadyMonitored).map(r => r.cnj)
          );
          setSelecionados(presel);
          setPasso(3);
          return;
        }
      }
      setErro('Timeout ao processar arquivo. Tente novamente.');
      setPasso(1);
    } catch (e) {
      setErro(e.message || 'Erro ao processar arquivo.');
      setPasso(1);
    }
  };

  const onDrop = (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) processarArquivo(file);
  };

  const salvar = async () => {
    const payload = [...selecionados]
      .filter(cnj => clienteSelecionado[cnj])
      .map(cnj => ({ cnj, client_id: clienteSelecionado[cnj] }));

    if (payload.length === 0) {
      alert('Selecione ao menos um processo com cliente informado.');
      return;
    }
    const semCliente = [...selecionados].filter(cnj => !clienteSelecionado[cnj]);
    if (semCliente.length > 0) {
      alert('Informe o cliente para todos os processos selecionados.');
      return;
    }

    setSalvando(true);
    try {
      const { saved } = await window.OctaleApi.andamentos.salvarImportacao(sessionId, payload);
      alert(`${saved} processo(s) adicionado(s) ao monitoramento.`);
      onClose();
    } catch (e) {
      alert('Erro ao salvar: ' + e.message);
    } finally {
      setSalvando(false);
    }
  };

  const preview = sessionData?.preview_data || [];
  const inp = { padding: '6px 10px', borderRadius: 6, border: '1.5px solid #dde', fontSize: 12.5, fontFamily: 'inherit', background: 'var(--bg)', color: 'var(--fg)', outline: 'none' };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 1100, width: '95vw' }}>
        <div className="modal-head">
          <h3>Importar processos em lote</h3>
          <button className="btn ghost sm icon" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ maxHeight: '75vh', overflow: 'auto' }}>
          {/* Passo 1: Upload */}
          {passo === 1 && (
            <div>
              {erro && (
                <div style={{ padding: '10px 14px', borderRadius: 8, background: 'rgba(194,37,62,.07)', border: '1px solid rgba(194,37,62,.2)', color: '#C2253E', fontSize: 13, marginBottom: 14 }}>{erro}</div>
              )}
              <div
                onDragOver={e => e.preventDefault()}
                onDrop={onDrop}
                onClick={() => fileRef.current?.click()}
                style={{ border: '2px dashed var(--border)', borderRadius: 10, padding: '40px 24px', textAlign: 'center', cursor: 'pointer', background: 'var(--bg-subtle)' }}
              >
                <Icon name="upload" size={28} style={{ color: 'var(--fg-muted)', marginBottom: 12 }} />
                <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 6 }}>Arraste o arquivo aqui ou clique para selecionar</div>
                <div style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>Arquivo XLSX ou CSV com coluna de números CNJ (20 dígitos)</div>
                <input ref={fileRef} type="file" accept=".csv,.xlsx,.txt" style={{ display: 'none' }}
                  onChange={e => { if (e.target.files[0]) processarArquivo(e.target.files[0]); }} />
              </div>
            </div>
          )}

          {/* Passo 2: Progresso */}
          {passo === 2 && (
            <div style={{ textAlign: 'center', padding: '40px 24px' }}>
              <span className="spinner" style={{ width: 28, height: 28, display: 'inline-block', marginBottom: 16 }} />
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 6 }}>Buscando processos no DataJud...</div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>Isso pode levar alguns segundos.</div>
            </div>
          )}

          {/* Passo 3: Prévia */}
          {passo === 3 && (
            <div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 14 }}>
                {sessionData?.valid_cnj_count} CNJ(s) válidos · {sessionData?.found_in_datajud} encontrados no DataJud · Selecione os processos a monitorar
              </div>
              <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
                  <thead>
                    <tr style={{ borderBottom: '2px solid var(--border)' }}>
                      <th style={{ padding: '6px 8px', textAlign: 'left', width: 32 }}></th>
                      <th style={{ padding: '6px 8px', textAlign: 'left' }}>Número CNJ</th>
                      <th style={{ padding: '6px 8px', textAlign: 'left' }}>Status</th>
                      <th style={{ padding: '6px 8px', textAlign: 'left' }}>Tribunal</th>
                      <th style={{ padding: '6px 8px', textAlign: 'left' }}>Classe</th>
                      <th style={{ padding: '6px 8px', textAlign: 'left', minWidth: 160 }}>Cliente *</th>
                    </tr>
                  </thead>
                  <tbody>
                    {preview.map((row) => {
                      const isBlocked = !row.found || row.alreadyMonitored;
                      const isSel = selecionados.has(row.cnj);
                      const cnj20 = row.cnj;
                      const cnjFmt = `${cnj20.slice(0, 7)}-${cnj20.slice(7, 9)}.${cnj20.slice(9, 13)}.${cnj20.slice(13, 14)}.${cnj20.slice(14, 16)}.${cnj20.slice(16)}`;
                      return (
                        <tr key={row.cnj} style={{ borderBottom: '1px solid var(--border)', opacity: isBlocked ? .5 : 1 }}>
                          <td style={{ padding: '6px 8px' }}>
                            <input type="checkbox" disabled={isBlocked} checked={!isBlocked && isSel}
                              onChange={e => setSelecionados(s => { const n = new Set(s); e.target.checked ? n.add(row.cnj) : n.delete(row.cnj); return n; })} />
                          </td>
                          <td style={{ padding: '6px 8px', fontFamily: 'monospace', fontSize: 11.5 }}>{cnjFmt}</td>
                          <td style={{ padding: '6px 8px' }}>
                            {row.alreadyMonitored
                              ? <span style={{ color: '#f59e0b', fontSize: 11 }}>⚠ Já monitorado</span>
                              : row.found
                              ? <span style={{ color: '#16a34a', fontSize: 11 }}>✓ Encontrado</span>
                              : <span style={{ color: '#C2253E', fontSize: 11 }}>✗ Não encontrado</span>}
                          </td>
                          <td style={{ padding: '6px 8px' }}>{row.tribunal?.toUpperCase() || '—'}</td>
                          <td style={{ padding: '6px 8px' }}>{row.process_class || '—'}</td>
                          <td style={{ padding: '6px 8px' }}>
                            {!isBlocked && (
                              <select style={{ ...inp, width: '100%' }}
                                value={clienteSelecionado[row.cnj] || ''}
                                onChange={e => setClienteSelecionado(c => ({ ...c, [row.cnj]: e.target.value }))}>
                                <option value="">Selecione…</option>
                                {clientes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                              </select>
                            )}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Cancelar</button>
          {passo === 3 && (
            <button
              className="btn"
              disabled={salvando || selecionados.size === 0}
              onClick={salvar}
            >
              {salvando ? 'Salvando…' : `Salvar selecionados (${selecionados.size})`}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Modal de cadastro individual ──────────────────────────────────────────────

const ModalManual = ({ onClose, clientes }) => {
  const [cnj, setCnj] = React.useState('');
  const [tribunal, setTribunal] = React.useState('tjsp');
  const [clientId, setClientId] = React.useState('');
  const [buscando, setBuscando] = React.useState(false);
  const [preview, setPreview] = React.useState(null);
  const [salvando, setSalvando] = React.useState(false);
  const [erro, setErro] = React.useState('');

  const fmtMask = (v) => {
    const d = v.replace(/\D/g, '').slice(0, 20);
    if (d.length <= 7) return d;
    if (d.length <= 9) return `${d.slice(0, 7)}-${d.slice(7)}`;
    if (d.length <= 13) return `${d.slice(0, 7)}-${d.slice(7, 9)}.${d.slice(9)}`;
    if (d.length <= 14) return `${d.slice(0, 7)}-${d.slice(7, 9)}.${d.slice(9, 13)}.${d.slice(13)}`;
    if (d.length <= 16) return `${d.slice(0, 7)}-${d.slice(7, 9)}.${d.slice(9, 13)}.${d.slice(13, 14)}.${d.slice(14)}`;
    return `${d.slice(0, 7)}-${d.slice(7, 9)}.${d.slice(9, 13)}.${d.slice(13, 14)}.${d.slice(14, 16)}.${d.slice(16)}`;
  };

  const buscar = async () => {
    setErro('');
    const raw = cnj.replace(/\D/g, '');
    if (raw.length !== 20) { setErro('Número CNJ inválido. Verifique o formato.'); return; }
    setBuscando(true);
    try {
      const r = await window.OctaleApi.datajud.buscarPorNumero(raw, tribunal);
      if (r.processos?.length) {
        const p = r.processos[0];
        setPreview({ tribunal: p.tribunal || tribunal, process_class: p.classe?.nome, subject: p.assuntos?.[0]?.nome });
      } else {
        setPreview({ tribunal, process_class: null, subject: null });
      }
    } catch (e) {
      setErro(e.message);
    } finally {
      setBuscando(false);
    }
  };

  const salvar = async () => {
    if (!clientId) { alert('Selecione um cliente.'); return; }
    setSalvando(true);
    try {
      await window.OctaleApi.andamentos.cadastrarIndividual({
        cnj_number: cnj.replace(/\D/g, ''),
        client_id: clientId,
        tribunal_code: tribunal,
      });
      alert('Processo adicionado ao monitoramento.');
      onClose();
    } catch (e) {
      if (e.message.includes('já está sendo monitorado')) {
        setErro('Este processo já está sendo monitorado.');
      } else {
        alert('Erro: ' + e.message);
      }
    } finally {
      setSalvando(false);
    }
  };

  const inp = { width: '100%', boxSizing: 'border-box', padding: '8px 11px', borderRadius: 6, border: '1.5px solid #dde', fontSize: 13, background: 'var(--bg)', color: 'var(--fg)', outline: 'none', fontFamily: 'inherit' };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <div className="modal-head">
          <h3>Adicionar processo individual</h3>
          <button className="btn ghost sm icon" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {erro && (
            <div style={{ padding: '10px 14px', borderRadius: 8, background: 'rgba(194,37,62,.07)', border: '1px solid rgba(194,37,62,.2)', color: '#C2253E', fontSize: 13 }}>{erro}</div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 160px auto', gap: 10, alignItems: 'end' }}>
            <div className="field-group">
              <label>Número CNJ</label>
              <input style={inp} value={cnj} onChange={e => setCnj(fmtMask(e.target.value))}
                onKeyDown={e => e.key === 'Enter' && buscar()} placeholder="0000000-00.0000.0.00.0000" />
            </div>
            <div className="field-group">
              <label>Tribunal</label>
              <select style={inp} value={tribunal} onChange={e => setTribunal(e.target.value)}>
                <option value="tjsp">TJSP</option>
                <option value="tjrj">TJRJ</option>
                <option value="tjmg">TJMG</option>
                <option value="stj">STJ</option>
                <option value="trf3">TRF3</option>
              </select>
            </div>
            <button className="btn" style={{ height: 38 }} onClick={buscar} disabled={buscando}>
              {buscando ? <span className="spinner" style={{ width: 12, height: 12 }} /> : 'Buscar'}
            </button>
          </div>

          {preview && (
            <div style={{ padding: '12px 14px', borderRadius: 8, background: 'var(--bg-subtle)', border: '1px solid var(--border)', fontSize: 13 }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>Processo localizado</div>
              <div style={{ color: 'var(--fg-muted)' }}>
                {preview.tribunal?.toUpperCase()}
                {preview.process_class ? ` · ${preview.process_class}` : ''}
                {preview.subject ? ` · ${preview.subject}` : ''}
              </div>
            </div>
          )}

          <div className="field-group">
            <label>Cliente *</label>
            <select style={inp} value={clientId} onChange={e => setClientId(e.target.value)}>
              <option value="">Selecione um cliente</option>
              {clientes.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Cancelar</button>
          <button className="btn" onClick={salvar} disabled={salvando || !preview}>
            {salvando ? 'Salvando…' : 'Adicionar ao monitoramento'}
          </button>
        </div>
      </div>
    </div>
  );
};