/* ============================================================
   KeS Metas — CONFIGURAÇÕES (área exclusiva da conta master)
   ------------------------------------------------------------
   EMPRESAS = tenants SEPARADOS das equipes (coleção própria).
   Cada empresa nasce com um banco ZERADO e cadastro completo.
   O master (KeS) cria / edita / configura / entra — mas NÃO é
   membro de nenhuma empresa.
   ============================================================ */
function ConfigScreen({ state, dispatch, viewer }) {
  const { useState, useEffect } = React;
  const DB = window.KESDB;
  const [empresas, setEmpresas] = useState(null);   // null = carregando
  const [modal, setModal] = useState(null);         // null | {} (nova) | empresa (editar)
  const [excluir, setExcluir] = useState(null);
  const [aviso, setAviso] = useState("");

  function carregar() {
    if (!DB || !DB.listEmpresas) { setEmpresas([]); return; }
    DB.listEmpresas().then((l) => {
      setEmpresas(l || []);
      // Mantém o seletor de troca rápida (topo) sempre atualizado.
      dispatch({ type: "SET_EMPRESAS", empresas: (l || []).map((e) => ({ id: e.id, nome: e.nome || e.id })) });
    });
  }
  useEffect(() => { carregar(); }, []);

  const fmtDoc = (e) => e.documento ? ((e.tipoPessoa === "fisica" ? "CPF " : "CNPJ ") + e.documento) : "sem documento";

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl">
          <h1>Configurações · Empresas</h1>
          <p>Cadastre e gerencie as empresas.</p>
        </div>
        <div className="actions">
          <Btn variant="primary" icon="plus" onClick={() => setModal({})}>Cadastrar empresa</Btn>
        </div>
      </div>

      {aviso && <div className="form-err" style={{ marginBottom: 14 }}><Icon name="alert" size={14} />{aviso}</div>}

      <div className="card">
        <div style={{ padding: "16px 20px 6px" }}>
          <div className="eyebrow" style={{ fontSize: 10.5 }}>Empresas cadastradas{empresas ? " (" + empresas.length + ")" : ""}</div>
        </div>
        {empresas === null ? (
          <div className="empty"><Icon name="refresh" size={30} /><div style={{ fontSize: 13 }}>Carregando…</div></div>
        ) : empresas.length === 0 ? (
          <div className="empty"><Icon name="dashboard" size={40} /><div style={{ fontWeight: 700 }}>Nenhuma empresa ainda</div><div style={{ fontSize: 13 }}>Clique em "Cadastrar empresa" para criar a primeira.</div></div>
        ) : (
          <div style={{ padding: "6px 12px 14px" }}>
            {empresas.map((e) => {
              const cfg = e.config || {};
              const matriz = e.config && e.config.matrizId ? empresas.find((x) => x.id === e.config.matrizId) : null;
              return (
                <div key={e.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 12px", borderBottom: "1px solid var(--border-dark)", flexWrap: "wrap" }}>
                  <div className="wa-avatar" style={{ background: "var(--kes-red-400)" }}>{(e.nome || "?").slice(0, 2).toUpperCase()}</div>
                  <div style={{ flex: 1, minWidth: 180 }}>
                    <div style={{ fontWeight: 700, fontSize: 14.5 }}>{e.nome}</div>
                    <div className="muted" style={{ fontSize: 11.5, display: "flex", gap: 10, flexWrap: "wrap" }}>
                      <span>{fmtDoc(e)}</span>
                      {e.telefone && <span><Icon name="phone" size={11} style={{ verticalAlign: "-1px" }} /> {e.telefone}</span>}
                      {matriz && <span style={{ color: "var(--warn)" }}>Filial de {matriz.nome}</span>}
                    </div>
                  </div>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                    <Btn variant="primary" size="sm" icon="arrowRight" onClick={() => dispatch({ type: "SET_EMPRESA", empresaId: e.id, nome: e.nome })}>Entrar</Btn>
                    <Btn variant="subtle" size="sm" icon="pencil" onClick={() => setModal(e)}>Editar</Btn>
                    <button className="iconbtn" title="Excluir empresa" onClick={() => setExcluir(e)} style={{ color: "var(--kes-red-400)" }}><Icon name="trash" size={16} /></button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {modal && (
        <EmpresaModal initial={modal.id ? modal : null} outras={(empresas || []).filter((x) => !modal.id || x.id !== modal.id)}
          onClose={() => setModal(null)}
          onSalvo={(msg) => { setModal(null); carregar(); if (msg) dispatch({ type: "TOAST", msg }); }}
          onErro={(m) => setAviso(m)} viewer={viewer} />
      )}

      {excluir && (
        <Modal title="Excluir empresa" onClose={() => setExcluir(null)}
          footer={<><Btn variant="ghost" onClick={() => setExcluir(null)}>Cancelar</Btn>
            <Btn variant="danger" icon="trash" onClick={async () => { await DB.deleteEmpresa(excluir.id); setExcluir(null); carregar(); dispatch({ type: "TOAST", msg: "Empresa excluída." }); }}>Excluir definitivamente</Btn></>}>
          <p style={{ margin: 0 }}>Excluir <strong>{excluir.nome}</strong> e <strong>todos os dados dela</strong> (leads, usuários, metas)? <strong>Não pode ser desfeito.</strong></p>
        </Modal>
      )}
    </div>
  );
}

/* ---- Script do Google Agenda para a EMPRESA-CLIENTE ----
   Mesmo contrato do Agenda-Calendar.gs da KeS (create/delete + Meet com
   entrada aberta e fallback), com o TOKEN da empresa já embutido. A pessoa
   só cola na conta Google da empresa, publica e devolve a URL /exec. ---- */
function scriptAgendaEmpresa(token, nomeEmpresa) {
  return '/**\n' +
' * ' + (nomeEmpresa || 'Empresa') + ' — Agenda de reuniões (KeS Metas)\n' +
' * -----------------------------------------------------------\n' +
' * Publique este script NA CONTA GOOGLE DA EMPRESA (a agenda que\n' +
' * vai receber as reuniões). O sistema KeS Metas chama este script\n' +
' * para criar/cancelar eventos — a senha do Google NUNCA sai daqui.\n' +
' * O TOKEN abaixo já está preenchido — não altere.\n' +
' */\n' +
'\n' +
'var TOKEN = "' + token + '";\n' +
'var CRIAR_MEET = true;\n' +
'var MEET_ABERTO = true;\n' +
'\n' +
'function doGet(e) {\n' +
'  return _json({ ok: true, service: "KeS Metas - Agenda da empresa",\n' +
'    calendar: CalendarApp.getDefaultCalendar().getName(), meet: CRIAR_MEET });\n' +
'}\n' +
'\n' +
'function doPost(e) {\n' +
'  try {\n' +
'    var body = {};\n' +
'    if (e && e.postData && e.postData.contents) body = JSON.parse(e.postData.contents);\n' +
'    if (body.token !== TOKEN) return _json({ ok: false, error: "token invalido" });\n' +
'\n' +
'    if (body.action === "delete") {\n' +
'      if (!body.eventId) return _json({ ok: false, error: "eventId ausente" });\n' +
'      try { Calendar.Events.remove("primary", body.eventId, { sendUpdates: "all" }); }\n' +
'      catch (e2) { if (!/not found|deleted|410|404/i.test(String(e2))) throw e2; }\n' +
'      return _json({ ok: true, deleted: body.eventId });\n' +
'    }\n' +
'    if (body.action !== "create") return _json({ ok: false, error: "acao desconhecida" });\n' +
'\n' +
'    var start = new Date(body.startISO);\n' +
'    var end = body.endISO ? new Date(body.endISO)\n' +
'      : new Date(start.getTime() + (parseInt(body.durationMin, 10) || 30) * 60000);\n' +
'    var guests = (Array.isArray(body.guests) ? body.guests : []).filter(Boolean)\n' +
'      .map(function (em) { return { email: String(em).trim() }; });\n' +
'\n' +
'    // Sala do Meet com ENTRADA ABERTA (se a Meet API deixar; senao cai no plano B)\n' +
'    var meet = "";\n' +
'    if (CRIAR_MEET && MEET_ABERTO) {\n' +
'      try { meet = criarSalaMeetAberta_(); } catch (eMeet) { console.error(String(eMeet)); }\n' +
'    }\n' +
'\n' +
'    var resource = {\n' +
'      summary: body.title || "Reuniao", description: body.description || "",\n' +
'      start: { dateTime: start.toISOString() }, end: { dateTime: end.toISOString() },\n' +
'      attendees: guests, guestsCanInviteOthers: true, guestsCanModify: false,\n' +
'      guestsCanSeeOtherGuests: true, anyoneCanAddSelf: true, visibility: "public",\n' +
'    };\n' +
'    var params = { sendUpdates: "all" };\n' +
'    if (meet) {\n' +
'      resource.location = meet;\n' +
'      resource.description = (resource.description ? resource.description + "\\n\\n" : "") + "Entrar na reuniao: " + meet;\n' +
'    } else if (CRIAR_MEET) {\n' +
'      resource.conferenceData = { createRequest: {\n' +
'        requestId: "kes-" + new Date().getTime() + "-" + Math.floor(Math.random() * 100000),\n' +
'        conferenceSolutionKey: { type: "hangoutsMeet" } } };\n' +
'      params.conferenceDataVersion = 1;\n' +
'    }\n' +
'\n' +
'    var ev = Calendar.Events.insert(resource, "primary", params);\n' +
'    if (!meet) {\n' +
'      meet = ev.hangoutLink || "";\n' +
'      if (!meet && ev.conferenceData && ev.conferenceData.entryPoints) {\n' +
'        for (var i = 0; i < ev.conferenceData.entryPoints.length; i++) {\n' +
'          if (ev.conferenceData.entryPoints[i].entryPointType === "video") { meet = ev.conferenceData.entryPoints[i].uri; break; }\n' +
'        }\n' +
'      }\n' +
'    }\n' +
'    return _json({ ok: true, eventId: ev.id, htmlLink: ev.htmlLink || "", meetLink: meet, calendar: "primary" });\n' +
'  } catch (err) { return _json({ ok: false, error: String(err) }); }\n' +
'}\n' +
'\n' +
'function criarSalaMeetAberta_() {\n' +
'  var token = ScriptApp.getOAuthToken();\n' +
'  var res = UrlFetchApp.fetch("https://meet.googleapis.com/v2/spaces", {\n' +
'    method: "post", contentType: "application/json",\n' +
'    headers: { Authorization: "Bearer " + token },\n' +
'    payload: JSON.stringify({ config: { accessType: "OPEN", entryPointAccess: "ALL" } }),\n' +
'    muteHttpExceptions: true,\n' +
'  });\n' +
'  if (res.getResponseCode() >= 300) throw new Error("meet api: " + res.getResponseCode());\n' +
'  var space = JSON.parse(res.getContentText());\n' +
'  var link = space.meetingUri || (space.meetingCode ? "https://meet.google.com/" + space.meetingCode : "");\n' +
'  if (!link) throw new Error("sala sem link");\n' +
'  return link;\n' +
'}\n' +
'\n' +
'function _json(obj) {\n' +
'  return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);\n' +
'}\n';
}

/* ---- Modal de cadastro/edição da empresa (cadastro + configuração) ---- */
function EmpresaModal({ initial, outras, onClose, onSalvo, onErro, viewer }) {
  const { useState } = React;
  const DB = window.KESDB, SEED = window.KES.seed;
  const editando = !!initial;
  const cfg0 = (initial && initial.config) || {};
  const [f, setF] = useState({
    nome: (initial && initial.nome) || "",
    tipoPessoa: (initial && initial.tipoPessoa) || "juridica",
    documento: (initial && initial.documento) || "",
    telefone: (initial && initial.telefone) || "",
    email: (initial && initial.email) || "",
    endereco: (initial && initial.endereco) || "",
    responsavel: (initial && initial.responsavel) || "",
    matrizId: cfg0.matrizId || "",
    termoLead: cfg0.termoLead || "",
    modulos: Object.assign({ competicao: true, chat: true, whatsapp: true }, cfg0.modulos || {}),
    agenda: Object.assign({
      email: "", horaInicio: "09:00", horaFim: "18:00", dias: [1, 2, 3, 4, 5],
      duracaoPadrao: 30, linkPadrao: "", gasEndpoint: "", gasToken: "",
    }, cfg0.agenda || {}),
    adminNome: "", adminEmail: "", adminSenha: "",   // login do admin (só na criação)
  });
  const [err, setErr] = useState(""); const [busy, setBusy] = useState(false);
  const [copiadoGs, setCopiadoGs] = useState(false);
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const setMod = (k, v) => setF((s) => ({ ...s, modulos: { ...s.modulos, [k]: v } }));
  const setAg = (k, v) => setF((s) => ({ ...s, agenda: { ...s.agenda, [k]: v } }));
  const toggleDia = (d) => setF((s) => {
    const atuais = s.agenda.dias || [];
    const novos = atuais.indexOf(d) >= 0 ? atuais.filter((x) => x !== d) : atuais.concat([d]).sort();
    return { ...s, agenda: { ...s.agenda, dias: novos } };
  });
  const DIAS = [[0, "D"], [1, "S"], [2, "T"], [3, "Q"], [4, "Q"], [5, "S"], [6, "S"]];

  function maskDoc(v) {
    const d = String(v).replace(/\D/g, "").slice(0, f.tipoPessoa === "fisica" ? 11 : 14);
    if (f.tipoPessoa === "fisica") return d.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
    return d.replace(/(\d{2})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1/$2").replace(/(\d{4})(\d{1,2})$/, "$1-$2");
  }
  function maskTel(v) {
    let d = String(v).replace(/\D/g, "").slice(0, 11);
    if (d.length > 6) d = "(" + d.slice(0, 2) + ") " + d.slice(2, 7) + "-" + d.slice(7);
    else if (d.length > 2) d = "(" + d.slice(0, 2) + ") " + d.slice(2);
    else if (d.length > 0) d = "(" + d;
    return d;
  }

  // Telas que a empresa pode ou não enxergar. A chave é o id da tela no menu.
  // "Painel" fica sempre disponível (é a tela-base pra onde o sistema volta).
  const MODULOS = [
    { k: "ganhos", nome: "Ganhos", ic: "banknote" },
    { k: "tarefas", nome: "Tarefas", ic: "checkCircle" },
    { k: "crm", nome: "CRM", ic: "funnel" },
    { k: "agenda", nome: "Agenda", ic: "calendar" },
    { k: "whatsapp", nome: "WhatsApp", ic: "whatsapp" },
    { k: "email", nome: "E-mails", ic: "mail" },
    { k: "competicao", nome: "Competição", ic: "trophy" },
    { k: "consolidado", nome: "Equipe (consolidado)", ic: "users" },
    { k: "relatorios", nome: "Relatórios", ic: "spreadsheet" },
    { k: "usuarios", nome: "Usuários", ic: "user" },
    { k: "metas", nome: "Metas", ic: "sliders" },
    { k: "comissao", nome: "Comissionamento", ic: "banknote" },
  ];
  const ligados = MODULOS.filter((m) => f.modulos[m.k] !== false).length;
  const setTodos = (v) => setF((s) => ({ ...s, modulos: MODULOS.reduce((o, m) => { o[m.k] = v; return o; }, Object.assign({}, s.modulos)) }));

  async function salvar() {
    if (!f.nome.trim()) return setErr("Informe o nome da empresa.");
    if (!editando) {
      // Login do administrador da empresa (é a porta de entrada dela no sistema).
      if (!f.adminNome.trim()) return setErr("Informe o nome do administrador da empresa.");
      if (!/^\S+@\S+\.\S+$/.test(f.adminEmail)) return setErr("E-mail do administrador inválido.");
      if (f.adminSenha.length < 6) return setErr("Senha do administrador: mínimo 6 caracteres.");
    }
    setBusy(true); setErr("");
    const cadastro = {
      nome: f.nome.trim(), tipoPessoa: f.tipoPessoa, documento: f.documento.trim(),
      telefone: f.telefone.trim(), email: f.email.trim(), endereco: f.endereco.trim(), responsavel: f.responsavel.trim(),
      config: { matrizId: f.matrizId || null, termoLead: f.termoLead.trim(), modulos: f.modulos, agenda: f.agenda },
    };
    let r;
    if (editando) {
      r = await DB.updateEmpresa(initial.id, cadastro);
    } else {
      // 1) conta de LOGIN do admin da empresa
      const A = window.KESAUTH;
      const cred = await A.createUser(f.adminEmail.trim(), f.adminSenha);
      if (!cred.ok) { setBusy(false); return setErr(A.traduzErro(cred)); }
      const slug = f.nome.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "empresa";
      const id = "emp-" + slug + "-" + Math.random().toString(36).slice(2, 7);
      // 2) banco ZERADO da empresa, já com o admin DELA dentro (o master fica fora)
      const adminUser = { id: cred.uid, nome: f.adminNome.trim(), email: f.adminEmail.trim().toLowerCase(),
        papel: "admin", cargo: "lider", googleConnected: false, cor: "#E03C31", fator: 1, comissao: {}, permissoes: null };
      const dados = {
        users: [adminUser], metas: JSON.parse(JSON.stringify(SEED.metas)), activities: [], meetings: [],
        stages: SEED.stages.map((s) => ({ ...s })), leads: [], comissaoEquipe: { ...SEED.comissaoEquipe }, tarefas: [], competicoes: [],
      };
      const doc = Object.assign({ criadaEm: new Date().toISOString(), criadaPor: (viewer && viewer.email) || "master" }, cadastro, dados);
      r = await DB.createEmpresa(id, doc);
      // 3) FICHA do admin aponta pra EMPRESA → no login, ele cai direto nela
      if (r && r.ok && window.KESMEMBERS) {
        await window.KESMEMBERS.setMembership(cred.uid, {
          email: f.adminEmail.trim().toLowerCase(), nome: f.adminNome.trim(),
          papel: "admin", cargo: "lider", empresaId: id, teamId: null,
        });
      }
      // 4) WHATSAPP AUTOMÁTICO: a caixa do admin já nasce pedindo o QR.
      //    O motor (n8n) vê o pedido, cria a instância no Evolution e devolve
      //    o QR — o admin só abre a tela WhatsApp e escaneia.
      if (r && r.ok && DB.waCaixaSet) {
        try { await DB.waCaixaSet(id, cred.uid, { canal: "evolution", status: "provisionar", auto: true, solicitadoEm: new Date().toISOString() }); } catch (e) { /* não trava o cadastro */ }
      }
    }
    setBusy(false);
    if (!r || !r.ok) { const m = "Não foi possível salvar a empresa. Tente novamente."; setErr(m); if (onErro) onErro(m); return; }
    onSalvo(editando ? "Empresa atualizada." : "Empresa cadastrada. ✅");
  }

  return (
    <Modal title={editando ? "Editar empresa" : "Cadastrar empresa"} onClose={onClose} wide
      footer={<><Btn variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Btn>
        <Btn variant="primary" icon="check" onClick={salvar} disabled={busy || !f.nome.trim()}>{busy ? "Salvando…" : (editando ? "Salvar" : "Cadastrar empresa")}</Btn></>}>

      <div className="section-label" style={{ marginTop: 0 }}><span className="eyebrow">Dados da empresa</span><span className="rule" /></div>
      <Field label="Nome da empresa" required><input className="field" value={f.nome} onChange={(e) => set("nome", e.target.value)} placeholder="Ex.: Móveis Silva LTDA" /></Field>
      <div className="form-row">
        <Field label="Tipo">
          <select className="field" value={f.tipoPessoa} onChange={(e) => { set("tipoPessoa", e.target.value); set("documento", ""); }}>
            <option value="juridica">Pessoa Jurídica (CNPJ)</option>
            <option value="fisica">Pessoa Física (CPF)</option>
          </select>
        </Field>
        <Field label={f.tipoPessoa === "fisica" ? "CPF" : "CNPJ"}>
          <input className="field" value={f.documento} onChange={(e) => set("documento", maskDoc(e.target.value))} placeholder={f.tipoPessoa === "fisica" ? "000.000.000-00" : "00.000.000/0000-00"} />
        </Field>
      </div>
      <div className="form-row">
        <Field label="Telefone"><input className="field" value={f.telefone} onChange={(e) => set("telefone", maskTel(e.target.value))} placeholder="(54) 99999-9999" /></Field>
        <Field label="E-mail"><input className="field" type="email" value={f.email} onChange={(e) => set("email", e.target.value)} placeholder="contato@empresa.com" /></Field>
      </div>
      <Field label="Responsável (contato)"><input className="field" value={f.responsavel} onChange={(e) => set("responsavel", e.target.value)} placeholder="Nome de quem responde pela empresa" /></Field>
      <Field label="Endereço"><input className="field" value={f.endereco} onChange={(e) => set("endereco", e.target.value)} placeholder="Rua, número — Cidade/UF" /></Field>

      {!editando && (
        <>
          <div className="section-label"><span className="eyebrow">Acesso da empresa (login do administrador)</span><span className="rule" /></div>
          <Field label="Nome do administrador" required><input className="field" value={f.adminNome} onChange={(e) => set("adminNome", e.target.value)} placeholder="Quem vai gerenciar o sistema na empresa" /></Field>
          <div className="form-row">
            <Field label="E-mail de login" required><input className="field" type="email" value={f.adminEmail} onChange={(e) => set("adminEmail", e.target.value)} placeholder="admin@empresa.com" /></Field>
            <Field label="Senha inicial" required><input className="field" type="text" value={f.adminSenha} onChange={(e) => set("adminSenha", e.target.value)} placeholder="mín. 6 caracteres" /></Field>
          </div>
        </>
      )}

      <div className="section-label"><span className="eyebrow">Estrutura</span><span className="rule" /></div>
      <div className="form-row">
        <Field label="Esta empresa é…">
          <select className="field" value={f.matrizId ? "filial" : "independente"} onChange={(e) => { if (e.target.value === "independente") set("matrizId", ""); else if (outras[0]) set("matrizId", outras[0].id); }}>
            <option value="independente">Independente</option>
            <option value="filial" disabled={outras.length === 0}>Filial de outra empresa</option>
          </select>
        </Field>
        {f.matrizId && (
          <Field label="Matriz">
            <select className="field" value={f.matrizId} onChange={(e) => set("matrizId", e.target.value)}>
              {outras.map((o) => <option key={o.id} value={o.id}>{o.nome}</option>)}
            </select>
          </Field>
        )}
      </div>

      <div className="section-label"><span className="eyebrow">Telas que esta empresa acessa · {ligados}/{MODULOS.length}</span><span className="rule" /></div>
      <p className="muted" style={{ margin: "0 0 8px", fontSize: 12 }}>
        Desmarque uma tela e a empresa deixa de vê-la no menu. O <strong>Painel</strong> fica sempre disponível. Dá pra mudar isso a qualquer momento por aqui.
      </p>
      <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
        <Btn variant="subtle" size="sm" onClick={() => setTodos(true)}>Marcar todas</Btn>
        <Btn variant="subtle" size="sm" onClick={() => setTodos(false)}>Desmarcar todas</Btn>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 8 }}>
        {MODULOS.map((m) => {
          const on = f.modulos[m.k] !== false;
          return (
            <label key={m.k} className="cfg-toggle" style={{ opacity: on ? 1 : 0.6 }}>
              <input type="checkbox" checked={on} onChange={(e) => setMod(m.k, e.target.checked)} />
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
                <Icon name={m.ic} size={14} /> <strong>{m.nome}</strong>
              </span>
            </label>
          );
        })}
      </div>

      <div className="section-label"><span className="eyebrow">Agenda desta empresa</span><span className="rule" /></div>
      <p className="muted" style={{ margin: "0 0 8px", fontSize: 12 }}>
        Cada empresa tem a <strong>própria agenda</strong>. Sem conectar nada, as reuniões já funcionam dentro do sistema
        e o time recebe o convite para jogar na agenda dele (Google, Outlook ou Apple).
      </p>
      <div className="form-row">
        <Field label="E-mail da agenda" hint="Quem aparece como organizador dos convites">
          <input className="field" type="email" value={f.agenda.email} onChange={(e) => setAg("email", e.target.value)} placeholder="agenda@empresa.com" />
        </Field>
        <Field label="Duração padrão da reunião">
          <select className="field" value={f.agenda.duracaoPadrao} onChange={(e) => setAg("duracaoPadrao", parseInt(e.target.value, 10))}>
            {[15, 30, 45, 60, 90, 120].map((m) => <option key={m} value={m}>{m} minutos</option>)}
          </select>
        </Field>
      </div>
      <div className="form-row">
        <Field label="Atende das">
          <input className="field" type="time" value={f.agenda.horaInicio} onChange={(e) => setAg("horaInicio", e.target.value)} />
        </Field>
        <Field label="até">
          <input className="field" type="time" value={f.agenda.horaFim} onChange={(e) => setAg("horaFim", e.target.value)} />
        </Field>
      </div>
      <Field label="Dias de atendimento">
        <div style={{ display: "flex", gap: 6 }}>
          {DIAS.map(([d, rot], i) => {
            const on = (f.agenda.dias || []).indexOf(d) >= 0;
            return (
              <button key={i} type="button" onClick={() => toggleDia(d)}
                title={["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"][d]}
                style={{ width: 34, height: 34, borderRadius: 8, cursor: "pointer", fontWeight: 700, fontSize: 13,
                  border: "1px solid " + (on ? "var(--kes-red)" : "var(--border-dark)"),
                  background: on ? "var(--kes-red)" : "transparent", color: on ? "#fff" : "var(--fg3)" }}>{rot}</button>
            );
          })}
        </div>
      </Field>
      <Field label="Link de reunião padrão" hint="Meet/Zoom fixo da empresa — já vem preenchido em toda reunião nova (opcional)">
        <input className="field" value={f.agenda.linkPadrao} onChange={(e) => setAg("linkPadrao", e.target.value)} placeholder="https://meet.google.com/abc-defg-hij" />
      </Field>
      <details style={{ marginTop: 6 }}>
        <summary style={{ cursor: "pointer", fontSize: 12.5, color: "var(--fg3)" }}>
          Conectar ao Google Agenda da empresa (opcional) — script pronto aqui dentro
        </summary>
        <div style={{ padding: "10px 0 0" }}>
          <p className="muted" style={{ margin: "0 0 10px", fontSize: 12 }}>
            Com isto, as reuniões entram <strong>direto no Google Agenda da empresa</strong>, com sala do Meet.
            O sistema gera o script já personalizado — é copiar, publicar na conta Google da empresa e colar o link de volta.
            A KeS <strong>nunca</strong> pede nem guarda a senha do Google da empresa. Enquanto não conectar, vale o convite por e-mail.
          </p>

          <div style={{ border: "1px solid var(--border-dark)", borderRadius: "var(--radius-md)", padding: "10px 12px", marginBottom: 10 }}>
            <div className="eyebrow" style={{ fontSize: 10.5, marginBottom: 8 }}>Passo a passo (~5 min, uma vez só)</div>
            <ol className="muted" style={{ fontSize: 12.5, margin: 0, paddingLeft: 18, lineHeight: 1.7 }}>
              <li>Clique em <strong>“Copiar script pronto”</strong> abaixo (o código já vai com a palavra-chave desta empresa).</li>
              <li>Entre na <strong>conta Google da empresa</strong> (a agenda que receberá as reuniões) e abra <strong>script.google.com</strong> → “Novo projeto”.</li>
              <li>Apague o conteúdo do editor, <strong>cole o script</strong> (Ctrl+V) e salve (Ctrl+S).</li>
              <li>No menu esquerdo, em <strong>Serviços +</strong>, adicione <strong>“Google Calendar API”</strong>.</li>
              <li><strong>Implantar → Nova implantação → App da Web</strong> · Executar como: <strong>Eu</strong> · Acesso: <strong>Qualquer pessoa</strong> → Implantar (autorize a conta quando pedir).</li>
              <li>Copie a <strong>URL que termina em /exec</strong> e cole no campo “Link do script” abaixo. Salve a empresa. ✅</li>
            </ol>
            <div style={{ marginTop: 10 }}>
              <Btn variant="primary" size="sm" icon="copy" onClick={() => {
                let tok = (f.agenda.gasToken || "").trim();
                if (!tok) {
                  tok = "agenda-" + (f.nome || "empresa").toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "").slice(0, 14) + "-" + Math.random().toString(36).slice(2, 8);
                  setAg("gasToken", tok);
                }
                const texto = scriptAgendaEmpresa(tok, f.nome || "Empresa");
                const done = () => { setCopiadoGs(true); setTimeout(() => setCopiadoGs(false), 2500); };
                try { navigator.clipboard.writeText(texto).then(done); }
                catch (e) { const ta = document.createElement("textarea"); ta.value = texto; document.body.appendChild(ta); ta.select(); document.execCommand("copy"); ta.remove(); done(); }
              }}>{copiadoGs ? "Copiado! ✅ agora é só colar no Apps Script" : "Copiar script pronto (Apps Script)"}</Btn>
            </div>
          </div>

          <Field label="Link do script (URL /exec)" hint="Cole aqui a URL gerada no passo 6">
            <input className="field" value={f.agenda.gasEndpoint} onChange={(e) => setAg("gasEndpoint", e.target.value.trim())} placeholder="https://script.google.com/macros/s/…/exec" />
          </Field>
          <Field label="Palavra-chave (token)" hint="Gerada automaticamente ao copiar o script — precisa ser a MESMA que está nele">
            <input className="field" value={f.agenda.gasToken} onChange={(e) => setAg("gasToken", e.target.value.trim())} placeholder="gerada ao copiar o script" />
          </Field>
        </div>
      </details>

      <div className="section-label"><span className="eyebrow">Termos (opcional)</span><span className="rule" /></div>
      <Field label='Como esta empresa chama um "Lead"?' hint='Ex.: uma clínica pode chamar de "Paciente"'>
        <input className="field" style={{ maxWidth: 280 }} value={f.termoLead} onChange={(e) => set("termoLead", e.target.value)} placeholder="Lead" />
      </Field>

      {err && <div className="form-err"><Icon name="alert" size={14} />{err}</div>}
    </Modal>
  );
}

window.ConfigScreen = ConfigScreen;