// Workspace de Casos — conectado à API real

const CaseAIPanel = ({ caseData, floating }) => {
  const [input, setInput] = React.useState('');
  const [messages, setMessages] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pendingTask, setPendingTask] = React.useState(null);
  const [creatingTask, setCreatingTask] = React.useState(false);

  const send = async () => {
    if (!input.trim() || loading) return;
    const q = input.trim();
    setInput('');
    setMessages(prev => [...prev, { role: 'user', text: q }]);
    setLoading(true);
    try {
      const result = await window.OctaleApi.ai.chat(q, { case_id: caseData?.id });
      setMessages(prev => [...prev, { role: 'ai', text: result.answer || 'Sem resposta.' }]);
      // O mesmo mecanismo do Assistente IA geral: a IA pode sugerir uma tarefa
      // a partir da conversa — aqui ela já nasce vinculada a este caso.
      if (result.suggested_task) setPendingTask(result.suggested_task);
    } catch (e) {
      setMessages(prev => [...prev, { role: 'ai', text: e.message || 'Erro ao conectar com a IA.' }]);
    } finally {
      setLoading(false);
    }
  };

  const handleCreateTask = async () => {
    if (!pendingTask) return;
    setCreatingTask(true);
    try {
      const task = await window.OctaleApi.tasks.create({
        title: pendingTask.title,
        description: pendingTask.description || '',
        priority: pendingTask.priority || 'Média',
        kanban_column: pendingTask.kanban_column || 'novo',
        due_date: pendingTask.due_date || null,
        case_id: caseData?.id,
        client_id: caseData?.client_id,
      });
      setMessages(prev => [...prev, { role: 'ai', text: `Tarefa **"${task.title}"** criada no Kanban deste caso.` }]);
      setPendingTask(null);
    } catch (e) {
      setMessages(prev => [...prev, { role: 'ai', text: 'Erro ao criar tarefa: ' + e.message }]);
    } finally {
      setCreatingTask(false);
    }
  };

  return (
    <div className="cw-right" style={floating ? { background: 'var(--octale-dark-purple)', borderLeft: 0, borderRadius: 8, padding: 18 } : {}}>
      <h3>
        <div style={{ width: 24, height: 24, borderRadius: 4, background: 'var(--octale-neon)', display: 'grid', placeItems: 'center', color: 'var(--octale-dark-purple)' }}>
          <Icon name="sparkles" size={13} />
        </div>
        Assistente Jurídico
        {caseData && <span className="sub">caso {caseData.number}</span>}
      </h3>

      {messages.length === 0 && (
        <div style={{ marginTop: 14 }} className="prompt">
          <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,.55)', textTransform: 'uppercase', letterSpacing: '.12em', fontWeight: 700, marginBottom: 6 }}>
            Sugestões rápidas
          </div>
          <div className="quick">
            {[
              { ic: 'fileText', t: 'Resumir últimos desenvolvimentos' },
              { ic: 'mail', t: 'Gerar relatório executivo para cliente' },
              { ic: 'list', t: 'Encontrar contradições nos documentos' },
              { ic: 'list', t: 'Preparar lista de próximas ações' },
            ].map((q, i) => (
              <button key={i} onClick={() => setInput(q.t)}>
                <Icon name={q.ic} size={13} style={{ color: 'var(--octale-neon)' }} /> {q.t}
              </button>
            ))}
          </div>
        </div>
      )}

      {messages.length > 0 && (
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 320, overflowY: 'auto' }}>
          {messages.map((m, i) => (
            <div key={i} style={{
              fontSize: 12.5,
              lineHeight: 1.55,
              padding: '8px 10px',
              borderRadius: 6,
              background: m.role === 'user' ? 'rgba(255,255,255,.06)' : 'rgba(216,224,69,.08)',
              borderLeft: m.role === 'ai' ? '2px solid var(--octale-neon)' : 'none',
            }}>
              {m.role === 'ai' && (
                <div style={{ color: 'var(--octale-neon)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.12em', fontWeight: 700, marginBottom: 4 }}>Octale.AI</div>
              )}
              {m.role === 'user' && (
                <div style={{ color: 'rgba(255,255,255,.5)', fontSize: 10.5, marginBottom: 4 }}>Você</div>
              )}
              <div style={{ color: m.role === 'user' ? 'rgba(255,255,255,.8)' : 'rgba(255,255,255,.9)' }}>{m.text}</div>
            </div>
          ))}
          {loading && (
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,.4)', padding: '4px 10px' }}>
              <span className="spinner" style={{ width: 10, height: 10, marginRight: 6 }} />Processando…
            </div>
          )}
        </div>
      )}

      {pendingTask && (
        <div style={{
          marginTop: 12, padding: '12px 14px', borderRadius: 8,
          background: 'rgba(200,241,53,.08)', border: '1px solid rgba(200,241,53,.3)',
        }}>
          <div style={{ fontSize: 10.5, color: 'var(--octale-neon)', textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 700, marginBottom: 6 }}>
            Sugestão de tarefa
          </div>
          <div style={{ fontSize: 12.5, color: '#fff', fontWeight: 600, marginBottom: 8 }}>{pendingTask.title}</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button
              onClick={handleCreateTask}
              disabled={creatingTask}
              style={{ flex: 1, padding: '7px 10px', borderRadius: 6, border: 0, background: 'var(--octale-neon)', color: 'var(--octale-dark-purple)', fontWeight: 700, fontSize: 12, cursor: 'pointer' }}
            >
              {creatingTask ? 'Criando…' : 'Criar tarefa neste caso'}
            </button>
            <button
              onClick={() => setPendingTask(null)}
              style={{ padding: '7px 10px', borderRadius: 6, border: '1px solid rgba(255,255,255,.2)', background: 'none', color: 'rgba(255,255,255,.7)', fontSize: 12, cursor: 'pointer' }}
            >
              Ignorar
            </button>
          </div>
        </div>
      )}

      <div className="composer" style={{ marginTop: 14 }}>
        <Icon name="message" size={13} style={{ color: 'rgba(255,255,255,.55)' }} />
        <input
          placeholder="Pergunte algo sobre este caso…"
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && send()}
        />
        <button onClick={send} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <Icon name="send" size={14} style={{ color: input ? 'var(--octale-neon)' : 'rgba(255,255,255,.3)' }} />
        </button>
      </div>

      <div style={{ marginTop: 14, fontSize: 10, color: 'rgba(255,255,255,.45)', display: 'flex', alignItems: 'center', gap: 6 }}>
        <Icon name="lock" size={10} /> Dados confidenciais · processados internamente
      </div>
    </div>
  );
};

// ─── Documentos do caso ──────────────────────────────────────
const CaseDocsTab = ({ caseId, clientId }) => {
  const [docs, setDocs] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [uploading, setUploading] = React.useState(false);
  const [dragOver, setDragOver] = React.useState(false);

  React.useEffect(() => {
    setLoading(true);
    window.OctaleApi.documents.list({ client_id: clientId, case_id: caseId })
      .then(setDocs)
      .catch(() => setDocs([]))
      .finally(() => setLoading(false));
  }, [caseId]);

  const handleUpload = async (files) => {
    if (!files.length) return;
    setUploading(true);
    try {
      for (const file of files) {
        const result = await window.OctaleApi.documents.upload(file, { client_id: clientId, case_id: caseId, category: 'caso' });
        setDocs(prev => [result.document || result, ...prev]);
      }
    } catch(e) { alert('Erro ao enviar: ' + e.message); }
    finally { setUploading(false); }
  };

  const handleDownload = async (doc) => {
    try {
      const url = await window.OctaleApi.documents.getDownloadUrl(doc.id);
      window.open(url, '_blank');
    } catch(e) { alert('Erro ao baixar: ' + e.message); }
  };

  const handleDelete = async (docId) => {
    if (!confirm('Remover este documento?')) return;
    try {
      await window.OctaleApi.documents.delete(docId);
      setDocs(prev => prev.filter(d => d.id !== docId));
    } catch(e) { alert('Erro ao remover: ' + e.message); }
  };

  return (
    <div style={{ marginTop: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: '#1a1a2e' }}>
          Documentos{docs.length > 0 ? ` · ${docs.length}` : ''}
        </span>
        <label style={{ cursor: 'pointer' }}>
          <input type="file" multiple style={{ display: 'none' }}
            onChange={e => handleUpload(Array.from(e.target.files))}
            onClick={e => e.target.value = ''} />
          <span className="btn sm" style={{ pointerEvents: 'none' }}>
            <Icon name="upload" size={12} /> Upload
          </span>
        </label>
      </div>

      <div
        onDragOver={e => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={e => { e.preventDefault(); setDragOver(false); handleUpload(Array.from(e.dataTransfer.files)); }}
        style={{ border: `2px dashed ${dragOver ? 'var(--octale-navy)' : '#dde'}`, borderRadius: 8, padding: '20px', textAlign: 'center', marginBottom: 16, background: dragOver ? 'rgba(23,23,15,.04)' : 'transparent', transition: 'all .15s' }}>
        <Icon name="upload" size={18} style={{ color: 'var(--fg-muted)', marginBottom: 6 }} />
        <div style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>Arraste arquivos aqui ou use o botão Upload</div>
      </div>

      {uploading && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--fg-muted)', marginBottom: 12 }}>
          <span className="spinner" style={{ width: 12, height: 12 }} /> Enviando…
        </div>
      )}

      {loading ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg-muted)', fontSize: 13 }}>
          <span className="spinner" style={{ width: 12, height: 12 }} /> Carregando…
        </div>
      ) : docs.length === 0 ? (
        <div style={{ color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center', padding: '16px 0' }}>Nenhum documento anexado a este caso.</div>
      ) : docs.map(doc => (
        <div key={doc.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 6, background: '#fff' }}>
          <Icon name="file" size={14} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{doc.file_name || doc.name || 'Documento'}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>
              {doc.file_size ? `${(doc.file_size / 1024).toFixed(0)} KB · ` : ''}
              {doc.created_at ? new Date(doc.created_at).toLocaleDateString('pt-BR') : ''}
            </div>
          </div>
          <button className="btn ghost sm icon" onClick={() => handleDownload(doc)} title="Baixar"><Icon name="download" size={13} /></button>
          <button className="btn ghost sm icon" onClick={() => handleDelete(doc.id)} title="Remover" style={{ color: 'var(--danger)' }}><Icon name="trash" size={13} /></button>
        </div>
      ))}
    </div>
  );
};

// ─── Levantamento de valores do caso (migration 030) ────────────────────────
const fmtBRL = (n) => Number(n || 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
const todayISO = () => new Date().toISOString().slice(0, 10);
const fmtDateBR = (iso) => {
  if (!iso) return '—';
  const [y, m, d] = iso.split('-').map(Number);
  return `${String(d).padStart(2,'0')}/${String(m).padStart(2,'0')}/${y}`;
};

const ReceberModal = ({ levantamento: lv, onClose, onConfirm }) => {
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);
  const [data, setData] = React.useState(todayISO());
  const [valorTxt, setValorTxt] = React.useState(String(Number(lv.valor).toFixed(2)).replace('.', ','));
  const [obs, setObs] = React.useState('');
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');

  const submit = async () => {
    const v = parseFloat(valorTxt.replace(/\./g, '').replace(',', '.'));
    if (!data || isNaN(v) || v <= 0) { setErr('Preencha data e valor recebido.'); return; }
    setSaving(true); setErr('');
    try {
      await onConfirm({ data_recebimento: data, valor_recebido: v, observacoes_recebimento: obs || null });
      onClose();
    } catch (e) { setErr(e.message || 'Erro.'); }
    finally { setSaving(false); }
  };

  return (
    <div className="scrim" onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(26,10,46,.5)', zIndex:400, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:12, width:'100%', maxWidth:420, padding:22, boxShadow:'0 20px 60px rgba(0,0,0,.3)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14 }}>
          <h3 style={{ fontSize:16, fontWeight:800, color:'var(--octale-navy)', fontFamily:'Georgia,serif', margin:0 }}>Marcar como recebido</h3>
          <button onClick={onClose} style={{ border:0, background:'transparent', fontSize:22, color:'#999', cursor:'pointer', lineHeight:1 }}>×</button>
        </div>
        <div style={{ fontSize:12, color:'#777', marginBottom:14 }}>
          {lv.tipo ? `${lv.tipo} · ` : ''}peticionado em {fmtDateBR(lv.data_peticionamento)} ({fmtBRL(lv.valor)})
        </div>
        <label style={{ display:'block', fontSize:11, fontWeight:700, color:'#666', marginBottom:5 }}>Data do recebimento</label>
        <input type="date" value={data} onChange={e => setData(e.target.value)} style={{ width:'100%', padding:'9px 11px', border:'1.5px solid #ddd', borderRadius:7, fontSize:13, marginBottom:12, boxSizing:'border-box' }} />
        <label style={{ display:'block', fontSize:11, fontWeight:700, color:'#666', marginBottom:5 }}>Valor recebido (R$)</label>
        <input value={valorTxt} onChange={e => setValorTxt(e.target.value)} placeholder="0,00" style={{ width:'100%', padding:'9px 11px', border:'1.5px solid #ddd', borderRadius:7, fontSize:13, marginBottom:12, boxSizing:'border-box' }} />
        <label style={{ display:'block', fontSize:11, fontWeight:700, color:'#666', marginBottom:5 }}>Observações (opcional)</label>
        <textarea value={obs} onChange={e => setObs(e.target.value)} rows={2} placeholder="Ex: veio com correção monetária, recebido a menor, etc." style={{ width:'100%', padding:'9px 11px', border:'1.5px solid #ddd', borderRadius:7, fontSize:13, resize:'vertical', fontFamily:'inherit', boxSizing:'border-box' }} />
        {err && <div style={{ marginTop:10, padding:'8px 11px', borderRadius:6, fontSize:12, background:'rgba(194,37,62,.07)', border:'1px solid rgba(194,37,62,.2)', color:'#C2253E' }}>{err}</div>}
        <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:16 }}>
          <button onClick={onClose} style={{ padding:'9px 14px', borderRadius:7, border:'1px solid #ddd', background:'#fff', cursor:'pointer', fontSize:12.5, fontWeight:600 }}>Cancelar</button>
          <button onClick={submit} disabled={saving} style={{ padding:'9px 16px', borderRadius:7, border:0, background:saving?'#555':'#3DA35D', color:'#fff', cursor:saving?'not-allowed':'pointer', fontSize:12.5, fontWeight:700 }}>{saving ? 'Salvando…' : 'Confirmar recebimento'}</button>
        </div>
      </div>
    </div>
  );
};

// ── Aba Andamentos dentro do Caso ──────────────────────────────────────────────
const CaseAndamentosTab = ({ caseId, caseNumero }) => {
  const [dados, setDados] = React.useState(null); // { processos, andamentos, total }
  const [loading, setLoading] = React.useState(true);
  const [criandoTarefa, setCriandoTarefa] = React.useState(null); // movement sendo convertido
  const [tarefaTitle, setTarefaTitle] = React.useState('');
  const [salvando, setSalvando] = React.useState(false);

  const carregar = () => {
    setLoading(true);
    window.OctaleApi.andamentos.porCaso(caseId)
      .then(setDados)
      .catch(() => setDados(null))
      .finally(() => setLoading(false));
  };

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

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

  const criarTarefa = async (mov) => {
    if (!tarefaTitle.trim()) return;
    setSalvando(true);
    try {
      await window.OctaleApi.andamentos.criarTarefaDeAndamento(mov.id, {
        title: tarefaTitle.trim(),
        case_id: caseId,
      });
      setCriandoTarefa(null);
      setTarefaTitle('');
      carregar();
    } catch (e) {
      alert('Erro ao criar tarefa: ' + e.message);
    } finally {
      setSalvando(false);
    }
  };

  const marcarLidoIndividual = async (movId) => {
    try {
      // Reutiliza o endpoint de marcar lidos do processo inteiro não existe para individual —
      // usamos criar tarefa sem título como "descarte silencioso" via patch direto.
      // Por ora, recarrega após ação na tela de Andamentos.
      // O movimento já persiste no banco independente do status.
      alert('Para descartar este andamento, acesse o Painel de Andamentos.');
    } catch {}
  };

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

  if (loading) return (
    <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--fg-muted)', fontSize: 13 }}>
      <span className="spinner" style={{ width: 14, height: 14 }} /> Carregando andamentos…
    </div>
  );

  if (!dados || !dados.processos?.length) return (
    <div style={{ padding: '24px 0', color: 'var(--fg-muted)', fontSize: 13 }}>
      <div style={{ marginBottom: 10 }}>
        Nenhum processo monitorado vinculado a este caso.
        {caseNumero && (
          <span> O número do processo (<b>{caseNumero}</b>) deve ser cadastrado no Painel de Andamentos para ativar o monitoramento.</span>
        )}
      </div>
      <button className="btn ghost sm" onClick={() => window.dispatchEvent(new CustomEvent('pac:nav', { detail: 'andamentos' }))}>
        Ir para Andamentos
      </button>
    </div>
  );

  const procs = dados.processos;
  const andamentos = dados.andamentos;
  const pendentes = andamentos.filter(a => a.status === 'pendente').length;
  const total = andamentos.length;

  return (
    <div style={{ marginTop: 16 }}>
      {/* Cabeçalho */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <span style={{ fontWeight: 700, fontSize: 13 }}>Registro de Andamentos</span>
          <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--fg-muted)' }}>{total} total · {pendentes} pendentes</span>
        </div>
        <button className="btn ghost sm" onClick={carregar}><Icon name="refresh" size={12} /></button>
      </div>

      {/* Processos monitorados vinculados */}
      {procs.map(p => (
        <div key={p.id} style={{ marginBottom: 6, padding: '8px 12px', borderRadius: 8, background: 'var(--bg-subtle)', border: '1px solid var(--border)', fontSize: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
          <Icon name="search" size={12} style={{ color: 'var(--octale-navy)', flexShrink: 0 }} />
          <span style={{ fontFamily: 'monospace', fontWeight: 600 }}>{p.cnj_number}</span>
          {p.tribunal_code && <span className="chip soft" style={{ fontSize: 10, textTransform: 'uppercase' }}>{p.tribunal_code}</span>}
          {p.process_class && <span style={{ color: 'var(--fg-muted)' }}>{p.process_class}</span>}
          <span style={{ marginLeft: 'auto', color: 'var(--fg-muted)', fontSize: 11 }}>
            {p.status === 'monitorando' ? '● Monitorando' : p.status}
            {p.last_pulled_at ? ` · Atualizado ${fmtData(p.last_pulled_at)}` : ''}
          </span>
        </div>
      ))}

      {/* Timeline de todos os andamentos */}
      {andamentos.length === 0 ? (
        <div style={{ color: 'var(--fg-muted)', fontSize: 13, padding: '16px 0' }}>
          Nenhum andamento registrado ainda. O pull diário popula esta lista automaticamente.
        </div>
      ) : (
        <div style={{ marginTop: 16, borderLeft: '2px solid var(--border)', paddingLeft: 16, display: 'flex', flexDirection: 'column', gap: 0 }}>
          {andamentos.map((a, i) => (
            <div key={a.id || i} style={{ position: 'relative', paddingBottom: 16 }}>
              <div style={{
                position: 'absolute', left: -21, top: 4, width: 8, height: 8, borderRadius: '50%',
                background: a.status === 'pendente' ? '#C2253E' : 'var(--border)',
                border: '2px solid var(--bg)',
              }} />
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg)' }}>{a.description}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>
                    {fmtData(a.movement_date)}
                    {a.code ? ` · Cód. ${a.code}` : ''}
                    {a.status === 'lido' && a.read_at ? ` · Lido em ${fmtData(a.read_at)}` : ''}
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                  {criandoTarefa?.id === a.id ? (
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                      <input
                        style={{ ...inp, width: 200 }}
                        placeholder="Título da tarefa"
                        value={tarefaTitle}
                        onChange={e => setTarefaTitle(e.target.value)}
                        onKeyDown={e => e.key === 'Enter' && criarTarefa(a)}
                        autoFocus
                      />
                      <button className="btn sm" style={{ fontSize: 11 }} disabled={salvando || !tarefaTitle.trim()} onClick={() => criarTarefa(a)}>
                        {salvando ? '…' : 'Criar'}
                      </button>
                      <button className="btn ghost sm icon" onClick={() => { setCriandoTarefa(null); setTarefaTitle(''); }}>
                        <Icon name="x" size={11} />
                      </button>
                    </div>
                  ) : (
                    <button
                      className="btn ghost sm"
                      style={{ fontSize: 11 }}
                      onClick={() => { setCriandoTarefa(a); setTarefaTitle(`Andamento: ${a.description.slice(0, 60)}`); }}
                      title="Criar tarefa a partir deste andamento"
                    >
                      <Icon name="plus" size={11} /> Tarefa
                    </button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const CaseLevantamentosTab = ({ caseId }) => {
  const [items, setItems] = React.useState([]);
  const [totals, setTotals] = React.useState({ em_aberto: 0, recebido: 0, total: 0, count_aberto: 0, count_recebido: 0 });
  const [loading, setLoading] = React.useState(true);
  const [showForm, setShowForm] = React.useState(false);
  const [form, setForm] = React.useState({ tipo:'', valor:'', data_peticionamento: todayISO(), descricao:'' });
  const [saving, setSaving] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [receberFor, setReceberFor] = React.useState(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    try {
      const res = await window.OctaleApi.cases.listLevantamentos(caseId);
      setItems(res.levantamentos || []);
      setTotals(res.totals || { em_aberto:0, recebido:0, total:0, count_aberto:0, count_recebido:0 });
    } catch (e) { setItems([]); }
    finally { setLoading(false); }
  }, [caseId]);
  React.useEffect(() => { load(); }, [load]);

  const submitNovo = async () => {
    const v = parseFloat(String(form.valor).replace(/\./g,'').replace(',','.'));
    if (isNaN(v) || v <= 0) { setErr('Informe um valor válido.'); return; }
    if (!form.data_peticionamento) { setErr('Informe a data do peticionamento.'); return; }
    setSaving(true); setErr('');
    try {
      await window.OctaleApi.cases.createLevantamento(caseId, {
        tipo: form.tipo.trim() || null,
        valor: v,
        data_peticionamento: form.data_peticionamento,
        descricao: form.descricao.trim() || null,
      });
      setForm({ tipo:'', valor:'', data_peticionamento: todayISO(), descricao:'' });
      setShowForm(false);
      await load();
    } catch (e) { setErr(e.message || 'Erro ao salvar.'); }
    finally { setSaving(false); }
  };

  const handleReceber = async (lid, payload) => {
    await window.OctaleApi.cases.receberLevantamento(lid, payload);
    await load();
  };
  const handleReabrir = async (lid) => {
    if (!confirm('Reabrir este levantamento? O recebimento registrado será removido.')) return;
    try { await window.OctaleApi.cases.reabrirLevantamento(lid); await load(); }
    catch (e) { alert(e.message); }
  };
  const handleDelete = async (lid) => {
    if (!confirm('Excluir este levantamento permanentemente?')) return;
    try { await window.OctaleApi.cases.deleteLevantamento(lid); await load(); }
    catch (e) { alert(e.message); }
  };

  const inp = { width:'100%', padding:'9px 11px', border:'1.5px solid #ddd', borderRadius:7, fontSize:13, boxSizing:'border-box' };
  const lbl = { display:'block', fontSize:11, fontWeight:700, color:'#666', marginBottom:5, textTransform:'uppercase', letterSpacing:'.06em' };

  const stat = (label, value, accent) => (
    <div style={{ flex:1, background:'#fff', border:'1px solid var(--border)', borderRadius:8, padding:'10px 14px', borderLeft:`3px solid ${accent}` }}>
      <div style={{ fontSize:10.5, color:'#888', textTransform:'uppercase', letterSpacing:'.06em', fontWeight:700 }}>{label}</div>
      <div style={{ fontSize:16, fontWeight:800, color:'var(--octale-navy)', marginTop:3 }}>{value}</div>
    </div>
  );

  return (
    <div style={{ marginTop: 22 }}>
      {/* Header com totais */}
      <div style={{ display:'flex', gap:10, marginBottom:16 }}>
        {stat(`Em aberto (${totals.count_aberto})`, fmtBRL(totals.em_aberto), '#E8A33D')}
        {stat(`Recebidos (${totals.count_recebido})`, fmtBRL(totals.recebido), '#3DA35D')}
        {stat('Total', fmtBRL(totals.total), 'var(--octale-navy)')}
      </div>

      {/* Toolbar */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <span style={{ fontSize:13, fontWeight:700, color:'#1a1a2e' }}>
          Levantamentos{items.length > 0 ? ` · ${items.length}` : ''}
        </span>
        <button className="btn sm" onClick={() => setShowForm(v => !v)}>
          <Icon name="plus" size={12} /> {showForm ? 'Cancelar' : 'Novo levantamento'}
        </button>
      </div>

      {/* Form inline */}
      {showForm && (
        <div style={{ background:'#f7f7fb', border:'1px solid var(--border)', borderRadius:8, padding:14, marginBottom:14 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:10 }}>
            <div><label style={lbl}>Tipo (livre)</label>
              <input value={form.tipo} onChange={e => setForm(p => ({...p, tipo: e.target.value}))} placeholder="Ex.: Alvará, RPV, depósito…" style={inp} /></div>
            <div><label style={lbl}>Valor peticionado (R$)</label>
              <input value={form.valor} onChange={e => setForm(p => ({...p, valor: e.target.value}))} placeholder="0,00" style={inp} /></div>
            <div><label style={lbl}>Data do peticionamento</label>
              <input type="date" value={form.data_peticionamento} onChange={e => setForm(p => ({...p, data_peticionamento: e.target.value}))} style={inp} /></div>
          </div>
          <label style={lbl}>Descrição (opcional)</label>
          <textarea value={form.descricao} onChange={e => setForm(p => ({...p, descricao: e.target.value}))} rows={2} placeholder="Ex.: Alvará nº 123/2026, autos 5001234-XX, conta judicial Caixa nº…" style={{ ...inp, resize:'vertical', fontFamily:'inherit' }} />
          {err && <div style={{ marginTop:10, padding:'8px 11px', borderRadius:6, fontSize:12, background:'rgba(194,37,62,.07)', border:'1px solid rgba(194,37,62,.2)', color:'#C2253E' }}>{err}</div>}
          <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:12 }}>
            <button onClick={() => { setShowForm(false); setErr(''); }} style={{ padding:'8px 14px', borderRadius:7, border:'1px solid #ddd', background:'#fff', cursor:'pointer', fontSize:12.5, fontWeight:600 }}>Cancelar</button>
            <button onClick={submitNovo} disabled={saving} style={{ padding:'8px 14px', borderRadius:7, border:0, background:saving?'#555':'var(--octale-navy)', color:'#fff', cursor:saving?'not-allowed':'pointer', fontSize:12.5, fontWeight:700 }}>{saving ? 'Salvando…' : 'Registrar peticionamento'}</button>
          </div>
        </div>
      )}

      {/* Lista */}
      {loading ? (
        <div style={{ display:'flex', alignItems:'center', gap:8, color:'var(--fg-muted)', fontSize:13 }}>
          <span className="spinner" style={{ width:12, height:12 }} /> Carregando…
        </div>
      ) : items.length === 0 ? (
        <div style={{ color:'var(--fg-muted)', fontSize:13, textAlign:'center', padding:'16px 0' }}>
          Nenhum levantamento registrado neste caso.
        </div>
      ) : items.map(it => {
        const aberto = !it.data_recebimento;
        const accent = aberto ? '#E8A33D' : '#3DA35D';
        const valorFinal = it.valor_recebido != null ? Number(it.valor_recebido) : Number(it.valor);
        return (
          <div key={it.id} style={{ background:'#fff', border:'1px solid var(--border)', borderLeft:`3px solid ${accent}`, borderRadius:8, padding:'12px 14px', marginBottom:8 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:10 }}>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:4, flexWrap:'wrap' }}>
                  <span style={{ fontSize:13, fontWeight:700, color:'#1a1a2e' }}>{it.tipo || 'Levantamento'}</span>
                  <span style={{ fontSize:10, fontWeight:700, color:'#fff', background:accent, padding:'2px 7px', borderRadius:4, textTransform:'uppercase', letterSpacing:'.04em' }}>
                    {aberto ? 'Em aberto' : `Recebido em ${fmtDateBR(it.data_recebimento)}`}
                  </span>
                </div>
                <div style={{ fontSize:12, color:'#666' }}>
                  Peticionado em {fmtDateBR(it.data_peticionamento)} · valor {fmtBRL(it.valor)}
                  {!aberto && it.valor_recebido != null && Number(it.valor_recebido) !== Number(it.valor) && (
                    <> · recebido <b>{fmtBRL(valorFinal)}</b></>
                  )}
                </div>
                {it.descricao && <div style={{ fontSize:12, color:'#777', marginTop:4 }}>{it.descricao}</div>}
                {!aberto && it.observacoes_recebimento && <div style={{ fontSize:11.5, color:'#888', marginTop:4, fontStyle:'italic' }}>{it.observacoes_recebimento}</div>}
              </div>
              <div style={{ display:'flex', gap:6, flexShrink:0 }}>
                {aberto ? (
                  <button onClick={() => setReceberFor(it)} style={{ padding:'6px 11px', borderRadius:6, border:0, background:'#3DA35D', color:'#fff', cursor:'pointer', fontSize:11.5, fontWeight:700 }}>Recebido</button>
                ) : (
                  <button onClick={() => handleReabrir(it.id)} className="btn ghost sm" title="Reabrir">Reabrir</button>
                )}
                <button onClick={() => handleDelete(it.id)} className="btn ghost sm icon" title="Excluir" style={{ color:'var(--danger)' }}><Icon name="trash" size={12} /></button>
              </div>
            </div>
          </div>
        );
      })}

      {receberFor && <ReceberModal levantamento={receberFor} onClose={() => setReceberFor(null)} onConfirm={(p) => handleReceber(receberFor.id, p)} />}
    </div>
  );
};

// ─── Tarefas do caso ──────────────────────────────────────────
const CaseTasksTab = ({ caseId, caseTitle, clients, users }) => {
  const [tasks, setTasks] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const STATUS_COLOR = { novo: '#6B7280', analise: '#CA8A04', cliente: '#C2253E', redacao: 'var(--octale-navy)', revisao: '#7C3AED', externos: '#D97706', concluido: '#059669' };
  const COL_LABEL = { novo: 'Novo', analise: 'Em análise', cliente: 'Ag. cliente', redacao: 'Em redação', revisao: 'Em revisão', externos: 'Ag. externos', concluido: 'Concluído' };

  React.useEffect(() => {
    setLoading(true);
    window.OctaleApi.tasks.list({ case_id: caseId })
      .then(setTasks)
      .catch(() => setTasks([]))
      .finally(() => setLoading(false));
  }, [caseId]);

  const userMap = React.useMemo(() => Object.fromEntries((users || []).map(u => [u.id, u])), [users]);

  return (
    <div style={{ marginTop: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: '#1a1a2e' }}>
          Tarefas{tasks.length > 0 ? ` · ${tasks.length}` : ''}
        </span>
      </div>

      {loading ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg-muted)', fontSize: 13 }}>
          <span className="spinner" style={{ width: 12, height: 12 }} /> Carregando…
        </div>
      ) : tasks.length === 0 ? (
        <div style={{ color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center', padding: '16px 0' }}>Nenhuma tarefa vinculada a este caso.</div>
      ) : tasks.map(t => {
        const owner = userMap[t.owner_user_id];
        const col = t.kanban_column || 'novo';
        return (
          <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 6, background: '#fff' }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: STATUS_COLOR[col] || '#6B7280', flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.title}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>
                {COL_LABEL[col] || col}
                {t.due_date ? ` · ${new Date(t.due_date + 'T12:00:00').toLocaleDateString('pt-BR')}` : ''}
              </div>
            </div>
            {owner && (
              <UserAvatar user={owner} className="av xs" style={{ width: 22, height: 22, fontSize: 9, flexShrink: 0 }} title={owner.name} />
            )}
          </div>
        );
      })}
    </div>
  );
};

const Cases = ({ aiPanel = 'fixed', caseId }) => {
  const [cases, setCases] = React.useState([]);
  const [clients, setClients] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [timeline, setTimeline] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [selId, setSelId] = React.useState(caseId || null);
  const [activeTab, setActiveTab] = React.useState('timeline');
  const [aiOpen, setAiOpen] = React.useState(false);
  const [showNewCase, setShowNewCase] = React.useState(false);
  const [newCase, setNewCase] = React.useState({ title:'', client_id:'', area:'M&A', status:'Em análise', stage:'', priority:'Média', value:'' });
  const [saving, setSaving] = React.useState(false);

  // Dossiê
  const DOSSIE_INICIAL_DEFAULT = { interesse_cliente:'', tese_principal:'', pontos_vulneraveis:'', provas_disponiveis:'', provas_em_falta:'', historico_acordo:'', postura_estrategica:'', observacoes_estrategicas:'' };
  const [dossieInicial, setDossieInicial] = React.useState(DOSSIE_INICIAL_DEFAULT);
  const [dossieHistorico, setDossieHistorico] = React.useState([]);
  const [dossieSaving, setDossieSaving] = React.useState(false);
  const [dossieLoaded, setDossieLoaded] = React.useState(null); // guarda o id do caso carregado
  const [novaEntrada, setNovaEntrada] = React.useState(null); // { titulo, conteudo, tipo }
  const [acaoEdit, setAcaoEdit] = React.useState({}); // { [entryId]: texto }

  // Timeline entry form
  const [showTimelineForm, setShowTimelineForm] = React.useState(false);
  const [timelineForm, setTimelineForm] = React.useState({ type: 'mensagem', title: '', body: '' });
  const [timelineSaving, setTimelineSaving] = React.useState(false);

  // Case inline edit
  const [editingCase, setEditingCase] = React.useState(false);
  const [caseEditForm, setCaseEditForm] = React.useState({});
  const [caseEditSaving, setCaseEditSaving] = React.useState(false);

  // Equipe do caso
  const [team, setTeam] = React.useState([]);
  const [teamLoading, setTeamLoading] = React.useState(false);
  const [addingMember, setAddingMember] = React.useState(false);
  const [newMemberId, setNewMemberId] = React.useState('');
  const [newMemberRole, setNewMemberRole] = React.useState('');
  const [savingMember, setSavingMember] = React.useState(false);

  const floating = aiPanel === 'floating';

  React.useEffect(() => {
    const load = async () => {
      try {
        setLoading(true);
        const [cs, cls, us] = await Promise.all([
          window.OctaleApi.cases.list(),
          window.OctaleApi.clients.list(),
          window.OctaleApi.users.list(),
        ]);
        setCases(cs);
        setClients(cls);
        setUsers(us);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  const k = cases.find(x => x.id === selId);
  const cl = k ? clients.find(c => c.id === k.client_id) : null;
  const owner = k ? users.find(u => u.id === k.owner_user_id) : null;

  // Carrega timeline (compat) + activity log (preferido) ao selecionar caso
  const [activity, setActivity] = React.useState([]);
  const [activityLoading, setActivityLoading] = React.useState(false);
  React.useEffect(() => {
    if (!selId) { setTimeline([]); setActivity([]); return; }
    // Timeline (mantém para compat com componentes que ainda usam)
    window.OctaleApi.cases.timeline(selId)
      .then(items => setTimeline(items || []))
      .catch(() => setTimeline([]));
    // Activity log (feed principal)
    setActivityLoading(true);
    window.OctaleApi.cases.activity(selId)
      .then(items => setActivity(items || []))
      .catch(() => setActivity([]))
      .finally(() => setActivityLoading(false));
  }, [selId]);

  // Recarrega activity após adicionar entrada manual de timeline
  const reloadActivity = () => {
    if (!selId) return;
    window.OctaleApi.cases.activity(selId)
      .then(items => setActivity(items || []))
      .catch(() => {});
  };

  // Carrega equipe quando aba team é aberta
  React.useEffect(() => {
    if (!selId || activeTab !== 'team') return;
    setTeamLoading(true);
    window.OctaleApi.cases.team(selId)
      .then(t => setTeam(t || []))
      .catch(() => setTeam([]))
      .finally(() => setTeamLoading(false));
  }, [selId, activeTab]);

  const handleAddMember = async () => {
    if (!newMemberId || !selId) return;
    setSavingMember(true);
    try {
      const member = await window.OctaleApi.cases.addTeamMember(selId, newMemberId, newMemberRole);
      setTeam(prev => [...prev.filter(m => m.user_id !== newMemberId), member]);
      setAddingMember(false);
      setNewMemberId('');
      setNewMemberRole('');
    } catch (e) {
      alert('Erro ao adicionar membro: ' + e.message);
    } finally {
      setSavingMember(false);
    }
  };

  const handleUpdateRole = async (userId, role) => {
    if (!selId) return;
    try {
      const member = await window.OctaleApi.cases.updateTeamMemberRole(selId, userId, role);
      setTeam(prev => prev.map(m => m.user_id === userId ? member : m));
    } catch (e) {
      alert('Erro ao atualizar papel: ' + e.message);
    }
  };

  const handleRemoveMember = async (userId) => {
    if (!selId || !confirm('Remover este membro da equipe?')) return;
    try {
      await window.OctaleApi.cases.removeTeamMember(selId, userId);
      setTeam(prev => prev.filter(m => m.user_id !== userId));
    } catch (e) {
      alert('Erro ao remover membro: ' + e.message);
    }
  };

  // Carrega dossie quando aba é aberta ou caso muda
  React.useEffect(() => {
    if (activeTab !== 'dossie' || !k || dossieLoaded === k.id) return;
    const d = k.dossie || {};
    setDossieInicial({ ...DOSSIE_INICIAL_DEFAULT, ...(d.inicial || {}) });
    setDossieHistorico(Array.isArray(d.historico) ? d.historico : []);
    setDossieLoaded(k.id);
    setAcaoEdit({});
  }, [activeTab, k?.id]);

  const handleCreateCase = async () => {
    if (!newCase.title || !newCase.client_id) return;
    try {
      setSaving(true);
      const me = await window.OctaleApi.auth.me();
      const created = await window.OctaleApi.cases.create({ ...newCase, owner_user_id: me.id });
      setCases(prev => [...prev, created]);
      setSelId(created.id);
      setShowNewCase(false);
      setNewCase({ title:'', client_id:'', area:'M&A', status:'Em análise', stage:'', priority:'Média', value:'' });
    } catch (e) {
      alert('Erro ao criar caso: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  const addTimelineEntry = async () => {
    if (!timelineForm.title.trim() || !k) return;
    setTimelineSaving(true);
    try {
      const item = await window.OctaleApi.cases.addTimeline(k.id, {
        type: timelineForm.type,
        title: timelineForm.title.trim(),
        body: timelineForm.body || undefined,
      });
      setTimeline(prev => [item, ...prev]);
      setShowTimelineForm(false);
      setTimelineForm({ type: 'mensagem', title: '', body: '' });
      reloadActivity();
    } catch(e) { alert('Erro: ' + e.message); }
    finally { setTimelineSaving(false); }
  };

  const startCaseEdit = () => {
    if (!k) return;
    setCaseEditForm({
      title: k.title || '',
      status: k.status || 'Em análise',
      area: k.area || 'M&A',
      priority: k.priority || 'Média',
      stage: k.stage || '',
      value: k.value || '',
      deadline: k.deadline ? k.deadline.slice(0, 10) : '',
      description: k.description || '',
      numero_processo: k.numero_processo || '',
    });
    setEditingCase(true);
  };

  const saveCaseEdit = async () => {
    if (!k) return;
    setCaseEditSaving(true);
    try {
      const payload = {
        title: caseEditForm.title.trim() || k.title,
        status: caseEditForm.status,
        area: caseEditForm.area,
        priority: caseEditForm.priority,
        stage: caseEditForm.stage || undefined,
        value: caseEditForm.value || undefined,
        deadline: caseEditForm.deadline || undefined,
        description: caseEditForm.description || undefined,
        numero_processo: caseEditForm.numero_processo || undefined,
      };
      const updated = await window.OctaleApi.cases.update(k.id, payload);
      setCases(prev => prev.map(x => x.id === k.id ? { ...x, ...updated } : x));
      setEditingCase(false);
    } catch(e) { alert('Erro ao salvar: ' + e.message); }
    finally { setCaseEditSaving(false); }
  };

  // IMPORTANTE: definir renderNewCaseModal ANTES dos early returns
  const renderNewCaseModal = () => (
    <div className="modal-overlay" onClick={() => setShowNewCase(false)}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 520 }}>
        <div className="modal-head">
          <h3>Novo caso</h3>
          <button className="btn ghost sm icon" onClick={() => setShowNewCase(false)}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ display: 'grid', gap: 12 }}>
          <div className="field-group">
            <label>Título do caso *</label>
            <input value={newCase.title} onChange={e => setNewCase(p => ({...p, title: e.target.value}))} placeholder="Ex: Aquisição da Tabacaria Lopes pela VBH" />
          </div>
          <div className="field-group">
            <label>Cliente *</label>
            <SearchableSelect value={newCase.client_id} onChange={e => setNewCase(p => ({...p, client_id: e.target.value}))}>
              <option value="">Selecione o cliente…</option>
              {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </SearchableSelect>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field-group">
              <label>Área</label>
              <select value={newCase.area} onChange={e => setNewCase(p => ({...p, area: e.target.value}))}>
                {['M&A','Franchising','Societário','Contratos','Venture Capital','Propriedade Intelectual','Contencioso','Tributário','Trabalhista','Outros'].map(a => (
                  <option key={a}>{a}</option>
                ))}
              </select>
            </div>
            <div className="field-group">
              <label>Prioridade</label>
              <select value={newCase.priority} onChange={e => setNewCase(p => ({...p, priority: e.target.value}))}>
                <option>Alta</option>
                <option>Média</option>
                <option>Baixa</option>
              </select>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div className="field-group">
              <label>Status inicial</label>
              <select value={newCase.status} onChange={e => setNewCase(p => ({...p, status: e.target.value}))}>
                {['Em diligência','Em negociação','Em análise','Em redação','Em revisão','Aguardando cliente','Aguardando externos'].map(s => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            <div className="field-group">
              <label>Etapa atual</label>
              <input value={newCase.stage} onChange={e => setNewCase(p => ({...p, stage: e.target.value}))} placeholder="Ex: Due diligence" />
            </div>
          </div>
          <div className="field-group">
            <label>Valor da operação</label>
            <input value={newCase.value} onChange={e => setNewCase(p => ({...p, value: e.target.value}))} placeholder="Ex: R$ 14,2 mi" />
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={() => setShowNewCase(false)}>Cancelar</button>
          <button className="btn" onClick={handleCreateCase} disabled={saving}>
            {saving ? 'Salvando…' : 'Criar caso'}
          </button>
        </div>
      </div>
    </div>
  );

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 10, color: 'var(--fg-muted)' }}>
      <div className="spinner" /> Carregando casos…
    </div>
  );

  if (error) return (
    <div style={{ padding: 32, color: '#C2253E' }}>Erro ao carregar casos: {error}</div>
  );

  if (cases.length === 0) return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 16, color: 'var(--fg-muted)' }}>
      <div>Nenhum caso cadastrado.</div>
      <button className="btn" onClick={() => setShowNewCase(true)}><Icon name="plus" size={13} /> Novo caso</button>
      {showNewCase && renderNewCaseModal()}
    </div>
  );

  // Lista de seleção de caso
  if (!selId) {
    const clientMap = Object.fromEntries(clients.map(c => [c.id, c]));
    const PRIORITY_COLOR = { Alta: '#DC2626', Média: '#CA8A04', Baixa: '#6B7280', urgente: '#DC2626', alta: '#DC2626', media: '#CA8A04', baixa: '#6B7280' };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        {/* Header */}
        <div style={{ padding: '20px 24px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0 }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800 }}>Casos</h1>
            <div style={{ fontSize: 12.5, color: 'var(--fg-muted)', marginTop: 3 }}>
              {cases.length} caso{cases.length !== 1 ? 's' : ''} cadastrado{cases.length !== 1 ? 's' : ''}
            </div>
          </div>
          <button className="btn" onClick={() => setShowNewCase(true)} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <Icon name="plus" size={13} /> Novo caso
          </button>
        </div>

        {/* Lista */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 24px 24px' }}>
          {/* Cabeçalho da tabela */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '90px 1fr 140px 110px 90px 120px 90px',
            gap: '0 12px',
            padding: '6px 12px',
            fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)',
            textTransform: 'uppercase', letterSpacing: '.05em',
            borderBottom: '1px solid var(--border)', marginBottom: 4,
          }}>
            <div>Nº</div>
            <div>Caso</div>
            <div>Cliente</div>
            <div>Área</div>
            <div>Prioridade</div>
            <div title="Mandado de Levantamento Eletrônico — soma dos valores peticionados em aberto (não recebidos)">MLE</div>
            <div>Status</div>
          </div>

          {cases.map(c => {
            const cl = clientMap[c.client_id];
            const prioColor = PRIORITY_COLOR[c.priority] || '#6B7280';
            return (
              <div
                key={c.id}
                onClick={() => setSelId(c.id)}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '90px 1fr 140px 110px 90px 120px 90px',
                  gap: '0 12px',
                  padding: '11px 12px',
                  borderRadius: 8,
                  cursor: 'pointer',
                  alignItems: 'center',
                  borderLeft: '3px solid transparent',
                  marginBottom: 2,
                  transition: 'background .1s',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-secondary)'; e.currentTarget.style.borderLeftColor = 'var(--octale-navy)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderLeftColor = 'transparent'; }}
              >
                <div style={{ fontSize: 11.5, fontFamily: 'monospace', color: 'var(--fg-muted)' }}>{c.number}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--octale-black)' }}>{c.title}</div>
                  {c.stage && <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 1 }}>{c.stage}</div>}
                </div>
                <div style={{ fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {cl ? (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <div style={{ width: 20, height: 20, borderRadius: 4, background: cl.color || 'var(--octale-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, color: '#fff', flexShrink: 0 }}>
                        {cl.short_name?.slice(0, 2)}
                      </div>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{cl.name}</span>
                    </div>
                  ) : <span style={{ color: 'var(--fg-muted)' }}>—</span>}
                </div>
                <div>
                  <span className="chip navy" style={{ fontSize: 10.5 }}>{c.area}</span>
                </div>
                <div>
                  <span style={{ fontSize: 11.5, fontWeight: 600, color: prioColor }}>{c.priority}</span>
                </div>
                <div title={c.levantamentos_em_aberto > 0 ? 'Valor em aberto a receber (MLE — Mandado de Levantamento Eletrônico)' : 'Sem valores em aberto'}>
                  {c.levantamentos_em_aberto > 0
                    ? <span style={{ fontSize: 11.5, fontWeight: 700, color: '#E8A33D' }}>{fmtBRL(c.levantamentos_em_aberto)}</span>
                    : <span style={{ fontSize: 11.5, color: 'var(--fg-muted)', opacity: 0.4 }}>—</span>}
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {c.status}
                </div>
              </div>
            );
          })}
        </div>

        {showNewCase && renderNewCaseModal()}
      </div>
    );
  }

  return (
    <div className={`cw ${floating ? 'ai-floating' : ''}`}>
      {/* LEFT — caso */}
      <aside className="cw-left">
        {/* Voltar à lista */}
        <div style={{ marginBottom: 16 }}>
          <button
            onClick={() => setSelId(null)}
            style={{
              display: 'flex', alignItems: 'center', gap: 6,
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontSize: 12, color: 'var(--fg-muted)', padding: '4px 0',
              fontWeight: 600,
              transition: 'color .15s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--octale-navy)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-muted)'}
          >
            <Icon name="chevronLeft" size={13} /> Todos os casos
          </button>
        </div>

        {k && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6, marginBottom: 4 }}>
              <div style={{ minWidth: 0 }}>
                <div className="pn">Caso · {k.number}</div>
                <h2 style={{ marginBottom: 6, lineHeight: 1.3, wordBreak: 'break-word' }}>{k.title}</h2>
              </div>
              {!editingCase && (
                <button className="btn ghost sm icon" onClick={startCaseEdit} title="Editar caso" style={{ flexShrink: 0, marginTop: 2 }}>
                  <Icon name="pen" size={13} />
                </button>
              )}
            </div>

            {!editingCase && (
              <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 14 }}>
                <span className="chip navy" style={{ fontSize: 10.5 }}>{k.area}</span>
                <span className="chip soft" style={{ fontSize: 10.5 }}>{k.priority}</span>
                <span className="chip soft" style={{ fontSize: 10.5 }}>{k.status}</span>
              </div>
            )}

            {editingCase ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 14, background: '#f8f8ff', border: '1px solid #e0e0f0', borderRadius: 8, padding: '12px 10px' }}>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Título</div>
                  <input value={caseEditForm.title} onChange={e => setCaseEditForm(f => ({...f, title: e.target.value}))}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 12.5, fontFamily: 'inherit', outline: 'none' }} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Status</div>
                    <select value={caseEditForm.status} onChange={e => setCaseEditForm(f => ({...f, status: e.target.value}))}
                      style={{ width: '100%', padding: '6px 6px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, background: '#fff', outline: 'none' }}>
                      {['Em diligência','Em negociação','Em análise','Em redação','Em revisão','Aguardando cliente','Aguardando externos','Encerrado','Arquivado'].map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Prioridade</div>
                    <select value={caseEditForm.priority} onChange={e => setCaseEditForm(f => ({...f, priority: e.target.value}))}
                      style={{ width: '100%', padding: '6px 6px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, background: '#fff', outline: 'none' }}>
                      {['Alta','Média','Baixa'].map(p => <option key={p}>{p}</option>)}
                    </select>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Área</div>
                  <select value={caseEditForm.area} onChange={e => setCaseEditForm(f => ({...f, area: e.target.value}))}
                    style={{ width: '100%', padding: '6px 6px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, background: '#fff', outline: 'none' }}>
                    {['M&A','Franchising','Societário','Contratos','Venture Capital','Propriedade Intelectual','Contencioso','Tributário','Trabalhista','Outros'].map(a => <option key={a}>{a}</option>)}
                  </select>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Nº do Processo</div>
                  <input value={caseEditForm.numero_processo} onChange={e => setCaseEditForm(f => ({...f, numero_processo: e.target.value}))}
                    placeholder="Ex: 1234567-89.2024.8.26.0100"
                    style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, fontFamily: 'inherit', outline: 'none' }} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Etapa</div>
                    <input value={caseEditForm.stage} onChange={e => setCaseEditForm(f => ({...f, stage: e.target.value}))}
                      placeholder="Ex: Due diligence"
                      style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, fontFamily: 'inherit', outline: 'none' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Valor</div>
                    <input value={caseEditForm.value} onChange={e => setCaseEditForm(f => ({...f, value: e.target.value}))}
                      placeholder="Ex: R$ 14,2 mi"
                      style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, fontFamily: 'inherit', outline: 'none' }} />
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Prazo</div>
                  <input type="date" value={caseEditForm.deadline} onChange={e => setCaseEditForm(f => ({...f, deadline: e.target.value}))}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, outline: 'none' }} />
                </div>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 3 }}>Descrição</div>
                  <textarea value={caseEditForm.description} onChange={e => setCaseEditForm(f => ({...f, description: e.target.value}))}
                    rows={3} placeholder="Resumo do caso, objeto, contexto..."
                    style={{ width: '100%', boxSizing: 'border-box', padding: '6px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 11.5, fontFamily: 'inherit', resize: 'vertical', outline: 'none' }} />
                </div>
                <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                  <button className="btn ghost sm" onClick={() => setEditingCase(false)} disabled={caseEditSaving}>Cancelar</button>
                  <button className="btn sm" onClick={saveCaseEdit} disabled={caseEditSaving}>
                    {caseEditSaving ? 'Salvando…' : 'Salvar'}
                  </button>
                </div>
              </div>
            ) : (
              <div style={{ marginTop: 4 }}>
                {cl && (
                  <div className="field"><span className="lbl">Cliente</span>
                    <div className="val" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="client-mark sm" style={{ background: cl.color || 'var(--octale-navy)' }}>{cl.short_name}</div>
                      <span>{cl.name}</span>
                    </div>
                  </div>
                )}
                {k.numero_processo && <div className="field"><span className="lbl">Nº do processo</span><span className="val" style={{ fontFamily: 'monospace', fontSize: 11 }}>{k.numero_processo}</span></div>}
                <div className="field"><span className="lbl">Status</span><span className="val">{k.status}</span></div>
                {k.stage && <div className="field"><span className="lbl">Etapa</span><span className="val">{k.stage}</span></div>}
                {k.value && <div className="field"><span className="lbl">Valor</span><span className="val">{k.value}</span></div>}
                {k.deadline && (
                  <div className="field">
                    <span className="lbl">Prazo</span>
                    <span className="val" style={{ color: new Date(k.deadline) < new Date() ? '#C2253E' : 'inherit', fontWeight: new Date(k.deadline) < new Date() ? 700 : 400 }}>
                      {new Date(k.deadline + 'T12:00:00').toLocaleDateString('pt-BR')}
                      {new Date(k.deadline) < new Date() ? ' ⚠' : ''}
                    </span>
                  </div>
                )}
                {k.description && (
                  <div className="field" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 3 }}>
                    <span className="lbl">Descrição</span>
                    <span style={{ fontSize: 12, color: 'var(--fg)', lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>{k.description}</span>
                  </div>
                )}
                {owner && (
                  <div className="field"><span className="lbl">Responsável</span>
                    <div className="val" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <UserAvatar user={owner} className="av xs" />
                      {owner.name}
                    </div>
                  </div>
                )}
              </div>
            )}

            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <button className="btn ghost sm" onClick={() => setActiveTab('docs')}><Icon name="folder" size={12} /> Documentos</button>
              <button className="btn ghost sm" onClick={() => setActiveTab('tasks')}><Icon name="checkSquare" size={12} /> Tarefas</button>
            </div>
          </>
        )}

        <div style={{ marginTop: 'auto', paddingTop: 16 }}>
          <button className="btn ghost sm" style={{ width: '100%' }} onClick={() => setShowNewCase(true)}>
            <Icon name="plus" size={12} /> Novo caso
          </button>
        </div>
      </aside>

      {/* CENTER — timeline */}
      {k && (
        <div className="cw-mid">
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div className="eyebrow muted">Workspace do caso</div>
              <h1>{k.title}</h1>
              <div className="sub">{cl?.name}{k.value ? ` · ${k.value}` : ''}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn ghost sm"><Icon name="upload" size={12} /> Upload</button>
              <button className="btn ghost sm"><Icon name="fileText" size={12} /> Relatório</button>
              <button className="btn sm"><Icon name="plus" size={12} /> Nova tarefa</button>
            </div>
          </div>

          <div className="tab-row" style={{ marginTop: 22 }}>
            {[['timeline','Linha do tempo'],['dossie','Dossiê'],['docs','Documentos'],['tasks','Tarefas'],['andamentos','Andamentos'],['valores','Valores'],['team','Equipe']].map(([id, label]) => (
              <button key={id} className={`tab ${activeTab === id ? 'active' : ''}`} onClick={() => setActiveTab(id)}>{label}</button>
            ))}
          </div>

          {activeTab === 'timeline' && (
            <div style={{ marginTop: 22 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: '#1a1a2e' }}>
                  {activity.length > 0 ? `${activity.length} evento${activity.length !== 1 ? 's' : ''}` : 'Linha do tempo'}
                </span>
                <button className="btn sm" onClick={() => setShowTimelineForm(v => !v)}>
                  <Icon name="plus" size={12} /> Registrar entrada
                </button>
              </div>

              {showTimelineForm && (
                <div style={{ border: '1.5px solid var(--octale-navy)', borderRadius: 8, padding: '14px', background: '#f8f8ff', marginBottom: 18 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 10, marginBottom: 10 }}>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 4 }}>Tipo</div>
                      <select value={timelineForm.type} onChange={e => setTimelineForm(f => ({...f, type: e.target.value}))}
                        style={{ width: '100%', padding: '7px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 12, background: '#fff', outline: 'none' }}>
                        <option value="mensagem">Comunicação</option>
                        <option value="email">E-mail</option>
                        <option value="memorando">Memorando</option>
                        <option value="marco_processo">Marco do processo</option>
                        <option value="documento">Documento</option>
                        <option value="transcricao_reuniao">Reunião</option>
                      </select>
                    </div>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 4 }}>Título *</div>
                      <input autoFocus value={timelineForm.title} onChange={e => setTimelineForm(f => ({...f, title: e.target.value}))}
                        onKeyDown={e => e.key === 'Enter' && !e.shiftKey && addTimelineEntry()}
                        placeholder="Ex: Audiência de conciliação realizada"
                        style={{ width: '100%', boxSizing: 'border-box', padding: '7px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 12.5, fontFamily: 'inherit', outline: 'none' }} />
                    </div>
                  </div>
                  <div style={{ marginBottom: 10 }}>
                    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)', marginBottom: 4 }}>Detalhes</div>
                    <textarea value={timelineForm.body} onChange={e => setTimelineForm(f => ({...f, body: e.target.value}))}
                      rows={3} placeholder="Descreva o que aconteceu, decisões tomadas, próximos passos..."
                      style={{ width: '100%', boxSizing: 'border-box', padding: '7px 8px', border: '1.5px solid #dde', borderRadius: 5, fontSize: 12.5, fontFamily: 'inherit', resize: 'vertical', outline: 'none' }} />
                  </div>
                  <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                    <button className="btn ghost sm" onClick={() => { setShowTimelineForm(false); setTimelineForm({ type: 'mensagem', title: '', body: '' }); }}>Cancelar</button>
                    <button className="btn sm" onClick={addTimelineEntry} disabled={timelineSaving || !timelineForm.title.trim()}>
                      {timelineSaving ? 'Salvando…' : 'Registrar'}
                    </button>
                  </div>
                </div>
              )}

              <ActivityFeed
                items={activity}
                loading={activityLoading}
                emptyMessage="Nenhum evento registrado ainda. Clique em Registrar entrada para o primeiro registro — ou crie uma tarefa, anexe documento, mova um card no Kanban e tudo aparecerá aqui automaticamente."
              />
            </div>
          )}

          {activeTab === 'dossie' && (() => {
            const POSTURAS = ['Resistir até o fim','Encerrar com acordo','Criar precedente','Proteger relação comercial','Ganhar tempo','Outro'];
            const TIPO_BADGE = { publicacao: { label: 'Publicação', color: 'var(--octale-navy)' }, comunicacao_manual: { label: 'Manual', color: '#6B7280' }, decisao: { label: 'Decisão', color: '#7C3AED' }, peticao: { label: 'Petição', color: '#0891B2' }, acordo: { label: 'Acordo', color: '#059669' } };

            const handleSaveInicial = async () => {
              setDossieSaving(true);
              try {
                const updated = await window.OctaleApi.cases.updateDossieInicial(k.id, dossieInicial);
                setCases(prev => prev.map(x => x.id === k.id ? { ...x, dossie: updated.dossie } : x));
              } catch(e) { alert('Erro ao salvar dossiê: ' + e.message); }
              finally { setDossieSaving(false); }
            };

            const handleAddEntrada = async () => {
              if (!novaEntrada?.titulo) return;
              try {
                const entry = await window.OctaleApi.cases.addDossieHistorico(k.id, novaEntrada);
                setDossieHistorico(prev => [entry, ...prev]);
                setNovaEntrada(null);
                setCases(prev => prev.map(x => {
                  if (x.id !== k.id) return x;
                  const d = x.dossie || {};
                  return { ...x, dossie: { ...d, historico: [entry, ...(d.historico||[])] } };
                }));
              } catch(e) { alert('Erro: ' + e.message); }
            };

            const handleSaveAcao = async (entryId) => {
              try {
                await window.OctaleApi.cases.updateDossieAcao(k.id, entryId, acaoEdit[entryId] || '');
                setDossieHistorico(prev => prev.map(e => e.id === entryId ? { ...e, acao_tomada: acaoEdit[entryId] || '' } : e));
                setAcaoEdit(prev => { const n = {...prev}; delete n[entryId]; return n; });
              } catch(e) { alert('Erro: ' + e.message); }
            };

            const Field = ({ label, field, placeholder, rows=3 }) => (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <label style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--fg-muted)' }}>{label}</label>
                <textarea
                  value={dossieInicial[field] || ''}
                  onChange={e => setDossieInicial(p => ({ ...p, [field]: e.target.value }))}
                  placeholder={placeholder}
                  rows={rows}
                  style={{ fontSize: 12.5, lineHeight: 1.6, padding: '8px 10px', border: '1.5px solid var(--border)', borderRadius: 7, resize: 'vertical', fontFamily: 'inherit', outline: 'none', background: 'var(--bg)', color: 'var(--fg)' }}
                  onFocus={e => e.target.style.borderColor = 'var(--octale-navy)'}
                  onBlur={e => e.target.style.borderColor = 'var(--border)'}
                />
              </div>
            );

            return (
              <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 28 }}>
                {/* Bloco A — Contexto Estratégico */}
                <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
                  <div style={{ padding: '14px 18px', background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--octale-navy)' }}>Contexto Estratégico</div>
                      <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 2 }}>Informações de uso interno — alimentam a análise da IA</div>
                    </div>
                    <button className="btn sm" onClick={handleSaveInicial} disabled={dossieSaving}>
                      {dossieSaving ? <><span className="spinner" style={{ width: 10, height: 10 }} /> Salvando…</> : 'Salvar contexto'}
                    </button>
                  </div>
                  <div className="grid-2col" style={{ padding: '18px', gap: 14 }}>
                    <Field label="Interesse do cliente" field="interesse_cliente" placeholder="O que o cliente realmente quer com esse processo?" />
                    <Field label="Tese principal" field="tese_principal" placeholder="Qual a tese jurídica central que estamos sustentando?" />
                    <Field label="Pontos vulneráveis" field="pontos_vulneraveis" placeholder="Pontos fracos do nosso caso (uso interno)" />
                    <Field label="Histórico de acordo" field="historico_acordo" placeholder="Houve proposta? Qual valor? Foi aceita/recusada?" />
                    <Field label="Provas disponíveis" field="provas_disponiveis" placeholder="Quais provas já temos em mãos?" />
                    <Field label="Provas em falta" field="provas_em_falta" placeholder="Quais provas ainda precisamos levantar?" />
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <label style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--fg-muted)' }}>Postura estratégica</label>
                      <select
                        value={dossieInicial.postura_estrategica || ''}
                        onChange={e => setDossieInicial(p => ({ ...p, postura_estrategica: e.target.value }))}
                        style={{ fontSize: 12.5, padding: '8px 10px', border: '1.5px solid var(--border)', borderRadius: 7, background: 'var(--bg)', color: 'var(--fg)', outline: 'none' }}
                      >
                        <option value="">Selecione…</option>
                        {POSTURAS.map(p => <option key={p} value={p}>{p}</option>)}
                      </select>
                    </div>
                    <Field label="Observações estratégicas" field="observacoes_estrategicas" placeholder="Anotações livres para uso interno do time…" />
                  </div>
                </div>

                {/* Bloco B — Histórico */}
                <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
                  <div style={{ padding: '14px 18px', background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--octale-navy)' }}>Histórico do caso</div>
                      <div style={{ fontSize: 11.5, color: 'var(--fg-muted)', marginTop: 2 }}>Publicações vinculadas e comunicações manuais</div>
                    </div>
                    <button className="btn ghost sm" onClick={() => setNovaEntrada({ tipo: 'comunicacao_manual', titulo: '', conteudo: '' })}>
                      <Icon name="plus" size={12} /> Registrar comunicação
                    </button>
                  </div>

                  {/* Form nova entrada */}
                  {novaEntrada && (
                    <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', background: 'rgba(23,23,15,.03)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 10 }}>
                        <div className="field-group">
                          <label>Tipo</label>
                          <select value={novaEntrada.tipo} onChange={e => setNovaEntrada(p => ({ ...p, tipo: e.target.value }))}>
                            <option value="comunicacao_manual">Comunicação</option>
                            <option value="decisao">Decisão</option>
                            <option value="peticao">Petição</option>
                            <option value="acordo">Acordo</option>
                          </select>
                        </div>
                        <div className="field-group">
                          <label>Título *</label>
                          <input value={novaEntrada.titulo} onChange={e => setNovaEntrada(p => ({ ...p, titulo: e.target.value }))} placeholder="Ex: Audiência de conciliação realizada" />
                        </div>
                      </div>
                      <div className="field-group">
                        <label>Conteúdo</label>
                        <textarea rows={2} value={novaEntrada.conteudo} onChange={e => setNovaEntrada(p => ({ ...p, conteudo: e.target.value }))} placeholder="Descreva o que aconteceu…" style={{ fontSize: 12.5, padding: '8px 10px', border: '1.5px solid var(--border)', borderRadius: 7, fontFamily: 'inherit', resize: 'vertical', outline: 'none' }} />
                      </div>
                      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <button className="btn ghost sm" onClick={() => setNovaEntrada(null)}>Cancelar</button>
                        <button className="btn sm" onClick={handleAddEntrada} disabled={!novaEntrada.titulo}>Registrar</button>
                      </div>
                    </div>
                  )}

                  <div style={{ padding: '8px 0' }}>
                    {dossieHistorico.length === 0 ? (
                      <div style={{ padding: '24px 18px', color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center' }}>
                        Nenhum evento registrado. Publicações vinculadas aparecerão aqui automaticamente.
                      </div>
                    ) : dossieHistorico.map((entry) => {
                      const badge = TIPO_BADGE[entry.tipo] || { label: entry.tipo, color: '#6B7280' };
                      const editando = acaoEdit[entry.id] !== undefined;
                      return (
                        <div key={entry.id} style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                            <span style={{ fontSize: 10.5, fontWeight: 700, color: '#fff', background: badge.color, borderRadius: 4, padding: '2px 7px', letterSpacing: '.04em' }}>{badge.label}</span>
                            <span style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{new Date(entry.data).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
                            <span style={{ fontWeight: 600, fontSize: 12.5, color: 'var(--octale-navy)', flex: 1 }}>{entry.titulo}</span>
                          </div>
                          {entry.conteudo && (
                            <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.6, maxHeight: 80, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical' }}>
                              {entry.conteudo}
                            </div>
                          )}
                          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                            <span style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--fg-muted)', paddingTop: 2, flexShrink: 0 }}>Ação tomada:</span>
                            {editando ? (
                              <div style={{ flex: 1, display: 'flex', gap: 6, alignItems: 'flex-start' }}>
                                <textarea
                                  rows={2}
                                  value={acaoEdit[entry.id]}
                                  onChange={e => setAcaoEdit(p => ({ ...p, [entry.id]: e.target.value }))}
                                  style={{ flex: 1, fontSize: 12, padding: '6px 8px', border: '1.5px solid var(--octale-navy)', borderRadius: 6, fontFamily: 'inherit', resize: 'vertical', outline: 'none' }}
                                  autoFocus
                                />
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                                  <button className="btn sm" onClick={() => handleSaveAcao(entry.id)}>Salvar</button>
                                  <button className="btn ghost sm" onClick={() => setAcaoEdit(p => { const n = {...p}; delete n[entry.id]; return n; })}>×</button>
                                </div>
                              </div>
                            ) : (
                              <div
                                style={{ flex: 1, fontSize: 12, color: entry.acao_tomada ? 'var(--fg)' : 'var(--fg-muted)', cursor: 'pointer', padding: '4px 6px', borderRadius: 5, border: '1px dashed transparent', transition: 'border-color .15s' }}
                                onClick={() => setAcaoEdit(p => ({ ...p, [entry.id]: entry.acao_tomada || '' }))}
                                onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border)'}
                                onMouseLeave={e => e.currentTarget.style.borderColor = 'transparent'}
                                title="Clique para editar"
                              >
                                {entry.acao_tomada || <span style={{ fontStyle: 'italic' }}>Clique para registrar ação tomada…</span>}
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            );
          })()}

          {activeTab === 'docs' && (
            <CaseDocsTab caseId={k.id} clientId={k.client_id} />
          )}

          {activeTab === 'tasks' && (
            <CaseTasksTab caseId={k.id} caseTitle={k.title} clients={clients} users={users} />
          )}

          {activeTab === 'andamentos' && (
            <CaseAndamentosTab caseId={k.id} caseNumero={k.numero_processo} />
          )}

          {activeTab === 'valores' && (
            <CaseLevantamentosTab caseId={k.id} />
          )}

          {activeTab === 'team' && (
            <div style={{ marginTop: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <span style={{ fontWeight: 700, fontSize: 13, color: '#1a1a2e' }}>Equipe do caso</span>
                <button className="btn ghost sm" onClick={() => setAddingMember(v => !v)} style={{ gap: 5 }}>
                  <Icon name="plus" size={12} /> Adicionar membro
                </button>
              </div>

              {addingMember && (
                <div style={{ border: '1px solid var(--octale-navy)', borderRadius: 6, padding: '12px 14px', background: '#f8f8ff', marginBottom: 14 }}>
                  <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                    <select
                      value={newMemberId}
                      onChange={e => setNewMemberId(e.target.value)}
                      style={{ flex: 1, padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12.5, outline: 'none', color: '#1a1a2e', background: '#fff' }}
                    >
                      <option value="">— Selecione o usuário —</option>
                      {users.filter(u => !team.some(m => m.user_id === u.id)).map(u => (
                        <option key={u.id} value={u.id}>{u.name}</option>
                      ))}
                    </select>
                    <input
                      value={newMemberRole}
                      onChange={e => setNewMemberRole(e.target.value)}
                      placeholder="Papel (ex: Advogado responsável)"
                      style={{ flex: 1, padding: '7px 10px', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12.5, outline: 'none', color: '#1a1a2e', background: '#fff' }}
                    />
                  </div>
                  <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                    <button className="btn ghost sm" onClick={() => { setAddingMember(false); setNewMemberId(''); setNewMemberRole(''); }}>Cancelar</button>
                    <button className="btn sm" onClick={handleAddMember} disabled={savingMember || !newMemberId}>
                      {savingMember ? 'Adicionando…' : 'Adicionar'}
                    </button>
                  </div>
                </div>
              )}

              {teamLoading ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg-muted)', fontSize: 13, padding: '16px 0' }}>
                  <span className="spinner" style={{ width: 12, height: 12 }} /> Carregando…
                </div>
              ) : (
                <div>
                  {owner && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 6, background: '#f5f5fb', border: '1px solid #e0e0f0', marginBottom: 8 }}>
                      <UserAvatar user={owner} className="av sm" style={{ flexShrink: 0 }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 600, color: '#1a1a2e' }}>{owner.name}</div>
                        <div style={{ fontSize: 11, color: '#888' }}>Sócio responsável</div>
                      </div>
                      <span style={{ fontSize: 10, fontWeight: 700, color: '#fff', background: 'var(--octale-navy)', borderRadius: 4, padding: '2px 7px' }}>Responsável</span>
                    </div>
                  )}

                  {team.filter(m => m.user_id !== k?.owner_user_id).map(member => {
                    const u = (member.users) || {};
                    return (
                      <div key={member.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 6, background: '#fff' }}>
                        <UserAvatar user={u} className="av sm" style={{ flexShrink: 0 }} />
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 600, color: '#1a1a2e' }}>{u.name || '—'}</div>
                          <input
                            value={member.role || ''}
                            onChange={e => {
                              const val = e.target.value;
                              setTeam(prev => prev.map(m => m.user_id === member.user_id ? { ...m, role: val } : m));
                            }}
                            onBlur={e => handleUpdateRole(member.user_id, e.target.value)}
                            placeholder="Papel na equipe…"
                            style={{ border: 'none', outline: 'none', background: 'transparent', fontSize: 11, color: '#888', padding: 0, width: '100%', fontFamily: 'inherit', cursor: 'text' }}
                          />
                        </div>
                        <button
                          onClick={() => handleRemoveMember(member.user_id)}
                          style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ccc', padding: 4, lineHeight: 0, flexShrink: 0 }}
                          title="Remover membro"
                        >
                          <Icon name="x" size={13} />
                        </button>
                      </div>
                    );
                  })}

                  {team.filter(m => m.user_id !== k?.owner_user_id).length === 0 && !addingMember && (
                    <div style={{ fontSize: 12, color: '#aaa', textAlign: 'center', padding: '16px 0' }}>
                      Nenhum membro adicional. Clique em "Adicionar membro".
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* RIGHT — AI panel (fixed mode) */}
      {!floating && <CaseAIPanel caseData={k} floating={false} />}

      {/* Floating AI button + panel */}
      {floating && (
        <>
          <button
            className="btn"
            style={{ position: 'fixed', bottom: 24, right: 24, borderRadius: 999, width: 48, height: 48, padding: 0, display: 'grid', placeItems: 'center', boxShadow: '0 4px 20px rgba(0,0,0,.4)', zIndex: 100 }}
            onClick={() => setAiOpen(!aiOpen)}
          >
            <Icon name="sparkles" size={18} />
          </button>
          {aiOpen && (
            <div style={{ position: 'fixed', bottom: 80, right: 24, width: 340, zIndex: 101 }}>
              <CaseAIPanel caseData={k} floating={true} />
            </div>
          )}
        </>
      )}

      {showNewCase && renderNewCaseModal()}
    </div>
  );
};