/* App screens part 2: CRM, WhatsApp, Financial, Analytics, Settings */
const D2 = window.AppData;

// =============================================================
// CRM — Client list + detail
// =============================================================
const CrmScreen = () => {
  const [openId, setOpenId] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const [q, setQ] = React.useState('');

  const filtered = D2.clients.filter(c => {
    if (filter !== 'all' && !c.tags.includes(filter)) return false;
    if (q && !c.name.toLowerCase().includes(q.toLowerCase()) && !c.phone.includes(q)) return false;
    return true;
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Clientes</h1>
          <p className="page-sub">{D2.clients.length} cadastrados · {D2.clients.filter(c => c.tags.includes('VIP')).length} VIPs</p>
        </div>
        <div className="page-actions">
          <Btn kind="outline" icon="upload">Importar</Btn>
          <Btn kind="outline" icon="download">Exportar</Btn>
          <Btn icon="plus">Novo cliente</Btn>
        </div>
      </div>

      <Tabs active={filter} onChange={setFilter} tabs={[
        { id: 'all', label: 'Todos', count: D2.clients.length },
        { id: 'VIP', label: 'VIP', count: D2.clients.filter(c => c.tags.includes('VIP')).length },
        { id: 'Frequente', label: 'Frequentes', count: D2.clients.filter(c => c.tags.includes('Frequente')).length },
        { id: 'Convênio', label: 'Convênio', count: D2.clients.filter(c => c.tags.includes('Convênio')).length },
        { id: 'Inativo', label: 'Inativos', count: D2.clients.filter(c => c.tags.includes('Inativo')).length },
        { id: 'Aniversariante', label: 'Aniversariantes', count: D2.clients.filter(c => c.tags.includes('Aniversariante')).length },
      ]}/>

      <div className="hstack" style={{ marginBottom: 16, gap: 8 }}>
        <div style={{ position: 'relative', flex: 1, maxWidth: 400 }}>
          <span style={{ position: 'absolute', left: 12, top: 11, color: 'var(--muted)' }}><Icon name="search" /></span>
          <Input style={{ paddingLeft: 38 }} placeholder="Buscar por nome ou telefone..." value={q} onChange={e=>setQ(e.target.value)} />
        </div>
        <Btn kind="outline" icon="filter" size="sm">Filtros avançados</Btn>
      </div>

      <Card padding="0">
        <table className="tbl tbl-clickable">
          <thead><tr><th>Cliente</th><th>Telefone</th><th>Convênio</th><th>Visitas</th><th>LTV</th><th>Última visita</th><th>Tags</th></tr></thead>
          <tbody>
            {filtered.slice(0, 18).map(c => (
              <tr key={c.id} onClick={() => setOpenId(c.id)}>
                <td><div className="row-name"><Avatar initials={c.initials} color={c.color} size={36} /><div><div className="nm">{c.name}</div><div className="sub">{c.email}</div></div></div></td>
                <td className="mono">{c.phone}</td>
                <td>{D2.insurances.find(i => i.id === c.insurance)?.name}</td>
                <td className="tabular">{c.visits}</td>
                <td className="tabular">{fmtMoneyShort(c.lifetimeValue)}</td>
                <td>{c.lastVisit}</td>
                <td><div className="row-wrap">{c.tags.map(t => <Badge key={t} color="#7C3AED">{t}</Badge>)}</div></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      {openId && <ClientDetailModal id={openId} onClose={() => setOpenId(null)} />}
    </div>
  );
};

const ClientDetailModal = ({ id, onClose }) => {
  const c = findClient(id);
  const [tab, setTab] = React.useState('overview');
  const apts = D2.appointments.filter(a => a.clientId === id);
  return (
    <Modal open onClose={onClose} title={c.name} size="xl"
      footer={<><Btn kind="outline" icon="whats">WhatsApp</Btn><Btn kind="outline" icon="cal">Novo agendamento</Btn><Btn kind="ghost" icon="edit">Editar cadastro</Btn></>}>
      <div className="hstack" style={{ marginBottom: 20, gap: 16 }}>
        <Avatar initials={c.initials} color={c.color} size={64} />
        <div style={{ flex: 1 }}>
          <h3 style={{ margin: 0, fontSize: 22 }}>{c.name}</h3>
          <div className="muted" style={{ fontSize: 13 }}>Cliente desde 2022 · {c.visits} visitas · LTV {fmtMoney(c.lifetimeValue)}</div>
          <div className="row-wrap" style={{ marginTop: 8 }}>
            {c.tags.map(t => <Badge key={t} color="#7C3AED">{t}</Badge>)}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="muted" style={{ fontSize: 12 }}>Convênio</div>
          <strong>{D2.insurances.find(i=>i.id===c.insurance)?.name}</strong>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: 'overview', label: 'Visão geral', icon: 'user' },
        { id: 'history', label: 'Histórico', icon: 'cal', count: apts.length },
        { id: 'clinical', label: 'Prontuário', icon: 'doc' },
        { id: 'odontogram', label: 'Odontograma', icon: 'tooth' },
        { id: 'plans', label: 'Plano de tratamento', icon: 'check' },
        { id: 'finance', label: 'Financeiro', icon: 'money' },
      ]}/>

      {tab === 'overview' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div>
            <h5 style={{ margin: '0 0 10px', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--muted)' }}>Dados pessoais</h5>
            <div className="vstack-tight">
              <InfoRow label="CPF" value={c.cpf} />
              <InfoRow label="Nascimento" value={c.birth} />
              <InfoRow label="Telefone" value={c.phone} />
              <InfoRow label="Email" value={c.email} />
              <InfoRow label="Endereço" value="R. das Flores 123 · Vila Mariana, SP" />
            </div>
          </div>
          <div>
            <h5 style={{ margin: '0 0 10px', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--muted)' }}>Anamnese · resumo</h5>
            <div className="vstack-tight" style={{ fontSize: 13 }}>
              <div className="hstack-tight"><Icon name="alert" size={14} style={{color:'#EF4444'}}/><strong>Alergias:</strong> Anestésico com vasoconstritor</div>
              <div className="hstack-tight"><Icon name="info" size={14}/><strong>Medicações:</strong> Losartana 50mg/dia</div>
              <div className="hstack-tight"><Icon name="info" size={14}/><strong>Comorbidades:</strong> Hipertensão controlada</div>
              <div className="hstack-tight"><Icon name="info" size={14}/><strong>Hábitos:</strong> Não fumante</div>
              <div className="hstack-tight"><Icon name="info" size={14}/><strong>Última atualização:</strong> há 6 meses</div>
            </div>
            {c.notes && <div style={{ padding: 12, background: '#FEF3C7', borderRadius: 8, marginTop: 12, fontSize: 13 }}>{c.notes}</div>}
          </div>
        </div>
      )}

      {tab === 'history' && (
        <table className="tbl">
          <thead><tr><th>Data</th><th>Serviço</th><th>Profissional</th><th>Status</th><th>Valor</th></tr></thead>
          <tbody>
            {apts.slice(0, 8).map(a => {
              const s = findService(a.serviceId), p = findPro(a.proId), st = D2.STATUS[a.status];
              return <tr key={a.id}><td className="mono">{a.date} {a.start}</td><td>{s.name}</td><td>{p.name.replace(/^Dr[a]?\. /,'')}</td><td><Badge color={st.color}>{st.label}</Badge></td><td className="tabular">{fmtMoney(a.price)}</td></tr>;
            })}
          </tbody>
        </table>
      )}

      {tab === 'odontogram' && <Odontogram />}

      {tab === 'plans' && (
        <div className="vstack">
          <Card padding="16px">
            <div className="between" style={{ marginBottom: 12 }}>
              <div>
                <strong>Plano de tratamento — Reabilitação superior</strong>
                <div className="muted" style={{ fontSize: 12 }}>Aprovado em 12/04 · 6 sessões previstas</div>
              </div>
              <Badge color="#10B981">Em andamento</Badge>
            </div>
            <div className="vstack-tight">
              <div className="hstack" style={{ padding: 8, background: 'var(--text-bg)', borderRadius: 6 }}><Icon name="check" size={14} style={{color:'#10B981'}}/><span style={{ flex:1 }}>Avaliação inicial · 12/04</span><span className="mono">{fmtMoney(0)}</span></div>
              <div className="hstack" style={{ padding: 8, background: 'var(--text-bg)', borderRadius: 6 }}><Icon name="check" size={14} style={{color:'#10B981'}}/><span style={{ flex:1 }}>Profilaxia · 19/04</span><span className="mono">{fmtMoney(180)}</span></div>
              <div className="hstack" style={{ padding: 8, background: 'var(--primary-soft)', borderRadius: 6, color: 'var(--primary)' }}><Icon name="cal" size={14}/><span style={{ flex:1 }}><strong>Restauração 16 + 17 · agendado p/ 28/04</strong></span><span className="mono">{fmtMoney(700)}</span></div>
              <div className="hstack" style={{ padding: 8, borderRadius: 6 }}><Icon name="info" size={14} style={{color:'var(--muted)'}}/><span style={{ flex:1, color:'var(--muted)' }}>Endodontia 11 · pendente</span><span className="mono muted">{fmtMoney(1100)}</span></div>
              <div className="hstack" style={{ padding: 8, borderRadius: 6 }}><Icon name="info" size={14} style={{color:'var(--muted)'}}/><span style={{ flex:1, color:'var(--muted)' }}>Coroa 11 · pendente</span><span className="mono muted">{fmtMoney(1800)}</span></div>
              <div className="hstack" style={{ padding: 8, borderRadius: 6 }}><Icon name="info" size={14} style={{color:'var(--muted)'}}/><span style={{ flex:1, color:'var(--muted)' }}>Clareamento de retorno · pendente</span><span className="mono muted">{fmtMoney(850)}</span></div>
            </div>
            <div className="between" style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
              <span><strong>Total do plano</strong></span>
              <strong className="mono">{fmtMoney(4630)}</strong>
            </div>
          </Card>
          <Btn kind="outline" icon="plus" style={{alignSelf:'flex-start'}}>Adicionar novo plano</Btn>
        </div>
      )}

      {tab === 'finance' && (
        <table className="tbl">
          <thead><tr><th>Data</th><th>Lançamento</th><th>Método</th><th>Valor</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td className="mono">15/04/2025</td><td>Limpeza</td><td>PIX</td><td className="tabular">R$ 180,00</td><td><Badge color="#10B981">Pago</Badge></td></tr>
            <tr><td className="mono">28/03/2025</td><td>Restauração 16</td><td>Crédito 3x</td><td className="tabular">R$ 350,00</td><td><Badge color="#10B981">Pago</Badge></td></tr>
            <tr><td className="mono">12/03/2025</td><td>Avaliação</td><td>—</td><td className="tabular">Cortesia</td><td><Badge color="#6B7280">Concluído</Badge></td></tr>
            <tr><td className="mono">28/04/2025</td><td>Restauração 17</td><td>—</td><td className="tabular">R$ 700,00</td><td><Badge color="#F59E0B">Pendente</Badge></td></tr>
          </tbody>
        </table>
      )}

      {tab === 'clinical' && (
        <div className="vstack">
          {[
            {date:'15/04/2025', pro:'Dra. Ana', title:'Limpeza e profilaxia', notes:'Tártaro moderado em região anteroinferior. Realizada raspagem supragengival. Orientação de higiene reforçada.'},
            {date:'28/03/2025', pro:'Dra. Ana', title:'Restauração resina classe II - 16', notes:'Cárie oclusal-mesial em 16. Anestesia infiltrativa com lidocaína 2% sem vaso. Restauração com Filtek Z350 A2.'},
            {date:'12/03/2025', pro:'Dra. Ana', title:'Avaliação inicial', notes:'Paciente refere dor leve no 16 ao mastigar. Exame clínico identifica cárie em 16. Plano de tratamento elaborado e apresentado.'},
          ].map((e, i) => (
            <Card key={i} padding="16px">
              <div className="between" style={{ marginBottom: 6 }}>
                <strong>{e.title}</strong><span className="muted mono" style={{ fontSize: 12 }}>{e.date} · {e.pro}</span>
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.55 }}>{e.notes}</div>
            </Card>
          ))}
        </div>
      )}
    </Modal>
  );
};

// Odontogram (simplified visual)
const Odontogram = () => {
  const upper = [18,17,16,15,14,13,12,11,21,22,23,24,25,26,27,28];
  const lower = [48,47,46,45,44,43,42,41,31,32,33,34,35,36,37,38];
  const status = { 16: 'restored', 17: 'cavity', 11: 'crown-needed', 21: 'restored', 36: 'extraction', 26: 'endo' };
  const tone = { restored: '#10B981', cavity: '#EF4444', 'crown-needed': '#F59E0B', extraction: '#000', endo: '#7C3AED' };
  return (
    <div className="vstack">
      <Card padding="20px">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
          <div className="muted" style={{ fontSize: 11 }}>SUPERIOR · DIREITA → ESQUERDA</div>
          <div style={{ display: 'flex', gap: 4 }}>
            {upper.map(n => <ToothCell key={n} num={n} color={tone[status[n]]} top />)}
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            {lower.map(n => <ToothCell key={n} num={n} color={tone[status[n]]} />)}
          </div>
          <div className="muted" style={{ fontSize: 11 }}>INFERIOR</div>
        </div>
        <div className="row-wrap" style={{ marginTop: 16, fontSize: 12 }}>
          <span className="hstack-tight"><span style={{width:10,height:10,background:'#10B981',borderRadius:2}}></span>Restaurado</span>
          <span className="hstack-tight"><span style={{width:10,height:10,background:'#EF4444',borderRadius:2}}></span>Cárie</span>
          <span className="hstack-tight"><span style={{width:10,height:10,background:'#F59E0B',borderRadius:2}}></span>Aguarda coroa</span>
          <span className="hstack-tight"><span style={{width:10,height:10,background:'#7C3AED',borderRadius:2}}></span>Endodontia</span>
          <span className="hstack-tight"><span style={{width:10,height:10,background:'#000',borderRadius:2}}></span>Extração</span>
          <span className="hstack-tight"><span style={{width:10,height:10,border:'1px solid var(--border)',borderRadius:2}}></span>Hígido</span>
        </div>
      </Card>
      <Card padding="16px">
        <h5 style={{ margin: '0 0 8px' }}>Histórico de procedimentos por dente</h5>
        <div className="vstack-tight" style={{ fontSize: 13 }}>
          <div className="between"><span><strong>16</strong> · Restauração resina classe II</span><span className="muted mono">28/03/2025</span></div>
          <div className="between"><span><strong>17</strong> · Cárie identificada · agendar restauração</span><span className="muted mono">15/04/2025</span></div>
          <div className="between"><span><strong>11</strong> · Endodontia concluída · aguarda coroa</span><span className="muted mono">12/02/2025</span></div>
          <div className="between"><span><strong>21</strong> · Restauração resina V</span><span className="muted mono">10/01/2024</span></div>
        </div>
      </Card>
    </div>
  );
};
const ToothCell = ({ num, color, top }) => (
  <div style={{ width: 30, textAlign: 'center', cursor: 'pointer' }}>
    {top && <div className="muted" style={{ fontSize: 9, marginBottom: 2 }}>{num}</div>}
    <svg width="26" height="34" viewBox="0 0 26 34">
      <path d="M13 2 C18 2 22 5 22 11 C22 16 20 20 19 24 C18 28 17 32 14 32 C13 32 13 30 12 30 C11 30 11 32 10 32 C7 32 6 28 5 24 C4 20 4 16 4 11 C4 5 8 2 13 2 Z"
        fill={color || 'white'} stroke="var(--foreground)" strokeWidth="1.2" opacity={color ? 1 : 0.95} />
    </svg>
    {!top && <div className="muted" style={{ fontSize: 9, marginTop: 2 }}>{num}</div>}
  </div>
);

// =============================================================
// WHATSAPP
// =============================================================
const WhatsScreen = () => {
  const [tab, setTab] = React.useState('inbox');
  const [activeId, setActiveId] = React.useState(D2.conversations[0].id);
  const [draft, setDraft] = React.useState('');
  const t = useToast();

  const conv = D2.conversations.find(c => c.id === activeId);
  const cli = findClient(conv.clientId);

  return (
    <div className="page" style={{ maxWidth: 1500 }}>
      <div className="page-head">
        <div>
          <h1 className="page-title">WhatsApp Business</h1>
          <p className="page-sub">Conectado · API oficial · 2 linhas</p>
        </div>
        <div className="page-actions">
          <Badge color="#10B981" kind="solid"><span style={{width:6,height:6,borderRadius:'50%',background:'white',display:'inline-block',marginRight:6}}></span>Online</Badge>
          <Btn kind="outline" icon="qr">Reconectar dispositivo</Btn>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: 'inbox', label: 'Inbox', icon: 'inbox', count: D2.conversations.filter(c=>c.unread>0).length },
        { id: 'templates', label: 'Templates', icon: 'doc' },
        { id: 'automations', label: 'Automações', icon: 'zap' },
        { id: 'log', label: 'Log de envios', icon: 'send' },
        { id: 'connection', label: 'Conexão', icon: 'qr' },
      ]}/>

      {tab === 'inbox' && (
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0, height: '70vh', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden', background: 'var(--card)' }}>
          <div style={{ borderRight: '1px solid var(--border)', overflowY: 'auto' }}>
            <div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
              <Input placeholder="Buscar conversa..." />
            </div>
            {D2.conversations.map(cv => {
              const c = findClient(cv.clientId);
              return (
                <div key={cv.id} onClick={() => setActiveId(cv.id)}
                  style={{ padding: 12, display: 'flex', gap: 10, cursor: 'pointer', background: cv.id===activeId ? 'var(--primary-soft)' : 'transparent', borderBottom: '1px solid var(--border)' }}>
                  <Avatar initials={c.initials} color={c.color} size={42} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="between"><strong style={{ fontSize: 14 }}>{c.name}</strong><span className="muted" style={{ fontSize: 11 }}>{cv.lastTs}</span></div>
                    <div className="muted" style={{ fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{cv.last}</div>
                  </div>
                  {cv.unread > 0 && <Badge kind="solid" color="#10B981">{cv.unread}</Badge>}
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
            <div className="between" style={{ padding: 14, borderBottom: '1px solid var(--border)' }}>
              <div className="hstack">
                <Avatar initials={cli.initials} color={cli.color} />
                <div>
                  <strong>{cli.name}</strong>
                  <div className="muted" style={{ fontSize: 12 }}>{cli.phone}</div>
                </div>
              </div>
              <div className="hstack-tight"><IconBtn name="user" title="Ver perfil"/><IconBtn name="cal" title="Novo agendamento"/><IconBtn name="more"/></div>
            </div>
            <div style={{ flex: 1, padding: 16, overflowY: 'auto', background: '#F0F2F5' }}>
              <div className="vstack-tight">
                {conv.messages.map((m, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: m.from === 'us' ? 'flex-end' : 'flex-start' }}>
                    <div style={{ maxWidth: '70%', padding: '8px 12px', borderRadius: 12, background: m.from === 'us' ? '#D9FDD3' : 'white', boxShadow: '0 1px 1px rgba(0,0,0,0.08)' }}>
                      <div style={{ fontSize: 14 }}>{m.text}</div>
                      <div className="muted" style={{ fontSize: 10, textAlign: 'right', marginTop: 2 }}>{m.ts}{m.from==='us'&&' ✓✓'}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ padding: 12, borderTop: '1px solid var(--border)', display: 'flex', gap: 8 }}>
              <IconBtn name="plus" />
              <Input placeholder="Mensagem ou /template" value={draft} onChange={e=>setDraft(e.target.value)} />
              <Btn icon="send" onClick={() => { t.push({kind:'success',title:'Enviado'}); setDraft(''); }}>Enviar</Btn>
            </div>
          </div>
        </div>
      )}

      {tab === 'templates' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {[
            {t:'Confirmação 24h', body:'Olá {nome}! Lembrando do seu horário amanhã às {horario} com {profissional}. Confirma sua presença? Responda 1 para sim, 2 para remarcar.', tag:'Automação'},
            {t:'Boas-vindas', body:'Olá {nome}, bem-vindo(a) à Odonto Sorriso! 😊 Estamos felizes em ter você. Em caso de dúvidas, me chama por aqui mesmo.', tag:'Manual'},
            {t:'Pós-atendimento', body:'Como foi sua experiência hoje, {nome}? Se puder, deixe sua avaliação no Google: {link}', tag:'Automação'},
            {t:'Recall preventivo', body:'{nome}, faz 6 meses da sua última limpeza! Que tal agendar a próxima? Tenho horários nesta semana 🦷', tag:'Recall'},
            {t:'Aniversário', body:'🎂 Feliz aniversário, {nome}! Toda nossa equipe te deseja um dia incrível. Se quiser comemorar com um sorriso novo, ganhou 20% no clareamento ✨', tag:'Aniversário'},
            {t:'Cobrança gentil', body:'Oi {nome}, tudo bem? Queria confirmar se conseguiu dar uma olhada no boleto enviado. Qualquer coisa, posso reemitir aqui.', tag:'Financeiro'},
            {t:'Pesquisa NPS', body:'{nome}, em uma escala de 0 a 10, qual a chance de você indicar a Odonto Sorriso para um amigo?', tag:'Marketing'},
            {t:'Ortodontia — manutenção', body:'Olá {nome}, está na hora da manutenção do aparelho! Última visita foi {data}. Posso agendar para esta semana?', tag:'Recall'},
          ].map((tp, i) => (
            <Card key={i} padding="16px">
              <div className="between" style={{ marginBottom: 6 }}><strong style={{ fontSize: 14 }}>{tp.t}</strong><Badge>{tp.tag}</Badge></div>
              <div style={{ fontSize: 13, color: 'var(--muted)', minHeight: 60 }}>{tp.body}</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
                <button className="btn btn-ghost btn-sm">Editar</button>
                <button className="btn btn-ghost btn-sm">Duplicar</button>
                <button className="btn btn-secondary btn-sm" style={{marginLeft:'auto'}}>Usar</button>
              </div>
            </Card>
          ))}
        </div>
      )}

      {tab === 'automations' && (
        <div className="vstack">
          {[
            {n:'Confirmação 24h antes',d:'Envia template "Confirmação 24h" 24h antes de cada atendimento confirmado.',on:true,sent:'412 envios este mês'},
            {n:'Lembrete de 2h',d:'Envia mensagem de lembrete 2h antes do atendimento.',on:true,sent:'389 envios este mês'},
            {n:'Pedido de review pós-atendimento',d:'2h após status "concluído", pede avaliação no Google.',on:true,sent:'126 envios este mês'},
            {n:'Recall preventivo (6 meses)',d:'Mensagem de recall 6 meses após última limpeza.',on:true,sent:'48 envios este mês'},
            {n:'Aniversário',d:'Felicitação automática no dia do aniversário com cupom.',on:false,sent:'—'},
            {n:'Recuperação de no-show',d:'Mensagem 1h após no-show convidando a remarcar.',on:true,sent:'12 envios este mês'},
            {n:'Cobrança suave',d:'Lembrete 3 dias antes do vencimento de boleto.',on:false,sent:'—'},
          ].map((a,i) => (
            <Card key={i} padding="16px">
              <div className="between">
                <div>
                  <strong>{a.n}</strong>
                  <div className="muted" style={{ fontSize: 13 }}>{a.d}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>📨 {a.sent}</div>
                </div>
                <Toggle checked={a.on} onChange={()=>{}} />
              </div>
            </Card>
          ))}
        </div>
      )}

      {tab === 'log' && (
        <Card padding="0">
          <table className="tbl">
            <thead><tr><th>Quando</th><th>Cliente</th><th>Template</th><th>Status</th><th>Resposta</th></tr></thead>
            <tbody>
              {Array.from({length: 12}, (_, i) => {
                const c = D2.clients[i % D2.clients.length];
                const tps = ['Confirmação 24h','Lembrete 2h','Recall preventivo','Pedido de review','Aniversário'];
                const sts = [{l:'Entregue',c:'#10B981'},{l:'Lido',c:'#0EA5E9'},{l:'Respondido',c:'#7C3AED'},{l:'Falha',c:'#EF4444'}];
                const s = sts[i%4];
                return <tr key={i}><td className="mono muted" style={{fontSize:12}}>hoje 14:{(20+i*3).toString().padStart(2,'0')}</td>
                  <td><div className="row-name"><Avatar initials={c.initials} color={c.color} size={28} /><span>{c.name}</span></div></td>
                  <td>{tps[i%5]}</td>
                  <td><Badge color={s.c}>{s.l}</Badge></td>
                  <td className="muted">{i%3===0?'"Confirmado, obrigada!"':'—'}</td>
                </tr>;
              })}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'connection' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <Card>
            <h4 style={{ margin: '0 0 12px' }}>Linha principal · (11) 3456-7890</h4>
            <Badge color="#10B981" kind="solid">Conectada · há 14 dias</Badge>
            <div style={{ fontSize: 13, marginTop: 16, lineHeight: 1.6 }}>
              <div className="between"><span className="muted">Tipo</span><strong>API Oficial</strong></div>
              <div className="between"><span className="muted">Provedor</span><strong>Twilio</strong></div>
              <div className="between"><span className="muted">Conta verificada</span><strong style={{color:'#10B981'}}>✓ Sim</strong></div>
              <div className="between"><span className="muted">Janela de 24h</span><strong>Ativa</strong></div>
            </div>
            <Btn kind="outline" style={{marginTop:16}}>Reconfigurar</Btn>
          </Card>
          <Card>
            <h4 style={{ margin: '0 0 12px' }}>Conectar nova linha</h4>
            <div style={{ width: 180, height: 180, background: 'white', border: '1px solid var(--border)', borderRadius: 12, margin: '12px auto', display: 'grid', placeItems: 'center', backgroundImage: 'repeating-conic-gradient(#000 0 25%, #fff 0 50%)', backgroundSize: '14px 14px', backgroundClip: 'padding-box', padding: 12 }}>
              <div style={{ width: '100%', height: '100%', background: 'white', display: 'grid', placeItems: 'center' }}><Icon name="qr" size={64} /></div>
            </div>
            <p className="muted" style={{ fontSize: 13, textAlign: 'center', margin: 0 }}>Abra o WhatsApp Business → Configurações → Aparelhos conectados → Conectar dispositivo. Aponte a câmera para o QR.</p>
          </Card>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { CrmScreen, ClientDetailModal, Odontogram, WhatsScreen });