/* Painel Nanda — telas B: Treinamento, Agendamentos, Equipe, Ajuda, Configurações. window.App.ScreensB */
(function () {
  const I = window.App.Icons;
  const U = window.App.UI;
  const D = window.App.Data;
  const CFG = window.NANDA_CONFIG || {};
  const BR = CFG.brand || {};
  const { useState, useEffect } = React;
  const AG = BR.agente || 'Nanda';

  /* ─────────────── TREINAMENTO ─────────────── */
  function Training() {
    const tabs = ['Fatos', 'Documentos', 'Dúvidas', 'Simulador', 'Testes'];
    const [tab, setTab] = useState('Fatos');
    const trilha = [
      ['Fatos essenciais', 'Cadastre preço, link e horário'],
      ['Base de busca', 'Adicione FAQ ou material'],
      ['Dúvidas em dia', '10 abertas'],
      ['Golden set', '0 de 10 casos'],
      ['Avaliação ≥ 80%', 'Rode a primeira avaliação'],
    ];
    const empty = {
      Fatos: ['Nenhum fato cadastrado', 'Cadastre verdades que a ' + AG + ' repete palavra por palavra (preço, link, horário).'],
      Documentos: ['Nenhum documento na base', 'Suba FAQ, tabela de valores ou materiais — viram base de busca (RAG).'],
      Dúvidas: ['10 dúvidas abertas', 'Perguntas que a ' + AG + ' não soube responder. Transforme cada uma em fato.'],
      Simulador: ['Simulador de conversa', 'Converse com a ' + AG + ' em ambiente de teste antes de liberar pro cliente.'],
      Testes: ['Casos de teste (0 ativos)', 'Monte o golden set e rode a avaliação automática (meta ≥ 80%).'],
    };
    return (
      <div>
        <U.PageHead title="Treinamento" ro
          subtitle={`Ensine a ${AG} a vender sem alucinar: cadastre fatos e documentos, transforme as dúvidas em novos fatos, valide no simulador e prove com a avaliação automática antes de chegar no cliente.`} />
        <U.Card className="mb-5">
          <div className="mb-3 flex items-center justify-between"><span className="text-[11px] font-semibold tracking-wide text-faint">TRILHA DO TREINAMENTO</span><U.Badge tone="muted">0/5</U.Badge></div>
          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
            {trilha.map(([t, s], i) => (
              <div key={i} className="rounded-lg border border-line bg-surface2 p-3">
                <div className="mb-1 grid h-6 w-6 place-items-center rounded-full border border-line2 text-[11px] text-muted">{i + 1}</div>
                <div className="text-[12.5px] font-medium leading-tight">{t}</div>
                <div className="mt-0.5 text-[11px] text-faint">{s}</div>
              </div>
            ))}
          </div>
        </U.Card>
        <div className="mb-4 flex flex-wrap gap-1 border-b border-line">
          {tabs.map((t) => (
            <button key={t} onClick={() => setTab(t)} className={'relative px-4 py-2.5 text-[13px] font-medium ' + (tab === t ? 'text-fg' : 'text-muted hover:text-fg')}>
              {t}{t === 'Dúvidas' && <span className="ml-1.5 rounded-full bg-elevate px-1.5 py-0.5 text-[10px]">10</span>}
              {tab === t && <span className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-bright" />}
            </button>
          ))}
        </div>
        <U.Card className="grid place-items-center py-16 text-center">
          <span className="mb-3 grid h-12 w-12 place-items-center rounded-full border border-line bg-surface2 text-faint"><I.Training size={22} /></span>
          <div className="text-[15px] font-semibold">{empty[tab][0]}</div>
          <div className="mt-1 max-w-md text-[13px] text-muted">{empty[tab][1]}</div>
          <U.Button kind="ghost" className="mt-4"><I.Plus size={15} />Adicionar</U.Button>
        </U.Card>
      </div>
    );
  }

  /* ─────────────── AGENDAMENTOS ─────────────── */
  function Scheduling({ data }) {
    const [view, setView] = useState('Mês');
    const now = new Date();
    // Mês exibido no calendário (independente do mês real) — sem isto o grid ficava
    // sempre travado em new Date() e os botões de navegação não tinham pra onde escrever.
    const [cursor, setCursor] = useState(() => new Date(now.getFullYear(), now.getMonth(), 1));
    const y = cursor.getFullYear(), mo = cursor.getMonth();
    const first = new Date(y, mo, 1).getDay();
    const days = new Date(y, mo + 1, 0).getDate();
    const evByDay = {};
    (data.confirm || []).forEach((c) => {
      const dt = new Date(c.quando);
      if (dt.getFullYear() !== y || dt.getMonth() !== mo) return; // não vazar evento de outro mês pro mesmo número de dia
      const dd = dt.getDate();
      (evByDay[dd] = evByDay[dd] || []).push(c);
    });
    const cells = [];
    for (let i = 0; i < first; i++) cells.push(null);
    for (let dd = 1; dd <= days; dd++) cells.push(dd);
    const wd = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SÁB'];
    const monthName = cursor.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
    const goPrevMonth = () => setCursor((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
    const goNextMonth = () => setCursor((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
    return (
      <div>
        <U.PageHead title="Agendamentos" subtitle="Gerencie consultas, reuniões e retornos."
          right={<><div className="flex rounded-lg border border-line bg-surface p-0.5">{['Mês', 'Semana', 'Dia'].map((v) => <button key={v} onClick={() => setView(v)} className={'rounded-md px-3 py-1.5 text-[12.5px] ' + (view === v ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}>{v}</button>)}</div><U.Button kind="primary"><I.Plus size={15} />Agendar</U.Button></>} />
        <U.Card pad={false} className="overflow-hidden">
          <div className="flex items-center justify-between border-b border-line px-4 py-3"><span className="text-[15px] font-semibold capitalize">{monthName}</span><div className="flex gap-1"><button onClick={goPrevMonth} className="grid h-8 w-8 place-items-center rounded-lg border border-line text-muted hover:text-fg"><I.ChevronLeft size={16} /></button><button onClick={goNextMonth} className="grid h-8 w-8 place-items-center rounded-lg border border-line text-muted hover:text-fg"><I.ChevronLeft size={16} className="rotate-180" /></button></div></div>
          <div className="overflow-x-auto scroll-thin"><div className="min-w-[620px]">
          <div className="grid grid-cols-7 border-b border-line">{wd.map((w) => <div key={w} className="px-2 py-2 text-center text-[11px] font-semibold text-faint">{w}</div>)}</div>
          <div className="grid grid-cols-7">
            {cells.map((dd, i) => {
              const evs = dd ? (evByDay[dd] || []) : [];
              const today = dd === now.getDate() && mo === now.getMonth() && y === now.getFullYear();
              return (
                <div key={i} className="min-h-[104px] border-b border-r border-line/60 p-1.5 last:border-r-0">
                  {dd && <>
                    <div className={'mb-1 inline-grid h-6 w-6 place-items-center rounded-full text-[12px] ' + (today ? 'bg-brand text-white' : 'text-muted')}>{dd}</div>
                    <div className="space-y-1">
                      {evs.slice(0, 3).map((e) => (
                        <div key={e.id} className="truncate rounded border border-line bg-brand-soft px-1.5 py-1 text-[10.5px] text-fg/90" title={e.titulo}>
                          <span className="text-bright">{new Date(e.quando).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</span> {e.titulo.split(' — ')[0]}
                        </div>
                      ))}
                    </div>
                  </>}
                </div>
              );
            })}
          </div>
          </div></div>
        </U.Card>
      </div>
    );
  }

  /* ─────────────── CONVIDAR USUÁRIO (Equipe) ─────────────── */
  function InviteUserModal({ open, onClose }) {
    const [email, setEmail] = useState('');
    const [role, setRole] = useState('atendente');
    const [busy, setBusy] = useState(false);
    const [err, setErr] = useState(null);
    const [done, setDone] = useState(null);
    useEffect(() => { if (open) { setEmail(''); setRole('atendente'); setBusy(false); setErr(null); setDone(null); } }, [open]);
    const submit = async () => {
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setErr('Digite um e-mail válido.'); return; }
      setBusy(true); setErr(null);
      try { await D.inviteUser({ email: email.trim().toLowerCase(), role }); setDone(email.trim()); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusy(false); }
    };
    return (
      <U.Modal open={open} onClose={onClose} title="Convidar Usuário">
        {done ? (
          <div>
            <div className="flex items-start gap-3 rounded-lg border border-ok/40 bg-ok-soft px-3 py-3 text-[13px] text-ok">
              <I.Check size={18} className="mt-0.5 shrink-0" />
              <span>{done} liberado na allowlist. Atenção: o login aqui hoje é e-mail/senha (Google OAuth não está habilitado neste projeto) — a pessoa só consegue entrar depois que uma conta com senha for criada pra ela em Authentication → Users no Supabase, não é automático como seria com Google.</span>
            </div>
            <div className="mt-4 flex justify-end"><U.Button kind="primary" onClick={onClose}>Fechar</U.Button></div>
          </div>
        ) : (
          <div className="space-y-3">
            <div><label className="mb-1.5 block text-[12.5px] text-muted">E-mail</label>
              <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="pessoa@exemplo.com" onKeyDown={(e) => e.key === 'Enter' && submit()}
                className="h-10 w-full rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60" /></div>
            <div><label className="mb-1.5 block text-[12.5px] text-muted">Papel</label>
              <select value={role} onChange={(e) => setRole(e.target.value)}
                className="h-10 w-full rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg outline-none focus:border-brand/60">
                <option value="atendente">Atendente</option><option value="admin">Admin</option>
              </select></div>
            {err && <div className="rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}
            <div className="flex justify-end gap-2 pt-1">
              <U.Button kind="ghost" onClick={onClose} disabled={busy}>Cancelar</U.Button>
              <U.Button kind="primary" onClick={submit} disabled={busy}><I.Send size={14} />{busy ? 'Enviando…' : 'Convidar'}</U.Button>
            </div>
          </div>
        )}
      </U.Modal>
    );
  }

  /* ─────────────── CONFIGURAR EQUIPE (gerenciar allowlist de acesso) ─────────────── */
  function ManageAccessModal({ open, onClose }) {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [err, setErr] = useState(null);
    const [busyEmail, setBusyEmail] = useState(null);
    const load = async () => {
      setLoading(true); setErr(null);
      try { setUsers(await D.teamUsers()); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setLoading(false); }
    };
    useEffect(() => { if (open) load(); }, [open]);
    const remove = async (email) => {
      if (!window.confirm(`Remover o acesso de ${email} ao painel?`)) return;
      setBusyEmail(email);
      try { await D.removeTeamUser(email); await load(); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusyEmail(null); }
    };
    return (
      <U.Modal open={open} onClose={onClose} title="Configurar Equipe" width={480}>
        <div className="mb-3 text-[12.5px] text-muted">Quem tem acesso ao painel (allowlist). Login hoje é e-mail/senha — ver aviso em "Convidar usuário".</div>
        {err && <div className="mb-3 rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}
        {loading ? (
          <div className="py-6 text-center text-[13px] text-muted">Carregando…</div>
        ) : (
          <div className="max-h-[320px] space-y-2 overflow-y-auto scroll-thin pr-1">
            {users.map((u) => (
              <div key={u.email} className="flex items-center justify-between rounded-lg border border-line bg-surface px-3 py-2">
                <div className="flex items-center gap-2.5">
                  <U.Avatar name={u.email} size={30} />
                  <div><div className="text-[13px]">{u.email}</div><div className="text-[11px] text-faint">{u.role === 'admin' ? 'Admin' : 'Atendente'}</div></div>
                </div>
                <button onClick={() => remove(u.email)} disabled={busyEmail === u.email} title="Remover acesso"
                  className="grid h-8 w-8 place-items-center rounded-lg text-faint hover:bg-bad-soft hover:text-bad disabled:opacity-40"><I.X size={15} /></button>
              </div>
            ))}
            {!users.length && <div className="py-4 text-center text-[13px] text-faint">Nenhum usuário na lista.</div>}
          </div>
        )}
        <div className="mt-4 flex justify-end"><U.Button kind="primary" onClick={onClose}>Fechar</U.Button></div>
      </U.Modal>
    );
  }

  /* ─────────────── EQUIPE ─────────────── */
  function Team() {
    const [inviteOpen, setInviteOpen] = useState(false);
    const [cfgOpen, setCfgOpen] = useState(false);
    const stats = [['Total de Usuários', 3, I.Contacts], ['Admins', 1, I.Team], ['Membros', 2, I.User], ['Times Ativos', 2, I.Activity]];
    const members = [
      ['Administração (exemplo)', 'admin@radio-exemplo.test', 'Admin', 'Atendimento', 'ok'],
      ['Comercial (exemplo)', 'comercial@radio-exemplo.test', 'Membro', 'Comercial', 'ok'],
      ['Produção (exemplo)', 'producao@radio-exemplo.test', 'Membro', 'Produção', 'ok'],
    ];
    return (
      <div>
        <U.PageHead title="Equipe" subtitle="Gerencie usuários e times da organização."
          right={<><U.Button kind="ghost" onClick={() => setCfgOpen(true)}><I.Settings size={15} />Configurar</U.Button><U.Button kind="primary" onClick={() => setInviteOpen(true)}><I.Plus size={15} />Convidar usuário</U.Button></>} />
        <div className="mb-5 grid grid-cols-2 gap-4 lg:grid-cols-4">
          {stats.map(([l, v, Ic]) => <U.StatCard key={l} label={l} value={v} icon={Ic} />)}
        </div>
        <U.Card pad={false} className="overflow-hidden">
          <div className="border-b border-line p-4"><div className="text-[15px] font-semibold">Usuários da Equipe</div><div className="text-[12.5px] text-muted">Gerencie papéis e times dos usuários</div></div>
          <div className="mb-0 border-b border-line p-3"><div className="max-w-sm"><U.Search placeholder="Buscar por nome, e-mail, time ou função..." /></div></div>
          <div className="overflow-x-auto scroll-thin">
          <table className="w-full min-w-[520px]">
            <tbody>
              {members.map(([nome, email, role, time]) => (
                <tr key={email} className="border-b border-line/60 last:border-0 hover:bg-elevate/40">
                  <td className="px-4 py-3"><div className="flex items-center gap-3"><U.Avatar name={nome} size={36} /><div><div className="text-[13.5px] font-medium">{nome}</div><div className="text-[12px] text-faint">{email}</div></div></div></td>
                  <td className="px-4 py-3"><U.Badge tone={role === 'Admin' ? 'brand' : 'muted'}>{role}</U.Badge></td>
                  <td className="px-4 py-3 text-[12.5px] text-muted">{time}</td>
                  <td className="px-4 py-3 text-right"><button className="grid h-8 w-8 place-items-center rounded-lg text-faint hover:bg-elevate hover:text-fg"><I.More size={16} /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </U.Card>
        <div className="mt-2 text-[11.5px] text-faint">Esta tabela é ilustrativa. Quem realmente tem acesso ao painel está em "Configurar".</div>
        <InviteUserModal open={inviteOpen} onClose={() => setInviteOpen(false)} />
        <ManageAccessModal open={cfgOpen} onClose={() => setCfgOpen(false)} />
      </div>
    );
  }

  /* ─────────────── AJUDA ─────────────── */
  function Help() {
    const faq = [
      ['Como a ' + AG + ' recebe mensagens?', 'Via webhook da Zernio (WhatsApp Business API oficial, evento message.received). Cada mensagem cai no backend (Railway), que roda o motor de conversa e responde pelo mesmo número.'],
      ['Preciso de template aprovado pela Meta?', 'Sim, para iniciar conversa ou falar fora da janela de 24h. Dentro da janela aberta pelo contato o texto é livre. Os templates são criados e aprovados na WABA da rádio.'],
      ['A ' + AG + ' responde tudo sozinha?', 'Só quando o modo ativo estiver ligado no backend (NANDA_ATIVA=1). Pausada, ela registra o que chega e não responde nada. Em qualquer conversa você pode "Assumir" e conduzir manualmente; ao "Retomar", ela volta.'],
      ['Como conecto o número?', 'O número é cadastrado na Zernio (WABA), e o webhook da Zernio aponta para o backend em /webhook-zernio. Status em Dashboard, widget "Status do Sistema" (exige login).'],
      ['Onde ficam os segredos (tokens)?', 'Somente no backend, via variáveis de ambiente. O painel usa apenas a anon key do Supabase (protegida por RLS) e a sessão de login. Service_role e API key da Zernio nunca entram no front.'],
      ['E áudio?', 'Entrada de áudio pode ser transcrita (Whisper) e a resposta pode sair em voz (TTS), tudo server-side e desligável por variável de ambiente.'],
    ];
    const [open, setOpen] = useState(0);
    return (
      <div className="mx-auto max-w-3xl">
        <U.PageHead title="Ajuda" subtitle={`O caminho para colocar a ${AG} no ar: do número na Zernio à primeira conversa respondida.`} />
        <U.Card className="mb-5" style={{ borderColor: 'rgba(46,111,214,.35)' }}>
          <div className="flex items-start gap-3">
            <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-brand-soft text-bright"><I.Info size={18} /></span>
            <div><div className="text-[14px] font-semibold">Checklist de ativação</div>
              <ul className="mt-2 space-y-1.5 text-[13px] text-muted">
                {['Cadastrar o número dedicado na Zernio (WABA da rádio).', 'Configurar o webhook message.received apontando pro backend (/webhook-zernio).', 'Subir o perfil da ' + AG + ' em Configurações > Agente antes de liberar.', 'Ligar o modo ativo (NANDA_ATIVA=1) e validar com um número da equipe.'].map((s, i) => <li key={i} className="flex gap-2"><span className="mt-0.5 text-ok"><I.Check size={14} /></span>{s}</li>)}
              </ul>
            </div>
          </div>
        </U.Card>
        <div className="text-[15px] font-semibold">Perguntas frequentes</div>
        <div className="mt-3 space-y-2">
          {faq.map(([q, a], i) => (
            <div key={i} className="overflow-hidden rounded-lg border border-line bg-surface/60">
              <button onClick={() => setOpen(open === i ? -1 : i)} className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-[13.5px] font-medium hover:bg-elevate/40">
                {q}<I.ChevronDown size={16} className={'shrink-0 text-faint transition-transform ' + (open === i ? 'rotate-180' : '')} />
              </button>
              {open === i && <div className="border-t border-line px-4 py-3 text-[13px] leading-relaxed text-muted">{a}</div>}
            </div>
          ))}
        </div>
      </div>
    );
  }

  /* ─────────────── NOTIFICAÇÕES — Aviso de Confirmação de Visita ───────────
     Quando o CLIENTE confirma reunião com a Nanda, o backend (ver
     src/notificacaoVisita.js) avisa cada destinatário ATIVO
     aqui via WhatsApp (template Meta "confirmacao_visita_nanda"). Esta seção só
     gerencia a LISTA (GET/POST/excluir em /api/notif-destinatarios) — quem
     está nela é só UX de Admin, o backend também confia na sessão/serviço,
     não recalcula papel aqui (mesma ressalva do resto do painel). */
  function formatarTelDisplay(tel) {
    const dg = String(tel || '').replace(/\D/g, '');
    if (dg.length === 13 && dg.startsWith('55')) return `+55 (${dg.slice(2, 4)}) ${dg.slice(4, 9)}-${dg.slice(9, 13)}`;
    return dg ? `+${dg}` : (tel || '');
  }

  function NotifVisitaSettings() {
    const [items, setItems] = useState([]);
    const [loading, setLoading] = useState(true);
    const [err, setErr] = useState(null);
    const [nome, setNome] = useState('');
    const [telefone, setTelefone] = useState('');
    const [busyAdd, setBusyAdd] = useState(false);
    const [busyId, setBusyId] = useState(null);

    const load = async () => {
      setLoading(true); setErr(null);
      try { setItems(await D.notifDestinatarios()); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setLoading(false); }
    };
    useEffect(() => { load(); }, []);

    const add = async () => {
      const digits = telefone.replace(/\D/g, '');
      if (!nome.trim()) { setErr('Digite o nome do destinatário.'); return; }
      if (digits.length < 10) { setErr('Telefone inválido — use DDI+DDD+número, ex: 5524999998888.'); return; }
      setBusyAdd(true); setErr(null);
      try { await D.addNotifDestinatario({ nome: nome.trim(), telefone: digits }); setNome(''); setTelefone(''); await load(); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusyAdd(false); }
    };
    const remove = async (item) => {
      if (!window.confirm(`Remover ${item.nome} da lista de avisos de visita? A pessoa deixa de receber o aviso quando um cliente confirmar visita.`)) return;
      setBusyId(item.id); setErr(null);
      try { await D.removeNotifDestinatario(item.id); await load(); }
      catch (e) { setErr(String(e.message || e)); }
      finally { setBusyId(null); }
    };

    return (
      <div className="space-y-4">
        <U.Card>
          <div className="mb-1 flex items-center gap-2 text-[15px] font-semibold"><I.Send size={18} className="text-bright" />Aviso de Confirmação de Visita</div>
          <div className="mb-4 text-[12.5px] text-muted">
            Quando um cliente confirma visita ou reunião com a {AG}, cada destinatário ativo abaixo recebe um aviso automático por WhatsApp
            (template aprovado pela Meta) com nome do cliente, interesse, contato, objeções, dores e desejos identificados na conversa.
          </div>

          {err && <div className="mb-3 rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">{err}</div>}

          {loading ? (
            <div className="py-6 text-center text-[13px] text-muted">Carregando…</div>
          ) : (
            <div className="mb-4 space-y-2">
              {items.map((it) => (
                <div key={it.id} className="flex items-center justify-between rounded-lg border border-line bg-surface px-3 py-2">
                  <div className="flex items-center gap-2.5">
                    <U.Avatar name={it.nome} size={30} />
                    <div><div className="text-[13px]">{it.nome}</div><div className="text-[11px] text-faint">{formatarTelDisplay(it.telefone)}</div></div>
                  </div>
                  <button onClick={() => remove(it)} disabled={busyId === it.id} title="Remover da lista de avisos"
                    className="grid h-8 w-8 place-items-center rounded-lg text-faint hover:bg-bad-soft hover:text-bad disabled:opacity-40"><I.X size={15} /></button>
                </div>
              ))}
              {!items.length && <div className="py-4 text-center text-[13px] text-faint">Nenhum destinatário cadastrado — ninguém vai receber o aviso ainda.</div>}
            </div>
          )}

          <div className="border-t border-line pt-4">
            <div className="mb-2 text-[12.5px] font-medium text-fg/90">Adicionar destinatário</div>
            <div className="flex flex-col gap-2 sm:flex-row">
              <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Nome"
                className="h-10 flex-1 rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60" />
              <input value={telefone} onChange={(e) => setTelefone(e.target.value)} placeholder="Telefone (DDI+DDD+número, ex: 5524999998888)" onKeyDown={(e) => e.key === 'Enter' && add()}
                className="h-10 flex-1 rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60" />
              <U.Button kind="primary" onClick={add} disabled={busyAdd}><I.Plus size={15} />{busyAdd ? 'Adicionando…' : 'Adicionar'}</U.Button>
            </div>
          </div>
        </U.Card>
      </div>
    );
  }

  /* ─────────────── CONFIGURAÇÕES ─────────────── */
  function Field({ label, hint, children }) {
    return <div><label className="mb-1.5 block text-[12.5px] text-muted">{label}{hint && <span className="ml-1 text-faint">({hint})</span>}</label>{children}</div>;
  }
  const inputCls = 'h-10 w-full rounded-lg border border-line bg-surface px-3 text-[13.5px] text-fg placeholder:text-faint outline-none focus:border-brand/60';

  function Settings({ isAdmin }) {
    const [tab, setTab] = useState('Agente');
    const [promptData, setPromptData] = useState(null);
    const [promptLoading, setPromptLoading] = useState(true);
    const [promptErr, setPromptErr] = useState(null);
    // Edição do prompt (só admin): editing destrava o textarea; confirmOpen abre o
    // modal que avisa que a mudança vale AO VIVO antes de gravar.
    const [editing, setEditing] = useState(false);
    const [editValue, setEditValue] = useState('');
    const [saving, setSaving] = useState(false);
    const [saveErr, setSaveErr] = useState(null);
    const [saveOk, setSaveOk] = useState(null);
    const [confirmOpen, setConfirmOpen] = useState(false);
    useEffect(() => {
      let alive = true;
      D.prompt()
        .then((r) => { if (alive) { setPromptData(r); setPromptLoading(false); } })
        .catch((e) => { if (alive) { setPromptErr(String(e.message || e)); setPromptLoading(false); } });
      return () => { alive = false; };
    }, []);
    const reload = () => D.prompt().then((r) => setPromptData(r)).catch(() => {});
    const startEdit = () => { setEditValue(promptData ? promptData.prompt : ''); setSaveErr(null); setSaveOk(null); setEditing(true); };
    const cancelEdit = () => { setEditing(false); setSaveErr(null); };
    const doSave = async () => {
      setConfirmOpen(false); setSaving(true); setSaveErr(null); setSaveOk(null);
      try {
        const res = await D.savePrompt(editValue);
        setEditing(false);
        setSaveOk('Prompt salvo e ativo (versão ' + (res && res.versao != null ? res.versao : '?') + '). A ' + AG + ' já usa a nova versão.');
        await reload();
      } catch (e) { setSaveErr(String(e.message || e)); }
      finally { setSaving(false); }
    };
    const verLabel = promptData && promptData.versao != null ? ('v' + promptData.versao) : null;
    return (
      <div>
        <U.PageHead title="Configurações" subtitle={`Central de controle da instância ${BR.empresa || 'Nanda'}.`}
          right={<span className="text-[12.5px] text-muted">{isAdmin ? 'Você é administrador' : 'Apenas administradores podem editar'}</span>} />
        <div className="mb-6 max-w-full overflow-x-auto scroll-thin">
          <div className="inline-flex rounded-lg border border-line bg-surface p-0.5">
            {[['Agente', I.Bot], ['Canais', I.MsgCircle], ['Notificações', I.Send], ['APIs', I.Settings]].map(([t, Ic]) => (
              <button key={t} onClick={() => setTab(t)} className={'flex shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-4 py-1.5 text-[13px] font-medium ' + (tab === t ? 'bg-brand-soft text-fg' : 'text-muted hover:text-fg')}><Ic size={15} />{t}</button>
            ))}
          </div>
        </div>

        {tab === 'Agente' && <div className="space-y-4">
          <U.Card>
            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
              <div className="flex items-center gap-2 text-[15px] font-semibold"><I.Bot size={18} className="text-bright" />Prompt do Sistema</div>
              <div className="flex items-center gap-2">
                {editing
                  ? <U.Badge tone="warn"><I.Info size={12} />Editando — vale ao vivo ao salvar</U.Badge>
                  : <U.Badge tone="muted"><I.Info size={12} />{isAdmin ? 'Leitura — clique em Editar' : 'Somente leitura'}</U.Badge>}
                {isAdmin && !editing && (
                  <U.Button kind="ghost" size="sm" onClick={startEdit} disabled={promptLoading || !!promptErr || !promptData}><I.Settings size={14} />Editar</U.Button>
                )}
                {isAdmin && editing && (
                  <React.Fragment>
                    <U.Button kind="subtle" size="sm" onClick={cancelEdit} disabled={saving}>Cancelar</U.Button>
                    <U.Button kind="primary" size="sm" onClick={() => setConfirmOpen(true)} disabled={saving || !editValue.trim()}>{saving ? 'Salvando…' : 'Salvar'}</U.Button>
                  </React.Fragment>
                )}
              </div>
            </div>
            {promptData && !editing && (
              <div className="mb-3 text-[12px] text-faint">
                Fonte: {promptData.arquivo}{verLabel ? ' · ' + verLabel : ''} · {(promptData.tamanho || 0).toLocaleString('pt-BR')} caracteres
                {promptData.atualizado_em ? ' · atualizado em ' + new Date(promptData.atualizado_em).toLocaleString('pt-BR') : ''}
                {promptData.atualizado_por ? ' · por ' + promptData.atualizado_por : ''}
              </div>
            )}
            {editing && (
              <div className="mb-3 flex items-center gap-2 rounded-lg border p-2.5 text-[12px]"
                style={{ borderColor: 'rgba(216,161,58,.4)', background: 'rgba(216,161,58,.1)', color: '#e6bd6a' }}>
                <I.Info size={14} className="shrink-0" />Isto muda o comportamento da {AG} AO VIVO assim que você salvar. Uma nova versão é criada e a anterior fica guardada no banco (dá pra reverter).
              </div>
            )}
            {saveOk && <div className="mb-3 rounded-lg border border-ok/40 bg-ok-soft px-3 py-2 text-[12.5px] text-ok">{saveOk}</div>}
            {saveErr && <div className="mb-3 rounded-lg border border-bad/40 bg-bad-soft px-3 py-2 text-[12.5px] text-bad">Não salvou: {saveErr}</div>}
            <textarea readOnly={!editing}
              value={editing ? editValue : (promptLoading ? 'Carregando prompt…' : (promptErr ? ('Erro ao carregar prompt: ' + promptErr) : (promptData ? promptData.prompt : '')))}
              onChange={editing ? ((e) => setEditValue(e.target.value)) : undefined}
              spellCheck={false}
              className={'h-[520px] w-full overflow-y-auto rounded-lg border bg-surface p-3 font-mono text-[12px] leading-relaxed text-fg/90 outline-none ' + (editing ? 'border-brand/60' : 'border-line')} />
          </U.Card>
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <U.Card>
              <div className="mb-4 flex items-center gap-2 text-[15px] font-semibold"><I.Doc size={17} className="text-bright" />Informações da Empresa</div>
              <div className="space-y-3">
                <Field label="Nome da Empresa" hint="recomendado"><input readOnly className={inputCls} value={BR.empresa || 'Rádio Real FM'} /></Field>
                <Field label="Nome do Agente" hint="recomendado"><input readOnly className={inputCls} value={AG} /></Field>
              </div>
            </U.Card>
            <U.Card>
              <div className="mb-4 flex items-center gap-2 text-[15px] font-semibold"><I.Calendar size={17} className="text-bright" />Horário de Atendimento</div>
              <div className="grid grid-cols-2 gap-3"><Field label="Início"><input readOnly className={inputCls} value="08:00" /></Field><Field label="Fim"><input readOnly className={inputCls} value="18:00" /></Field></div>
              <div className="mt-3 text-[12.5px] text-muted">Dias da Semana</div>
              <div className="mt-2 flex flex-wrap gap-1.5">{['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'].map((d, i) => <span key={d} className={'rounded-md px-3 py-1.5 text-[12px] ' + (i > 0 && i < 6 ? 'bg-brand-soft text-fg' : 'border border-line text-faint')}>{d}</span>)}</div>
            </U.Card>
          </div>
        </div>}

        {tab === 'Canais' && <U.Card>
          <div className="mb-4 flex items-center gap-2 text-[15px] font-semibold"><I.MsgCircle size={18} className="text-bright" />WhatsApp (Zernio, API oficial)</div>
          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
            <Field label="Provedor"><input readOnly className={inputCls} value="Zernio (WhatsApp Business API oficial)" /></Field>
            <Field label="Base da API"><input readOnly className={inputCls} value={(CFG.whatsapp && CFG.whatsapp.base) || 'https://zernio.com/api/v1'} /></Field>
            <Field label="Número (ZERNIO_FROM)"><input readOnly className={inputCls} value="•••••••••••••••• (backend)" /></Field>
            <Field label="API key"><input readOnly className={inputCls} value="•••••••••••••••• (backend)" /></Field>
          </div>
          <div className="mt-3 flex items-center gap-2 rounded-lg border border-line bg-surface2 p-3 text-[12.5px] text-muted"><I.Info size={15} className="text-warn" />Credenciais da Zernio vivem só no backend (env). O painel nunca exibe nem armazena a chave.</div>
        </U.Card>}

        {tab === 'Notificações' && <NotifVisitaSettings />}

        {tab === 'APIs' && <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
          <U.Card>
            <div className="mb-4 flex items-center gap-2 text-[15px] font-semibold"><I.Wifi size={17} className="text-bright" />Supabase</div>
            <div className="space-y-3">
              <Field label="Project URL"><input readOnly className={inputCls} value={CFG.SUPABASE_URL || ''} /></Field>
              <Field label="Anon key (front)"><input readOnly className={inputCls} value={CFG.SUPABASE_ANON_KEY ? '•••• configurada' : '(vazia — painel em modo demo)'} /></Field>
              <Field label="Service role"><input readOnly className={inputCls} value="nunca no front — só no backend" /></Field>
            </div>
          </U.Card>
          <U.Card>
            <div className="mb-4 flex items-center gap-2 text-[15px] font-semibold"><I.Settings size={17} className="text-bright" />Backend {AG}</div>
            <div className="space-y-3">
              <Field label="Base do backend (Railway)"><input readOnly className={inputCls} value={CFG.NANDA_BACKEND || ''} /></Field>
              <Field label="LLM / Voz"><input readOnly className={inputCls} value="Anthropic Claude + Whisper/OpenAI TTS (server-side)" /></Field>
            </div>
          </U.Card>
        </div>}

        <U.Modal open={confirmOpen} onClose={() => setConfirmOpen(false)} title="Salvar e ativar novo prompt?">
          <div className="text-[13px] text-muted">Isto substitui o prompt que a {AG} usa <span className="font-medium text-fg">agora, ao vivo</span>, em todas as próximas conversas. Uma nova versão é criada e a anterior fica guardada no banco (dá pra reverter). Confirmar?</div>
          <div className="mt-4 flex justify-end gap-2">
            <U.Button kind="subtle" onClick={() => setConfirmOpen(false)} disabled={saving}>Cancelar</U.Button>
            <U.Button kind="primary" onClick={doSave} disabled={saving}>{saving ? 'Salvando…' : 'Salvar e ativar'}</U.Button>
          </div>
        </U.Modal>
      </div>
    );
  }

  window.App = window.App || {};
  window.App.ScreensB = { Training, Scheduling, Team, Help, Settings };
})();