// CRM Module

function CRM() {
  const [clients, setClients] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(null);
  const [detailNotes, setDetailNotes] = React.useState([]);
  const [note, setNote] = React.useState('');
  const [addModal, setAddModal] = React.useState(false);
  const [editModal, setEditModal] = React.useState(false);
  const [delConfirm, setDelConfirm] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const emptyForm = { name: '', contact: '', email: '', phone: '', city: '', segment: 'SMB', status: 'Prospect', cnpj: '', birthday: '', address: '', cep: '' };
  const [form, setForm] = React.useState(emptyForm);
  const [editForm, setEditForm] = React.useState(emptyForm);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };
  const [cnpjLoading, setCnpjLoading] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');

  const fmtCnpj = (raw) => {
    const d = (raw || '').replace(/\D/g, '').slice(0, 14);
    if (d.length <= 2)  return d;
    if (d.length <= 5)  return `${d.slice(0,2)}.${d.slice(2)}`;
    if (d.length <= 8)  return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5)}`;
    if (d.length <= 12) return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8)}`;
    return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8,12)}-${d.slice(12)}`;
  };

  const fetchCnpjData = async (cnpj, setFormFn) => {
    const clean = (cnpj || '').replace(/\D/g, '');
    if (clean.length !== 14) return;
    setCnpjLoading(true);
    try {
      const res = await fetch(`https://brasilapi.com.br/api/cnpj/v1/${clean}`);
      if (!res.ok) {
        setCnpjLoading(false);
        if (res.status === 404) showToast('CNPJ não encontrado na Receita.', 'danger');
        else                    showToast(`Erro ao consultar CNPJ (${res.status}).`, 'danger');
        return;
      }
      const data = await res.json();
      const addressParts = [data.logradouro, data.numero, data.bairro].filter(p => p && String(p).trim());
      const addressStr = addressParts.join(', ');
      const cepFmt = data.cep ? String(data.cep).replace(/(\d{5})(\d{3})/, '$1-$2') : '';
      setFormFn(f => ({
        ...f,
        name:    f.name    || data.razao_social || data.nome_fantasia || '',
        email:   f.email   || data.email || '',
        phone:   f.phone   || data.ddd_telefone_1 || '',
        city:    f.city    || (data.municipio ? `${data.municipio}${data.uf ? ', ' + data.uf : ''}` : ''),
        address: f.address || addressStr,
        cep:     f.cep     || cepFmt,
      }));
      showToast(`Dados de "${data.razao_social || data.nome_fantasia}" carregados!`);
    } catch (e) {
      console.error('BrasilAPI error:', e);
      showToast('Falha ao consultar BrasilAPI.', 'danger');
    } finally {
      setCnpjLoading(false);
    }
  };

  React.useEffect(() => {
    sb.from('clients').select('*').order('name').then(({ data }) => {
      if (data) setClients(data);
      setLoading(false);
    });
  }, []);

  const openClient = (c) => {
    setSelected(c);
    setDetailNotes(c.notes || []);
    setNote('');
  };

  const closeClient = () => { setSelected(null); setDetailNotes([]); setNote(''); };

  const saveNote = async () => {
    if (!note.trim() || !selected) return;
    const updated = [...detailNotes, note];
    setDetailNotes(updated);
    setNote('');
    await sb.from('clients').update({ notes: updated }).eq('id', selected.id);
    setClients(prev => prev.map(cl => cl.id === selected.id ? { ...cl, notes: updated } : cl));
    showToast('Anotação salva!');
  };

  const openEdit = () => {
    setEditForm({ name: selected.name, contact: selected.contact || '', email: selected.email || '', phone: selected.phone || '', city: selected.city || '', segment: selected.segment || 'SMB', status: selected.status || 'Prospect', cnpj: selected.cnpj || '', birthday: selected.birthday || '', address: selected.address || '', cep: selected.cep || '' });
    setEditModal(true);
  };

  const handleEditSave = async () => {
    if (!editForm.name.trim()) { showToast('Preencha o nome.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('clients').update({
      name: editForm.name, contact: editForm.contact, email: editForm.email,
      phone: editForm.phone, city: editForm.city, segment: editForm.segment, status: editForm.status,
      cnpj: editForm.cnpj, birthday: editForm.birthday,
      address: editForm.address, cep: editForm.cep,
    }).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao salvar.', 'danger'); return; }
    setClients(prev => prev.map(c => c.id === data.id ? data : c).sort((a, b) => a.name.localeCompare(b.name)));
    setSelected(data);
    setDetailNotes(data.notes || []);
    setEditModal(false);
    showToast('Cliente atualizado!');
  };

  const handleDelete = async () => {
    const id = selected.id;
    const nome = selected.name;
    await sb.from('clients').delete().eq('id', id);
    setClients(prev => prev.filter(c => c.id !== id));
    setDelConfirm(false);
    closeClient();
    showToast(`${nome} excluído.`);
  };

  const handleCreate = async () => {
    if (!form.name.trim()) { showToast('Preencha o nome do cliente.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('clients').insert({
      name: form.name, contact: form.contact, email: form.email,
      phone: form.phone, city: form.city, segment: form.segment,
      status: form.status, events_count: 0, total_spent: 0, notes: [],
      cnpj: form.cnpj, birthday: form.birthday,
      address: form.address, cep: form.cep,
    }).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao adicionar cliente.', 'danger'); return; }
    setClients(prev => [...prev, data].sort((a, b) => a.name.localeCompare(b.name)));
    setAddModal(false);
    setForm(emptyForm);
    showToast(`${data.name} adicionado com sucesso!`);
  };

  const statusColor   = { 'Ativo': 'success', 'Prospect': 'warning', 'Inativo': 'default' };
  const segmentColor  = { 'Enterprise': 'primary', 'SMB': 'default', 'PF': 'purple', 'Varejo': 'warning', 'Indústria': 'default', 'Alimentação': 'success', 'Saúde': 'primary', 'Tecnologia': 'default', 'Educação': 'default', 'Outro': 'default' };
  const SEGMENT_OPTIONS = [
    { value: 'Enterprise', label: 'Enterprise' },
    { value: 'SMB', label: 'SMB' },
    { value: 'PF', label: 'Pessoa Física' },
    { value: 'Varejo', label: 'Varejo' },
    { value: 'Indústria', label: 'Indústria' },
    { value: 'Alimentação', label: 'Alimentação' },
    { value: 'Saúde', label: 'Saúde' },
    { value: 'Tecnologia', label: 'Tecnologia' },
    { value: 'Educação', label: 'Educação' },
    { value: 'Outro', label: 'Outro' },
  ];
  const totalAtivos   = clients.filter(c => c.status === 'Ativo').length;

  // Filtro de busca + status
  const filteredClients = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    return clients.filter(c => {
      if (statusFilter !== 'all' && c.status !== statusFilter) return false;
      if (!q) return true;
      const cnpjClean = (c.cnpj || '').replace(/\D/g, '');
      return (
        (c.name || '').toLowerCase().includes(q) ||
        (c.contact || '').toLowerCase().includes(q) ||
        (c.email || '').toLowerCase().includes(q) ||
        (c.phone || '').toLowerCase().includes(q) ||
        (c.city || '').toLowerCase().includes(q) ||
        cnpjClean.includes(q.replace(/\D/g, ''))
      );
    });
  }, [clients, search, statusFilter]);
  const receitaTotal  = clients.reduce((s, c) => s + (c.total_spent || 0), 0);
  const ticketMedio   = clients.length > 0 ? receitaTotal / clients.length : 0;

  const timeline = [
    { icon: 'calendar', text: 'Evento confirmado',          date: '22 Abr 2026', color: DS.colors.primary },
    { icon: 'budget',   text: 'Orçamento enviado',          date: '18 Abr 2026', color: DS.colors.warning },
    { icon: 'message',  text: 'Reunião de briefing realizada', date: '10 Abr 2026', color: DS.colors.success },
  ];

  return (
    <div>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
        <div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: DS.colors.text, margin: 0, letterSpacing: '-0.02em' }}>Clientes (CRM)</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>Gerencie relacionamentos e histórico de clientes</p>
        </div>
        <Btn icon="plus" onClick={() => setAddModal(true)}>Novo cliente</Btn>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
        {[
          { label: 'Clientes ativos',  value: totalAtivos,                                          color: DS.colors.primary },
          { label: 'Receita total',    value: 'R$ ' + (receitaTotal / 1000000).toFixed(1) + 'M',   color: DS.colors.success },
          { label: 'Ticket médio',     value: 'R$ ' + Math.round(ticketMedio / 1000) + 'k',         color: DS.colors.warning },
        ].map(s => (
          <Card key={s.label} style={{ padding: '14px 18px' }}>
            <div style={{ fontSize: 11, color: DS.colors.textMuted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.label}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: s.color, marginTop: 4 }}>{s.value}</div>
          </Card>
        ))}
      </div>

      {/* Busca + filtros */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 280 }}>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Buscar por nome, contato, e-mail, telefone, cidade ou CNPJ..."
            style={{
              width: '100%', boxSizing: 'border-box',
              border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm,
              padding: '10px 14px 10px 38px', fontSize: 13, outline: 'none',
              background: '#fff', fontFamily: 'inherit',
            }}
          />
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }}>
            <Icon name="search" size={15} color={DS.colors.textMuted} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4, background: '#F1F5F9', padding: 4, borderRadius: DS.radius.sm }}>
          {[['all', 'Todos'], ['Ativo', 'Ativos'], ['Prospect', 'Prospects'], ['Inativo', 'Inativos']].map(([val, label]) => (
            <button key={val} onClick={() => setStatusFilter(val)} style={{
              padding: '6px 14px', borderRadius: 6, border: 'none', fontSize: 12, fontWeight: 600, cursor: 'pointer', transition: 'all 0.15s',
              background: statusFilter === val ? '#fff' : 'transparent',
              color: statusFilter === val ? DS.colors.text : DS.colors.textSec,
              boxShadow: statusFilter === val ? DS.shadow.sm : 'none',
            }}>{label}</button>
          ))}
        </div>
        <div style={{ fontSize: 12, color: DS.colors.textMuted, whiteSpace: 'nowrap' }}>
          <strong style={{ color: DS.colors.text }}>{filteredClients.length}</strong> de {clients.length}
        </div>
      </div>

      {/* Table */}
      <Card>
        {loading ? <Spinner /> : (
          <>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr', padding: '10px 24px', borderBottom: `1px solid ${DS.colors.border}`, fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              <span>Empresa</span><span>Contato</span><span>Último evento</span><span>Eventos</span><span>Segmento</span><span>Status</span><span style={{ textAlign: 'right' }}>Total</span>
            </div>
            {filteredClients.length === 0
              ? <EmptyState icon="crm" title={search || statusFilter !== 'all' ? 'Nenhum cliente encontrado com esses filtros' : 'Nenhum cliente cadastrado ainda'} />
              : filteredClients.map((c, i) => (
                <div key={c.id} onClick={() => openClient(c)}
                  style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 0.8fr 0.8fr 0.8fr 0.8fr', padding: '14px 24px', borderBottom: i < filteredClients.length - 1 ? `1px solid ${DS.colors.border}` : 'none', alignItems: 'center', cursor: 'pointer', transition: 'background 0.1s' }}
                  onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={c.name} size={32} />
                    <span style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{c.name}</span>
                  </div>
                  <span style={{ fontSize: 13, color: DS.colors.textSec }}>{c.contact}</span>
                  <span style={{ fontSize: 13, color: DS.colors.textSec }}>{(c.last_event || '').substring(0, 18)}{(c.last_event || '').length > 18 ? '…' : ''}</span>
                  <span style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{c.events_count || 0}</span>
                  <span><Badge variant={segmentColor[c.segment]}>{c.segment}</Badge></span>
                  <span><Badge variant={statusColor[c.status]}>{c.status}</Badge></span>
                  <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, textAlign: 'right' }}>R$ {((c.total_spent || 0) / 1000).toFixed(0)}k</span>
                </div>
              ))
            }
          </>
        )}
      </Card>

      {/* ── Popup detalhe do cliente ── */}
      <Modal open={!!selected} onClose={closeClient} title={selected?.name || ''} width={820}
        extra={selected && (
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn variant="secondary" size="sm" icon="edit" onClick={openEdit}>Editar</Btn>
            <Btn variant="danger" size="sm" icon="x" onClick={() => setDelConfirm(true)}>Excluir</Btn>
          </div>
        )}>
        {selected && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 20 }}>
            {/* Coluna esquerda */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Stats */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {[
                  { label: 'Total investido',   value: 'R$ ' + (selected.total_spent || 0).toLocaleString('pt-BR'), color: DS.colors.primary },
                  { label: 'Eventos realizados', value: selected.events_count || 0,                                  color: DS.colors.success },
                  { label: 'Ticket médio',       value: selected.events_count > 0 ? 'R$ ' + Math.round((selected.total_spent || 0) / selected.events_count).toLocaleString('pt-BR') : '—', color: DS.colors.warning },
                ].map(s => (
                  <div key={s.label} style={{ padding: '14px 16px', background: '#F8FAFC', borderRadius: DS.radius.sm, border: `1px solid ${DS.colors.border}` }}>
                    <div style={{ fontSize: 10, color: DS.colors.textMuted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.label}</div>
                    <div style={{ fontSize: 20, fontWeight: 800, color: s.color, marginTop: 4 }}>{s.value}</div>
                  </div>
                ))}
              </div>

              {/* Timeline */}
              <div style={{ padding: '18px 20px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, marginBottom: 16 }}>Linha do tempo</div>
                {timeline.map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, marginBottom: i < timeline.length - 1 ? 16 : 0 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                      <div style={{ width: 28, height: 28, borderRadius: '50%', background: t.color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name={t.icon} size={13} color={t.color} />
                      </div>
                      {i < timeline.length - 1 && <div style={{ width: 1, height: 16, background: DS.colors.border, marginTop: 4 }} />}
                    </div>
                    <div style={{ paddingTop: 4 }}>
                      <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.text }}>{t.text}</div>
                      <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 1 }}>{t.date}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Notas */}
              <div style={{ padding: '18px 20px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, marginBottom: 12 }}>Anotações & Follow-up</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
                  {detailNotes.length === 0
                    ? <div style={{ fontSize: 12, color: DS.colors.textMuted }}>Nenhuma anotação ainda.</div>
                    : detailNotes.map((n, i) => (
                      <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 12px', background: '#FFFBEB', borderRadius: DS.radius.sm, borderLeft: `3px solid ${DS.colors.warning}` }}>
                        <Icon name="edit" size={12} color={DS.colors.warning} />
                        <span style={{ fontSize: 12, color: DS.colors.text }}>{n}</span>
                      </div>
                    ))
                  }
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input value={note} onChange={e => setNote(e.target.value)}
                    onKeyDown={e => { if (e.key === 'Enter') saveNote(); }}
                    placeholder="Adicionar anotação..."
                    style={{ flex: 1, border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '7px 11px', fontSize: 13, outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = DS.colors.primary}
                    onBlur={e => e.target.style.borderColor = DS.colors.border}
                  />
                  <Btn size="sm" onClick={saveNote}>Salvar</Btn>
                </div>
              </div>
            </div>

            {/* Coluna direita — informações */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {/* Avatar + badges */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px 16px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}`, gap: 10 }}>
                <Avatar name={selected.name} size={56} />
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text }}>{selected.name}</div>
                  <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 2 }}>{selected.contact}</div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <Badge variant={segmentColor[selected.segment]}>{selected.segment}</Badge>
                  <Badge variant={statusColor[selected.status]}>{selected.status}</Badge>
                </div>
                <div style={{ display: 'flex', gap: 6, width: '100%', marginTop: 4 }}>
                  <Btn variant="secondary" size="sm" icon="mail" style={{ flex: 1, justifyContent: 'center' }}
                    onClick={() => selected.email ? window.open(`mailto:${selected.email}`) : showToast('E-mail não cadastrado.', 'danger')}>E-mail</Btn>
                  <Btn variant="secondary" size="sm" icon="phone" style={{ flex: 1, justifyContent: 'center' }}
                    onClick={() => selected.phone ? window.open(`tel:${selected.phone.replace(/\D/g, '')}`) : showToast('Telefone não cadastrado.', 'danger')}>Ligar</Btn>
                </div>
              </div>

              {/* Dados */}
              <div style={{ padding: '16px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Contato</div>
                {[
                  { icon: 'mail',  label: selected.email  || '—' },
                  { icon: 'phone', label: selected.phone  || '—' },
                  { icon: 'map',   label: selected.city   || '—' },
                  ...(selected.cnpj     ? [{ icon: 'budget',   label: 'CNPJ: ' + selected.cnpj }] : []),
                  ...(selected.address  ? [{ icon: 'map',      label: selected.address }] : []),
                  ...(selected.cep      ? [{ icon: 'map',      label: 'CEP ' + selected.cep }] : []),
                  ...(selected.birthday ? [{ icon: 'calendar', label: 'Aniversário: ' + selected.birthday }] : []),
                ].map((r, idx) => (
                  <div key={`${r.icon}-${idx}`} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: `1px solid ${DS.colors.border}`, fontSize: 12 }}>
                    <Icon name={r.icon} size={13} color={DS.colors.textMuted} />
                    <span style={{ color: DS.colors.text }}>{r.label}</span>
                  </div>
                ))}
              </div>

              {/* Último evento */}
              {selected.last_event && (
                <div style={{ padding: '14px 16px', background: DS.colors.primaryLight, borderRadius: DS.radius.md, border: `1px solid #BFDBFE` }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.primary, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>Último evento</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{selected.last_event}</div>
                </div>
              )}
            </div>
          </div>
        )}
      </Modal>

      {/* Modal editar cliente */}
      <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar Cliente" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Empresa / Nome *" value={editForm.name} onChange={v => setEditForm(f => ({ ...f, name: v }))} placeholder="Ex: TechCorp Brasil" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Pessoa de contato" value={editForm.contact} onChange={v => setEditForm(f => ({ ...f, contact: v }))} placeholder="Ex: Marcelo Andrade" />
            <Input label="Cidade" value={editForm.city} onChange={v => setEditForm(f => ({ ...f, city: v }))} placeholder="Ex: São Paulo" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="E-mail" value={editForm.email} onChange={v => setEditForm(f => ({ ...f, email: v }))} placeholder="Ex: contato@empresa.com" />
            <Input label="Telefone" value={editForm.phone} onChange={v => setEditForm(f => ({ ...f, phone: v }))} placeholder="Ex: (11) 3291-4400" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label={`CNPJ${cnpjLoading ? ' (consultando…)' : ''}`} value={editForm.cnpj} onChange={v => setEditForm(f => ({ ...f, cnpj: fmtCnpj(v) }))} placeholder="Ex: 00.000.000/0001-00" onBlur={e => fetchCnpjData(e.target.value, setEditForm)} />
            <Input label="Data de aniversário" value={editForm.birthday} onChange={v => setEditForm(f => ({ ...f, birthday: v }))} placeholder="Ex: 15/03" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
            <Input label="Endereço" value={editForm.address} onChange={v => setEditForm(f => ({ ...f, address: v }))} placeholder="Ex: Rua das Flores, 123 — Centro" />
            <Input label="CEP" value={editForm.cep} onChange={v => setEditForm(f => ({ ...f, cep: v }))} placeholder="Ex: 60330-605" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Select label="Segmento" value={editForm.segment} onChange={v => setEditForm(f => ({ ...f, segment: v }))} options={SEGMENT_OPTIONS} />
            <Select label="Status" value={editForm.status} onChange={v => setEditForm(f => ({ ...f, status: v }))} options={[{ value: 'Prospect', label: 'Prospect' }, { value: 'Ativo', label: 'Ativo' }, { value: 'Inativo', label: 'Inativo' }]} />
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <Btn variant="secondary" onClick={() => setEditModal(false)}>Cancelar</Btn>
            <Btn onClick={handleEditSave} disabled={saving} icon="check">{saving ? 'Salvando…' : 'Salvar alterações'}</Btn>
          </div>
        </div>
      </Modal>

      {/* Confirmação de exclusão */}
      <Modal open={delConfirm} onClose={() => setDelConfirm(false)} title="Excluir cliente" width={400}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <p style={{ fontSize: 14, color: DS.colors.textSec, lineHeight: 1.6 }}>Tem certeza que deseja excluir <strong style={{ color: DS.colors.text }}>{selected?.name}</strong>? Esta ação não pode ser desfeita.</p>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <Btn variant="secondary" onClick={() => setDelConfirm(false)}>Cancelar</Btn>
            <Btn variant="danger" icon="x" onClick={handleDelete}>Excluir</Btn>
          </div>
        </div>
      </Modal>

      {/* Modal novo cliente */}
      <Modal open={addModal} onClose={() => { setAddModal(false); setForm(emptyForm); }} title="Novo Cliente" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Empresa / Nome *" value={form.name} onChange={v => setForm(f => ({ ...f, name: v }))} placeholder="Ex: TechCorp Brasil" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Pessoa de contato" value={form.contact} onChange={v => setForm(f => ({ ...f, contact: v }))} placeholder="Ex: Marcelo Andrade" />
            <Input label="Cidade" value={form.city} onChange={v => setForm(f => ({ ...f, city: v }))} placeholder="Ex: São Paulo" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="E-mail" value={form.email} onChange={v => setForm(f => ({ ...f, email: v }))} placeholder="Ex: contato@empresa.com" />
            <Input label="Telefone" value={form.phone} onChange={v => setForm(f => ({ ...f, phone: v }))} placeholder="Ex: (11) 3291-4400" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label={`CNPJ${cnpjLoading ? ' (consultando…)' : ''}`} value={form.cnpj} onChange={v => setForm(f => ({ ...f, cnpj: fmtCnpj(v) }))} placeholder="Ex: 00.000.000/0001-00" onBlur={e => fetchCnpjData(e.target.value, setForm)} />
            <Input label="Data de aniversário" value={form.birthday} onChange={v => setForm(f => ({ ...f, birthday: v }))} placeholder="Ex: 15/03" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
            <Input label="Endereço" value={form.address} onChange={v => setForm(f => ({ ...f, address: v }))} placeholder="Ex: Rua das Flores, 123 — Centro" />
            <Input label="CEP" value={form.cep} onChange={v => setForm(f => ({ ...f, cep: v }))} placeholder="Ex: 60330-605" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Select label="Segmento" value={form.segment} onChange={v => setForm(f => ({ ...f, segment: v }))} options={SEGMENT_OPTIONS} />
            <Select label="Status" value={form.status} onChange={v => setForm(f => ({ ...f, status: v }))} options={[
              { value: 'Prospect', label: 'Prospect' },
              { value: 'Ativo',    label: 'Ativo' },
              { value: 'Inativo',  label: 'Inativo' },
            ]} />
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <Btn variant="secondary" onClick={() => { setAddModal(false); setForm(emptyForm); }}>Cancelar</Btn>
            <Btn onClick={handleCreate} disabled={saving} icon="crm">{saving ? 'Salvando…' : 'Adicionar cliente'}</Btn>
          </div>
        </div>
      </Modal>

      {toast && <Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />}
    </div>
  );
}

Object.assign(window, { CRM });