// Tela: Configurações

const SET_TABS = [
  { id: 'conta',         label: 'Conta',         icon: 'user',      hint: 'Dados da empresa' },
  { id: 'faturamento',   label: 'Faturamento',   icon: 'briefcase', hint: 'Plano e cobrança' },
  { id: 'whatsapp',      label: 'WhatsApp',      icon: 'whatsapp',  hint: 'Número e templates', badge: '●' },
  { id: 'agente',        label: 'Agente IA',     icon: 'bolt2',     hint: 'SDR virtual · VAPI', badge: '●' },
  { id: 'status',        label: 'Status',        icon: 'check',     hint: 'APIs e integrações' },
  { id: 'integracoes',   label: 'Integrações',   icon: 'link',      hint: '12 conectadas' },
  { id: 'notificacoes',  label: 'Notificações',  icon: 'bell',      hint: 'E-mail, push, in-app' },
  { id: 'automacoes',    label: 'Automações',    icon: 'bolt2',     hint: 'Regras e gatilhos' },
  { id: 'privacidade',   label: 'Privacidade',   icon: 'help',      hint: 'Dados e LGPD' },
];

function Configuracoes({ onBack }) {
  const [tab, setTab] = React.useState('conta');
  return (
    <>
      <PageHead
        title={<>Configurações <em>da conta</em></>}
        subtitle="Personalize a Ezza para sua operação"
        back onBack={onBack}
      />

      <div className="set-grid">
        <aside className="card set-aside">
          {SET_TABS.map(t => (
            <div key={t.id} className={`set-tab ${tab === t.id ? 'set-tab-on' : ''}`} onClick={() => setTab(t.id)}>
              <div className="set-tab-ic">{ICN[t.icon]}</div>
              <div className="col" style={{flex:1, minWidth:0}}>
                <div className="set-tab-lbl">{t.label}</div>
                <div className="set-tab-hint muted">{t.hint}</div>
              </div>
              {tab === t.id
                ? <span className="muted">{ICN.arrowRight}</span>
                : t.badge && <span className="set-tab-badge">{t.badge}</span>}
            </div>
          ))}
          <div className="set-divider" />
          <div className="set-tab set-tab-danger">
            <div className="set-tab-ic">{ICN.trash}</div>
            <div className="col" style={{flex:1}}>
              <div className="set-tab-lbl">Encerrar conta</div>
              <div className="set-tab-hint">Ação irreversível</div>
            </div>
          </div>
        </aside>

        <div className="set-body">
          {tab === 'conta'        && <SetConta />}
          {tab === 'faturamento'  && <SetFat />}
          {tab === 'whatsapp'     && <SetWA />}
          {tab === 'agente'       && <SetAI />}
          {tab === 'status'       && <SetStatus />}
          {tab === 'integracoes'  && <SetInt />}
          {tab === 'notificacoes' && <SetNot />}
          {tab === 'automacoes'   && <SetAuto />}
          {tab === 'privacidade'  && <SetPriv />}
        </div>
      </div>

      <style>{`
        .set-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
        .set-aside { padding: 8px !important; position: sticky; top: 0; }
        .set-tab { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; cursor: default; }
        .set-tab:hover { background: oklch(0.96 0.012 250); }
        .set-tab-on { background: var(--black); color: white; }
        .set-tab-on:hover { background: var(--black); }
        .set-tab-on .set-tab-hint { color: oklch(1 0 0 / 0.65) !important; }
        .set-tab-ic { width: 32px; height: 32px; border-radius: 10px; background: oklch(0.96 0.012 250); color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0; }
        .set-tab-on .set-tab-ic { background: oklch(1 0 0 / 0.15); color: white; }
        .set-tab-lbl { font-size: 13px; font-weight: 600; }
        .set-tab-hint { font-size: 11px; margin-top: 1px; }
        .set-tab-danger:hover { background: oklch(0.96 0.04 18); color: var(--danger); }
        .set-tab-danger:hover .set-tab-ic { color: var(--danger); }
        .set-divider { height: 1px; background: oklch(0.93 0.01 255); margin: 8px 8px; }
        .set-tab-badge { font-size: 10px; color: oklch(0.55 0.22 295); line-height: 1; margin-left: 2px; }

        .set-body { display: flex; flex-direction: column; gap: 14px; }
        .set-section-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
        .set-h-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
        .set-h-sub { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }

        .toggle-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .toggle-row:last-child { border-bottom: 0; }
        .toggle-lbl { font-size: 13.5px; font-weight: 600; }
        .toggle-hint { font-size: 12px; color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }
      `}</style>
    </>
  );
}

function SetSection({ title, sub, right, children }) {
  return (
    <div className="card">
      <div className="set-section-h">
        <div>
          <div className="set-h-title">{title}</div>
          {sub && <div className="set-h-sub">{sub}</div>}
        </div>
        {right}
      </div>
      {children}
    </div>
  );
}

const cfgHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };

function SetConta() {
  const toast = useToast();
  const [razao,    setRazao]    = React.useState('');
  const [fantasia, setFantasia] = React.useState('');
  const [cnpj,     setCnpj]     = React.useState('');
  const [ie,       setIe]       = React.useState('');
  const [end,      setEnd]      = React.useState('');
  const [dirty,    setDirty]    = React.useState(false);

  // Carrega dados salvos do banco
  React.useEffect(() => {
    fetch('/api/configuracoes', { headers: cfgHeaders() })
      .then(r => r.json())
      .then(d => {
        const c = (d.ok && d.configuracoes && d.configuracoes.empresa) || null;
        if (c) {
          setRazao(c.razao||''); setFantasia(c.fantasia||''); setCnpj(c.cnpj||''); setIe(c.ie||''); setEnd(c.endereco||'');
        }
        setDirty(false);
      })
      .catch(() => {});
  }, []);

  const mark = (setter) => (e) => { setter(e.target.value); setDirty(true); };

  const salvar = async () => {
    try {
      await fetch('/api/configuracoes', { method:'PUT', headers: cfgHeaders(),
        body: JSON.stringify({ dados: { empresa: { razao, fantasia, cnpj, ie, endereco: end } } }) });
      setDirty(false);
      toast('Dados da empresa salvos ✓');
    } catch (e) { toast('Erro ao salvar'); }
  };

  return (
    <>
      <SetSection title="Dados da empresa" sub="Aparecem em propostas, notas fiscais e comunicações com clientes."
        right={dirty && <button className="btn-primary btn-sm" onClick={salvar}>{ICN.check} Salvar</button>}
      >
        <div className="form-grid">
          <Field label="Razão social"><input className="ezz-input" value={razao}    onChange={mark(setRazao)} /></Field>
          <Field label="Nome fantasia"><input className="ezz-input" value={fantasia} onChange={mark(setFantasia)} /></Field>
          <Field label="CNPJ"><input className="ezz-input" value={cnpj}     onChange={mark(setCnpj)} /></Field>
          <Field label="Inscrição estadual"><input className="ezz-input" value={ie}  onChange={mark(setIe)} /></Field>
          <Field label="Endereço" full><input className="ezz-input" value={end} onChange={mark(setEnd)} /></Field>
        </div>
      </SetSection>

      <SetSection title="Idioma e região" sub="Configurações que afetam toda a equipe.">
        <Toggle label="Idioma padrão da interface" hint="Português (Brasil) · pt-BR" hasArrow />
        <Toggle label="Fuso horário"               hint="America/São_Paulo · GMT-3" hasArrow />
        <Toggle label="Moeda principal"            hint="Real brasileiro · R$ (BRL)" hasArrow />
        <Toggle label="Formato de data"            hint="DD/MM/AAAA"                 hasArrow />
      </SetSection>

      <SetSection title="Comportamento">
        <Toggle label="Atribuição automática de leads"          hint="Distribui leads novos entre membros disponíveis em round-robin." defaultOn />
        <Toggle label="Lembrar de seguir-up após 3 dias"        hint="Notifica quando um lead fica sem atividade." defaultOn />
        <Toggle label="Bloquear edição de oportunidade fechada" hint="Apenas Admins podem reabrir."             defaultOn />
        <Toggle label="Permitir exportar relatórios"            hint="Membros podem baixar CSV / PDF." />
      </SetSection>
    </>
  );
}

function AdicionarCartaoModal({ onClose, onAdd }) {
  const [titular,  setTitular]  = React.useState('');
  const [numero,   setNumero]   = React.useState('');
  const [validade, setValidade] = React.useState('');
  const [cvv,      setCvv]      = React.useState('');
  const toast = useToast();

  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  // formata número: 1234 5678 9012 3456
  const fmtNumero = (v) => v.replace(/\D/g,'').slice(0,16).replace(/(.{4})/g,'$1 ').trim();
  // formata validade: MM/AA
  const fmtValid  = (v) => v.replace(/\D/g,'').slice(0,4).replace(/^(\d{2})(\d)/, '$1/$2');

  const bandeira = () => {
    const d = numero.replace(/\s/g,'');
    if (d.startsWith('4')) return 'VISA';
    if (d.startsWith('5') || d.startsWith('2')) return 'MASTER';
    if (d.startsWith('3')) return 'AMEX';
    return '···';
  };

  const valid = titular.trim().length > 2 && numero.replace(/\s/g,'').length === 16 && validade.length === 5 && cvv.length >= 3;

  const submit = () => {
    if (!valid) return;
    const last4 = numero.replace(/\s/g,'').slice(-4);
    onAdd({ bandeira: bandeira(), last4, validade, titular: titular.trim() });
    toast(`Cartão ${bandeira()} •••• ${last4} adicionado ✓`);
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width:460}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Adicionar <em>cartão</em></div>
            <div className="modal-sub muted">Seus dados são protegidos com criptografia SSL.</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>

        <div className="form-grid">
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Número do cartão</label>
            <div className="ezz-input row" style={{gap:8, alignItems:'center'}}>
              <input style={{flex:1, border:0, outline:0, fontFamily:'var(--font-mono)', fontSize:14, background:'transparent'}}
                placeholder="0000 0000 0000 0000"
                value={numero}
                onChange={e => setNumero(fmtNumero(e.target.value))}
                maxLength={19}
              />
              <span style={{fontSize:11, fontWeight:700, color:'oklch(0.5 0.01 255)', minWidth:40, textAlign:'right', fontFamily:'var(--font-mono)'}}>{bandeira()}</span>
            </div>
          </div>
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Nome do titular</label>
            <input className="ezz-input" placeholder="Como aparece no cartão" value={titular} onChange={e => setTitular(e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label className="field-lbl">Validade</label>
            <input className="ezz-input" placeholder="MM/AA" value={validade} onChange={e => setValidade(fmtValid(e.target.value))} maxLength={5} />
          </div>
          <div className="field">
            <label className="field-lbl">CVV</label>
            <input className="ezz-input" placeholder="···" value={cvv} onChange={e => setCvv(e.target.value.replace(/\D/g,'').slice(0,4))} maxLength={4} type="password" />
          </div>
        </div>

        <div style={{display:'flex', alignItems:'center', gap:8, padding:'10px 14px', background:'oklch(0.97 0.01 255)', borderRadius:10, marginBottom:16, fontSize:12, color:'oklch(0.44 0.01 255)'}}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          Conexão segura · criptografia SSL 256-bit
        </div>

        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
            Adicionar cartão
          </button>
        </div>
      </div>
    </div>
  );
}

function SetFat() {
  const toast = useToast();
  const [showUpgrade,  setShowUpgrade]  = React.useState(false);
  const [showAddCard,  setShowAddCard]  = React.useState(false);
  const [cartoes,      setCartoes]      = React.useState([
    { bandeira: 'VISA', last4: '4827', validade: '09/2029', titular: 'Letícia A. Borges', padrao: true },
  ]);

  const downloadFatura = (r) => {
    const linhas = [
      '================================================',
      '              EZZA CRM — FATURA',
      '================================================',
      '',
      `Data:        ${r.d}`,
      `Descrição:   ${r.t}`,
      `Valor:       ${r.v}`,
      `Status:      ${r.s}`,
      '',
      '------------------------------------------------',
      'Ezza Tecnologia LTDA',
      'CNPJ: 42.108.554/0001-77',
      'Av. Brigadeiro Faria Lima, 3477 — 12º andar',
      'São Paulo, SP · 04538-133',
      'suporte@ezza.com.br',
      '================================================',
    ].join('\n');
    const blob = new Blob([linhas], { type: 'text/plain;charset=utf-8;' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href     = url;
    a.download = `fatura-ezza-${r.d.replace(/\//g,'-')}.txt`;
    a.click();
    URL.revokeObjectURL(url);
    toast('Fatura baixada ✓');
  };

  return (
    <>
      <SetSection title="Plano atual" right={<span className="pill pill-mint">Pro · Anual</span>}>
        <div className="bil-hero">
          <div>
            <div style={{fontSize: 13, color:'var(--ink-muted)', fontWeight: 600}}>Plano Pro · faturado anualmente</div>
            <div style={{fontSize: 36, fontWeight: 700, letterSpacing:'-0.025em', marginTop: 4}} className="money">R$ 12.948<span style={{fontSize: 14, color:'var(--ink-muted)', fontWeight: 500, marginLeft: 4}}>/ano</span></div>
            <div style={{fontSize: 12, color:'var(--ink-muted)', marginTop: 4}}>12 assentos · próxima renovação em 06/04/2027</div>
          </div>
          <div className="row" style={{gap: 8}}>
            <button className="btn-ghost" onClick={() => setShowUpgrade(true)}>Comparar planos</button>
            <button className="btn-primary" onClick={() => setShowUpgrade(true)}>Fazer upgrade</button>
          </div>
        </div>
        <div className="bil-stats">
          <div><div className="bil-stat-v">7 / 12</div><div className="bil-stat-l">Assentos usados</div></div>
          <div><div className="bil-stat-v">68 GB / 100 GB</div><div className="bil-stat-l">Armazenamento</div></div>
          <div><div className="bil-stat-v">12 / ∞</div><div className="bil-stat-l">Automações ativas</div></div>
          <div><div className="bil-stat-v">3 / 5</div><div className="bil-stat-l">Pipelines</div></div>
        </div>
      </SetSection>

      <SetSection title="Forma de pagamento" right={<button className="btn-primary btn-sm" onClick={() => setShowAddCard(true)}>{ICN.plus} Adicionar cartão</button>}>
        {cartoes.map((c, i) => (
          <div key={i} className="row" style={{gap:14, alignItems:'center', padding: i > 0 ? '12px 0 0' : '0'}}>
            <div className="card-chip">{c.bandeira}</div>
            <div className="col" style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600}}>•••• •••• •••• {c.last4}</div>
              <div className="muted" style={{fontSize:11.5, marginTop:2}}>Vence {c.validade} · Titular: {c.titular}</div>
            </div>
            {c.padrao
              ? <span className="pill pill-mint">Padrão</span>
              : <button className="btn-ghost btn-sm" onClick={() => { setCartoes(prev => prev.map((cc,j) => ({...cc, padrao: j===i}))); toast('Cartão definido como padrão ✓'); }}>Definir padrão</button>
            }
            <ActionBtn icon={ICN.edit} title="Editar cartão" onClick={() => toast('Editar cartão · atualize pelo portal de pagamento')} />
          </div>
        ))}
      </SetSection>

      <SetSection title="Histórico de faturas">
        <table className="tbl">
          <thead><tr><th>Data</th><th>Descrição</th><th>Valor</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {[
              { d: '06/04/2026', t: 'Plano Pro · anual',      v: 'R$ 5.964,00', s: 'Pago', c: 'mint' },
              { d: '06/04/2025', t: 'Plano Pro · anual',      v: 'R$ 5.964,00', s: 'Pago', c: 'mint' },
              { d: '12/02/2025', t: 'Upgrade · +4 assentos',  v: 'R$ 1.080,00', s: 'Pago', c: 'mint' },
              { d: '06/04/2024', t: 'Plano Starter · anual',  v: 'R$ 2.964,00', s: 'Pago', c: 'mint' },
            ].map((r,i) => (
              <tr key={i}>
                <td className="mono" style={{fontSize:11.5}}>{r.d}</td>
                <td>{r.t}</td>
                <td className="money" style={{fontWeight:600}}>{r.v}</td>
                <td><span className={`pill pill-${r.c}`}>{r.s}</span></td>
                <td><ActionBtn icon={ICN.download} title="Baixar fatura" onClick={() => downloadFatura(r)} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </SetSection>

      {showAddCard && (
        <AdicionarCartaoModal
          onClose={() => setShowAddCard(false)}
          onAdd={(c) => setCartoes(prev => [...prev, c])}
        />
      )}

      {showUpgrade && (
        <div className="modal-wrap" onClick={() => setShowUpgrade(false)}>
          <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 580}}>
            <div className="modal-head">
              <div>
                <div className="modal-title">Comparar <em>planos</em></div>
                <div className="modal-sub muted">Escolha o melhor plano para sua equipe</div>
              </div>
              <div className="mini-btn" onClick={() => setShowUpgrade(false)}>{ICN.x}</div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginBottom:20}}>
              {[
                { name:'Starter', price:'R$ 297', sub:'/mês · até 3 usuários', features:['Pipeline completo','1.000 leads','WhatsApp integrado','IA de qualificação','Suporte por e-mail'], color:'', current:false },
                { name:'Pro',     price:'R$ 597', sub:'/mês · até 10 usuários', features:['Leads ilimitados','IA SDR completa','Jornadas customizadas','Automações ilimitadas','Relatórios avançados','Suporte prioritário'], color:'lav', current:true },
                { name:'Enterprise', price:'Sob consulta', sub:'usuários ilimitados', features:['Tudo do Pro','White-label','SSO + LGPD','API dedicada','CSM exclusivo','SLA 99,9%'], color:'dark', current:false },
              ].map(p => (
                <div key={p.name} style={{
                  padding:'18px 16px',
                  borderRadius:16,
                  background: p.current ? 'var(--black)' : 'oklch(0.97 0.01 250)',
                  border: p.current ? 'none' : '0.5px solid oklch(0.90 0.01 250)',
                  color: p.current ? 'white' : 'var(--ink)',
                  position:'relative',
                }}>
                  {p.current && <div style={{position:'absolute',top:-1,left:'50%',transform:'translateX(-50%)',background:'var(--acc-lav)',color:'white',fontSize:9,fontWeight:700,letterSpacing:'0.1em',padding:'3px 10px',borderRadius:'0 0 8px 8px',textTransform:'uppercase'}}>Atual</div>}
                  <div style={{fontSize:16,fontWeight:700,marginTop:p.current?8:0}}>{p.name}</div>
                  <div style={{fontSize:22,fontWeight:700,letterSpacing:'-0.02em',margin:'8px 0 2px'}}>{p.price}</div>
                  <div style={{fontSize:11,opacity:0.65,marginBottom:14}}>{p.sub}</div>
                  <div style={{display:'flex',flexDirection:'column',gap:6}}>
                    {p.features.map((f,i) => (
                      <div key={i} style={{display:'flex',gap:8,alignItems:'center',fontSize:12}}>
                        <span style={{color: p.current ? 'var(--acc-mint)' : 'oklch(0.55 0.13 155)'}}>{ICN.check}</span>
                        {f}
                      </div>
                    ))}
                  </div>
                  {!p.current && (
                    <button className={p.name === 'Enterprise' ? 'btn-ghost' : 'btn-primary'} style={{width:'100%',marginTop:16,justifyContent:'center'}}
                      onClick={() => { toast(`Solicitação de ${p.name} enviada! Nossa equipe entrará em contato.`); setShowUpgrade(false); }}>
                      {p.name === 'Enterprise' ? 'Falar com vendas' : 'Migrar para ' + p.name}
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

const INTEGRACOES = [
  { sw:'GW', label: 'Google Workspace', desc: 'Agenda, Gmail e Drive',                  color:'blue',  on: true },
  { sw:'OF', label: 'Outlook 365',       desc: 'Calendar e e-mail corporativo',          color:'blue',  on: false },
  { sw:'WA', label: 'WhatsApp Business', desc: 'Conversas e templates aprovados',        color:'mint',  on: true },
  { sw:'IG', label: 'Instagram Direct',  desc: 'Mensagens diretas e leads de ads',       color:'pink',  on: true },
  { sw:'MA', label: 'Meta Ads',          desc: 'Captura de leads de campanhas',          color:'blue',  on: true },
  { sw:'GA', label: 'Google Ads',        desc: 'Atribuição de receita a campanhas',      color:'yellow',on: true },
  { sw:'RD', label: 'RD Station',        desc: 'Sincronização bidirecional de contatos', color:'lav',   on: false },
  { sw:'SL', label: 'Slack',             desc: 'Notificações em canais',                 color:'lav',   on: true },
  { sw:'ZP', label: 'Zapier',            desc: '5.000+ apps via webhooks',               color:'pink',  on: true },
  { sw:'OM', label: 'Omie',              desc: 'ERP e emissão de NF-e',                  color:'yellow',on: true },
  { sw:'CT', label: 'Conta Azul',        desc: 'ERP e contabilidade',                    color:'mint',  on: false },
  { sw:'AW', label: 'AWS S3',            desc: 'Backup e armazenamento de anexos',       color:'blue',  on: true },
];

function SetInt() {
  const [integs, setIntegs] = React.useState(INTEGRACOES.map(it => ({...it})));
  const toggle = (i) => setIntegs(prev => prev.map((it, idx) => idx === i ? {...it, on: !it.on} : it));
  const toast = useToast();
  return (
    <>
      <SetSection title="Integrações" sub={`${integs.length} disponíveis · ${integs.filter(i => i.on).length} conectadas`} right={<button className="btn-primary btn-sm" onClick={() => toast('Marketplace de integrações em breve!')}>{ICN.plus} Buscar mais</button>}>
        <div className="int-grid">
          {integs.map((it,i) => (
            <div key={i} className="int-card">
              <div className="row" style={{gap: 10}}>
                <div className={`con-sw con-${it.color}`}>{it.sw}</div>
                <div className="col" style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:600}}>{it.label}</div>
                  <div className="muted" style={{fontSize:11.5, marginTop:2}}>{it.desc}</div>
                </div>
                <button className={`switch ${it.on ? 'switch-on' : ''}`} onClick={() => toggle(i)}><div className="switch-knob"/></button>
              </div>
              {it.on && (
                <div className="int-foot muted">
                  <span style={{color:'var(--ok)'}}>● Conectado</span> · Sincronizado há 4 minutos
                </div>
              )}
            </div>
          ))}
        </div>
      </SetSection>
      <style>{`
        .int-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .int-card { background: oklch(0.97 0.01 250 / 0.7); border: 0.5px solid oklch(0.92 0.01 250); border-radius: 16px; padding: 14px 16px; }
        .int-foot { font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid oklch(0.92 0.01 250); }
      `}</style>
    </>
  );
}

function SetNot() {
  const [items, setItems] = React.useState([
    { lbl: 'Novo lead atribuído a você',              e: true,  p: true,  i: true  },
    { lbl: 'Lead muda de etapa no pipeline',          e: false, p: true,  i: true  },
    { lbl: 'Comentário ou menção a você',             e: true,  p: true,  i: true  },
    { lbl: 'Oportunidade fechada (ganha ou perdida)', e: true,  p: true,  i: true  },
    { lbl: 'Tarefa próxima do vencimento',            e: true,  p: false, i: true  },
    { lbl: 'SLA de caso prestes a estourar',          e: true,  p: true,  i: true  },
    { lbl: 'Resumo diário de pipeline',               e: true,  p: false, i: false },
    { lbl: 'Resumo semanal de equipe',                e: true,  p: false, i: false },
  ]);
  const toggle = (i, key) => setItems(prev => prev.map((it, idx) => idx === i ? {...it, [key]: !it[key]} : it));
  return (
    <SetSection title="Notificações" sub="Configure por canal o que você quer ser avisado.">
      <table className="tbl" style={{marginTop:4}}>
        <thead>
          <tr><th>Evento</th><th style={{width:90, textAlign:'center'}}>E-mail</th><th style={{width:90, textAlign:'center'}}>Push</th><th style={{width:90, textAlign:'center'}}>In-app</th></tr>
        </thead>
        <tbody>
          {items.map((it, i) => (
            <tr key={i}>
              <td><strong>{it.lbl}</strong></td>
              <td style={{textAlign:'center'}}><button className={`switch ${it.e ? 'switch-on' : ''}`} style={{margin:'0 auto'}} onClick={() => toggle(i,'e')}><div className="switch-knob"/></button></td>
              <td style={{textAlign:'center'}}><button className={`switch ${it.p ? 'switch-on' : ''}`} style={{margin:'0 auto'}} onClick={() => toggle(i,'p')}><div className="switch-knob"/></button></td>
              <td style={{textAlign:'center'}}><button className={`switch ${it.i ? 'switch-on' : ''}`} style={{margin:'0 auto'}} onClick={() => toggle(i,'i')}><div className="switch-knob"/></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </SetSection>
  );
}

function NovaAutomacaoModal({ onClose, onAdd }) {
  const [gatilho, setGatilho] = React.useState('Lead novo');
  const [acao, setAcao] = React.useState('Enviar WhatsApp');
  const [nome, setNome] = React.useState('');
  const toast = useToast();
  const GATILHOS = ['Lead novo','Lead sem atividade 7 dias','Oportunidade ganha','Oportunidade perdida','Caso aberto crítico','Tarefa vencida'];
  const ACOES = ['Enviar WhatsApp','Notificar Slack','Criar tarefa','Enviar e-mail','Ligar via IA','Mover etapa do pipeline'];
  const valid = nome.trim().length > 0;
  const submit = () => {
    if (!valid) return;
    onAdd({ tit: `${gatilho} → ${acao}`, desc: `${nome.trim()}`, on: true, runs: '0 execuções' });
    toast('Automação criada com sucesso ✓');
    onClose();
  };
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width:520}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Nova <em>Automação</em></div>
            <div className="modal-sub muted">Defina o gatilho e a ação</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>
        <div className="form-grid">
          <div className="field" style={{gridColumn:'1/-1'}}>
            <label className="field-lbl">Nome da automação *</label>
            <input className="ezz-input" placeholder="Ex: Reagir leads frios do Ads" value={nome} onChange={e => setNome(e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label className="field-lbl">Gatilho (quando)</label>
            <select className="ezz-input" value={gatilho} onChange={e => setGatilho(e.target.value)} style={{appearance:'auto'}}>
              {GATILHOS.map(g => <option key={g}>{g}</option>)}
            </select>
          </div>
          <div className="field">
            <label className="field-lbl">Ação (então)</label>
            <select className="ezz-input" value={acao} onChange={e => setAcao(e.target.value)} style={{appearance:'auto'}}>
              {ACOES.map(a => <option key={a}>{a}</option>)}
            </select>
          </div>
        </div>
        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>{ICN.bolt2} Criar automação</button>
        </div>
      </div>
    </div>
  );
}

function SetAuto() {
  const [autos, setAutos] = React.useState([
    { tit: 'Lead novo de Meta Ads → WhatsApp',         desc: 'Envia mensagem inicial em até 60s quando um lead chega via Meta Ads.', on: true,  runs: '1.248 execuções' },
    { tit: 'Oportunidade ganha → notificar #vendas',   desc: 'Posta no Slack quando uma oportunidade é marcada como Ganha.',          on: true,  runs: '42 execuções'    },
    { tit: 'Caso crítico → SMS para responsável',      desc: 'Envia SMS quando um caso é aberto com prioridade Crítica.',             on: true,  runs: '11 execuções'    },
    { tit: 'Lead sem atividade 7 dias → tarefa',       desc: 'Cria tarefa para o dono do lead reativar.',                              on: false, runs: '0 execuções'     },
  ]);
  const toggle = (i) => setAutos(prev => prev.map((a, idx) => idx === i ? {...a, on: !a.on} : a));
  const [showNovaAuto, setShowNovaAuto] = React.useState(false);
  return (
    <>
    {showNovaAuto && <NovaAutomacaoModal onClose={() => setShowNovaAuto(false)} onAdd={(a) => setAutos(prev => [...prev, a])} />}
    <SetSection title="Automações" sub="Regras que rodam quando um evento acontece." right={<button className="btn-primary btn-sm" onClick={() => setShowNovaAuto(true)}>{ICN.plus} Criar automação</button>}>
      {autos.map((a, i) => (
        <div key={i} className="auto-row">
          <div className="auto-ic">{ICN.bolt2}</div>
          <div className="col" style={{flex:1, minWidth:0}}>
            <div style={{fontSize: 13.5, fontWeight: 600}}>{a.tit}</div>
            <div className="muted" style={{fontSize: 12, marginTop: 3, lineHeight: 1.4}}>{a.desc}</div>
            <div className="muted" style={{fontSize: 11, marginTop: 6, fontFamily: 'var(--font-mono)'}}>{a.runs} no mês</div>
          </div>
          <button className={`switch ${a.on ? 'switch-on' : ''}`} onClick={() => toggle(i)}><div className="switch-knob"/></button>
        </div>
      ))}
      <style>{`
        .auto-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .auto-row:last-child { border-bottom: 0; }
        .auto-ic { width: 38px; height: 38px; border-radius: 12px; background: oklch(0.92 0.07 295); color: oklch(0.40 0.16 295); display: grid; place-items: center; flex-shrink: 0; }
      `}</style>
    </SetSection>
    </>
  );
}

function SetPriv() {
  const toast = useToast();

  const exportarDados = () => {
    // Exporta um JSON com os dados visíveis do protótipo como demonstração
    const payload = {
      exportadoEm: new Date().toISOString(),
      conta: 'Ezza Tecnologia LTDA',
      contatos: CONTATOS.map(c => ({ id: c.id, nome: c.nome, empresa: c.empresa, email: c.email })),
      leads: LEADS.map(l => ({ id: l.id, nome: l.nome, empresa: l.empresa, etapa: l.etapa, pontos: l.pontos })),
      casos: CASOS.map(c => ({ id: c.id, assunto: c.assunto, prioridade: c.prioridade, status: c.status })),
    };
    const json = JSON.stringify(payload, null, 2);
    const a = Object.assign(document.createElement('a'), {
      href: URL.createObjectURL(new Blob([json], { type: 'application/json' })),
      download: `ezza-dados-${new Date().toISOString().slice(0,10)}.json`,
    });
    a.click(); URL.revokeObjectURL(a.href);
    toast('Exportação iniciada · arquivo JSON baixado ✓');
  };

  const compartilharAuditoria = () => {
    const link = `https://app.ezza.com.br/auditoria?token=audit_${Math.random().toString(36).slice(2,10)}&expires=${Date.now()+86400000}`;
    navigator.clipboard?.writeText(link).catch(() => {});
    toast('Link de auditoria copiado · válido por 24h ✓');
  };

  return (
    <>
      <SetSection title="Privacidade & LGPD" sub="Como tratamos os dados pessoais armazenados na Ezza.">
        <Toggle label="Anonimizar leads inativos há mais de 18 meses" hint="Substitui nome, e-mail e telefone por hashes." defaultOn />
        <Toggle label="Permitir consulta de dados por solicitação do titular" hint="Botão de exportar disponível no perfil de cada contato." defaultOn />
        <Toggle label="Registrar log de acesso a dados sensíveis"   hint="Cada acesso a CPF, telefone ou e-mail fica auditado." defaultOn />
        <Toggle label="Retenção de logs"                            hint="180 dias" hasArrow />
      </SetSection>

      <SetSection title="Dados e exportação">
        <SecRow icon={ICN.download} label="Exportar todos os dados da conta"  hint="ZIP com contatos, leads, casos, anexos e logs (até 2 GB)" onAction={exportarDados} />
        <SecRow icon={ICN.share}    label="Compartilhar acesso com auditoria" hint="Gera link temporário com permissão somente leitura"       onAction={compartilharAuditoria} />
        <SecRow icon={ICN.trash}    label="Apagar dados de um titular"        hint="Atende a solicitação de exclusão (Art. 18 da LGPD)"       onAction={() => { window.open('mailto:privacidade@ezza.com.br?subject=Solicitação de Exclusão de Dados (Art. 18 LGPD)'); toast('Abrindo e-mail para solicitação formal ✓'); }} />
      </SetSection>
    </>
  );
}

function Toggle({ label, hint, defaultOn, hasArrow }) {
  const [on, setOn] = React.useState(!!defaultOn);
  return (
    <div className="toggle-row">
      <div className="col" style={{flex: 1, minWidth: 0}}>
        <div className="toggle-lbl">{label}</div>
        <div className="toggle-hint">{hint}</div>
      </div>
      {hasArrow
        ? <span className="muted">{ICN.chevron}</span>
        : <button className={`switch ${on ? 'switch-on' : ''}`} onClick={() => setOn(!on)}><div className="switch-knob"/></button>}
    </div>
  );
}

/* SetWA, SetAI, SetStatus, SecRow → configuracoes-extra.jsx */

// Inline styles helpers
const _setStyles = `
  .bil-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid oklch(0.93 0.01 255); margin-bottom: 18px; }
  .bil-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .bil-stat-v { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
  .bil-stat-l { font-size: 11px; color: var(--ink-muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .card-chip { width: 56px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, oklch(0.25 0.08 250), oklch(0.18 0.04 250)); color: white; font-family: var(--font-mono); font-weight: 700; font-size: 11px; display: grid; place-items: center; letter-spacing: 0.04em; }
`;
const _setStyleEl = document.createElement('style'); _setStyleEl.textContent = _setStyles; document.head.appendChild(_setStyleEl);

window.Configuracoes = Configuracoes;