/* ============================================================
   CRM — conexão do WhatsApp e componentes compartilhados
   ============================================================ */
let crmMetaSdkPromise = null;

function loadCrmMetaSdk(appId, graphVersion) {
  if (window.FB) return Promise.resolve(window.FB);
  if (crmMetaSdkPromise) return crmMetaSdkPromise;
  crmMetaSdkPromise = new Promise((resolve, reject) => {
    const previousInit = window.fbAsyncInit;
    window.fbAsyncInit = function () {
      if (typeof previousInit === 'function') previousInit();
      window.FB.init({
        appId: String(appId),
        cookie: true,
        xfbml: false,
        version: String(graphVersion),
      });
      resolve(window.FB);
    };
    const existing = document.getElementById('facebook-jssdk');
    if (existing) {
      const timer = window.setInterval(() => {
        if (window.FB) {
          window.clearInterval(timer);
          resolve(window.FB);
        }
      }, 100);
      window.setTimeout(() => {
        window.clearInterval(timer);
        if (!window.FB) reject(new Error('Não foi possível abrir a conexão.'));
      }, 15000);
      return;
    }
    const script = document.createElement('script');
    script.id = 'facebook-jssdk';
    script.async = true;
    script.defer = true;
    script.crossOrigin = 'anonymous';
    script.src = 'https://connect.facebook.net/pt_BR/sdk.js';
    script.onerror = () => reject(new Error('Não foi possível abrir a conexão.'));
    document.head.appendChild(script);
  });
  return crmMetaSdkPromise;
}

function createEmbeddedSignupWaiter() {
  let cancel = () => {};
  const promise = new Promise((resolve, reject) => {
    let finished = false;
    const done = (fn, value) => {
      if (finished) return;
      finished = true;
      window.clearTimeout(timer);
      window.removeEventListener('message', handler);
      fn(value);
    };
    const handler = (event) => {
      let eventUrl;
      try { eventUrl = new URL(event.origin); } catch { return; }
      if (
        eventUrl.protocol !== 'https:'
        || (eventUrl.hostname !== 'facebook.com' && !eventUrl.hostname.endsWith('.facebook.com'))
      ) return;
      let message = event.data;
      if (typeof message === 'string') {
        try { message = JSON.parse(message); } catch { return; }
      }
      if (!message || message.type !== 'WA_EMBEDDED_SIGNUP') return;
      const finishEvents = [
        'FINISH',
        'FINISH_ONLY_WABA',
        'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING',
      ];
      if (finishEvents.includes(message.event)) {
        const data = message.data || {};
        done(resolve, {
          wabaId: String(data.waba_id || ''),
          phoneNumberId: String(data.phone_number_id || ''),
          businessId: String(data.business_id || ''),
        });
      } else if (message.event === 'CANCEL' || message.event === 'ERROR') {
        done(reject, new Error(message.event === 'CANCEL'
          ? 'A conexão foi cancelada.'
          : 'Não foi possível concluir a conexão.'));
      }
    };
    const timer = window.setTimeout(
      () => done(reject, new Error('A conexão expirou. Tente novamente.')),
      3 * 60 * 1000
    );
    cancel = () => done(resolve, null);
    window.addEventListener('message', handler);
  });
  return { promise, cancel: () => cancel() };
}

function crmMessageWhen(value) {
  if (!value) return '';
  const date = new Date(String(value).replace(' ', 'T'));
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleString('pt-BR', {
    day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
  });
}

const crmMessageStatusLabels = {
  pending: 'Pendente',
  sent: 'Enviada',
  delivered: 'Entregue',
  read: 'Lida',
  failed: 'Falhou',
  received: 'Recebida',
};

function CrmRequestDate(value) {
  if (!value) return '';
  const date = new Date(String(value).replace(' ', 'T'));
  if (Number.isNaN(date.getTime())) return '';
  return date.toLocaleString('pt-BR', {
    day: '2-digit', month: '2-digit', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  });
}

function CrmInactiveScreen({ user }) {
  const [requestedAt, setRequestedAt] = React.useState(user.crmActivationRequestedAt || '');
  const [requesting, setRequesting] = React.useState(false);
  const [error, setError] = React.useState('');
  const canRequest = user.role === 'admin' && user.isPrimaryAdmin;
  const isReactivation = ['suspended', 'cancelled'].includes(String(user.crmModuleStatus || ''));
  const formattedRequestDate = CrmRequestDate(requestedAt);

  React.useEffect(() => {
    if (user.crmActivationRequestedAt) setRequestedAt(user.crmActivationRequestedAt);
  }, [user.crmActivationRequestedAt]);

  const requestActivation = async () => {
    if (!canRequest || requesting || requestedAt) return;
    setRequesting(true);
    setError('');
    try {
      const result = await window.API.crm.requestActivation();
      setRequestedAt(result.requestedAt || new Date().toISOString());
    } catch (err) {
      setError(err && err.message
        ? err.message
        : 'Não foi possível enviar a solicitação. Tente novamente.');
    } finally {
      setRequesting(false);
    }
  };

  return (
    <div className="content-inner fadein crm-promo">
      <window.Header title="CRM" sub="Atendimento organizado, do primeiro contato ao agendamento" />

      <section className="crm-promo-hero">
        <div className="crm-promo-copy">
          <div className="crm-eyebrow">CRM integrado à Agenda</div>
          <h2>Transforme conversas em atendimento organizado</h2>
          <p>
            Reúna o WhatsApp da empresa em uma caixa de entrada compartilhada,
            distribua os atendimentos para sua equipe e mantenha cada conversa
            conectada ao histórico do cliente.
          </p>

          <div className="crm-promo-actions">
            {requestedAt ? (
              <div className="crm-promo-requested" role="status">
                <window.Icon name="check2" size={18} />
                <div>
                  <b>Solicitação enviada</b>
                  <span>
                    {formattedRequestDate
                      ? `Recebida em ${formattedRequestDate}. Nossa equipe entrará em contato.`
                      : 'Nossa equipe entrará em contato para concluir a ativação.'}
                  </span>
                </div>
              </div>
            ) : canRequest ? (
              <window.Button
                variant="primary"
                size="lg"
                iconRight="arrowRight"
                onClick={requestActivation}
                disabled={requesting}
              >
                {requesting
                  ? 'Enviando solicitação…'
                  : isReactivation ? 'Solicitar reativação do CRM' : 'Solicitar ativação do CRM'}
              </window.Button>
            ) : (
              <div className="crm-promo-admin-note">
                <window.Icon name="info" size={17} />
                Quer utilizar o CRM na sua empresa? Solicite agora mesmo a
                ativação. Nossa equipe entrará em contato para concluir a
                habilitação.
              </div>
            )}
          </div>

          {error && <div className="alert danger" role="alert">{error}</div>}
        </div>

        <div className="crm-promo-preview" aria-label="Exemplo da caixa de entrada do CRM">
          <div className="crm-promo-preview-head">
            <div>
              <span className="crm-promo-preview-dot"></span>
              <b>Caixa de entrada</b>
            </div>
            <span>3 atendimentos</span>
          </div>
          <div className="crm-promo-preview-row is-active">
            <window.Avatar initials="MS" size={36} color="green" />
            <div><b>Mariana Souza</b><span>Quero confirmar meu horário…</span></div>
            <small>Agora</small>
          </div>
          <div className="crm-promo-preview-row">
            <window.Avatar initials="RC" size={36} color="blue" />
            <div><b>Ricardo Costa</b><span>Qual o próximo horário livre?</span></div>
            <small>10:42</small>
          </div>
          <div className="crm-promo-preview-chat">
            <span>Atendimento atribuído a Ana</span>
            <div>Olá, Mariana! Seu horário está confirmado para amanhã às 14h.</div>
            <small>Enviado pelo WhatsApp Business</small>
          </div>
        </div>
      </section>

      <section className="crm-promo-features" aria-label="Recursos do CRM">
        <article className="crm-promo-feature">
          <div className="crm-promo-feature-icon"><window.Icon name="whatsapp" size={21} /></div>
          <div>
            <h3>WhatsApp compartilhado</h3>
            <p>Atenda pelo CRM sem retirar o número do WhatsApp Business usado no celular.</p>
          </div>
        </article>
        <article className="crm-promo-feature">
          <div className="crm-promo-feature-icon"><window.Icon name="users" size={21} /></div>
          <div>
            <h3>Equipe coordenada</h3>
            <p>Atribua responsáveis e acompanhe atendimentos abertos, pendentes ou resolvidos.</p>
          </div>
        </article>
        <article className="crm-promo-feature">
          <div className="crm-promo-feature-icon"><window.Icon name="calendar" size={21} /></div>
          <div>
            <h3>Cliente e agenda juntos</h3>
            <p>Vincule a conversa ao cadastro do cliente e consulte o próximo agendamento.</p>
          </div>
        </article>
      </section>

      <section className="crm-promo-flow">
        <div>
          <span>01</span>
          <b>Conecte</b>
          <p>Integre o número oficial da empresa.</p>
        </div>
        <window.Icon name="arrowRight" size={18} />
        <div>
          <span>02</span>
          <b>Distribua</b>
          <p>Organize quem atende cada conversa.</p>
        </div>
        <window.Icon name="arrowRight" size={18} />
        <div>
          <span>03</span>
          <b>Acompanhe</b>
          <p>Mantenha histórico e status de cada contato.</p>
        </div>
      </section>
    </div>
  );
}

function CrmActiveScreen({ user }) {
  const [payload, setPayload] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [notice, setNotice] = React.useState('');
  const [busyUserId, setBusyUserId] = React.useState(0);
  const [savedUserId, setSavedUserId] = React.useState(0);
  const [channelBusy, setChannelBusy] = React.useState('');
  const [messages, setMessages] = React.useState([]);
  const [messagesLoading, setMessagesLoading] = React.useState(false);
  const [messageBusy, setMessageBusy] = React.useState(false);
  const [messageTo, setMessageTo] = React.useState('');
  const [messageBody, setMessageBody] = React.useState('');
  const chatEndRef = React.useRef(null);

  const load = React.useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      setPayload(await window.API.crm.status());
    } catch (err) {
      setError('Não foi possível carregar o CRM.');
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);

  const refreshMessages = React.useCallback(async (silent = false) => {
    if (!silent) setMessagesLoading(true);
    try {
      const result = await window.API.crm.messages(100);
      setMessages(result.messages || []);
    } catch (err) {
      if (!silent) setError('Não foi possível carregar as mensagens.');
    } finally {
      if (!silent) setMessagesLoading(false);
    }
  }, []);

  const activeConnection = payload && payload.channels && payload.channels.whatsapp;
  const activeConnectionId = Number(activeConnection ? activeConnection.id : 0);
  const activeConnectionStatus = String(activeConnection ? activeConnection.status || '' : '');

  React.useEffect(() => {
    if (!activeConnectionId || activeConnectionStatus !== 'connected') {
      setMessages([]);
      return undefined;
    }
    refreshMessages();
    const timer = window.setInterval(() => refreshMessages(true), 5000);
    return () => window.clearInterval(timer);
  }, [activeConnectionId, activeConnectionStatus, refreshMessages]);

  React.useEffect(() => {
    if (chatEndRef.current) {
      const messageList = chatEndRef.current.parentElement;
      if (messageList) messageList.scrollTop = messageList.scrollHeight;
    }
  }, [messages.length]);

  const updateAccess = async (targetUserId, role) => {
    setBusyUserId(targetUserId);
    setSavedUserId(0);
    setError('');
    try {
      const result = await window.API.crm.setUserAccess(targetUserId, role);
      setPayload((current) => ({ ...(current || {}), users: result.users || [] }));
      setSavedUserId(targetUserId);
      window.setTimeout(() => setSavedUserId((current) => current === targetUserId ? 0 : current), 1800);
    } catch (err) {
      setError('Não foi possível alterar o acesso.');
    } finally {
      setBusyUserId(0);
    }
  };

  const connectWhatsApp = async () => {
    let signupWaiter = null;
    setChannelBusy('connect');
    setError('');
    setNotice('');
    try {
      const start = await window.API.crm.startOnboarding('whatsapp');
      const meta = start.meta || {};
      const onboarding = start.onboarding || {};
      const state = onboarding.state || '';
      const featureType = String(meta.embeddedSignupFeatureType || '');
      if (
        meta.keepsMobileNumber !== true
        || onboarding.keepsMobileNumber !== true
        || onboarding.featureType !== featureType
        || featureType !== 'whatsapp_business_app_onboarding'
      ) {
        throw new Error('Não foi possível iniciar a conexão.');
      }
      const FB = await loadCrmMetaSdk(meta.appId, meta.graphVersion);
      signupWaiter = createEmbeddedSignupWaiter();
      const login = await new Promise((resolve, reject) => {
        FB.login((response) => {
          const code = response && response.authResponse && response.authResponse.code;
          if (code) resolve(String(code));
          else reject(new Error('Não foi possível autorizar a conexão.'));
        }, {
          config_id: String(meta.configId),
          response_type: 'code',
          override_default_response_type: true,
          extras: {
            setup: {},
            featureType,
            sessionInfoVersion: '3',
          },
        });
      });
      const session = await signupWaiter.promise;
      if (!session) throw new Error('A conexão foi interrompida.');
      const result = await window.API.crm.completeOnboarding({ state, code: login, ...session });
      setPayload((current) => ({
        ...(current || {}),
        channels: { ...((current && current.channels) || {}), whatsapp: result.connection },
      }));
      setNotice('WhatsApp conectado. O número continua disponível no celular e também pode ser atendido pelo CRM.');
    } catch (err) {
      if (signupWaiter) signupWaiter.cancel();
      setError('Não foi possível conectar o WhatsApp. Tente novamente ou entre em contato com o suporte.');
    } finally {
      setChannelBusy('');
    }
  };

  const verifyWhatsApp = async () => {
    setChannelBusy('verify');
    setError('');
    setNotice('');
    try {
      const result = await window.API.crm.verifyChannel();
      setPayload((current) => ({
        ...(current || {}),
        channels: { ...((current && current.channels) || {}), whatsapp: result.connection },
      }));
      setNotice('Conexão verificada com sucesso.');
    } catch (err) {
      setError('Não foi possível verificar a conexão. Tente novamente.');
    } finally {
      setChannelBusy('');
    }
  };

  const disconnectWhatsApp = async () => {
    const question = whatsappCoexistence
      ? 'Desconectar este número do CRM? Ele continuará disponível no WhatsApp Business do celular.'
      : 'Desconectar este número do CRM?';
    if (!window.confirm(question)) return;
    setChannelBusy('disconnect');
    setError('');
    setNotice('');
    try {
      const result = await window.API.crm.disconnectChannel();
      setPayload((current) => ({
        ...(current || {}),
        channels: { ...((current && current.channels) || {}), whatsapp: result.connection },
      }));
      setNotice('WhatsApp desconectado do CRM.');
    } catch (err) {
      setError('Não foi possível desconectar o WhatsApp. Tente novamente.');
    } finally {
      setChannelBusy('');
    }
  };

  const sendOfficialMessage = async (event) => {
    event.preventDefault();
    setMessageBusy(true);
    setError('');
    setNotice('');
    try {
      const result = await window.API.crm.sendMessage(messageTo, messageBody);
      if (result.message) {
        setMessages((current) => [
          ...current.filter((item) => item.id !== result.message.id),
          result.message,
        ]);
      }
      setMessageBody('');
      setNotice('Mensagem enviada pelo WhatsApp.');
      window.setTimeout(() => refreshMessages(true), 1200);
    } catch (err) {
      setError('Não foi possível enviar a mensagem.');
    } finally {
      setMessageBusy(false);
    }
  };

  if (loading) {
    return (
      <div className="content-inner fadein">
        <window.Header title="CRM Multicanal" sub="Relacionamento e atendimento em um só lugar" />
        <div className="card card-pad"><div className="muted">Carregando módulo…</div></div>
      </div>
    );
  }

  if (error && !payload) {
    return (
      <div className="content-inner fadein">
        <window.Header title="CRM Multicanal" sub="Relacionamento e atendimento em um só lugar" />
        <div className="card card-pad">
          <window.Empty icon="info" title="CRM indisponível" desc={error} />
          <div className="row" style={{ justifyContent: 'center', marginTop: 16 }}>
            <window.Button variant="outline" icon="refresh" onClick={load}>Tentar novamente</window.Button>
          </div>
        </div>
      </div>
    );
  }

  const crm = (payload && payload.crm) || {};
  const access = crm.access || user.crmAccess || {};
  const users = (payload && payload.users) || [];
  const whatsapp = payload && payload.channels && payload.channels.whatsapp;
  const whatsappConnected = whatsapp && whatsapp.status === 'connected';
  const whatsappCoexistence = whatsappConnected && whatsapp.keepsMobileNumber === true;
  const channelSetupReady = !!crm.channelsReady;
  const roleLabels = { admin: 'Administrador', manager: 'Gerente', agent: 'Atendente' };
  const statusLabels = { trialing: 'Período de teste', active: 'Ativo', grace: 'Período de carência' };

  return (
    <div className="content-inner fadein crm-foundation">
      <window.Header title="CRM Multicanal" sub="Relacionamento e atendimento em um só lugar" />

      {error && <div className="alert danger" role="alert" style={{ marginBottom: 16 }}>{error}</div>}
      {notice && <div className="alert success" role="status" style={{ marginBottom: 16 }}>{notice}</div>}

      <section className="crm-foundation-hero">
        <div>
          <div className="crm-eyebrow">Atendimento</div>
          <h2>WhatsApp no celular e no CRM</h2>
          <p>O mesmo número permanece no WhatsApp Business do celular e passa a atender também por esta plataforma.</p>
        </div>
        <div className="crm-status-card">
          <span className="crm-status-dot" aria-hidden="true"></span>
          <div>
            <b>{statusLabels[crm.status] || 'Ativo'}</b>
            <span>Seu acesso: {roleLabels[access.role] || 'Atendente'}</span>
          </div>
        </div>
      </section>

      <section className="crm-channel-grid" aria-label="Canais do CRM">
        <div className="card card-pad crm-channel-card crm-channel-card-featured">
          <div className="crm-channel-icon"><window.Icon name="whatsapp" size={21} /></div>
          <div>
            <b>WhatsApp Business</b>
            <span>{whatsappConnected
              ? `${whatsapp.displayName || 'Conta conectada'} · ${whatsapp.displayPhoneNumber || 'número conectado'}${whatsappCoexistence ? ' · Celular + CRM' : ''}`
              : 'Mesmo número no aplicativo e no CRM'}</span>
          </div>
          <span className={`pill ${whatsappConnected ? 'ok' : whatsapp && whatsapp.status === 'error' ? 'bad' : 'seg'}`}>
            {whatsappConnected ? 'Conectado' : whatsapp && whatsapp.status === 'error' ? 'Requer atenção' : 'Não conectado'}
          </span>
          {access.manageChannels && (
            <div className="crm-channel-actions">
              {whatsappConnected ? (
                <>
                  <window.Button variant="outline" onClick={verifyWhatsApp} disabled={!!channelBusy}>
                    {channelBusy === 'verify' ? 'Verificando…' : 'Verificar'}
                  </window.Button>
                  <window.Button variant="outline" onClick={disconnectWhatsApp} disabled={!!channelBusy}>
                    {channelBusy === 'disconnect' ? 'Desconectando…' : 'Desconectar'}
                  </window.Button>
                </>
              ) : (
                <window.Button onClick={connectWhatsApp} disabled={!channelSetupReady || !!channelBusy}>
                  {channelBusy === 'connect' ? 'Abrindo conexão…' : 'Conectar WhatsApp'}
                </window.Button>
              )}
            </div>
          )}
          <div className="crm-channel-requirements">
            <b>Como funciona:</b> use um número ativo no aplicativo WhatsApp Business atualizado. A conexão não remove o número do celular.
          </div>
          {whatsappConnected && !whatsappCoexistence && (
            <div className="crm-channel-error">
              Esta conexão precisa ser refeita para manter o mesmo número no celular e no CRM.
            </div>
          )}
          {!channelSetupReady && access.manageChannels && (
            <div className="crm-channel-requirements">
              A conexão do WhatsApp está temporariamente indisponível. Entre em contato com o suporte.
            </div>
          )}
        </div>
      </section>

      {whatsappConnected && (
        <section className="card card-pad crm-official-chat">
          <div className="crm-section-head">
            <div>
              <h3>Conversas do WhatsApp</h3>
              <p>Receba e responda mensagens de atendimento em um só lugar.</p>
            </div>
            <div className="row wrap">
              <window.Button
                variant="outline"
                size="sm"
                icon="refresh"
                onClick={() => refreshMessages()}
                disabled={messagesLoading}
              >
                {messagesLoading ? 'Atualizando…' : 'Atualizar'}
              </window.Button>
            </div>
          </div>

          <div className="crm-chat-layout">
            <div className="crm-message-list" aria-live="polite" aria-label="Histórico de mensagens oficiais">
              {messagesLoading && messages.length === 0 ? (
                <div className="crm-chat-empty">Carregando mensagens…</div>
              ) : messages.length === 0 ? (
                <div className="crm-chat-empty">
                  <b>Nenhuma mensagem registrada</b>
                  <span>Novas mensagens aparecerão aqui.</span>
                </div>
              ) : messages.map((message) => (
                <article
                  className={`crm-message crm-message-${message.direction === 'outbound' ? 'out' : 'in'}`}
                  key={message.id}
                >
                  <div className="crm-message-meta">
                    <b>{message.direction === 'outbound'
                      ? (window.APP_BRAND_NAME || 'DEL AGENDA')
                      : (message.counterpartName || message.counterpartPhone || 'Cliente')}</b>
                    <span>{crmMessageWhen(message.providerTimestamp || message.createdAt)}</span>
                  </div>
                  <div className="crm-message-body">{message.body}</div>
                  <div className={`crm-message-status ${message.status === 'failed' ? 'is-error' : ''}`}>
                    {crmMessageStatusLabels[message.status] || message.status}
                  </div>
                </article>
              ))}
              <div ref={chatEndRef}></div>
            </div>

            <form className="crm-message-composer" onSubmit={sendOfficialMessage}>
              <div>
                <h4>Enviar mensagem de atendimento</h4>
                <p>
                  Informe o telefone com país e DDD. Em produção, texto livre só é permitido dentro da janela de atendimento de 24 horas.
                </p>
              </div>
              <window.Field label="Destinatário">
                <window.Input
                  value={messageTo}
                  inputMode="tel"
                  autoComplete="tel"
                  placeholder="Ex.: +55 67 99999-9999"
                  maxLength={24}
                  onChange={(event) => setMessageTo(event.target.value)}
                  required
                />
              </window.Field>
              <window.Field label="Mensagem">
                <window.Textarea
                  value={messageBody}
                  rows={5}
                  maxLength={4096}
                  placeholder="Digite uma mensagem relacionada ao atendimento ou agendamento."
                  onChange={(event) => setMessageBody(event.target.value)}
                  required
                />
              </window.Field>
              <div className="crm-composer-foot">
                <span>{messageBody.length}/4096</span>
                <window.Button type="submit" icon="send" disabled={messageBusy || !messageTo.trim() || !messageBody.trim()}>
                  {messageBusy ? 'Enviando…' : 'Enviar pelo WhatsApp'}
                </window.Button>
              </div>
              <div className="crm-channel-requirements">
                Use somente em atendimentos esperados ou autorizados. Fora da janela de 24 horas, utilize uma mensagem previamente aprovada.
              </div>
            </form>
          </div>
        </section>
      )}

      {access.manageUsers && (
        <section className="card card-pad crm-access-card">
          <div className="crm-section-head">
            <div>
              <h3>Acessos ao CRM</h3>
              <p>Esses papéis controlam somente o CRM e não alteram as permissões da Agenda.</p>
            </div>
            <span className="pill ok">{users.filter((item) => item.crmEnabled).length} com acesso</span>
          </div>

          <div className="crm-access-list">
            {users.map((item) => (
              <div className="crm-access-row" key={item.id}>
                <window.Avatar initials={(item.name || item.login || 'U').slice(0, 2).toUpperCase()} size={34} color="gray" />
                <div className="crm-access-person">
                  <b>{item.name || item.login}</b>
                  <span>{item.login} · {item.agendaRole === 'admin' ? 'Administrador da Agenda' : 'Usuário da Agenda'}</span>
                </div>
                <div className="crm-access-control">
                  <window.Select
                    aria-label={`Acesso de ${item.name || item.login}`}
                    value={item.crmEnabled ? item.crmRole : ''}
                    disabled={item.isPrimaryAdmin || busyUserId === item.id || item.status !== 'ativo'}
                    onChange={(event) => updateAccess(item.id, event.target.value)}
                  >
                    <option value="">Sem acesso</option>
                    <option value="agent">Atendente</option>
                    <option value="manager">Gerente</option>
                    <option value="admin">Administrador</option>
                  </window.Select>
                  {item.isPrimaryAdmin && <span className="crm-access-note">Acesso obrigatório</span>}
                  {busyUserId === item.id && <span className="crm-access-note">Salvando…</span>}
                  {savedUserId === item.id && <span className="crm-access-note success">Salvo</span>}
                </div>
              </div>
            ))}
          </div>
        </section>
      )}
    </div>
  );
}

function CrmScreen(props) {
  return props.user && props.user.hasCrm
    ? <CrmActiveScreen {...props} />
    : <CrmInactiveScreen {...props} />;
}

Object.assign(window, {
  CrmScreen,
  CrmInactiveScreen,
  loadCrmMetaSdk,
  createEmbeddedSignupWaiter,
});