// CRM — lista de clientes + perfil do cliente (conectado à API real)

// ──────────────────────────────────────────────────────────────────────────
// Painel de contatos ricos de um cliente (migration 027).
// Estado isolado por cliente; recarrega quando clientId muda.
// ──────────────────────────────────────────────────────────────────────────
const ClientContactsPanel = ({ clientId }) => {
  const [contacts, setContacts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editing, setEditing] = React.useState(null); // contato em edição (ou {} para novo)
  const [saving, setSaving] = React.useState(false);

  const blank = { name:'', role:'', cpf:'', is_primary:false, phones:[], emails:[], birthday:'', notes:'' };

  React.useEffect(() => {
    if (!clientId) return;
    setLoading(true);
    window.OctaleApi.clients.listContacts(clientId)
      .then(setContacts)
      .catch(() => setContacts([]))
      .finally(() => setLoading(false));
  }, [clientId]);

  const inputStyle = {
    width: '100%', boxSizing: 'border-box', padding: '7px 10px', borderRadius: 6,
    border: '1.5px solid #dde', fontSize: 13, background: '#fff', outline: 'none', fontFamily: 'inherit',
  };

  const save = async () => {
    if (!editing.name || !editing.name.trim()) return;
    setSaving(true);
    try {
      const payload = {
        name: editing.name.trim(),
        role: editing.role || undefined,
        cpf: editing.cpf || undefined,
        is_primary: !!editing.is_primary,
        phones: (editing.phones || []).filter(p => p.value && p.value.trim()),
        emails: (editing.emails || []).filter(e => e.value && e.value.trim()),
        birthday: editing.birthday || undefined,
        notes: editing.notes || undefined,
      };
      let saved;
      if (editing.id) {
        saved = await window.OctaleApi.clients.updateContact(clientId, editing.id, payload);
        setContacts(prev => prev.map(c => c.id === saved.id ? saved : c));
      } else {
        saved = await window.OctaleApi.clients.addContact(clientId, payload);
        setContacts(prev => [...prev, saved]);
      }
      // Se marcou principal, reflete unicidade localmente.
      if (payload.is_primary) {
        setContacts(prev => prev.map(c => c.id === saved.id ? c : { ...c, is_primary: false }));
      }
      setEditing(null);
    } catch (e) {
      alert('Erro ao salvar contato: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  const remove = async (id) => {
    if (!confirm('Remover este contato?')) return;
    try {
      await window.OctaleApi.clients.deleteContact(clientId, id);
      setContacts(prev => prev.filter(c => c.id !== id));
    } catch (e) {
      alert('Erro ao remover contato: ' + e.message);
    }
  };

  // Editor de canais (telefones/emails) — array de {type, value}.
  // Função (não componente) para não remontar e perder foco a cada tecla.
  const renderChannelEditor = ({ label, kind, items, types, placeholder }) => (
    <div className="crm-field" style={{ gridColumn: '1/-1' }}>
      <span className="lbl">{label}</span>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {(items || []).map((ch, i) => (
          <div key={i} style={{ display: 'flex', gap: 6 }}>
            <select style={{ ...inputStyle, width: 130 }} value={ch.type}
              onChange={e => setEditing(p => { const arr = [...p[kind]]; arr[i] = { ...arr[i], type: e.target.value }; return { ...p, [kind]: arr }; })}>
              {types.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
            <input style={inputStyle} value={ch.value} placeholder={placeholder}
              onChange={e => setEditing(p => { const arr = [...p[kind]]; arr[i] = { ...arr[i], value: e.target.value }; return { ...p, [kind]: arr }; })} />
            <button className="btn ghost sm icon" onClick={() => setEditing(p => ({ ...p, [kind]: p[kind].filter((_, j) => j !== i) }))}
              style={{ color: 'var(--danger)', flexShrink: 0 }}><Icon name="x" size={13} /></button>
          </div>
        ))}
        <button className="btn ghost sm" style={{ alignSelf: 'flex-start' }}
          onClick={() => setEditing(p => ({ ...p, [kind]: [...(p[kind] || []), { type: types[0], value: '' }] }))}>
          <Icon name="plus" size={11} /> {label.replace(/s$/, '')}
        </button>
      </div>
    </div>
  );

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>Contatos · {contacts.length}</h3>
        <div className="right">
          <button className="btn ghost sm" onClick={() => setEditing({ ...blank })}><Icon name="plus" size={11} /> Novo</button>
        </div>
      </div>

      {loading ? (
        <div style={{ padding: '16px', color: 'var(--fg-muted)', fontSize: 13, display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="spinner" style={{ width: 12, height: 12 }} /> Carregando contatos…
        </div>
      ) : contacts.length === 0 ? (
        <div style={{ padding: '12px 16px', color: 'var(--fg-muted)', fontSize: 13 }}>Nenhum contato cadastrado.</div>
      ) : (
        <div>
          {contacts.map(ct => (
            <div className="list-row" key={ct.id} style={{ alignItems: 'flex-start' }}>
              <Icon name="user" size={14} style={{ color: 'var(--octale-navy)', flexShrink: 0, marginTop: 2 }} />
              <div className="grow" style={{ minWidth: 0 }}>
                <div className="ttl" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  {ct.name}
                  {ct.is_primary && <span className="chip neon" style={{ fontSize: 10 }}>Principal</span>}
                </div>
                <div className="meta">
                  {[ct.role, ...(ct.phones || []).map(p => p.value), ...(ct.emails || []).map(e => e.value)]
                    .filter(Boolean).join(' · ') || '—'}
                </div>
              </div>
              <button className="btn ghost sm icon" title="Editar" onClick={() => setEditing({ ...blank, ...ct })}><Icon name="pen" size={12} /></button>
              <button className="btn ghost sm icon" title="Remover" onClick={() => remove(ct.id)} style={{ color: 'var(--danger)' }}><Icon name="trash" size={12} /></button>
            </div>
          ))}
        </div>
      )}

      {/* Modal de edição de contato */}
      {editing && (
        <div className="modal-overlay" onClick={() => setEditing(null)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 540 }}>
            <div className="modal-head">
              <h3>{editing.id ? 'Editar contato' : 'Novo contato'}</h3>
              <button className="btn ghost sm icon" onClick={() => setEditing(null)}><Icon name="x" size={14} /></button>
            </div>
            <div className="modal-body">
              <div className="crm-grid">
                <div className="crm-field" style={{ gridColumn: '1/-1' }}>
                  <span className="lbl">Nome *</span>
                  <input autoFocus style={inputStyle} value={editing.name} onChange={e => setEditing(p => ({ ...p, name: e.target.value }))} />
                </div>
                <div className="crm-field">
                  <span className="lbl">Cargo / Função</span>
                  <input style={inputStyle} value={editing.role} onChange={e => setEditing(p => ({ ...p, role: e.target.value }))} placeholder="Ex: Diretor financeiro" />
                </div>
                <div className="crm-field">
                  <span className="lbl">CPF</span>
                  <input style={inputStyle} value={editing.cpf} onChange={e => setEditing(p => ({ ...p, cpf: e.target.value }))} placeholder="000.000.000-00" />
                </div>
                {renderChannelEditor({ label: 'Telefones', kind: 'phones', items: editing.phones,
                  types: ['celular','comercial','whatsapp','residencial'], placeholder: '(00) 00000-0000' })}
                {renderChannelEditor({ label: 'Emails', kind: 'emails', items: editing.emails,
                  types: ['comercial','pessoal','financeiro'], placeholder: 'nome@empresa.com' })}
                <div className="crm-field">
                  <span className="lbl">Aniversário</span>
                  <input type="date" style={inputStyle} value={editing.birthday || ''} onChange={e => setEditing(p => ({ ...p, birthday: e.target.value }))} />
                </div>
                <div className="crm-field" style={{ justifyContent: 'flex-end' }}>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
                    <input type="checkbox" checked={!!editing.is_primary} onChange={e => setEditing(p => ({ ...p, is_primary: e.target.checked }))} />
                    Contato principal
                  </label>
                </div>
                <div className="crm-field" style={{ gridColumn: '1/-1' }}>
                  <span className="lbl">Observações</span>
                  <textarea style={{ ...inputStyle, minHeight: 60, resize: 'vertical' }} value={editing.notes} onChange={e => setEditing(p => ({ ...p, notes: e.target.value }))} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={() => setEditing(null)}>Cancelar</button>
              <button className="btn" onClick={save} disabled={saving || !editing.name.trim()}>
                {saving ? 'Salvando…' : 'Salvar contato'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

const Clients = ({ initialClientId, onOpenCase } = {}) => {
  const [clients, setClients] = React.useState([]);
  const [cases, setCases] = React.useState([]);
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [selId, setSelId] = React.useState(initialClientId || null);
  const [tab, setTab] = React.useState('identidade');
  const [search, setSearch] = React.useState('');
  const [filterTier, setFilterTier] = React.useState('');
  const [showNewClient, setShowNewClient] = React.useState(false);
  const blankClient = {
    person_type: 'PJ',
    name:'', short_name:'', sector:'', tier:'Padrão', mrr:'', color:'var(--octale-navy)',
    // PJ
    nome_fantasia:'', cnpj:'', inscricao_estadual:'',
    // PF
    cpf:'',
    // endereço
    cep:'', street:'', address_number:'', complement:'', district:'', city:'', state:'',
  };
  const [newClient, setNewClient] = React.useState(blankClient);
  const [cepLoading, setCepLoading] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [editing, setEditing] = React.useState(false);
  const [editForm, setEditForm] = React.useState({});
  const [editSaving, setEditSaving] = React.useState(false);
  const [mobileDetailOpen, setMobileDetailOpen] = React.useState(false);
  const isMobile = () => window.innerWidth < 768;

  // Contrato & escopo
  const [scopeNotes, setScopeNotes] = React.useState('');
  const [scopeEditing, setScopeEditing] = React.useState(false);
  const [scopeSaving, setScopeSaving] = React.useState(false);
  const [scopeDocs, setScopeDocs] = React.useState([]);
  const [scopeDocsLoading, setScopeDocsLoading] = React.useState(false);
  const [scopeUploading, setScopeUploading] = React.useState(false);
  const [scopeDragOver, setScopeDragOver] = React.useState(false);

  // Novo caso a partir do perfil do cliente
  const [showNewCase, setShowNewCase] = React.useState(false);
  const [newCase, setNewCase] = React.useState({ title:'', area:'M&A', status:'Em análise', stage:'', priority:'Média', value:'' });
  const [caseSaving, setCaseSaving] = React.useState(false);

  // Carregar dados
  React.useEffect(() => {
    const load = async () => {
      try {
        setLoading(true);
        const [cls, us] = await Promise.all([
          window.OctaleApi.clients.list(),
          window.OctaleApi.users.list(),
        ]);
        setClients(cls);
        setUsers(us);
        // auto-seleciona o primeiro apenas se não veio um ID direto da busca
        if (cls.length > 0 && !initialClientId) setSelId(cls[0].id);
      } catch (e) {
        setError(e.message);
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  // Carregar casos do cliente selecionado
  React.useEffect(() => {
    if (!selId) return;
    window.OctaleApi.cases.list({ client_id: selId })
      .then(setCases)
      .catch(() => setCases([]));
  }, [selId]);

  // Histórico de atividade do cliente
  const [feed, setFeed] = React.useState([]);
  const [feedLoading, setFeedLoading] = React.useState(false);
  React.useEffect(() => {
    if (!selId || (tab !== 'historico' && tab !== 'memoria')) return;
    setFeedLoading(true);
    // Prioriza activity_log (feed unificado, rico). Fallback para /feed legado.
    // (Também usado pela aba "Memória IA" para calcular a última interação.)
    window.OctaleApi.clients.activity(selId)
      .then(items => setFeed(items || []))
      .catch(() => {
        // Fallback se o activity_log falhar por algum motivo
        return window.OctaleApi.clients.feed(selId).then(items => setFeed(items || [])).catch(() => setFeed([]));
      })
      .finally(() => setFeedLoading(false));
  }, [selId, tab]);

  // "Memória IA" — resumo computado do cliente (sem chamada de IA: agrega o que
  // já existe no sistema para o advogado não precisar perguntar). Carrega ao
  // abrir a aba, não fica reperguntando toda vez.
  const [memoTasks, setMemoTasks] = React.useState([]);
  const [memoLoading, setMemoLoading] = React.useState(false);
  React.useEffect(() => {
    if (!selId || tab !== 'memoria') return;
    setMemoLoading(true);
    window.OctaleApi.tasks.list({ client_id: selId })
      .then(ts => setMemoTasks((ts || []).filter(t => t.kanban_column !== 'concluido')))
      .catch(() => setMemoTasks([]))
      .finally(() => setMemoLoading(false));
  }, [selId, tab]);

  // Carregar notas de escopo e documentos quando aba comercial está ativa
  React.useEffect(() => {
    if (!selId || tab !== 'comercial') return;
    const cl = clients.find(x => x.id === selId);
    setScopeNotes(cl?.scope_notes || '');
    setScopeEditing(false);
    setScopeDocsLoading(true);
    window.OctaleApi.documents.list({ client_id: selId, category: 'contrato' })
      .then(setScopeDocs)
      .catch(() => setScopeDocs([]))
      .finally(() => setScopeDocsLoading(false));
  }, [selId, tab]);

  const filtered = clients.filter(cl => {
    const matchSearch = !search || cl.name.toLowerCase().includes(search.toLowerCase()) || (cl.cnpj || '').includes(search);
    const matchTier = !filterTier || cl.tier === filterTier;
    return matchSearch && matchTier;
  });

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

  // Busca endereço por CEP (ViaCEP — API pública, sem auth). Preenche o form passado.
  const lookupCep = async (rawCep, applyTo) => {
    const cep = String(rawCep || '').replace(/\D/g, '');
    if (cep.length !== 8) return;
    setCepLoading(true);
    try {
      const resp = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await resp.json();
      if (d.erro) return;
      applyTo({
        street: d.logradouro || '',
        district: d.bairro || '',
        city: d.localidade || '',
        state: d.uf || '',
      });
    } catch (_) {
      /* silencioso — usuário pode preencher manualmente */
    } finally {
      setCepLoading(false);
    }
  };

  const handleCreateClient = async () => {
    const isPF = newClient.person_type === 'PF';
    if (!newClient.name || !newClient.short_name) return;
    try {
      setSaving(true);
      const me = await window.OctaleApi.auth.me();
      // `name` é o campo canônico de exibição. Para PJ, espelha em razao_social.
      const payload = {
        ...newClient,
        owner_user_id: me.id,
        razao_social: isPF ? undefined : newClient.name,
        // limpa campos do tipo oposto
        cpf: isPF ? newClient.cpf : undefined,
        nome_fantasia: isPF ? undefined : newClient.nome_fantasia,
        cnpj: isPF ? undefined : newClient.cnpj,
        inscricao_estadual: isPF ? undefined : newClient.inscricao_estadual,
      };
      const created = await window.OctaleApi.clients.create(payload);
      setClients(prev => [...prev, created]);
      setSelId(created.id);
      setShowNewClient(false);
      setNewClient(blankClient);
    } catch (e) {
      alert('Erro ao criar cliente: ' + e.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteClient = async () => {
    if (!c) return;
    if (!confirm(`Tem certeza que deseja excluir o cliente "${c.name}"? Esta ação não pode ser desfeita.`)) return;
    try {
      await window.OctaleApi.clients.delete(c.id);
      const remaining = clients.filter(x => x.id !== c.id);
      setClients(remaining);
      setSelId(remaining.length > 0 ? remaining[0].id : null);
      setTab('identidade');
      setMobileDetailOpen(false);
    } catch (e) {
      alert('Erro ao excluir cliente: ' + e.message);
    }
  };

  const handleScopeNotes = async () => {
    if (!c) return;
    try {
      setScopeSaving(true);
      const updated = await window.OctaleApi.clients.update(c.id, { scope_notes: scopeNotes });
      setClients(prev => prev.map(x => x.id === c.id ? { ...x, scope_notes: updated.scope_notes } : x));
      setScopeEditing(false);
    } catch (e) {
      alert('Erro ao salvar anotações: ' + e.message);
    } finally {
      setScopeSaving(false);
    }
  };

  const handleScopeUpload = async (files) => {
    if (!c || !files.length) return;
    setScopeUploading(true);
    try {
      for (const file of files) {
        const result = await window.OctaleApi.documents.upload(file, { client_id: c.id, category: 'contrato' });
        setScopeDocs(prev => [result.document || result, ...prev]);
      }
    } catch (e) {
      alert('Erro ao fazer upload: ' + e.message);
    } finally {
      setScopeUploading(false);
    }
  };

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

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

  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 — {c?.name}</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 autoFocus value={newCase.title} onChange={e => setNewCase(p => ({...p, title: e.target.value}))}
              onKeyDown={e => e.key === 'Enter' && handleCreateCase()}
              placeholder="Ex: Aquisição da Tabacaria Lopes pela VBH" />
          </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={caseSaving || !newCase.title.trim()}>
            {caseSaving ? 'Salvando…' : 'Criar caso'}
          </button>
        </div>
      </div>
    </div>
  );

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

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

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

  return (
    <div className="crm">
      {/* Lista */}
      <div className="crm-list">
        <div className="crm-list-head">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h2>Clientes</h2>
            <button className="btn sm icon" onClick={() => setShowNewClient(true)}><Icon name="plus" size={14} /></button>
          </div>
          <div className="crm-list-search">
            <Icon name="search" size={13} />
            <input
              placeholder="Buscar por nome, CNPJ…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span className={`chip soft ${!filterTier ? 'active' : ''}`} style={{ cursor: 'pointer' }} onClick={() => setFilterTier('')}>
              Todos · {clients.length}
            </span>
            {['Estratégico','Premium','Padrão'].map(t => (
              <span key={t} className={`chip soft ${filterTier === t ? 'active' : ''}`} style={{ cursor: 'pointer' }} onClick={() => setFilterTier(filterTier === t ? '' : t)}>
                {t} · {clients.filter(cl => cl.tier === t).length}
              </span>
            ))}
          </div>
        </div>
        <div className="crm-list-body">
          {filtered.length === 0 && (
            <div style={{ padding: '24px 16px', color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center' }}>
              {search ? 'Nenhum cliente encontrado.' : 'Nenhum cliente cadastrado.'}
            </div>
          )}
          {filtered.map(cl => (
            <div key={cl.id} className={`crm-list-item ${selId === cl.id ? 'active' : ''}`} onClick={() => { setSelId(cl.id); setTab('identidade'); setEditing(false); setScopeEditing(false); setScopeNotes(''); setScopeDocs([]); if (isMobile()) setMobileDetailOpen(true); }}>
              <div className="client-mark" style={{ background: cl.color || 'var(--octale-navy)' }}>{cl.short_name}</div>
              <div style={{ minWidth: 0 }}>
                <div className="nm" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 200 }}>{cl.name}</div>
                <div className="sub">{cl.sector}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Detalhe */}
      {c ? (
        <div className={`crm-detail ${mobileDetailOpen ? 'crm-detail-mobile-open' : ''}`}>
          {/* Botão voltar — só no mobile */}
          <button
            className="crm-detail-back"
            onClick={() => setMobileDetailOpen(false)}
          >
            <Icon name="chevronLeft" size={16} /> Clientes
          </button>
          <div className="crm-detail-head">
            <div className="top">
              <div className="client-mark lg" style={{ background: c.color || 'var(--octale-navy)' }}>{c.short_name}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                  <h1>{c.name}</h1>
                  <span className="chip neon">{c.tier}</span>
                </div>
                <div className="meta-line">
                  {c.sector}{c.cnpj ? ` · ${c.cnpj}` : ''}{c.city ? ` · ${c.city}` : ''}
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 12 }}>
                  {owner && (
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--octale-navy)' }}>
                      <Icon name="user" size={13} /> <b>Sócio responsável</b>:
                      <span className="av xs" style={{ background: owner.color || 'var(--octale-navy)' }}>{owner.initials}</span>
                      {owner.name}
                    </span>
                  )}
                  {c.mrr && (
                    <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
                      MRR: <b style={{ color: 'var(--octale-navy)' }}>{c.mrr}</b>
                    </span>
                  )}
                  <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
                    <b style={{ color: 'var(--octale-navy)' }}>{cases.length}</b> matérias ativas
                  </span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                <button className="btn ghost sm"><Icon name="mail" size={12} /> Email</button>
                <button className="btn ghost sm"><Icon name="phone" size={12} /> Ligar</button>
                <button className="btn sm" onClick={() => setShowNewCase(true)}><Icon name="plus" size={12} /> Novo caso</button>
                <button
                  className="btn ghost sm icon"
                  title="Excluir cliente"
                  onClick={handleDeleteClient}
                  style={{ color: 'var(--danger)', marginLeft: 4 }}
                >
                  <Icon name="trash" size={14} />
                </button>
              </div>
            </div>
          </div>

          <div className="crm-detail-tabs">
            <div className="tab-row" style={{ borderBottom: 0 }}>
              {[
                ['identidade', 'Identidade'],
                ['comercial', 'Contrato & escopo'],
                ['juridico', 'Jurídico'],
                ['memoria', 'Memória IA'],
                ['historico', 'Histórico'],
              ].map(([k, l]) => (
                <button key={k} className={`tab ${tab === k ? 'active' : ''}`} onClick={() => setTab(k)}>{l}</button>
              ))}
            </div>
          </div>

          <div className="crm-detail-body">
            {tab === 'identidade' && (() => {
              const startEdit = () => {
                setEditForm({
                  person_type: c.person_type || 'PJ',
                  name: c.name || '',
                  short_name: c.short_name || '',
                  nome_fantasia: c.nome_fantasia || '',
                  cnpj: c.cnpj || '',
                  cpf: c.cpf || '',
                  inscricao_estadual: c.inscricao_estadual || '',
                  sector: c.sector || '',
                  tier: c.tier || 'Padrão',
                  mrr: c.mrr || '',
                  color: c.color || 'var(--octale-navy)',
                  cep: c.cep || '',
                  street: c.street || '',
                  address_number: c.address_number || '',
                  complement: c.complement || '',
                  district: c.district || '',
                  city: c.city || '',
                  state: c.state || '',
                });
                setEditing(true);
              };

              const saveEdit = async () => {
                setEditSaving(true);
                try {
                  const isPF = editForm.person_type === 'PF';
                  const t = (v) => (v && String(v).trim()) ? String(v).trim() : undefined;
                  const payload = {
                    person_type: editForm.person_type || 'PJ',
                    name: editForm.name.trim(),
                    short_name: editForm.short_name.trim().slice(0, 10),
                    razao_social: isPF ? undefined : editForm.name.trim(),
                    nome_fantasia: isPF ? undefined : t(editForm.nome_fantasia),
                    cnpj: isPF ? undefined : t(editForm.cnpj),
                    inscricao_estadual: isPF ? undefined : t(editForm.inscricao_estadual),
                    cpf: isPF ? t(editForm.cpf) : undefined,
                    sector: t(editForm.sector),
                    tier: editForm.tier || 'Padrão',
                    mrr: editForm.mrr ? parseFloat(String(editForm.mrr).replace(',', '.')) || undefined : undefined,
                    color: editForm.color || 'var(--octale-navy)',
                    cep: t(editForm.cep),
                    street: t(editForm.street),
                    address_number: t(editForm.address_number),
                    complement: t(editForm.complement),
                    district: t(editForm.district),
                    city: t(editForm.city),
                    state: t(editForm.state),
                  };
                  const updated = await window.OctaleApi.clients.update(c.id, payload);
                  setClients(prev => prev.map(x => x.id === c.id ? { ...x, ...updated } : x));
                  setEditing(false);
                } catch (e) {
                  alert('Erro ao salvar: ' + e.message);
                } finally {
                  setEditSaving(false);
                }
              };

              const inputStyle = {
                width: '100%', boxSizing: 'border-box',
                padding: '7px 10px', borderRadius: 6,
                border: '1.5px solid #dde', fontSize: 13,
                background: '#fff', outline: 'none',
                fontFamily: 'inherit',
              };
              const f = editForm;
              const setF = (k, v) => setEditForm(prev => ({ ...prev, [k]: v }));

              return (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <div className="panel">
                    <div className="panel-head">
                      <h3>Dados cadastrais</h3>
                      <div className="right">
                        {editing ? (
                          <>
                            <button className="btn ghost sm" onClick={() => setEditing(false)} disabled={editSaving}>Cancelar</button>
                            <button className="btn sm" onClick={saveEdit} disabled={editSaving} style={{ marginLeft: 6 }}>
                              {editSaving ? 'Salvando…' : 'Salvar'}
                            </button>
                          </>
                        ) : (
                          <button className="btn ghost sm" onClick={startEdit}>
                            <Icon name="pen" size={12} /> Editar
                          </button>
                        )}
                      </div>
                    </div>
                    <div className="panel-body">
                      {editing ? (() => {
                        const isPF = f.person_type === 'PF';
                        return (
                        <div className="crm-grid">
                          <div className="crm-field" style={{ gridColumn: '1/-1' }}>
                            <span className="lbl">Tipo de pessoa</span>
                            <div style={{ display: 'flex', border: '1.5px solid #dde', borderRadius: 6, overflow: 'hidden', width: 'fit-content' }}>
                              {[['PJ','Pessoa Jurídica'],['PF','Pessoa Física']].map(([v,l]) => (
                                <button key={v} type="button" onClick={() => setF('person_type', v)}
                                  style={{ padding: '6px 14px', fontSize: 12.5, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                                    background: f.person_type === v ? 'var(--octale-navy)' : '#fff', color: f.person_type === v ? '#fff' : 'var(--fg-muted)' }}>{l}</button>
                              ))}
                            </div>
                          </div>
                          <div className="crm-field" style={{ gridColumn: '1/-1' }}>
                            <span className="lbl">{isPF ? 'Nome completo' : 'Razão social'}</span>
                            <input style={inputStyle} value={f.name} onChange={e => setF('name', e.target.value)} />
                          </div>
                          {!isPF && (
                            <div className="crm-field" style={{ gridColumn: '1/-1' }}>
                              <span className="lbl">Nome fantasia</span>
                              <input style={inputStyle} value={f.nome_fantasia} onChange={e => setF('nome_fantasia', e.target.value)} />
                            </div>
                          )}
                          <div className="crm-field">
                            <span className="lbl">Nome curto (máx. 10 car.)</span>
                            <input style={inputStyle} value={f.short_name} maxLength={10} onChange={e => setF('short_name', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Tier</span>
                            <select style={inputStyle} value={f.tier} onChange={e => setF('tier', e.target.value)}>
                              <option>Padrão</option>
                              <option>Premium</option>
                              <option>Estratégico</option>
                            </select>
                          </div>
                          {isPF ? (
                            <div className="crm-field">
                              <span className="lbl">CPF</span>
                              <input style={inputStyle} value={f.cpf} onChange={e => setF('cpf', e.target.value)} placeholder="000.000.000-00" />
                            </div>
                          ) : (
                            <>
                              <div className="crm-field">
                                <span className="lbl">CNPJ</span>
                                <input style={inputStyle} value={f.cnpj} onChange={e => setF('cnpj', e.target.value)} placeholder="00.000.000/0001-00" />
                              </div>
                              <div className="crm-field">
                                <span className="lbl">Inscrição estadual</span>
                                <input style={inputStyle} value={f.inscricao_estadual} onChange={e => setF('inscricao_estadual', e.target.value)} />
                              </div>
                            </>
                          )}
                          <div className="crm-field">
                            <span className="lbl">Setor de atuação</span>
                            <input style={inputStyle} value={f.sector} onChange={e => setF('sector', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">MRR (R$)</span>
                            <input style={inputStyle} type="number" value={f.mrr} onChange={e => setF('mrr', e.target.value)} placeholder="0,00" />
                          </div>

                          {/* Endereço */}
                          <div className="crm-field" style={{ gridColumn: '1/-1', marginTop: 4 }}>
                            <span className="lbl" style={{ textTransform: 'uppercase', letterSpacing: .4, fontSize: 10.5 }}>Endereço</span>
                          </div>
                          <div className="crm-field">
                            <span className="lbl">CEP {cepLoading && <span style={{ fontWeight: 400 }}>· buscando…</span>}</span>
                            <input style={inputStyle} value={f.cep}
                              onChange={e => setF('cep', e.target.value)}
                              onBlur={e => lookupCep(e.target.value, (addr) => setEditForm(prev => ({ ...prev, ...addr })))}
                              placeholder="00000-000" />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Logradouro</span>
                            <input style={inputStyle} value={f.street} onChange={e => setF('street', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Número</span>
                            <input style={inputStyle} value={f.address_number} onChange={e => setF('address_number', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Complemento</span>
                            <input style={inputStyle} value={f.complement} onChange={e => setF('complement', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Bairro</span>
                            <input style={inputStyle} value={f.district} onChange={e => setF('district', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Cidade</span>
                            <input style={inputStyle} value={f.city} onChange={e => setF('city', e.target.value)} />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">UF</span>
                            <input style={inputStyle} value={f.state} maxLength={2} onChange={e => setF('state', e.target.value.toUpperCase().slice(0,2))} placeholder="SP" />
                          </div>
                          <div className="crm-field">
                            <span className="lbl">Cor de identificação</span>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                              <input type="color" value={f.color} onChange={e => setF('color', e.target.value)}
                                style={{ width: 36, height: 36, border: 'none', borderRadius: 6, cursor: 'pointer', padding: 2, background: 'transparent' }} />
                              <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{f.color}</span>
                            </div>
                          </div>
                        </div>
                        );
                      })() : (() => {
                        const addr = [
                          c.street, c.address_number && `nº ${c.address_number}`, c.complement,
                          c.district, c.city, c.state,
                        ].filter(Boolean).join(', ');
                        return (
                        <div className="crm-grid">
                          <div className="crm-field"><span className="lbl">Tipo</span><span className="val">{c.person_type === 'PF' ? 'Pessoa Física' : 'Pessoa Jurídica'}</span></div>
                          <div className="crm-field"><span className="lbl">{c.person_type === 'PF' ? 'Nome' : 'Razão social'}</span><span className="val">{c.name}</span></div>
                          {c.nome_fantasia && <div className="crm-field"><span className="lbl">Nome fantasia</span><span className="val">{c.nome_fantasia}</span></div>}
                          <div className="crm-field"><span className="lbl">Nome curto</span><span className="val">{c.short_name}</span></div>
                          {c.person_type === 'PF' && c.cpf && <div className="crm-field"><span className="lbl">CPF</span><span className="val">{c.cpf}</span></div>}
                          {c.person_type !== 'PF' && c.cnpj && <div className="crm-field"><span className="lbl">CNPJ</span><span className="val">{c.cnpj}</span></div>}
                          {c.person_type !== 'PF' && c.inscricao_estadual && <div className="crm-field"><span className="lbl">Inscrição estadual</span><span className="val">{c.inscricao_estadual}</span></div>}
                          {c.sector && <div className="crm-field"><span className="lbl">Setor de atuação</span><span className="val">{c.sector}</span></div>}
                          <div className="crm-field"><span className="lbl">Tier</span><span className="val">{c.tier}</span></div>
                          {c.mrr && <div className="crm-field"><span className="lbl">MRR</span><span className="val">R$ {c.mrr}</span></div>}
                          {addr && <div className="crm-field" style={{ gridColumn: '1/-1' }}><span className="lbl">Endereço</span><span className="val">{addr}{c.cep ? ` — CEP ${c.cep}` : ''}</span></div>}
                        </div>
                        );
                      })()}
                    </div>
                  </div>
                  <ClientContactsPanel clientId={selId} />
                </div>

                {/* Painel de casos do cliente */}
                <div className="panel">
                  <div className="panel-head">
                    <h3>Casos · {cases.length}</h3>
                    <div className="right">
                      <button className="btn ghost sm" onClick={() => setShowNewCase(true)}>
                        <Icon name="plus" size={11} /> Novo caso
                      </button>
                    </div>
                  </div>
                  {cases.length === 0 ? (
                    <div style={{ padding: '20px 16px', color: 'var(--fg-muted)', fontSize: 13, textAlign: 'center' }}>
                      Nenhum caso ativo.
                      <br />
                      <button className="btn ghost sm" style={{ marginTop: 10 }} onClick={() => setShowNewCase(true)}>
                        <Icon name="plus" size={11} /> Criar primeiro caso
                      </button>
                    </div>
                  ) : (
                    <div>
                      {cases.map(ca => (
                        <div className="list-row" key={ca.id}
                          style={{ cursor: onOpenCase ? 'pointer' : 'default' }}
                          onClick={() => onOpenCase && onOpenCase(ca.id)}>
                          <Icon name="briefcase" size={14} style={{ color: 'var(--octale-navy)', flexShrink: 0 }} />
                          <div className="grow">
                            <div className="ttl">{ca.title}</div>
                            <div className="meta">{ca.number} · {ca.area}{ca.stage ? ` · ${ca.stage}` : ''}</div>
                          </div>
                          <span className="chip soft" style={{ flexShrink: 0 }}>{ca.status}</span>
                          {ca.value && <span style={{ fontSize: 11.5, color: 'var(--fg-muted)', whiteSpace: 'nowrap' }}>{ca.value}</span>}
                          <Icon name="chevronRight" size={14} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
                        </div>
                      ))}
                    </div>
                  )}
                </div>
                </div>
              );
            })()}

            {tab === 'juridico' && (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 18 }}>
                <div className="panel">
                  <div className="panel-head">
                    <h3>Casos ativos · {cases.length}</h3>
                    <div className="right"><button className="btn ghost sm">Ver arquivados</button></div>
                  </div>
                  <div>
                    {cases.length === 0 && (
                      <div style={{ padding: '16px', color: 'var(--fg-muted)', fontSize: 13 }}>Nenhum caso ativo.</div>
                    )}
                    {cases.map(ca => (
                      <div className="list-row" key={ca.id}
                        style={{ cursor: onOpenCase ? 'pointer' : 'default' }}
                        onClick={() => onOpenCase && onOpenCase(ca.id)}>
                        <Icon name="briefcase" size={14} style={{ color: 'var(--octale-navy)' }} />
                        <div className="grow">
                          <div className="ttl">{ca.title}</div>
                          <div className="meta">{ca.number} · {ca.area}{ca.stage ? ` · ${ca.stage}` : ''}</div>
                        </div>
                        <span className="chip soft">{ca.status}</span>
                        {ca.value && <span className="muted" style={{ fontSize: 11.5, minWidth: 80, textAlign: 'right' }}>{ca.value}</span>}
                        <Icon name="chevronRight" size={14} />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {tab === 'comercial' && (
              <div className="scope-cols" style={{ height: '100%', overflow: 'hidden' }}>
                {/* Coluna esquerda — anotações livres */}
                <div style={{ borderRight: '1px solid var(--border)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                  <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
                    <span style={{ fontWeight: 600, fontSize: 12.5 }}>Anotações de escopo e contrato</span>
                    <div style={{ display: 'flex', gap: 6 }}>
                      {scopeEditing ? (
                        <>
                          <button className="btn ghost sm" onClick={() => { setScopeEditing(false); setScopeNotes(c?.scope_notes || ''); }}>Cancelar</button>
                          <button className="btn sm" onClick={handleScopeNotes} disabled={scopeSaving}>
                            {scopeSaving ? <><span className="spinner" style={{ width: 10, height: 10 }} /> Salvando…</> : 'Salvar'}
                          </button>
                        </>
                      ) : (
                        <button className="btn ghost sm" onClick={() => setScopeEditing(true)}>
                          <Icon name="edit" size={12} /> Editar
                        </button>
                      )}
                    </div>
                  </div>
                  <div style={{ flex: 1, padding: '16px', overflow: 'auto' }}>
                    {scopeEditing ? (
                      <textarea
                        value={scopeNotes}
                        onChange={e => setScopeNotes(e.target.value)}
                        placeholder="Descreva o escopo do contrato, serviços prestados, honorários, prazos, cláusulas importantes..."
                        style={{
                          width: '100%', height: '100%', minHeight: 320, boxSizing: 'border-box',
                          border: '1.5px solid var(--octale-blue)', borderRadius: 8, padding: '12px',
                          fontSize: 13, lineHeight: 1.7, resize: 'none', outline: 'none',
                          fontFamily: 'inherit', background: 'var(--bg)', color: 'var(--fg)',
                        }}
                        autoFocus
                      />
                    ) : scopeNotes ? (
                      <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--fg)', whiteSpace: 'pre-wrap' }}>
                        {scopeNotes}
                      </div>
                    ) : (
                      <div style={{ color: 'var(--fg-muted)', fontSize: 13, lineHeight: 1.7 }}>
                        Nenhuma anotação registrada. Clique em <b>Editar</b> para adicionar informações sobre escopo, contrato, honorários ou outras observações relevantes.
                      </div>
                    )}
                  </div>
                </div>

                {/* Coluna direita — documentos */}
                <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                  <div style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
                    <span style={{ fontWeight: 600, fontSize: 12.5 }}>Documentos</span>
                    <label style={{ cursor: 'pointer' }}>
                      <input type="file" multiple style={{ display: 'none' }}
                        onChange={e => handleScopeUpload(Array.from(e.target.files))}
                        onClick={e => e.target.value = ''}
                      />
                      <span className="btn ghost sm" style={{ pointerEvents: 'none' }}>
                        <Icon name="upload" size={12} /> Upload
                      </span>
                    </label>
                  </div>

                  {/* Zona de drag & drop */}
                  <div
                    onDragOver={e => { e.preventDefault(); setScopeDragOver(true); }}
                    onDragLeave={() => setScopeDragOver(false)}
                    onDrop={e => { e.preventDefault(); setScopeDragOver(false); handleScopeUpload(Array.from(e.dataTransfer.files)); }}
                    style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
                  >
                    {scopeDragOver && (
                      <div style={{
                        position: 'absolute', inset: 0, zIndex: 10,
                        background: 'rgba(23,23,15,.08)', border: '2px dashed var(--octale-blue)',
                        borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 14, fontWeight: 600, color: 'var(--octale-blue)',
                        pointerEvents: 'none',
                      }}>
                        Solte os arquivos aqui
                      </div>
                    )}

                    {scopeUploading && (
                      <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--fg-muted)', borderBottom: '1px solid var(--border)' }}>
                        <span className="spinner" style={{ width: 12, height: 12 }} /> Enviando…
                      </div>
                    )}

                    <div style={{ flex: 1, overflow: 'auto', padding: '8px 0' }}>
                      {scopeDocsLoading ? (
                        <div style={{ padding: '20px 16px', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg-muted)', fontSize: 13 }}>
                          <span className="spinner" style={{ width: 12, height: 12 }} /> Carregando documentos…
                        </div>
                      ) : scopeDocs.length === 0 ? (
                        <div style={{ padding: '32px 16px', textAlign: 'center' }}>
                          <div style={{ color: 'var(--fg-muted)', fontSize: 13, marginBottom: 8 }}>Nenhum documento anexado.</div>
                          <div style={{ color: 'var(--fg-muted)', fontSize: 12 }}>Arraste arquivos aqui ou clique em Upload.</div>
                        </div>
                      ) : scopeDocs.map(doc => (
                        <div key={doc.id} style={{
                          padding: '10px 16px',
                          display: 'flex', alignItems: 'center', gap: 10,
                          borderBottom: '1px solid var(--border)',
                          fontSize: 12.5,
                        }}>
                          <Icon name="file" size={14} style={{ color: 'var(--fg-muted)', flexShrink: 0 }} />
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                              {doc.file_name || doc.name || 'Documento'}
                            </div>
                            <div style={{ color: 'var(--fg-muted)', fontSize: 11 }}>
                              {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" title="Baixar" onClick={() => handleScopeDownload(doc)}>
                            <Icon name="download" size={13} />
                          </button>
                          <button className="btn ghost sm icon" title="Remover" onClick={() => handleScopeDelete(doc.id)}
                            style={{ color: 'var(--danger)' }}>
                            <Icon name="trash" size={13} />
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {tab === 'memoria' && (() => {
              const clientCases = cases.filter(cs => cs.client_id === selId);
              const activeCases = clientCases.filter(cs => !['Encerrado', 'Arquivado'].includes(cs.status));
              const lastActivity = feed[0];
              const todayIso = new Date().toISOString().slice(0, 10);
              const overdue = memoTasks.filter(t => t.due_date && t.due_date < todayIso);
              const upcoming = memoTasks
                .filter(t => t.due_date && t.due_date >= todayIso)
                .sort((a, b) => a.due_date.localeCompare(b.due_date))
                .slice(0, 5);
              const daysSince = lastActivity
                ? Math.floor((Date.now() - new Date(lastActivity.created_at).getTime()) / 86400000)
                : null;

              return (
                <div style={{ padding: '8px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--fg-muted)' }}>
                    Resumo automático — sem precisar perguntar
                  </div>

                  {overdue.length > 0 && (
                    <div style={{
                      display: 'flex', alignItems: 'flex-start', gap: 10, padding: '12px 14px',
                      background: 'rgba(194,37,62,.06)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 8,
                    }}>
                      <Icon name="alertTriangle" size={16} style={{ color: '#C2253E', flexShrink: 0, marginTop: 1 }} />
                      <div style={{ fontSize: 12.5, color: '#C2253E' }}>
                        <b>{overdue.length} tarefa{overdue.length > 1 ? 's' : ''} atrasada{overdue.length > 1 ? 's' : ''}</b> deste cliente.
                      </div>
                    </div>
                  )}

                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 10 }}>
                    <div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '10px 12px' }}>
                      <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)' }}>{activeCases.length}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>caso{activeCases.length !== 1 ? 's' : ''} ativo{activeCases.length !== 1 ? 's' : ''}</div>
                    </div>
                    <div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '10px 12px' }}>
                      <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)' }}>{memoTasks.length}</div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>tarefa{memoTasks.length !== 1 ? 's' : ''} em aberto</div>
                    </div>
                    <div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '10px 12px' }}>
                      <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)' }}>
                        {daysSince == null ? '—' : daysSince === 0 ? 'hoje' : `${daysSince}d`}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>desde a última interação</div>
                    </div>
                  </div>

                  <div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--octale-black)', marginBottom: 6 }}>Próximos prazos</div>
                    {memoLoading ? (
                      <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>Carregando…</div>
                    ) : upcoming.length === 0 ? (
                      <div style={{ fontSize: 12, color: 'var(--fg-muted)', fontStyle: 'italic' }}>Nenhum prazo agendado para este cliente.</div>
                    ) : (
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {upcoming.map(t => (
                          <div key={t.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, fontSize: 12.5, padding: '6px 10px', border: '1px solid var(--border)', borderRadius: 6 }}>
                            <span>{t.title}</span>
                            <span style={{ color: 'var(--fg-muted)', flexShrink: 0 }}>{new Date(t.due_date).toLocaleDateString('pt-BR')}</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {lastActivity && (
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--octale-black)', marginBottom: 6 }}>Última interação</div>
                      <div style={{ fontSize: 12.5, color: 'var(--fg-muted)' }}>
                        {lastActivity.entity_label || lastActivity.action} — {new Date(lastActivity.created_at).toLocaleDateString('pt-BR')}
                      </div>
                    </div>
                  )}
                </div>
              );
            })()}

            {tab === 'historico' && (
              <div style={{ padding: '8px 0' }}>
                <ActivityFeed
                  items={feed}
                  loading={feedLoading}
                  emptyMessage="Nenhuma atividade registrada ainda para este cliente. Crie um caso, uma tarefa ou envie um documento — tudo aparecerá aqui."
                />
              </div>
            )}
          </div>
        </div>
      ) : (
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)', fontSize: 13 }}>
          {clients.length === 0 ? (
            <div style={{ textAlign: 'center' }}>
              <div style={{ marginBottom: 12 }}>Nenhum cliente cadastrado.</div>
              <button className="btn" onClick={() => setShowNewClient(true)}><Icon name="plus" size={13} /> Novo cliente</button>
            </div>
          ) : 'Selecione um cliente.'}
        </div>
      )}

      {showNewCase && renderNewCaseModal()}

      {/* Modal novo cliente */}
      {showNewClient && (() => {
        const isPF = newClient.person_type === 'PF';
        const setN = (k, v) => setNewClient(p => ({ ...p, [k]: v }));
        const sectionTitle = { fontSize: 11, fontWeight: 700, letterSpacing: .4, textTransform: 'uppercase', color: 'var(--fg-muted)', margin: '4px 0 0' };
        return (
        <div className="modal-overlay" onClick={() => setShowNewClient(false)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 640 }}>
            <div className="modal-head">
              <h3>Novo cliente</h3>
              <button className="btn ghost sm icon" onClick={() => setShowNewClient(false)}><Icon name="x" size={14} /></button>
            </div>
            <div className="modal-body" style={{ display: 'grid', gap: 14, maxHeight: '70vh', overflow: 'auto' }}>

              {/* Tipo de pessoa */}
              <div style={{ display: 'flex', gap: 0, border: '1.5px solid #dde', borderRadius: 8, overflow: 'hidden', width: 'fit-content' }}>
                {[['PJ', 'Pessoa Jurídica'], ['PF', 'Pessoa Física']].map(([v, l]) => (
                  <button key={v} type="button"
                    onClick={() => setN('person_type', v)}
                    style={{
                      padding: '7px 18px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
                      border: 'none', fontFamily: 'inherit',
                      background: newClient.person_type === v ? 'var(--octale-navy)' : '#fff',
                      color: newClient.person_type === v ? '#fff' : 'var(--fg-muted)',
                    }}>
                    {l}
                  </button>
                ))}
              </div>

              {/* Identificação */}
              <div className="field-group">
                <label>{isPF ? 'Nome completo *' : 'Razão social *'}</label>
                <input value={newClient.name} onChange={e => setN('name', e.target.value)}
                  placeholder={isPF ? 'Ex: João da Silva Souza' : 'Ex: Vinhedos Boutique Holding S.A.'} />
              </div>

              {!isPF && (
                <div className="field-group">
                  <label>Nome fantasia</label>
                  <input value={newClient.nome_fantasia} onChange={e => setN('nome_fantasia', e.target.value)} placeholder="Ex: Vinhedos Boutique" />
                </div>
              )}

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>Nome curto *</label>
                  <input value={newClient.short_name} onChange={e => setN('short_name', e.target.value)} placeholder="Ex: VBH" maxLength={10} />
                </div>
                <div className="field-group">
                  <label>Tier</label>
                  <select value={newClient.tier} onChange={e => setN('tier', e.target.value)}>
                    <option>Padrão</option>
                    <option>Premium</option>
                    <option>Estratégico</option>
                  </select>
                </div>
              </div>

              {isPF ? (
                <div className="field-group">
                  <label>CPF</label>
                  <input value={newClient.cpf} onChange={e => setN('cpf', e.target.value)} placeholder="000.000.000-00" />
                </div>
              ) : (
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div className="field-group">
                    <label>CNPJ</label>
                    <input value={newClient.cnpj} onChange={e => setN('cnpj', e.target.value)} placeholder="00.000.000/0001-00" />
                  </div>
                  <div className="field-group">
                    <label>Inscrição estadual</label>
                    <input value={newClient.inscricao_estadual} onChange={e => setN('inscricao_estadual', e.target.value)} placeholder="Isento / nº" />
                  </div>
                </div>
              )}

              <div className="field-group">
                <label>Setor de atuação</label>
                <input value={newClient.sector} onChange={e => setN('sector', e.target.value)} placeholder="Ex: Agronegócio · Vinícola" />
              </div>

              {/* Endereço */}
              <p style={sectionTitle}>Endereço</p>
              <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>CEP {cepLoading && <span style={{ color: 'var(--fg-muted)', fontWeight: 400 }}>· buscando…</span>}</label>
                  <input value={newClient.cep}
                    onChange={e => setN('cep', e.target.value)}
                    onBlur={e => lookupCep(e.target.value, (addr) => setNewClient(p => ({ ...p, ...addr })))}
                    placeholder="00000-000" />
                </div>
                <div className="field-group">
                  <label>Logradouro</label>
                  <input value={newClient.street} onChange={e => setN('street', e.target.value)} placeholder="Rua / Avenida" />
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>Número</label>
                  <input value={newClient.address_number} onChange={e => setN('address_number', e.target.value)} placeholder="Nº" />
                </div>
                <div className="field-group">
                  <label>Complemento</label>
                  <input value={newClient.complement} onChange={e => setN('complement', e.target.value)} placeholder="Sala, andar, bloco…" />
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 80px', gap: 12 }}>
                <div className="field-group">
                  <label>Bairro</label>
                  <input value={newClient.district} onChange={e => setN('district', e.target.value)} placeholder="Bairro" />
                </div>
                <div className="field-group">
                  <label>Cidade</label>
                  <input value={newClient.city} onChange={e => setN('city', e.target.value)} placeholder="Cidade" />
                </div>
                <div className="field-group">
                  <label>UF</label>
                  <input value={newClient.state} onChange={e => setN('state', e.target.value.toUpperCase().slice(0,2))} placeholder="SP" maxLength={2} />
                </div>
              </div>

              {/* Comercial */}
              <p style={sectionTitle}>Comercial</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-group">
                  <label>MRR de honorários</label>
                  <input value={newClient.mrr} onChange={e => setN('mrr', e.target.value)} placeholder="Ex: R$ 12.000" />
                </div>
                <div className="field-group">
                  <label>Cor de marca</label>
                  <input type="color" value={newClient.color} onChange={e => setN('color', e.target.value)} style={{ height: 38, padding: 2, cursor: 'pointer' }} />
                </div>
              </div>
            </div>
            <div className="modal-foot">
              <button className="btn ghost" onClick={() => setShowNewClient(false)}>Cancelar</button>
              <button className="btn" onClick={handleCreateClient} disabled={saving || !newClient.name.trim() || !newClient.short_name.trim()}>
                {saving ? 'Salvando…' : 'Criar cliente'}
              </button>
            </div>
          </div>
        </div>
        );
      })()}
    </div>
  );
};