/* CRM — caixa de entrada operacional. */

const {
  crmInboxAppointmentDate,
  crmInboxPhone,
  crmInboxContactName,
  crmInboxInitials,
  crmInboxStatusLabels,
  crmInboxRoleLabels,
  crmInboxArrangeMessages,
  crmInboxReplyPreview,
  CrmConversationItem,
  CrmKanbanCard,
  CrmMessageBubble,
  CrmNewConversationModal,
} = window.CrmInboxParts;

function crmInboxFriendlyError(error, fallback) {
  const status = Number(error && error.status);
  const raw = String((error && error.message) || '');
  if (status === 403) {
    return 'Você não tem permissão para realizar esta ação.';
  }
  if (/24 horas|modelo aprovado/i.test(raw)) {
    return 'Para enviar uma mensagem livre, o cliente precisa ter iniciado a conversa nas últimas 24 horas. Fora desse período, use uma mensagem previamente aprovada.';
  }
  if (/Aguarde um minuto/i.test(raw)) {
    return 'Aguarde um minuto antes de enviar novas mensagens.';
  }
  if (/telefone|número/i.test(raw) && /DDD|país|válid|inválid/i.test(raw)) {
    return 'Confira o número do WhatsApp, incluindo país e DDD.';
  }
  if (/Áudios não aceitam legenda|nome do atendente|Digite uma mensagem/i.test(raw)) {
    return raw;
  }
  if (/Meta|modelo|arquivo|mídia|cabeçalho|destinatário|autorização do canal/i.test(raw)) {
    return raw;
  }
  return fallback;
}

function CrmInboxScreen({ user }) {
  const [payload, setPayload] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [notice, setNotice] = React.useState('');
  const [channelBusy, setChannelBusy] = React.useState('');
  const [settingsOpen, setSettingsOpen] = React.useState(false);
  const [accessOpen, setAccessOpen] = React.useState(false);
  const [settingsView, setSettingsView] = React.useState(false);
  const [workspaceView, setWorkspaceView] = React.useState('inbox');
  const [dashboardData, setDashboardData] = React.useState(null);
  const [dashboardLoading, setDashboardLoading] = React.useState(false);
  const [salesData, setSalesData] = React.useState({ pipelines: [], pipelineId: 0, stages: [], deals: [] });
  const [salesLoading, setSalesLoading] = React.useState(false);
  const [salesBusy, setSalesBusy] = React.useState(false);
  const [pipelineNameDraft, setPipelineNameDraft] = React.useState('');
  const [dealDraft, setDealDraft] = React.useState({ title: '', value: '', stageId: '' });
  const [growthData, setGrowthData] = React.useState({ campaigns: [], automations: [], flows: [], ai: null });
  const [growthLoading, setGrowthLoading] = React.useState(false);
  const [growthBusy, setGrowthBusy] = React.useState(false);
  const [campaignTemplatesError, setCampaignTemplatesError] = React.useState('');
  const [campaignDraft, setCampaignDraft] = React.useState({ name: '', templateKey: '', tagId: '' });
  const [automationDraft, setAutomationDraft] = React.useState({ name: '', triggerType: 'message_received', keyword: '', actionType: 'internal_note', actionValue: '', tagId: '', assignedUserId: '', status: 'pending' });
  const [flowDraft, setFlowDraft] = React.useState({ name: '', triggerKeyword: '', message: '' });
  const [aiDraft, setAiDraft] = React.useState({ model: '', mode: 'off', systemPrompt: '', apiKey: '', knowledgeTitle: '', knowledgeContent: '' });
  const [busyUserId, setBusyUserId] = React.useState(0);
  const [savedUserId, setSavedUserId] = React.useState(0);

  const [conversations, setConversations] = React.useState([]);
  const [counts, setCounts] = React.useState({ all: 0, open: 0, pending: 0, resolved: 0, unread: 0, awaiting: 0 });
  const [conversationLoading, setConversationLoading] = React.useState(false);
  const [filter, setFilter] = React.useState('all');
  const [assignedFilter, setAssignedFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [selectedId, setSelectedId] = React.useState(0);
  const [selectedConversation, setSelectedConversation] = React.useState(null);
  const [messages, setMessages] = React.useState([]);
  const [threadLoading, setThreadLoading] = React.useState(false);
  const [conversationBusy, setConversationBusy] = React.useState(false);
  const [messageBody, setMessageBody] = React.useState('');
  const [messageBusy, setMessageBusy] = React.useState(false);
  const [sendChannel, setSendChannel] = React.useState(() => window.localStorage.getItem('crmSendChannel') === 'web' ? 'web' : 'official');
  const [aiSuggestBusy, setAiSuggestBusy] = React.useState(false);
  const [attachment, setAttachment] = React.useState(null);
  const [replyingTo, setReplyingTo] = React.useState(null);
  const [senderEditorOpen, setSenderEditorOpen] = React.useState(false);
  const [senderNameDraft, setSenderNameDraft] = React.useState('');
  const [senderIdentityBusy, setSenderIdentityBusy] = React.useState(false);
  const [contextOpen, setContextOpen] = React.useState(false);
  const [inboxView, setInboxView] = React.useState(() => window.localStorage.getItem('crmInboxView') === 'board' ? 'board' : 'list');
  const [boardBusyId, setBoardBusyId] = React.useState(0);
  const [boardBulkBusy, setBoardBulkBusy] = React.useState(false);
  const [boardDragId, setBoardDragId] = React.useState(0);
  const [boardDropStatus, setBoardDropStatus] = React.useState('');
  const [boardSearches, setBoardSearches] = React.useState({ awaiting: '', open: '', pending: '', resolved: '' });
  const [boardSelected, setBoardSelected] = React.useState({ awaiting: [], open: [], pending: [], resolved: [] });
  const [boardBulkStatus, setBoardBulkStatus] = React.useState({ awaiting: 'open', open: 'pending', pending: 'resolved', resolved: 'open' });
  const [hideOldResolved, setHideOldResolved] = React.useState(() => window.localStorage.getItem('crmHideOldResolved') !== '0');
  const messageViewportRef = React.useRef(null);
  const attachmentInputRef = React.useRef(null);
  const messageSendingRef = React.useRef(false);

  const [newConversationOpen, setNewConversationOpen] = React.useState(false);
  const [contactQuery, setContactQuery] = React.useState('');
  const [contacts, setContacts] = React.useState([]);
  const [contactsLoading, setContactsLoading] = React.useState(false);
  const [directoryQuery, setDirectoryQuery] = React.useState('');
  const [directoryContacts, setDirectoryContacts] = React.useState([]);
  const [directoryLoading, setDirectoryLoading] = React.useState(false);
  const [contactEditor, setContactEditor] = React.useState(null);
  const [contactSaving, setContactSaving] = React.useState(false);
  const [contactSync, setContactSync] = React.useState({ session: null, job: null });
  const [contactSyncBusy, setContactSyncBusy] = React.useState(false);
  const contactSyncCompletionRef = React.useRef(0);
  const [newPhone, setNewPhone] = React.useState('');
  const [newBusy, setNewBusy] = React.useState(false);
  const [newConversationError, setNewConversationError] = React.useState('');
  const [templates, setTemplates] = React.useState([]);
  const [templatesLoading, setTemplatesLoading] = React.useState(false);
  const [templateKey, setTemplateKey] = React.useState('');
  const [templateParameters, setTemplateParameters] = React.useState({});
  const [templateMedia, setTemplateMedia] = React.useState(null);
  const [quickReplies, setQuickReplies] = React.useState([]);
  const [quickReplyTitle, setQuickReplyTitle] = React.useState('');
  const [quickReplyBody, setQuickReplyBody] = React.useState('');
  const [quickReplyBusy, setQuickReplyBusy] = React.useState(false);
  const [conversationContext, setConversationContext] = React.useState({ tags: [], selectedTagIds: [], notes: [] });
  const [contextBusy, setContextBusy] = React.useState(false);
  const [noteDraft, setNoteDraft] = React.useState('');
  const [tagNameDraft, setTagNameDraft] = React.useState('');
  const [tagColorDraft, setTagColorDraft] = React.useState('#6366f1');
  const [crmTags, setCrmTags] = React.useState([]);

  React.useEffect(() => {
    const navigate = (event) => {
      const target = String((event.detail && event.detail.target) || 'inbox');
      setError('');
      setNotice('');
      if (target === 'settings' || target === 'team' || target === 'channel') {
        setSettingsView(true);
        setSettingsOpen(target === 'settings' || target === 'channel');
        setAccessOpen(target === 'settings' || target === 'team');
        const selector = target === 'team' ? '.crm-access-collapsible' : '.crm-channel-settings';
        window.setTimeout(() => document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 0);
        return;
      }
      setSettingsView(false);
      setSettingsOpen(false);
      if (target === 'overview') {
        setWorkspaceView('overview');
        return;
      }
      if (target === 'deals') {
        setWorkspaceView('deals');
        return;
      }
      if (['campaigns', 'automations', 'flows', 'ai'].includes(target)) {
        setWorkspaceView(target);
        return;
      }
      if (target === 'contacts') {
        setWorkspaceView('contacts');
        return;
      }
      setWorkspaceView('inbox');
      window.setTimeout(() => document.querySelector('.crm-inbox-shell')?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 0);
    };
    window.addEventListener('crm:navigate', navigate);
    return () => window.removeEventListener('crm:navigate', navigate);
  }, []);

  const crm = (payload && payload.crm) || {};
  const senderIdentity = crm.senderIdentity || {};
  const senderDisplayName = senderIdentity.displayName || user.crmDisplayName || user.name || user.login || 'Atendimento';
  const messageMaxLength = Math.max(1, (attachment ? 1024 : 4096) - String(senderDisplayName).length - 4);
  const access = crm.access || user.crmAccess || {};
  const users = (payload && payload.users) || [];
  const assignees = (payload && payload.assignees) || [];
  const whatsapp = payload && payload.channels && payload.channels.whatsapp;
  const whatsappConnected = !!(whatsapp && whatsapp.status === 'connected');
  const whatsappWeb = payload && payload.channels && payload.channels.whatsappWeb;
  const whatsappWebReady = !!(whatsappWeb && whatsappWeb.ready);
  const whatsappCoexistence = whatsappConnected && whatsapp.keepsMobileNumber === true;
  const channelSetupReady = !!crm.channelsReady;
  const connectionId = Number(whatsapp ? whatsapp.id : 0);
  const enabledUsersCount = users.filter((item) => item.crmEnabled).length;
  const arrangedMessages = React.useMemo(() => crmInboxArrangeMessages(messages), [messages]);
  const messagesByProviderId = React.useMemo(() => {
    const index = new Map();
    messages.forEach((message) => {
      if (message.providerMessageId) index.set(message.providerMessageId, message);
    });
    return index;
  }, [messages]);
  const boardColumns = React.useMemo(() => {
    const columns = { awaiting: [], open: [], pending: [], resolved: [] };
    conversations.forEach((conversation) => {
      if (conversation.status === 'resolved') columns.resolved.push(conversation);
      else if (conversation.status === 'pending') columns.pending.push(conversation);
      else if (conversation.lastMessageDirection === 'inbound') columns.awaiting.push(conversation);
      else columns.open.push(conversation);
    });
    return columns;
  }, [conversations]);
  const visibleBoardColumns = React.useMemo(() => {
    const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
    return Object.keys(boardColumns).reduce((result, key) => {
      const query = String(boardSearches[key] || '').trim().toLocaleLowerCase('pt-BR');
      result[key] = boardColumns[key].filter((conversation) => {
        if (key === 'resolved' && hideOldResolved) {
          const resolvedTime = Date.parse(conversation.resolvedAt || conversation.updatedAt || '');
          if (Number.isFinite(resolvedTime) && resolvedTime < sevenDaysAgo) return false;
        }
        if (!query) return true;
        const searchable = [
          conversation.displayName,
          conversation.counterpartName,
          conversation.counterpartPhone,
          conversation.lastMessagePreview,
          conversation.client && conversation.client.email,
          conversation.crmContact && conversation.crmContact.email,
          conversation.assignedUser && conversation.assignedUser.name,
        ].filter(Boolean).join(' ').toLocaleLowerCase('pt-BR');
        return searchable.includes(query);
      });
      return result;
    }, {});
  }, [boardColumns, boardSearches, hideOldResolved]);

  React.useEffect(() => {
    setBoardSelected((current) => Object.keys(current).reduce((result, key) => {
      const visibleIds = new Set((visibleBoardColumns[key] || []).map((item) => Number(item.id)));
      result[key] = current[key].filter((id) => visibleIds.has(Number(id)));
      return result;
    }, {}));
  }, [visibleBoardColumns]);

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

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

  const loadDashboard = React.useCallback(async () => {
    setDashboardLoading(true);
    try {
      setDashboardData(await window.API.crm.dashboard());
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível carregar os indicadores do CRM.'));
    } finally {
      setDashboardLoading(false);
    }
  }, []);

  React.useEffect(() => {
    if (workspaceView === 'overview') loadDashboard();
  }, [workspaceView, loadDashboard]);

  const loadSales = React.useCallback(async (pipelineId = 0) => {
    setSalesLoading(true);
    try {
      const result = await window.API.crm.sales(pipelineId);
      setSalesData({
        pipelines: result.pipelines || [],
        pipelineId: Number(result.pipelineId || 0),
        stages: result.stages || [],
        deals: result.deals || [],
      });
      setDealDraft((current) => {
        const stages = result.stages || [];
        const validCurrent = stages.some((stage) => Number(stage.id) === Number(current.stageId));
        return { ...current, stageId: String(validCurrent ? current.stageId : (stages[0] ? stages[0].id : '')) };
      });
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível carregar o funil de vendas.'));
    } finally {
      setSalesLoading(false);
    }
  }, []);

  React.useEffect(() => {
    if (workspaceView === 'deals') loadSales();
  }, [workspaceView, loadSales]);

  const createPipeline = async () => {
    if (!pipelineNameDraft.trim() || salesBusy) return;
    setSalesBusy(true);
    try {
      const result = await window.API.crm.createPipeline(pipelineNameDraft.trim());
      setPipelineNameDraft('');
      await loadSales(Number(result.pipelineId || 0));
      setNotice('Funil criado com as etapas iniciais.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível criar o funil.'));
    } finally {
      setSalesBusy(false);
    }
  };

  const createDeal = async () => {
    if (!dealDraft.title.trim() || !salesData.pipelineId || !dealDraft.stageId || salesBusy) return;
    setSalesBusy(true);
    try {
      await window.API.crm.createDeal({ pipelineId: salesData.pipelineId, stageId: Number(dealDraft.stageId), title: dealDraft.title.trim(), value: Number(String(dealDraft.value || '0').replace(',', '.')) || 0 });
      setDealDraft((current) => ({ ...current, title: '', value: '' }));
      await loadSales(salesData.pipelineId);
      setNotice('Oportunidade adicionada ao funil.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível criar a oportunidade.'));
    } finally {
      setSalesBusy(false);
    }
  };

  const updateDeal = async (deal, changes) => {
    if (salesBusy) return;
    setSalesBusy(true);
    try {
      await window.API.crm.updateDeal(deal.id, changes);
      await loadSales(salesData.pipelineId);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível atualizar a oportunidade.'));
    } finally {
      setSalesBusy(false);
    }
  };

  const removeDeal = async (deal) => {
    if (!deal || salesBusy || !window.confirm(`Excluir a oportunidade “${deal.title}”?`)) return;
    setSalesBusy(true);
    try { await window.API.crm.removeDeal(deal.id); await loadSales(salesData.pipelineId); }
    catch (err) { setError(crmInboxFriendlyError(err, 'Não foi possível excluir a oportunidade.')); }
    finally { setSalesBusy(false); }
  };

  const loadGrowthView = React.useCallback(async (view) => {
    setGrowthLoading(true);
    setError('');
    try {
      if (view === 'campaigns') {
        const campaignsResult = await window.API.crm.campaigns();
        setGrowthData((current) => ({ ...current, campaigns: campaignsResult.campaigns || [] }));
        setCampaignTemplatesError('');
        try {
          const templateResult = await window.API.crm.messageTemplates();
          setTemplates(templateResult.templates || []);
        } catch (templateError) {
          setTemplates([]);
          setCampaignTemplatesError(crmInboxFriendlyError(templateError, 'Os modelos aprovados do WhatsApp estão indisponíveis. Revise a configuração segura do canal antes de criar uma campanha.'));
        }
      } else if (view === 'automations') {
        const result = await window.API.crm.automations(); setGrowthData((current) => ({ ...current, automations: result.automations || [] }));
      } else if (view === 'flows') {
        const result = await window.API.crm.flows(); setGrowthData((current) => ({ ...current, flows: result.flows || [] }));
      } else if (view === 'ai') {
        const result = await window.API.crm.ai();
        setGrowthData((current) => ({ ...current, ai: result }));
        setAiDraft((current) => ({ ...current, model: result.settings.model || '', mode: result.settings.mode || 'off', systemPrompt: result.settings.system_prompt || '', apiKey: '' }));
      }
    } catch (err) { setError(crmInboxFriendlyError(err, 'Não foi possível carregar este módulo.')); }
    finally { setGrowthLoading(false); }
  }, []);

  React.useEffect(() => {
    if (['campaigns', 'automations', 'flows', 'ai'].includes(workspaceView)) loadGrowthView(workspaceView);
  }, [workspaceView, loadGrowthView]);

  const submitGrowth = async (kind, row = null) => {
    if (growthBusy) return;
    if (kind.endsWith('_delete') && (!row || !window.confirm(`Excluir “${row.name || row.title}”?`))) return;
    setGrowthBusy(true);
    try {
      if (kind === 'campaign') {
        const selected = templates.find((item) => `${item.name}|${item.language}` === campaignDraft.templateKey);
        if (!campaignDraft.name.trim() || !selected) throw new Error('Informe o nome e selecione um modelo aprovado.');
        await window.API.crm.createCampaign({ name: campaignDraft.name.trim(), templateName: selected.name, language: selected.language, tagId: Number(campaignDraft.tagId || 0) });
        setCampaignDraft({ name: '', templateKey: '', tagId: '' });
      } else if (kind === 'queue') await window.API.crm.queueCampaign(row.id);
      else if (kind === 'campaign_delete') await window.API.crm.removeCampaign(row.id);
      else if (kind === 'automation') {
        const action = automationDraft.actionType === 'add_tag' ? { type: 'add_tag', tagId: Number(automationDraft.tagId) }
          : automationDraft.actionType === 'assign_user' ? { type: 'assign_user', userId: Number(automationDraft.assignedUserId) }
          : automationDraft.actionType === 'set_status' ? { type: 'set_status', status: automationDraft.status }
          : { type: automationDraft.actionType, body: automationDraft.actionValue.trim() };
        await window.API.crm.createAutomation({ name: automationDraft.name.trim(), triggerType: automationDraft.triggerType, conditions: automationDraft.keyword.trim() ? [{ type: 'message_contains', value: automationDraft.keyword.trim() }] : [], actions: [action], active: false });
        setAutomationDraft({ name: '', triggerType: 'message_received', keyword: '', actionType: 'internal_note', actionValue: '', tagId: '', assignedUserId: '', status: 'pending' });
      } else if (kind === 'automation_toggle') await window.API.crm.updateAutomation(row.id, { active: !Number(row.active) });
      else if (kind === 'automation_delete') await window.API.crm.removeAutomation(row.id);
      else if (kind === 'flow') {
        await window.API.crm.createFlow({ name: flowDraft.name.trim(), triggerKeyword: flowDraft.triggerKeyword.trim(), nodes: [{ type: 'message', text: flowDraft.message.trim() }], active: false });
        setFlowDraft({ name: '', triggerKeyword: '', message: '' });
      } else if (kind === 'flow_toggle') await window.API.crm.updateFlow(row.id, { active: !Number(row.active) });
      else if (kind === 'flow_delete') await window.API.crm.removeFlow(row.id);
      else if (kind === 'ai_settings') await window.API.crm.saveAiSettings({ model: aiDraft.model.trim(), mode: aiDraft.mode, systemPrompt: aiDraft.systemPrompt.trim(), apiKey: aiDraft.apiKey.trim() });
      else if (kind === 'knowledge') {
        await window.API.crm.createAiKnowledge({ title: aiDraft.knowledgeTitle.trim(), content: aiDraft.knowledgeContent.trim() });
        setAiDraft((current) => ({ ...current, knowledgeTitle: '', knowledgeContent: '' }));
      }
      else if (kind === 'knowledge_delete') await window.API.crm.removeAiKnowledge(row.id);
      await loadGrowthView(workspaceView); setNotice('Alteração salva.');
    } catch (err) { setError(crmInboxFriendlyError(err, err.message || 'Não foi possível salvar.')); }
    finally { setGrowthBusy(false); }
  };

  const saveDirectoryContact = async () => {
    if (!contactEditor || contactSaving) return;
    setContactSaving(true); setError('');
    try {
      await window.API.crm.saveContact(contactEditor);
      setNotice(contactEditor.scope === 'agenda' ? 'Cliente incluído na Agenda e no CRM.' : 'Contato incluído somente no CRM.');
      setContactEditor(null);
      const result = await window.API.crm.contacts(directoryQuery, 50);
      setDirectoryContacts(result.contacts || []);
      await loadConversations();
      if (selectedId) await loadConversation(selectedId, false, true);
    } catch (err) { setError(crmInboxFriendlyError(err, 'Não foi possível salvar o contato.')); }
    finally { setContactSaving(false); }
  };

  const beginConversationContact = () => {
    if (!currentConversation) return;
    setContactEditor({
      key: `conversation:${currentConversation.id}`,
      name: (currentConversation.crmContact && currentConversation.crmContact.name) || currentContactName || '',
      phone: currentConversation.counterpartPhone || '',
      email: (currentConversation.crmContact && currentConversation.crmContact.email) || '',
      scope: currentConversation.crmContact ? 'agenda' : 'crm',
    });
    setContextOpen(true);
  };

  const loadQuickReplies = React.useCallback(async () => {
    try {
      const result = await window.API.crm.quickReplies();
      setQuickReplies(result.quickReplies || []);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível carregar as respostas rápidas.'));
    }
  }, []);

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

  const loadCrmTags = React.useCallback(async () => {
    try {
      const result = await window.API.crm.tags();
      setCrmTags(result.tags || []);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível carregar as etiquetas.'));
    }
  }, []);

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

  React.useEffect(() => {
    if (workspaceView !== 'contacts') return undefined;
    let active = true;
    const timer = window.setTimeout(async () => {
      setDirectoryLoading(true);
      setError('');
      try {
        const result = await window.API.crm.contacts(directoryQuery, 50);
        if (active) setDirectoryContacts(result.contacts || []);
      } catch (err) {
        if (active) setError(crmInboxFriendlyError(err, 'Não foi possível carregar os contatos.'));
      } finally {
        if (active) setDirectoryLoading(false);
      }
    }, directoryQuery.trim() ? 220 : 0);
    return () => { active = false; window.clearTimeout(timer); };
  }, [workspaceView, directoryQuery]);

  React.useEffect(() => {
    if (workspaceView !== 'contacts') return undefined;
    let active=true;
    const refresh=async()=>{ try { const result=await window.API.crm.contactSyncStatus(); if (!active) return; setContactSync(result); const job=result.job; if (job && job.status==='completed' && contactSyncCompletionRef.current!==Number(job.id)) { contactSyncCompletionRef.current=Number(job.id); const contactsResult=await window.API.crm.contacts(directoryQuery,50); if (active) { setDirectoryContacts(contactsResult.contacts||[]); setNotice(`${job.imported_count || 0} contatos sincronizados; ${job.photo_count || 0} fotos encontradas.`); } } } catch (_) {} };
    refresh(); const timer=window.setInterval(refresh,3000); return()=>{active=false;window.clearInterval(timer);};
  }, [workspaceView, directoryQuery]);

  const startContactSync = async () => {
    if (contactSyncBusy) return; setContactSyncBusy(true); setError('');
    try { await window.API.crm.syncContacts(); setNotice('Sincronização solicitada. A sessão por QR fará somente a leitura dos contatos.'); setContactSync((current)=>({...current,job:{status:'queued'}})); }
    catch (err) { setError(crmInboxFriendlyError(err,'Não foi possível iniciar a sincronização.')); }
    finally { setContactSyncBusy(false); }
  };

  React.useEffect(() => {
    if (!notice) return undefined;
    const timer = window.setTimeout(() => setNotice(''), 3600);
    return () => window.clearTimeout(timer);
  }, [notice]);

  const loadConversationContext = React.useCallback(async (conversationId) => {
    if (!conversationId) {
      setConversationContext({ tags: [], selectedTagIds: [], notes: [] });
      return;
    }
    try {
      const result = await window.API.crm.conversationContext(conversationId);
      setConversationContext({
        tags: result.tags || [],
        selectedTagIds: (result.selectedTagIds || []).map(Number),
        notes: result.notes || [],
      });
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível carregar etiquetas e notas.'));
    }
  }, []);

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

  const toggleConversationTag = async (tagId) => {
    if (!selectedId || contextBusy) return;
    const selected = conversationContext.selectedTagIds.includes(Number(tagId));
    setContextBusy(true);
    try {
      if (selected) await window.API.crm.removeConversationTag(selectedId, tagId);
      else await window.API.crm.addConversationTag(selectedId, tagId);
      await loadConversationContext(selectedId);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível atualizar a etiqueta.'));
    } finally {
      setContextBusy(false);
    }
  };

  const createConversationNote = async () => {
    if (!selectedId || !noteDraft.trim() || contextBusy) return;
    setContextBusy(true);
    try {
      await window.API.crm.createNote(selectedId, { body: noteDraft.trim() });
      setNoteDraft('');
      await loadConversationContext(selectedId);
      setNotice('Nota interna adicionada.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível adicionar a nota.'));
    } finally {
      setContextBusy(false);
    }
  };

  const deleteConversationNote = async (note) => {
    if (!note || contextBusy || !window.confirm('Excluir esta nota interna?')) return;
    setContextBusy(true);
    try {
      await window.API.crm.removeNote(note.id);
      await loadConversationContext(selectedId);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível excluir a nota.'));
    } finally {
      setContextBusy(false);
    }
  };

  const createCrmTag = async () => {
    if (!tagNameDraft.trim() || contextBusy) return;
    setContextBusy(true);
    try {
      await window.API.crm.createTag({ name: tagNameDraft.trim(), color: tagColorDraft });
      setTagNameDraft('');
      await Promise.all([loadCrmTags(), loadConversationContext(selectedId)]);
      setNotice('Etiqueta criada.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível criar a etiqueta.'));
    } finally {
      setContextBusy(false);
    }
  };

  const deleteCrmTag = async (tag) => {
    if (!tag || contextBusy || !window.confirm(`Excluir a etiqueta “${tag.name}”?`)) return;
    setContextBusy(true);
    try {
      await window.API.crm.removeTag(tag.id);
      await Promise.all([loadCrmTags(), loadConversationContext(selectedId)]);
      setNotice('Etiqueta excluída.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível excluir a etiqueta.'));
    } finally {
      setContextBusy(false);
    }
  };

  const createQuickReply = async () => {
    if (!quickReplyTitle.trim() || !quickReplyBody.trim() || quickReplyBusy) return;
    setQuickReplyBusy(true);
    setError('');
    try {
      await window.API.crm.createQuickReply({ title: quickReplyTitle.trim(), body: quickReplyBody.trim() });
      setQuickReplyTitle('');
      setQuickReplyBody('');
      await loadQuickReplies();
      setNotice('Resposta rápida criada.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível criar a resposta rápida.'));
    } finally {
      setQuickReplyBusy(false);
    }
  };

  const removeQuickReply = async (reply) => {
    if (!reply || quickReplyBusy || !window.confirm(`Excluir a resposta rápida “${reply.title}”?`)) return;
    setQuickReplyBusy(true);
    setError('');
    try {
      await window.API.crm.removeQuickReply(reply.id);
      await loadQuickReplies();
      setNotice('Resposta rápida excluída.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível excluir a resposta rápida.'));
    } finally {
      setQuickReplyBusy(false);
    }
  };

  const loadConversations = React.useCallback(async (silent = false) => {
    if (!connectionId || !whatsappConnected) {
      setConversations([]);
      setCounts({ all: 0, open: 0, pending: 0, resolved: 0, unread: 0, awaiting: 0 });
      return;
    }
    if (!silent) setConversationLoading(true);
    try {
      const result = await window.API.crm.conversations({
        status: inboxView === 'board' || filter === 'unread' ? 'all' : filter,
        q: search.trim(),
        unread: inboxView !== 'board' && filter === 'unread',
        assigned: assignedFilter,
        limit: 150,
      });
      setConversations(result.conversations || []);
      setCounts(result.counts || { all: 0, open: 0, pending: 0, resolved: 0, unread: 0, awaiting: 0 });
    } catch (err) {
      if (!silent) setError(crmInboxFriendlyError(err, 'Não foi possível carregar as conversas.'));
    } finally {
      if (!silent) setConversationLoading(false);
    }
  }, [connectionId, whatsappConnected, filter, search, assignedFilter, inboxView]);

  const loadConversation = React.useCallback(async (conversationId, markRead = false, silent = false) => {
    if (!conversationId) return;
    if (!silent) setThreadLoading(true);
    try {
      const result = await window.API.crm.conversation(conversationId, 250);
      let conversation = result.conversation || null;
      setMessages(result.messages || []);
      if (markRead && conversation && conversation.unreadCount > 0) {
        const updated = await window.API.crm.updateConversation(conversationId, { markRead: true });
        conversation = updated.conversation || conversation;
        setConversations((current) => current.map((item) => item.id === conversationId
          ? { ...item, unreadCount: 0 }
          : item));
        setCounts((current) => ({ ...current, unread: Math.max(0, current.unread - 1) }));
      }
      setSelectedConversation(conversation);
    } catch (err) {
      if (Number(err && err.status) === 404) {
        setSelectedId((current) => current === Number(conversationId) ? 0 : current);
        setSelectedConversation(null);
        setMessages([]);
        setConversations((current) => current.filter((item) => Number(item.id) !== Number(conversationId)));
        return;
      }
      if (!silent) setError(crmInboxFriendlyError(err, 'Não foi possível abrir a conversa.'));
    } finally {
      if (!silent) setThreadLoading(false);
    }
  }, []);

  React.useEffect(() => {
    if (!whatsappConnected) return undefined;
    const timer = window.setTimeout(() => loadConversations(), search.trim() ? 260 : 0);
    return () => window.clearTimeout(timer);
  }, [whatsappConnected, loadConversations]);

  React.useEffect(() => {
    if (inboxView === 'board' || selectedId || conversations.length === 0) return;
    if (!window.matchMedia || window.matchMedia('(min-width: 721px)').matches) {
      const firstId = Number(conversations[0].id);
      setSelectedId(firstId);
      loadConversation(firstId, true);
    }
  }, [conversations, selectedId, loadConversation, inboxView]);

  React.useEffect(() => {
    if (!whatsappConnected) return undefined;
    const timer = window.setInterval(() => {
      loadConversations(true);
      if (selectedId) loadConversation(selectedId, true, true);
    }, 5000);
    return () => window.clearInterval(timer);
  }, [whatsappConnected, selectedId, loadConversations, loadConversation]);

  React.useEffect(() => {
    const viewport = messageViewportRef.current;
    if (viewport) {
      viewport.scrollTop = viewport.scrollHeight;
    }
  }, [messages.length, selectedId]);

  React.useEffect(() => {
    if (!newConversationOpen) return undefined;
    const timer = window.setTimeout(async () => {
      setContactsLoading(true);
      try {
        const result = await window.API.crm.contacts(contactQuery, 30);
        setContacts(result.contacts || []);
      } catch (err) {
        setError(crmInboxFriendlyError(err, 'Não foi possível buscar os clientes.'));
      } finally {
        setContactsLoading(false);
      }
    }, contactQuery.trim() ? 240 : 0);
    return () => window.clearTimeout(timer);
  }, [newConversationOpen, contactQuery]);

  React.useEffect(() => {
    if (!newConversationOpen) return undefined;
    let active = true;
    setTemplatesLoading(true);
    window.API.crm.messageTemplates()
      .then((result) => { if (active) setTemplates(result.templates || []); })
      .catch((err) => {
        if (active) setNewConversationError(crmInboxFriendlyError(err, 'Os modelos aprovados do WhatsApp estão indisponíveis. Revise a configuração do canal e tente novamente.'));
      })
      .finally(() => { if (active) setTemplatesLoading(false); });
    return () => { active = false; };
  }, [newConversationOpen]);

  const chooseConversation = (conversationId) => {
    setReplyingTo(null);
    setSelectedId(conversationId);
    setSelectedConversation(null);
    setMessages([]);
    loadConversation(conversationId, true);
  };

  const changeInboxView = (view) => {
    const nextView = view === 'board' ? 'board' : 'list';
    setInboxView(nextView);
    window.localStorage.setItem('crmInboxView', nextView);
    if (nextView === 'board') {
      setReplyingTo(null);
      setSelectedId(0);
      setSelectedConversation(null);
      setMessages([]);
      setContextOpen(false);
    }
  };

  const openBoardConversation = (conversationId) => {
    changeInboxView('list');
    chooseConversation(conversationId);
  };

  const moveBoardConversation = async (conversationId, status) => {
    if (!['open', 'pending', 'resolved'].includes(status) || boardBusyId) return;
    const previous = conversations;
    setBoardBusyId(conversationId);
    setError('');
    setConversations((current) => current.map((item) => Number(item.id) === Number(conversationId)
      ? { ...item, status, unreadCount: status === 'open' ? 0 : item.unreadCount }
      : item));
    try {
      await window.API.crm.updateConversation(conversationId, {
        status,
        markRead: status === 'open',
      });
      setNotice(status === 'resolved'
        ? 'Conversa concluída.'
        : status === 'pending' ? 'Conversa movida para pendentes.' : 'Conversa em atendimento.');
      await loadConversations(true);
    } catch (err) {
      setConversations(previous);
      setError(crmInboxFriendlyError(err, 'Não foi possível mover a conversa.'));
    } finally {
      setBoardBusyId(0);
      setBoardDragId(0);
      setBoardDropStatus('');
    }
  };

  const toggleOldResolved = () => {
    setHideOldResolved((current) => {
      const next = !current;
      window.localStorage.setItem('crmHideOldResolved', next ? '1' : '0');
      return next;
    });
  };

  const selectBoardConversation = (column, conversationId, checked) => {
    setBoardSelected((current) => ({
      ...current,
      [column]: checked
        ? Array.from(new Set([...current[column], Number(conversationId)]))
        : current[column].filter((id) => Number(id) !== Number(conversationId)),
    }));
  };

  const selectAllBoardColumn = (column, checked) => {
    setBoardSelected((current) => ({
      ...current,
      [column]: checked ? visibleBoardColumns[column].map((item) => Number(item.id)) : [],
    }));
  };

  const bulkMoveBoardColumn = async (column) => {
    const ids = boardSelected[column] || [];
    const status = boardBulkStatus[column];
    if (!ids.length || boardBulkBusy || !['open', 'pending', 'resolved'].includes(status)) return;
    setBoardBulkBusy(true);
    setError('');
    try {
      const result = await window.API.crm.updateConversations(ids, status);
      setBoardSelected((current) => ({ ...current, [column]: [] }));
      setNotice(`${result.updated || ids.length} atendimento(s) atualizado(s).`);
      await loadConversations(true);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível atualizar os atendimentos selecionados.'));
    } finally {
      setBoardBulkBusy(false);
    }
  };

  const updateConversation = async (data, successMessage = '') => {
    if (!selectedId) return;
    setConversationBusy(true);
    setError('');
    try {
      const result = await window.API.crm.updateConversation(selectedId, data);
      const updated = result.conversation;
      setSelectedConversation(updated);
      setConversations((current) => current.map((item) => item.id === selectedId
        ? { ...item, ...updated }
        : item));
      if (successMessage) setNotice(successMessage);
      loadConversations(true);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível atualizar a conversa.'));
    } finally {
      setConversationBusy(false);
    }
  };

  const sendMessage = async (event) => {
    event.preventDefault();
    if (messageSendingRef.current || !selectedId || (!messageBody.trim() && !attachment)) return;
    if (sendChannel === 'web' && attachment) {
      setError('Para enviar anexos, selecione o canal oficial.');
      return;
    }
    const submittedBody = messageBody;
    const submittedAttachment = attachment;
    const submittedReply = replyingTo;
    messageSendingRef.current = true;
    setMessageBusy(true);
    setMessageBody('');
    setAttachment(null);
    setReplyingTo(null);
    if (attachmentInputRef.current) attachmentInputRef.current.value = '';
    setError('');
    setNotice('');
    try {
      const result = submittedAttachment
        ? await window.API.crm.sendMedia(
          selectedId,
          submittedAttachment,
          submittedBody,
          submittedReply ? submittedReply.providerMessageId : ''
        )
        : await window.API.crm.sendMessage(
          '',
          submittedBody,
          selectedId,
          submittedReply ? submittedReply.providerMessageId : '',
          sendChannel
        );
      if (result.message) {
        setMessages((current) => [
          ...current.filter((item) => item.id !== result.message.id),
          result.message,
        ]);
      }
      if (result.conversation) setSelectedConversation(result.conversation);
      loadConversations(true);
      window.setTimeout(() => loadConversation(selectedId, true, true), 1200);
    } catch (err) {
      const rejectedBeforeSend = Number(err && err.status) >= 400 && Number(err && err.status) < 500;
      if (rejectedBeforeSend) {
        setMessageBody((current) => current || submittedBody);
        setAttachment((current) => current || submittedAttachment);
        setReplyingTo((current) => current || submittedReply);
        setError(crmInboxFriendlyError(err, 'Não foi possível enviar a mensagem.'));
      } else {
        // Em timeout/erro 5xx a Meta pode já ter aceitado a mensagem. O campo
        // permanece vazio para impedir um segundo envio acidental.
        setMessageBody('');
        setAttachment(null);
        setReplyingTo(null);
        setError('Não foi possível confirmar a atualização da tela. Verifique o histórico antes de tentar novamente.');
        window.setTimeout(() => loadConversation(selectedId, true, true), 900);
      }
    } finally {
      messageSendingRef.current = false;
      setMessageBusy(false);
    }
  };

  const suggestAiReply = async () => {
    if (!selectedId || aiSuggestBusy) return;
    setAiSuggestBusy(true); setError('');
    try {
      const result = await window.API.crm.aiDraft(selectedId);
      setMessageBody(result.draft || '');
      setNotice('Rascunho criado pela IA. Revise antes de enviar.');
    } catch (err) { setError(crmInboxFriendlyError(err, 'Não foi possível gerar a sugestão.')); }
    finally { setAiSuggestBusy(false); }
  };

  const saveSenderIdentity = async () => {
    if (senderIdentityBusy) return;
    setSenderIdentityBusy(true);
    setError('');
    try {
      const result = await window.API.crm.setSenderIdentity(senderNameDraft);
      setPayload((current) => ({
        ...(current || {}),
        crm: {
          ...((current && current.crm) || {}),
          senderIdentity: result.senderIdentity,
        },
      }));
      setSenderEditorOpen(false);
      setNotice(`As mensagens serão identificadas como ${result.senderIdentity.displayName}.`);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível alterar o nome do atendimento.'));
    } finally {
      setSenderIdentityBusy(false);
    }
  };

  const sendNewConversation = async () => {
    if (!newPhone.trim() || !templateKey) return;
    setNewBusy(true);
    setError('');
    setNewConversationError('');
    try {
      const separator = templateKey.lastIndexOf('|');
      const result = await window.API.crm.sendTemplate(
        newPhone,
        templateKey.slice(0, separator),
        templateKey.slice(separator + 1),
        templateParameters,
        templateMedia
      );
      const conversationId = Number(
        (result.conversation && result.conversation.id)
        || (result.message && result.message.conversationId)
        || 0
      );
      setNewConversationOpen(false);
      setContactQuery('');
      setContacts([]);
      setNewPhone('');
      setTemplateKey('');
      setTemplateParameters({});
      setTemplateMedia(null);
      await loadConversations(true);
      if (conversationId) {
        setSelectedId(conversationId);
        await loadConversation(conversationId, true);
      }
    } catch (err) {
      const friendlyError = crmInboxFriendlyError(err, 'Não foi possível iniciar a conversa.');
      setNewConversationError(friendlyError);
    } finally {
      setNewBusy(false);
    }
  };

  const connectWhatsApp = async () => {
    let signupWaiter = null;
    setChannelBusy('connect');
    setError('');
    setNotice('');
    try {
      const start = await window.API.crm.startOnboarding('whatsapp');
      const publicMeta = start.meta || {};
      const onboarding = start.onboarding || {};
      const featureType = String(publicMeta.embeddedSignupFeatureType || '');
      if (
        publicMeta.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 window.loadCrmMetaSdk(publicMeta.appId, publicMeta.graphVersion);
      signupWaiter = window.createEmbeddedSignupWaiter();
      const code = await new Promise((resolve, reject) => {
        FB.login((response) => {
          const authCode = response && response.authResponse && response.authResponse.code;
          if (authCode) resolve(String(authCode));
          else reject(new Error('Não foi possível autorizar a conexão.'));
        }, {
          config_id: String(publicMeta.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: onboarding.state || '',
        code,
        ...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.');
      setSettingsOpen(false);
    } catch (err) {
      if (signupWaiter) signupWaiter.cancel();
      setError(crmInboxFriendlyError(err, '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(crmInboxFriendlyError(err, '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('');
    try {
      const result = await window.API.crm.disconnectChannel();
      setPayload((current) => ({
        ...(current || {}),
        channels: { ...((current && current.channels) || {}), whatsapp: result.connection },
      }));
      setSelectedId(0);
      setSelectedConversation(null);
      setMessages([]);
      setNotice('Canal desconectado do CRM.');
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível desconectar o WhatsApp. Tente novamente.'));
    } finally {
      setChannelBusy('');
    }
  };

  const updateAccess = async (targetUserId, role) => {
    setBusyUserId(targetUserId);
    setSavedUserId(0);
    setError('');
    try {
      const result = await window.API.crm.setUserAccess(targetUserId, role);
      const nextUsers = result.users || [];
      setPayload((current) => ({
        ...(current || {}),
        users: nextUsers,
        assignees: nextUsers
          .filter((item) => item.crmEnabled && item.status === 'ativo')
          .map((item) => ({
            id: item.id,
            name: item.name || item.login,
            role: item.crmRole,
          })),
      }));
      setSavedUserId(targetUserId);
      window.setTimeout(() => setSavedUserId((current) => current === targetUserId ? 0 : current), 1800);
    } catch (err) {
      setError(crmInboxFriendlyError(err, 'Não foi possível alterar o acesso.'));
    } finally {
      setBusyUserId(0);
    }
  };

  if (loading) {
    return (
      <div className="content-inner fadein">
        <div className="card card-pad"><div className="muted">Carregando caixa de entrada…</div></div>
      </div>
    );
  }

  if (error && !payload) {
    return (
      <div className="content-inner fadein">
        <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={loadStatus}>Tentar novamente</window.Button>
          </div>
        </div>
      </div>
    );
  }

  const currentConversation = selectedConversation
    || conversations.find((item) => item.id === selectedId)
    || null;
  const currentClient = currentConversation && currentConversation.client;
  const currentContactName = crmInboxContactName(currentConversation);
  const selectedChannelReady = sendChannel === 'web'
    ? whatsappWebReady
    : !!(currentConversation && currentConversation.canSendFreeform);
  const roleLabel = crmInboxRoleLabels[access.role] || 'Atendente';
  const moduleStatusLabel = {
    trialing: 'Período de teste',
    active: 'Ativo',
    grace: 'Período de carência',
  }[crm.status] || 'Ativo';
  const filterItems = [
    ['all', 'Todas', counts.all],
    ['awaiting', 'Aguardando resposta', counts.awaiting],
    ['open', 'Em atendimento', counts.open],
    ['unread', 'Não lidas', counts.unread],
    ['pending', 'Pendentes', counts.pending],
    ['resolved', 'Resolvidas', counts.resolved],
  ];

  return (
    <div className="content-inner fadein crm-inbox-page">
      {(error || notice) && <div className="crm-feedback-stack" aria-live="polite">
        {error && <div className="crm-feedback danger" role="alert"><window.Icon name="info" size={17} /><span>{error}</span><button type="button" onClick={() => setError('')} aria-label="Fechar aviso"><window.Icon name="x" size={15} /></button></div>}
        {notice && <div className="crm-feedback success" role="status"><window.Icon name="check" size={17} /><span>{notice}</span><button type="button" onClick={() => setNotice('')} aria-label="Fechar confirmação"><window.Icon name="x" size={15} /></button></div>}
      </div>}

      {settingsView && (
        <section className="crm-settings-view">
          <div className="crm-settings-heading">
            <div>
              <div className="crm-eyebrow">Administração</div>
              <h2>Configurações do CRM</h2>
              <p>Gerencie o canal oficial e quem pode atender conversas.</p>
            </div>
            <window.Button variant="outline" icon="chevLeft" onClick={() => {
              setSettingsView(false);
              setSettingsOpen(false);
              window.dispatchEvent(new CustomEvent('crm:section-changed', { detail: { target: 'inbox' } }));
            }}>Voltar à caixa de entrada</window.Button>
          </div>
        </section>
      )}

      {!settingsView && <section className="crm-channel-summary" aria-label="Situação do canal">
        <div className={`crm-channel-summary-dot${whatsappConnected ? ' connected' : ''}`} aria-hidden="true"></div>
        <div className="crm-channel-summary-copy">
          <strong>{whatsappConnected ? 'WhatsApp oficial conectado' : 'WhatsApp oficial não conectado'}</strong>
          <span>
            {whatsappConnected
              ? `${whatsapp.displayName || 'Conta verificada'} · ${whatsapp.displayPhoneNumber || 'Número conectado'}`
              : 'Conecte um número para receber e responder conversas no CRM.'}
          </span>
        </div>
        <div className="crm-channel-summary-tags">
          {whatsappCoexistence && <span className="pill ok">Celular + CRM</span>}
          <span className="pill plain">{moduleStatusLabel} · {roleLabel}</span>
        </div>
        <div className="crm-channel-summary-actions">
          {whatsappConnected && (
            <window.Button
              variant="outline"
              size="sm"
              icon="refresh"
              onClick={() => {
                loadConversations();
                if (selectedId) loadConversation(selectedId, true);
              }}
              disabled={conversationLoading || threadLoading}
            >
              Atualizar
            </window.Button>
          )}
        </div>
      </section>}

      {settingsView && settingsOpen && access.manageChannels && (
        <section className="card card-pad crm-channel-settings">
          <div className="crm-section-head">
            <div>
              <h3>Canal do WhatsApp</h3>
              <p>Gerencie o número usado para receber e responder conversas.</p>
            </div>
            <span className={`pill ${whatsappConnected ? 'ok' : 'seg'}`}>
              {whatsappConnected ? 'Conectado' : 'Não conectado'}
            </span>
          </div>
          <div className="crm-channel-settings-grid">
            <div>
              <strong>WhatsApp Business</strong>
              <span>
                {whatsappConnected
                  ? `${whatsapp.displayName || 'Conta verificada'} · ${whatsapp.displayPhoneNumber || 'Número conectado'}`
                  : 'Use o mesmo número no aplicativo e no CRM.'}
              </span>
            </div>
            <div className="row wrap">
              {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>
          {!channelSetupReady && (
            <div className="crm-channel-settings-note">
              A conexão do WhatsApp está temporariamente indisponível. Entre em contato com o suporte.
            </div>
          )}
          {whatsapp && whatsapp.status === 'error' && (
            <div className="crm-channel-error">
              Não foi possível manter a conexão. Verifique novamente ou entre em contato com o suporte.
            </div>
          )}
        </section>
      )}

      {settingsView && access.manageUsers && (
        <section className="card card-pad crm-channel-settings">
          <div className="crm-section-head">
            <div>
              <h3>Respostas rápidas</h3>
              <p>Cadastre textos compartilhados para toda a equipe de atendimento.</p>
            </div>
            <span className="pill plain">{quickReplies.length} cadastrada{quickReplies.length === 1 ? '' : 's'}</span>
          </div>
          <div className="crm-quick-reply-settings">
            <div className="crm-quick-reply-form">
              <window.Field label="Título">
                <window.Input value={quickReplyTitle} maxLength={100} placeholder="Ex.: Confirmação de horário" onChange={(event) => setQuickReplyTitle(event.target.value)} />
              </window.Field>
              <window.Field label="Mensagem">
                <window.Textarea value={quickReplyBody} rows={3} maxLength={4096} placeholder="Texto que será inserido no atendimento" onChange={(event) => setQuickReplyBody(event.target.value)} />
              </window.Field>
              <window.Button icon="plus" onClick={createQuickReply} disabled={quickReplyBusy || !quickReplyTitle.trim() || !quickReplyBody.trim()}>
                {quickReplyBusy ? 'Salvando…' : 'Adicionar resposta'}
              </window.Button>
            </div>
            <div className="crm-quick-reply-list">
              {quickReplies.length === 0 ? (
                <span className="muted">Nenhuma resposta rápida cadastrada.</span>
              ) : quickReplies.map((reply) => (
                <div className="crm-quick-reply-row" key={reply.id}>
                  <span><strong>{reply.title}</strong><small>{reply.body}</small></span>
                  <window.Button variant="outline" size="sm" onClick={() => removeQuickReply(reply)} disabled={quickReplyBusy}>Excluir</window.Button>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {settingsView && access.manageUsers && (
        <section className="card card-pad crm-channel-settings">
          <div className="crm-section-head">
            <div><h3>Etiquetas do CRM</h3><p>Organize conversas e prepare segmentações para campanhas e automações.</p></div>
            <span className="pill plain">{crmTags.length} etiqueta{crmTags.length === 1 ? '' : 's'}</span>
          </div>
          <div className="crm-tag-settings">
            <div className="row wrap">
              <input type="color" value={tagColorDraft} onChange={(event) => setTagColorDraft(event.target.value)} aria-label="Cor da etiqueta" />
              <window.Input value={tagNameDraft} maxLength={80} placeholder="Nome da etiqueta" onChange={(event) => setTagNameDraft(event.target.value)} />
              <window.Button icon="plus" onClick={createCrmTag} disabled={contextBusy || !tagNameDraft.trim()}>Criar etiqueta</window.Button>
            </div>
            <div className="crm-tag-list">
              {crmTags.map((tag) => (
                <span className="crm-tag-manage" key={tag.id} style={{ '--crm-tag-color': tag.color }}>
                  <i></i>{tag.name}
                  <button type="button" onClick={() => deleteCrmTag(tag)} disabled={contextBusy} aria-label={`Excluir ${tag.name}`}>×</button>
                </span>
              ))}
            </div>
          </div>
        </section>
      )}

      {!settingsView && workspaceView === 'contacts' && (
        <section className="crm-contacts-view">
          <div className="crm-settings-heading">
            <div><h2>Contatos</h2><p>Clientes da Agenda, contatos exclusivos do CRM e pessoas que já conversaram pelo WhatsApp.</p></div>
            <div className="row wrap"><span className={`pill ${contactSync.session && contactSync.session.status === 'ready' ? 'success' : 'plain'}`}>{contactSync.session && contactSync.session.status === 'ready' ? 'Sessão QR conectada' : 'Sessão QR desconectada'}</span>{access.manageUsers && <window.Button icon="refresh" variant="outline" onClick={startContactSync} disabled={contactSyncBusy || !contactSync.session || contactSync.session.status !== 'ready' || (contactSync.job && ['queued','processing'].includes(contactSync.job.status))}>{contactSyncBusy || (contactSync.job && ['queued','processing'].includes(contactSync.job.status)) ? 'Sincronizando…' : 'Sincronizar contatos e fotos'}</window.Button>}<span className="pill plain">{directoryContacts.length}{directoryContacts.length === 50 ? '+' : ''} contato{directoryContacts.length === 1 ? '' : 's'}</span></div>
          </div>
          <div className="crm-contact-sync-note"><window.Icon name="info" size={16} /><span>A sessão por QR é usada somente para importar nomes e fotos. As mensagens do CRM continuam sendo enviadas exclusivamente pela API oficial.</span></div>
          <div className="crm-contacts-search">
            <window.Icon name="search" size={17} />
            <input value={directoryQuery} maxLength={100} placeholder="Buscar por nome, telefone ou e-mail" aria-label="Buscar contatos" onChange={(event) => setDirectoryQuery(event.target.value)} />
            {directoryQuery && <button type="button" onClick={() => setDirectoryQuery('')} aria-label="Limpar busca"><window.Icon name="x" size={15} /></button>}
          </div>
          {directoryLoading ? (
            <div className="crm-contacts-state">Carregando contatos…</div>
          ) : directoryContacts.length === 0 ? (
            <div className="crm-contacts-state"><window.Icon name="users" size={24} /><strong>{directoryQuery ? 'Nenhum contato encontrado' : 'Nenhum contato cadastrado'}</strong><span>{directoryQuery ? 'Tente buscar por outro nome, telefone ou e-mail.' : 'Os clientes cadastrados na Agenda aparecerão aqui.'}</span></div>
          ) : (
            <div className="crm-contacts-table" role="list">
              {directoryContacts.map((contact) => <article className={`crm-contact-card ${contactEditor && contactEditor.key === contact.key ? 'editing' : ''}`} role="listitem" key={contact.key || `${contact.source}:${contact.id}`}>
                <window.Avatar initials={crmInboxInitials(contact.name)} src={contact.photoUrl || ''} alt={contact.name} size={42} />
                <div className="crm-contact-card-main"><strong>{contact.name}</strong><span>{contact.phone || 'Telefone não informado'}</span></div>
                <div className="crm-contact-card-email"><span>E-mail</span><strong>{contact.email || 'Não informado'}</strong></div>
                <div className="crm-contact-card-meta"><span className={`pill ${contact.source === 'agenda' ? 'success' : 'plain'}`}>{contact.source === 'agenda' ? 'Agenda + CRM' : contact.source === 'crm' ? 'Somente CRM' : 'WhatsApp'}</span>{contact.source === 'whatsapp' && <window.Button size="sm" variant="outline" onClick={() => setContactEditor({ key: contact.key, name: contact.name || '', phone: contact.phone || '', email: '', scope: 'crm' })}>Cadastrar</window.Button>}</div>
                {contactEditor && contactEditor.key === contact.key && <div className="crm-contact-convert">
                  <window.Field label="Nome"><window.Input value={contactEditor.name} maxLength={140} onChange={(event) => setContactEditor({ ...contactEditor, name: event.target.value })} /></window.Field>
                  <window.Field label="E-mail (opcional)"><window.Input type="email" value={contactEditor.email} maxLength={160} onChange={(event) => setContactEditor({ ...contactEditor, email: event.target.value })} /></window.Field>
                  <window.Field label="Cadastrar em"><window.Select value={contactEditor.scope} onChange={(event) => setContactEditor({ ...contactEditor, scope: event.target.value })}><option value="crm">Somente no CRM</option><option value="agenda">Agenda inteira + CRM</option></window.Select></window.Field>
                  <div className="row"><window.Button onClick={saveDirectoryContact} disabled={contactSaving || !contactEditor.name.trim()}>{contactSaving ? 'Salvando…' : 'Salvar contato'}</window.Button><window.Button variant="outline" onClick={() => setContactEditor(null)} disabled={contactSaving}>Cancelar</window.Button></div>
                </div>}
              </article>)}
            </div>
          )}
        </section>
      )}

      {!settingsView && workspaceView === 'overview' && (
        <section className="crm-dashboard-view crm-liquid-glass-scope">
          {/* Ambient Lighting Orbs for Apple Liquid Glass */}
          <div className="crm-ambient-light" aria-hidden="true">
            <div className="crm-ambient-orb crm-ambient-orb-1"></div>
            <div className="crm-ambient-orb crm-ambient-orb-2"></div>
            <div className="crm-ambient-orb crm-ambient-orb-3"></div>
          </div>

          <div className="crm-dashboard-head crm-glass-card">
            <div className="crm-dashboard-title-box">
              <div className="crm-dashboard-title-row">
                <h2>Visão geral do CRM</h2>
                <span className="crm-glass-pill crm-glass-pill-primary">
                  <window.Icon name="dashboard" size={11} />
                  <span>Indicadores em tempo real</span>
                </span>
              </div>
              <p>Acompanhe atendimento, volume e produtividade da equipe.</p>
            </div>
            <div className="crm-dashboard-head-actions">
              <button
                type="button"
                className="crm-glass-btn"
                onClick={loadDashboard}
                disabled={dashboardLoading}
                title="Recarregar indicadores"
              >
                <window.Icon name="refresh" size={13} style={dashboardLoading ? { animation: 'crmGlassSpin 0.8s linear infinite' } : {}} />
                <span>{dashboardLoading ? 'Atualizando…' : 'Atualizar'}</span>
              </button>
            </div>
          </div>

          {dashboardLoading && !dashboardData ? (
            <div className="crm-glass-card crm-glass-loading">
              <div className="crm-glass-spinner"></div>
              <span>Carregando indicadores do CRM…</span>
            </div>
          ) : (() => {
            const metrics = (dashboardData && dashboardData.metrics) || {};
            const daily = (dashboardData && dashboardData.daily) || [];
            const agents = (dashboardData && dashboardData.agents) || [];
            const maxDaily = Math.max(1, ...daily.map((item) => Number(item.inbound_count || 0) + Number(item.outbound_count || 0)));
            const maxAgentLoad = Math.max(1, ...agents.map((a) => Number(a.conversation_count || 0)));

            const kpis = [
              {
                id: 'conversations',
                label: 'Total de conversas',
                value: metrics.conversations || 0,
                hint: `${metrics.open_count || 0} abertas · ${metrics.resolved_count || 0} resolvidas`,
                icon: 'whatsapp',
                tone: 'blue',
              },
              {
                id: 'awaiting',
                label: 'Aguardando equipe',
                value: metrics.awaiting || 0,
                hint: Number(metrics.awaiting || 0) > 0 ? 'Respostas pendentes da equipe' : 'Nenhuma conversa pendente',
                icon: 'clock',
                tone: 'amber',
                badge: Number(metrics.awaiting || 0) > 0 ? 'Atenção' : 'Em dia',
                pulse: Number(metrics.awaiting || 0) > 0,
              },
              {
                id: 'unread',
                label: 'Não lidas',
                value: metrics.unread || 0,
                hint: 'Mensagens novas para ler',
                icon: 'bell',
                tone: 'cyan',
              },
              {
                id: 'inboundToday',
                label: 'Recebidas hoje',
                value: metrics.inboundToday || 0,
                hint: 'Entradas de clientes no canal',
                icon: 'arrowRight',
                tone: 'teal',
              },
              {
                id: 'outboundToday',
                label: 'Enviadas hoje',
                value: metrics.outboundToday || 0,
                hint: 'Respostas e envios da equipe',
                icon: 'send',
                tone: 'indigo',
              },
              {
                id: 'firstResponse',
                label: '1ª resposta média',
                value: metrics.avgFirstResponseMinutes == null ? '—' : `${metrics.avgFirstResponseMinutes} min`,
                hint: 'Tempo médio de 1º retorno',
                icon: 'zap',
                tone: 'emerald',
              },
            ];

            return (
              <>
                <div className="crm-dashboard-metrics">
                  {kpis.map((kpi) => (
                    <article className={`crm-glass-card crm-glass-metric tone-${kpi.tone}`} key={kpi.id}>
                      <div className="crm-glass-metric-top">
                        <div className="crm-glass-icon-pill">
                          <window.Icon name={kpi.icon} size={15} />
                        </div>
                        {kpi.badge && (
                          <span className={`crm-glass-status-pill ${kpi.pulse ? 'pulse-alert' : 'pulse-ok'}`}>
                            <i className="crm-status-dot"></i>
                            <span>{kpi.badge}</span>
                          </span>
                        )}
                      </div>
                      <div className="crm-glass-metric-body">
                        <span className="crm-glass-metric-label">{kpi.label}</span>
                        <strong className="crm-glass-metric-val">{kpi.value}</strong>
                        {kpi.hint && <small className="crm-glass-metric-hint">{kpi.hint}</small>}
                      </div>
                    </article>
                  ))}
                </div>

                <div className="crm-dashboard-grid">
                  <section className="crm-glass-card crm-volume-panel">
                    <div className="crm-glass-card-head">
                      <div>
                        <h3>Volume dos últimos 14 dias</h3>
                        <p>Distribuição diária entre mensagens recebidas e enviadas.</p>
                      </div>
                      <div className="crm-volume-legend">
                        <span className="crm-legend-item inbound"><i className="legend-dot"></i>Recebidas</span>
                        <span className="crm-legend-item outbound"><i className="legend-dot"></i>Enviadas</span>
                      </div>
                    </div>
                    <div className="crm-volume-chart">
                      {daily.length === 0 ? (
                        <div className="crm-glass-empty">
                          <window.Icon name="message" size={20} />
                          <span>Sem mensagens registradas no período de 14 dias.</span>
                        </div>
                      ) : daily.map((item) => {
                        const inCount = Number(item.inbound_count || 0);
                        const outCount = Number(item.outbound_count || 0);
                        const total = inCount + outCount;
                        const inPct = total > 0 ? (inCount / total) * 100 : 0;
                        const outPct = total > 0 ? (outCount / total) * 100 : 0;
                        const trackPct = Math.max(4, (total / maxDaily) * 100);
                        const dateFormatted = String(item.day).slice(5).replace('-', '/');
                        return (
                          <div className="crm-volume-row" key={item.day} title={`${dateFormatted}: ${total} total (${inCount} recebidas, ${outCount} enviadas)`}>
                            <time className="crm-volume-date">{dateFormatted}</time>
                            <div className="crm-volume-track">
                              <div className="crm-volume-fill" style={{ width: `${trackPct}%` }}>
                                {inCount > 0 && <span className="crm-volume-segment inbound" style={{ width: `${inPct}%` }}></span>}
                                {outCount > 0 && <span className="crm-volume-segment outbound" style={{ width: `${outPct}%` }}></span>}
                              </div>
                            </div>
                            <div className="crm-volume-total">
                              <b>{total}</b>
                              <span className="crm-volume-sub">({inCount} / {outCount})</span>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </section>

                  <section className="crm-glass-card crm-agent-panel">
                    <div className="crm-glass-card-head">
                      <div>
                        <h3>Carga por atendente</h3>
                        <p>Conversas atribuídas e pendências por membro da equipe.</p>
                      </div>
                    </div>
                    <div className="crm-agent-load">
                      {agents.length === 0 ? (
                        <div className="crm-glass-empty">
                          <window.Icon name="users" size={20} />
                          <span>Nenhuma conversa atribuída a atendentes no momento.</span>
                        </div>
                      ) : agents.map((agent) => {
                        const count = Number(agent.conversation_count || 0);
                        const awaiting = Number(agent.awaiting_count || 0);
                        const loadPct = maxAgentLoad > 0 ? Math.max(6, (count / maxAgentLoad) * 100) : 0;
                        return (
                          <div className="crm-glass-agent-card" key={agent.id}>
                            <div className="crm-agent-profile">
                              <window.Avatar initials={crmInboxInitials(agent.name)} size={32} />
                              <div className="crm-agent-meta">
                                <strong>{agent.name}</strong>
                                <span className={`crm-agent-status-tag ${awaiting > 0 ? 'has-awaiting' : 'clear'}`}>
                                  {awaiting > 0 ? `${awaiting} aguardando resposta` : 'Nenhuma resposta pendente'}
                                </span>
                              </div>
                            </div>
                            <div className="crm-agent-load-stat">
                              <div className="crm-agent-bar-wrap">
                                <div className="crm-agent-bar-fill" style={{ width: `${loadPct}%` }}></div>
                              </div>
                              <span className="crm-agent-count-badge" title={`${count} conversas no total`}>
                                <b>{count}</b>
                                <small>conversas</small>
                              </span>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </section>
                </div>
              </>
            );
          })()}
        </section>
      )}

      {!settingsView && workspaceView === 'deals' && (
        <section className="crm-sales-view">
          <div className="crm-settings-heading">
            <div><div className="crm-eyebrow">Comercial</div><h2>Funil de vendas</h2><p>Acompanhe oportunidades da entrada ao fechamento.</p></div>
            {salesData.pipelines.length > 0 && <div className="row wrap"><window.Select value={salesData.pipelineId} onChange={(event) => loadSales(Number(event.target.value))} disabled={salesLoading || salesBusy}>{salesData.pipelines.map((pipeline) => <option value={pipeline.id} key={pipeline.id}>{pipeline.name}</option>)}</window.Select>{access.managePipeline && <><window.Input value={pipelineNameDraft} maxLength={120} placeholder="Novo funil" onChange={(event) => setPipelineNameDraft(event.target.value)} /><window.Button size="sm" icon="plus" onClick={createPipeline} disabled={salesBusy || !pipelineNameDraft.trim()}>Criar</window.Button></>}</div>}
          </div>
          {salesData.pipelines.length === 0 && !salesLoading ? (
            <div className="card card-pad crm-sales-empty">
              <window.Icon name="trendUp" size={28} />
              <div><h3>Crie seu primeiro funil</h3><p>Ele será iniciado com as etapas Novo contato, Qualificação, Proposta e Fechamento.</p></div>
              {access.managePipeline ? <div className="row wrap"><window.Input value={pipelineNameDraft} maxLength={120} placeholder="Ex.: Vendas" onChange={(event) => setPipelineNameDraft(event.target.value)} /><window.Button icon="plus" onClick={createPipeline} disabled={salesBusy || !pipelineNameDraft.trim()}>Criar funil</window.Button></div> : <span className="muted">Solicite a um gerente a criação do funil.</span>}
            </div>
          ) : (
            <>
              <div className="card card-pad crm-deal-create">
                <window.Input value={dealDraft.title} maxLength={180} placeholder="Título da oportunidade" onChange={(event) => setDealDraft({ ...dealDraft, title: event.target.value })} />
                <window.Input value={dealDraft.value} inputMode="decimal" placeholder="Valor (R$)" onChange={(event) => setDealDraft({ ...dealDraft, value: event.target.value })} />
                <window.Select value={dealDraft.stageId} onChange={(event) => setDealDraft({ ...dealDraft, stageId: event.target.value })}>{salesData.stages.map((stage) => <option value={stage.id} key={stage.id}>{stage.name}</option>)}</window.Select>
                <window.Button icon="plus" onClick={createDeal} disabled={salesBusy || !dealDraft.title.trim() || !dealDraft.stageId}>Adicionar</window.Button>
              </div>
              <div className="crm-sales-summary">
                <span><b>{salesData.deals.filter((deal) => deal.status === 'open').length}</b> abertas</span>
                <span><b>{salesData.deals.filter((deal) => deal.status === 'won').length}</b> ganhas</span>
                <span><b>{new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(salesData.deals.filter((deal) => deal.status === 'open').reduce((sum, deal) => sum + Number(deal.value || 0), 0))}</b> em aberto</span>
              </div>
              {salesLoading ? <div className="card card-pad muted">Carregando funil…</div> : <div className="crm-sales-board">
                {salesData.stages.map((stage) => {
                  const stageDeals = salesData.deals.filter((deal) => Number(deal.stage_id) === Number(stage.id));
                  return <section className="crm-sales-column" key={stage.id} style={{ '--stage-color': stage.color }}>
                    <header><span><i></i><strong>{stage.name}</strong></span><b>{stageDeals.length}</b></header>
                    <div>{stageDeals.length === 0 ? <span className="crm-sales-column-empty">Nenhuma oportunidade</span> : stageDeals.map((deal) => <article className={`crm-deal-card status-${deal.status}`} key={deal.id}>
                      <div className="crm-deal-card-head"><strong>{deal.title}</strong><span>{deal.status === 'won' ? 'Ganha' : deal.status === 'lost' ? 'Perdida' : 'Aberta'}</span></div>
                      <b>{new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(deal.value || 0))}</b>
                      {(deal.client_name || deal.assigned_user_name) && <small>{deal.client_name || deal.assigned_user_name}</small>}
                      <window.Select value={deal.stage_id} onChange={(event) => updateDeal(deal, { stageId: Number(event.target.value) })} disabled={salesBusy}>{salesData.stages.map((option) => <option value={option.id} key={option.id}>{option.name}</option>)}</window.Select>
                      <div className="crm-deal-actions">
                        <button type="button" onClick={() => updateDeal(deal, { status: 'won' })} disabled={salesBusy || deal.status === 'won'}>Ganhar</button>
                        <button type="button" onClick={() => updateDeal(deal, { status: 'lost' })} disabled={salesBusy || deal.status === 'lost'}>Perder</button>
                        {deal.status !== 'open' && <button type="button" onClick={() => updateDeal(deal, { status: 'open' })} disabled={salesBusy}>Reabrir</button>}
                        {access.managePipeline && <button type="button" onClick={() => removeDeal(deal)} disabled={salesBusy}>Excluir</button>}
                      </div>
                    </article>)}</div>
                  </section>;
                })}
              </div>}
            </>
          )}
        </section>
      )}

      {!settingsView && workspaceView === 'campaigns' && (
        <section className="crm-growth-view">
          <div className="crm-settings-heading"><div><div className="crm-eyebrow">Relacionamento</div><h2>Campanhas</h2><p>Prepare públicos segmentados e coloque envios de modelos aprovados em uma fila controlada.</p></div></div>
          {campaignTemplatesError && <div className="crm-channel-error">{campaignTemplatesError}</div>}
          {access.manageUsers && <div className="card card-pad crm-growth-form">
            <window.Input value={campaignDraft.name} placeholder="Nome da campanha" onChange={(event) => setCampaignDraft({ ...campaignDraft, name: event.target.value })} />
            <window.Select value={campaignDraft.templateKey} onChange={(event) => setCampaignDraft({ ...campaignDraft, templateKey: event.target.value })}><option value="">Modelo aprovado</option>{templates.filter((item) => !(item.parameters || []).length && !item.mediaHeader).map((item) => <option value={`${item.name}|${item.language}`} key={`${item.name}|${item.language}`}>{item.name} · {item.language}</option>)}</window.Select>
            <window.Select value={campaignDraft.tagId} onChange={(event) => setCampaignDraft({ ...campaignDraft, tagId: event.target.value })}><option value="">Todos os contatos</option>{crmTags.map((tag) => <option value={tag.id} key={tag.id}>Etiqueta: {tag.name}</option>)}</window.Select>
            <window.Button icon="plus" onClick={() => submitGrowth('campaign')} disabled={growthBusy || !campaignDraft.name.trim() || !campaignDraft.templateKey}>Criar rascunho</window.Button>
          </div>}
          <div className="crm-growth-list">{growthLoading ? <div className="card card-pad muted">Carregando campanhas…</div> : growthData.campaigns.length === 0 ? <div className="card card-pad muted">Nenhuma campanha criada.</div> : growthData.campaigns.map((item) => <article className="card card-pad crm-growth-row" key={item.id}><span><strong>{item.name}</strong><small>{item.template_name} · {item.status}</small></span><span><b>{item.sent_count || 0}/{item.total_recipients || 0}</b><small>enviadas</small></span>{access.manageUsers && ['draft','paused','failed'].includes(item.status) && <window.Button size="sm" onClick={() => submitGrowth('queue', item)} disabled={growthBusy}>Colocar na fila</window.Button>}{access.manageUsers && ['draft','completed','cancelled','failed'].includes(item.status) && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('campaign_delete', item)} disabled={growthBusy}>Excluir</window.Button>}</article>)}</div>
        </section>
      )}

      {!settingsView && workspaceView === 'automations' && (
        <section className="crm-growth-view">
          <div className="crm-settings-heading"><div><h2>Automações</h2><p>Defina o que deve acontecer automaticamente quando uma mensagem chegar.</p></div></div>
          {access.manageUsers && <div className="card card-pad crm-automation-builder">
            <window.Field label="Nome da automação"><window.Input value={automationDraft.name} maxLength={160} placeholder="Ex.: Identificar novos orçamentos" onChange={(event) => setAutomationDraft({ ...automationDraft, name: event.target.value })} /></window.Field>
            <div className="crm-automation-sentence"><strong>Quando</strong><window.Select value={automationDraft.triggerType} onChange={(event) => setAutomationDraft({ ...automationDraft, triggerType: event.target.value })}><option value="message_received">uma mensagem for recebida</option></window.Select></div>
            <div className="crm-automation-sentence"><strong>Se</strong><window.Input value={automationDraft.keyword} maxLength={120} placeholder="contiver uma palavra (opcional)" onChange={(event) => setAutomationDraft({ ...automationDraft, keyword: event.target.value })} /></div>
            <div className="crm-automation-sentence"><strong>Então</strong><window.Select value={automationDraft.actionType} onChange={(event) => setAutomationDraft({ ...automationDraft, actionType: event.target.value })}><option value="internal_note">registrar uma nota interna</option><option value="send_message">enviar uma resposta automática</option><option value="add_tag">adicionar uma etiqueta</option><option value="assign_user">atribuir a um atendente</option><option value="set_status">alterar a situação da conversa</option></window.Select></div>
            {['internal_note','send_message'].includes(automationDraft.actionType) && <window.Field label={automationDraft.actionType === 'send_message' ? 'Mensagem automática' : 'Nota interna'}><window.Textarea rows={3} value={automationDraft.actionValue} onChange={(event) => setAutomationDraft({ ...automationDraft, actionValue: event.target.value })} /></window.Field>}
            {automationDraft.actionType === 'add_tag' && <window.Field label="Etiqueta"><window.Select value={automationDraft.tagId} onChange={(event) => setAutomationDraft({ ...automationDraft, tagId: event.target.value })}><option value="">Selecione</option>{crmTags.map((tag) => <option value={tag.id} key={tag.id}>{tag.name}</option>)}</window.Select></window.Field>}
            {automationDraft.actionType === 'assign_user' && <window.Field label="Atendente"><window.Select value={automationDraft.assignedUserId} onChange={(event) => setAutomationDraft({ ...automationDraft, assignedUserId: event.target.value })}><option value="">Selecione</option>{assignees.map((person) => <option value={person.id} key={person.id}>{person.name}</option>)}</window.Select></window.Field>}
            {automationDraft.actionType === 'set_status' && <window.Field label="Nova situação"><window.Select value={automationDraft.status} onChange={(event) => setAutomationDraft({ ...automationDraft, status: event.target.value })}><option value="open">Em atendimento</option><option value="pending">Pendente</option><option value="resolved">Resolvida</option></window.Select></window.Field>}
            <div className="crm-automation-footer"><p>A automação será criada desativada para revisão.</p><window.Button icon="plus" onClick={() => submitGrowth('automation')} disabled={growthBusy || !automationDraft.name.trim() || (['internal_note','send_message'].includes(automationDraft.actionType) && !automationDraft.actionValue.trim()) || (automationDraft.actionType === 'add_tag' && !automationDraft.tagId) || (automationDraft.actionType === 'assign_user' && !automationDraft.assignedUserId)}>Criar automação</window.Button></div>
          </div>}
          <div className="crm-growth-list">{growthLoading ? <div className="card card-pad muted">Carregando automações…</div> : growthData.automations.length === 0 ? <div className="card card-pad muted">Nenhuma automação criada. Use o construtor acima para definir a primeira regra.</div> : growthData.automations.map((item) => { const actions=JSON.parse(item.actions_json||'[]'); const conditions=JSON.parse(item.conditions_json||'[]'); const labels={internal_note:'Registrar nota interna',send_message:'Enviar resposta',add_tag:'Adicionar etiqueta',assign_user:'Atribuir atendente',set_status:'Alterar situação'}; return <article className="card card-pad crm-growth-row" key={item.id}><span><strong>{item.name}</strong><small>Mensagem recebida{conditions[0] ? ` contendo “${conditions[0].value}”` : ''} → {labels[actions[0] && actions[0].type] || 'Executar ação'} · {item.run_count || 0} execuções</small></span><span className={`pill ${Number(item.active) ? 'success' : 'plain'}`}>{Number(item.active) ? 'Ativa' : 'Desativada'}</span>{access.manageUsers && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('automation_toggle', item)} disabled={growthBusy}>{Number(item.active) ? 'Desativar' : 'Ativar'}</window.Button>}{access.manageUsers && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('automation_delete', item)} disabled={growthBusy}>Excluir</window.Button>}</article>; })}</div>
        </section>
      )}

      {!settingsView && workspaceView === 'flows' && (
        <section className="crm-growth-view">
          <div className="crm-settings-heading"><div><div className="crm-eyebrow">Conversação</div><h2>Fluxos</h2><p>Defina respostas guiadas disparadas por palavra-chave.</p></div></div>
          {access.manageUsers && <div className="card card-pad crm-growth-form"><window.Input value={flowDraft.name} placeholder="Nome do fluxo" onChange={(event) => setFlowDraft({ ...flowDraft, name: event.target.value })} /><window.Input value={flowDraft.triggerKeyword} placeholder="Palavra-chave" onChange={(event) => setFlowDraft({ ...flowDraft, triggerKeyword: event.target.value })} /><window.Input value={flowDraft.message} placeholder="Primeira mensagem do fluxo" onChange={(event) => setFlowDraft({ ...flowDraft, message: event.target.value })} /><window.Button icon="plus" onClick={() => submitGrowth('flow')} disabled={growthBusy || !flowDraft.name.trim() || !flowDraft.message.trim()}>Criar desativado</window.Button></div>}
          <div className="crm-growth-list">{growthLoading ? <div className="card card-pad muted">Carregando…</div> : growthData.flows.map((item) => <article className="card card-pad crm-growth-row" key={item.id}><span><strong>{item.name}</strong><small>{item.trigger_keyword ? `Gatilho: ${item.trigger_keyword}` : 'Sem palavra-chave'}</small></span><span className={`pill ${Number(item.active) ? 'success' : 'plain'}`}>{Number(item.active) ? 'Ativo' : 'Desativado'}</span>{access.manageUsers && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('flow_toggle', item)} disabled={growthBusy}>{Number(item.active) ? 'Desativar' : 'Ativar'}</window.Button>}{access.manageUsers && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('flow_delete', item)} disabled={growthBusy}>Excluir</window.Button>}</article>)}</div>
        </section>
      )}

      {!settingsView && workspaceView === 'ai' && (
        <section className="crm-growth-view">
          <div className="crm-settings-heading"><div><div className="crm-eyebrow">Assistência</div><h2>Assistente de IA</h2><p>Configure credencial própria, instruções e conhecimento usado nas sugestões.</p></div></div>
          {access.manageUsers && <><div className="card card-pad crm-ai-form"><window.Field label="Modelo"><window.Input value={aiDraft.model} placeholder="Ex.: gpt-4.1-mini" onChange={(event) => setAiDraft({ ...aiDraft, model: event.target.value })} /></window.Field><window.Field label="Modo"><window.Select value={aiDraft.mode === 'automatic' ? 'draft' : aiDraft.mode} onChange={(event) => setAiDraft({ ...aiDraft, mode: event.target.value })}><option value="off">Desativada</option><option value="draft">Rascunhos para revisão</option></window.Select></window.Field><window.Field label={`Chave da API${growthData.ai && growthData.ai.settings.has_api_key ? ' (já configurada)' : ''}`}><window.Input type="password" value={aiDraft.apiKey} placeholder="Deixe vazio para manter a atual" onChange={(event) => setAiDraft({ ...aiDraft, apiKey: event.target.value })} /></window.Field><window.Field label="Instruções"><window.Textarea rows={5} value={aiDraft.systemPrompt} placeholder="Tom de voz, limites e regras do atendimento" onChange={(event) => setAiDraft({ ...aiDraft, systemPrompt: event.target.value })} /></window.Field><window.Button onClick={() => submitGrowth('ai_settings')} disabled={growthBusy}>Salvar configuração</window.Button></div><div className="card card-pad crm-ai-knowledge-form"><div><h3>Base de conhecimento</h3><p className="muted">Políticas, serviços, horários e respostas oficiais.</p></div><window.Input value={aiDraft.knowledgeTitle} placeholder="Título" onChange={(event) => setAiDraft({ ...aiDraft, knowledgeTitle: event.target.value })} /><window.Textarea rows={4} value={aiDraft.knowledgeContent} placeholder="Conteúdo confiável para a IA consultar" onChange={(event) => setAiDraft({ ...aiDraft, knowledgeContent: event.target.value })} /><window.Button icon="plus" onClick={() => submitGrowth('knowledge')} disabled={growthBusy || !aiDraft.knowledgeTitle.trim() || !aiDraft.knowledgeContent.trim()}>Adicionar conteúdo</window.Button></div></>}
          <div className="crm-growth-list">{(growthData.ai && growthData.ai.knowledge || []).map((item) => <article className="card card-pad crm-growth-row" key={item.id}><span><strong>{item.title}</strong><small>{String(item.content).slice(0,160)}</small></span>{access.manageUsers && <window.Button size="sm" variant="outline" onClick={() => submitGrowth('knowledge_delete', item)} disabled={growthBusy}>Excluir</window.Button>}</article>)}</div>
        </section>
      )}

      {!settingsView && workspaceView === 'inbox' && (whatsappConnected ? (
        <section className="crm-inbox-shell">
          <header className="crm-inbox-toolbar">
            <div>
              <div className="crm-eyebrow">Atendimento</div>
              <h2>Caixa de entrada</h2>
            </div>
            <window.Button icon="plus" onClick={() => setNewConversationOpen(true)}>
              Nova conversa
            </window.Button>
          </header>

          <div className="crm-inbox-filters" role="tablist" aria-label="Filtrar conversas">
            {filterItems.map(([value, label, count]) => (
              <button
                type="button"
                role="tab"
                aria-selected={filter === value}
                className={filter === value ? 'active' : ''}
                key={value}
                onClick={() => setFilter(value)}
              >
                {label}
                <span>{count}</span>
              </button>
            ))}
          </div>

          {inboxView === 'board' ? (
            <div className="crm-kanban-view crm-liquid-glass-scope">
              <div className="crm-ambient-light" aria-hidden="true">
                <div className="crm-ambient-orb crm-ambient-orb-1"></div>
                <div className="crm-ambient-orb crm-ambient-orb-2"></div>
                <div className="crm-ambient-orb crm-ambient-orb-3"></div>
              </div>
              <header className="crm-kanban-head">
                <div className="crm-kanban-title">
                  <span className="crm-channel-summary-dot connected" aria-hidden="true"></span>
                  <div><strong>Quadro de atendimentos</strong><small>Arraste os cartões para atualizar a situação</small></div>
                </div>
                <div className="crm-kanban-tools">
                  <div className="crm-kanban-search">
                    <window.Icon name="search" size={15} />
                    <window.Input
                      value={search}
                      placeholder="Buscar atendimento"
                      onChange={(event) => setSearch(event.target.value)}
                      aria-label="Buscar por nome, telefone ou e-mail"
                    />
                  </div>
                  {access.viewAll && (
                    <window.Select
                      value={assignedFilter}
                      aria-label="Filtrar por responsável"
                      onChange={(event) => setAssignedFilter(event.target.value)}
                    >
                      <option value="all">Todos os responsáveis</option>
                      <option value="mine">Minhas conversas</option>
                      <option value="unassigned">Sem responsável</option>
                    </window.Select>
                  )}
                  <label className="crm-kanban-age-filter" title="Conversas antigas continuam salvas e podem ser exibidas a qualquer momento">
                    <input type="checkbox" checked={hideOldResolved} onChange={toggleOldResolved} />
                    <span>Ocultar concluídas há +7 dias</span>
                  </label>
                  <div className="crm-inbox-view-switch" aria-label="Modo de visualização">
                    <button type="button" onClick={() => changeInboxView('list')} title="Ver conversas"><window.Icon name="list" size={17} /><span>Conversas</span></button>
                    <button type="button" className="active" aria-current="page" title="Ver quadro"><window.Icon name="grid" size={17} /><span>Quadro</span></button>
                  </div>
                  <button className="crm-kanban-icon-button" type="button" onClick={() => loadConversations()} title="Atualizar quadro" aria-label="Atualizar quadro"><window.Icon name="refresh" size={18} /></button>
                  <button className="crm-kanban-new-button" type="button" onClick={() => setNewConversationOpen(true)}><window.Icon name="plus" size={17} /> Nova conversa</button>
                </div>
              </header>

              <div className={`crm-kanban-board${boardDragId ? ' dragging' : ''}`} aria-live="polite">
                {[
                  ['awaiting', 'Aguardando resposta', 'O cliente enviou a última mensagem', 'bell', ''],
                  ['open', 'Em atendimento', 'Conversas sendo atendidas agora', 'whatsapp', 'open'],
                  ['pending', 'Pendentes', 'Aguardando retorno ou ação', 'clock', 'pending'],
                  ['resolved', 'Concluídas', 'Atendimentos finalizados', 'check', 'resolved'],
                ].map(([key, label, description, icon, dropStatus]) => (
                  <section
                    className={`crm-kanban-column status-${key}${boardDropStatus === dropStatus && dropStatus ? ' drop-active' : ''}`}
                    key={key}
                    onDragOver={(event) => {
                      if (!dropStatus) return;
                      event.preventDefault();
                      event.dataTransfer.dropEffect = 'move';
                      setBoardDropStatus(dropStatus);
                    }}
                    onDragLeave={(event) => {
                      if (!event.currentTarget.contains(event.relatedTarget)) setBoardDropStatus('');
                    }}
                    onDrop={(event) => {
                      if (!dropStatus) return;
                      event.preventDefault();
                      const conversationId = Number(event.dataTransfer.getData('text/plain') || boardDragId);
                      if (conversationId) moveBoardConversation(conversationId, dropStatus);
                    }}
                  >
                    <header className="crm-kanban-column-head">
                      <span className="crm-kanban-column-icon"><window.Icon name={icon} size={15} /></span>
                      <span><strong>{label}</strong><small>{description}</small></span>
                      <b>{visibleBoardColumns[key].length}</b>
                    </header>
                    <div className="crm-kanban-column-tools">
                      <label className="crm-kanban-column-search">
                        <window.Icon name="search" size={13} />
                        <input
                          type="search"
                          value={boardSearches[key]}
                          placeholder={`Pesquisar em ${label.toLowerCase()}`}
                          aria-label={`Pesquisar na coluna ${label}`}
                          onChange={(event) => setBoardSearches((current) => ({ ...current, [key]: event.target.value }))}
                        />
                      </label>
                      <div className="crm-kanban-bulk-row">
                        <label title="Selecionar todos os atendimentos visíveis nesta coluna">
                          <input
                            type="checkbox"
                            checked={visibleBoardColumns[key].length > 0 && boardSelected[key].length === visibleBoardColumns[key].length}
                            onChange={(event) => selectAllBoardColumn(key, event.target.checked)}
                          />
                          <span>Todos</span>
                        </label>
                        <select
                          value={boardBulkStatus[key]}
                          aria-label={`Novo status para os selecionados em ${label}`}
                          onChange={(event) => setBoardBulkStatus((current) => ({ ...current, [key]: event.target.value }))}
                        >
                          <option value="open">Em atendimento</option>
                          <option value="pending">Pendente</option>
                          <option value="resolved">Concluída</option>
                        </select>
                        <button
                          type="button"
                          disabled={boardBulkBusy || boardSelected[key].length === 0}
                          onClick={() => bulkMoveBoardColumn(key)}
                        >
                          Aplicar{boardSelected[key].length ? ` (${boardSelected[key].length})` : ''}
                        </button>
                      </div>
                    </div>
                    <div className="crm-kanban-column-body">
                      {conversationLoading && conversations.length === 0 ? (
                        <div className="crm-kanban-empty">Carregando atendimentos…</div>
                      ) : visibleBoardColumns[key].length === 0 ? (
                        <div className="crm-kanban-empty">Nenhum atendimento nesta etapa</div>
                      ) : visibleBoardColumns[key].map((conversation) => (
                        <CrmKanbanCard
                          key={conversation.id}
                          conversation={conversation}
                          busy={Number(boardBusyId) === Number(conversation.id)}
                          selected={boardSelected[key].includes(Number(conversation.id))}
                          onSelect={(conversationId, checked) => selectBoardConversation(key, conversationId, checked)}
                          onOpen={openBoardConversation}
                          onMove={moveBoardConversation}
                          onDragStart={(event, item) => {
                            setBoardDragId(Number(item.id));
                            event.dataTransfer.effectAllowed = 'move';
                            event.dataTransfer.setData('text/plain', String(item.id));
                          }}
                          onDragEnd={() => { setBoardDragId(0); setBoardDropStatus(''); }}
                        />
                      ))}
                    </div>
                  </section>
                ))}
              </div>
            </div>
          ) : (
          <div className={`crm-inbox-grid${selectedId ? ' has-selection' : ''}${contextOpen ? ' context-open' : ''}`}>
            <aside className="crm-inbox-conversations-pane">
              <div className="crm-inbox-list-head">
                <div className="crm-inbox-list-title">
                  <span className={`crm-channel-summary-dot${whatsappConnected ? ' connected' : ''}`} aria-hidden="true"></span>
                  <div><strong>Conversas</strong><small>{whatsappConnected ? 'WhatsApp conectado' : 'Canal desconectado'}</small></div>
                </div>
                <div className="crm-inbox-list-actions">
                  <div className="crm-inbox-view-switch" aria-label="Modo de visualização">
                    <button type="button" className="active" aria-current="page" title="Ver conversas"><window.Icon name="list" size={17} /></button>
                    <button type="button" onClick={() => changeInboxView('board')} title="Ver quadro"><window.Icon name="grid" size={17} /></button>
                  </div>
                  <button type="button" onClick={() => loadConversations()} title="Atualizar conversas" aria-label="Atualizar conversas">
                    <window.Icon name="refresh" size={19} />
                  </button>
                  <button type="button" onClick={() => setNewConversationOpen(true)} title="Nova conversa" aria-label="Nova conversa">
                    <window.Icon name="plus" size={20} />
                  </button>
                </div>
              </div>
              <div className="crm-inbox-list-tools">
                <div className="crm-inbox-search">
                  <window.Icon name="search" size={16} />
                  <window.Input
                    value={search}
                    placeholder="Buscar conversa"
                    onChange={(event) => setSearch(event.target.value)}
                    aria-label="Buscar por nome, telefone ou e-mail"
                  />
                </div>
                <div className="crm-inbox-list-filters" role="tablist" aria-label="Filtrar conversas">
                  {filterItems.map(([value, label, count]) => (
                    <button
                      type="button"
                      role="tab"
                      aria-selected={filter === value}
                      className={filter === value ? 'active' : ''}
                      key={value}
                      onClick={() => setFilter(value)}
                    >
                      {label}<span>{count}</span>
                    </button>
                  ))}
                </div>
                {access.viewAll && (
                  <window.Select
                    value={assignedFilter}
                    aria-label="Filtrar por responsável"
                    onChange={(event) => setAssignedFilter(event.target.value)}
                  >
                    <option value="all">Todos os responsáveis</option>
                    <option value="mine">Minhas conversas</option>
                    <option value="unassigned">Sem responsável</option>
                  </window.Select>
                )}
              </div>
              <div className="crm-inbox-conversation-list" aria-live="polite">
                {conversationLoading && conversations.length === 0 ? (
                  <div className="crm-inbox-list-empty">Carregando conversas…</div>
                ) : conversations.length === 0 ? (
                  <div className="crm-inbox-list-empty">
                    <strong>Nenhuma conversa encontrada</strong>
                    <span>Novas mensagens aparecerão aqui.</span>
                  </div>
                ) : conversations.map((conversation) => (
                  <CrmConversationItem
                    key={conversation.id}
                    conversation={conversation}
                    active={conversation.id === selectedId}
                    onClick={() => chooseConversation(conversation.id)}
                  />
                ))}
              </div>
            </aside>

            <main className="crm-inbox-thread-pane">
              {!currentConversation ? (
                <div className="crm-inbox-thread-empty">
                  <window.Icon name="whatsapp" size={28} />
                  <strong>Selecione uma conversa</strong>
                  <span>Abra um atendimento para ver o histórico e responder.</span>
                </div>
              ) : (
                <>
                  <header className="crm-inbox-thread-head">
                    <button
                      type="button"
                      className="crm-inbox-mobile-back"
                      aria-label="Voltar para conversas"
                      onClick={() => {
                        setSelectedId(0);
                        setSelectedConversation(null);
                        setMessages([]);
                      }}
                    >
                      <window.Icon name="chevLeft" size={20} />
                    </button>
                    <window.Avatar
                      initials={crmInboxInitials(currentContactName)}
                      src={(currentClient && currentClient.photoUrl) || (currentConversation.crmContact && currentConversation.crmContact.photoUrl) || ''}
                      alt={currentContactName}
                      color="gray"
                      size={38}
                    />
                    <button type="button" className="crm-inbox-thread-contact" onClick={() => setContextOpen(true)} title="Ver dados do contato">
                      <strong>{currentContactName}</strong>
                      <span>{crmInboxPhone(currentConversation.counterpartPhone)}</span>
                      <span className="crm-inbox-thread-owner">
                        {currentConversation.assignedUser
                          ? `Atendido por ${currentConversation.assignedUser.name}`
                          : 'Aguardando responsável'}
                      </span>
                    </button>
                    <div className="crm-inbox-thread-actions">
                      {!currentClient && <button type="button" onClick={beginConversationContact} title={currentConversation.crmContact ? 'Cadastrar também na Agenda' : 'Cadastrar contato'} aria-label={currentConversation.crmContact ? 'Cadastrar também na Agenda' : 'Cadastrar contato'}>
                        <window.Icon name="users" size={17} />
                        {currentConversation.crmContact ? 'Levar para Agenda' : 'Cadastrar contato'}
                      </button>}
                      <button type="button" onClick={() => setContextOpen((value) => !value)} title="Dados do contato" aria-label="Dados do contato">
                        <window.Icon name="info" size={17} />
                      </button>
                      {currentConversation.status !== 'pending' && (
                        <button
                          type="button"
                          title="Marcar como pendente"
                          aria-label="Marcar como pendente"
                          onClick={() => updateConversation({ status: 'pending' }, 'Conversa marcada como pendente.')}
                          disabled={conversationBusy}
                        >
                          <window.Icon name="clock" size={16} />
                          Pendente
                        </button>
                      )}
                      {currentConversation.status !== 'resolved' && (
                        <button
                          type="button"
                          title="Resolver conversa"
                          aria-label="Resolver conversa"
                          onClick={() => updateConversation({ status: 'resolved' }, 'Conversa resolvida.')}
                          disabled={conversationBusy}
                        >
                          <window.Icon name="check" size={16} />
                          Resolver
                        </button>
                      )}
                      {currentConversation.status === 'resolved' && (
                        <button
                          type="button"
                          title="Reabrir conversa"
                          aria-label="Reabrir conversa"
                          onClick={() => updateConversation({ status: 'open' }, 'Conversa reaberta.')}
                          disabled={conversationBusy}
                        >
                          <window.Icon name="refresh" size={16} />
                          Reabrir
                        </button>
                      )}
                    </div>
                  </header>

                  <div className="crm-inbox-message-viewport" ref={messageViewportRef} aria-live="polite">
                    {threadLoading && messages.length === 0 ? (
                      <div className="crm-inbox-thread-loading">Carregando histórico…</div>
                    ) : messages.length === 0 ? (
                      <div className="crm-inbox-thread-loading">Nenhuma mensagem nesta conversa.</div>
                    ) : arrangedMessages.map((item) => (
                      <CrmMessageBubble
                        message={item.message}
                        reactions={item.reactions}
                        replyToMessage={item.message.content && item.message.content.replyToMessageId
                          ? messagesByProviderId.get(item.message.content.replyToMessageId) || null
                          : null}
                        contactName={currentContactName}
                        onReply={(message) => {
                          setReplyingTo(message);
                          window.setTimeout(() => document.querySelector('.crm-inbox-composer .textarea')?.focus(), 0);
                        }}
                        key={item.message.id}
                      />
                    ))}
                  </div>

                  <form className="crm-inbox-composer" onSubmit={sendMessage}>
                    {sendChannel === 'official' && !currentConversation.canSendFreeform && (
                      <div className="crm-composer-window-warning">
                        A janela de 24 horas está fechada. Use Nova conversa para enviar um modelo aprovado e aguarde a resposta do cliente.
                      </div>
                    )}
                    {sendChannel === 'web' && !whatsappWebReady && (
                      <div className="crm-composer-window-warning">
                        A sessão WhatsApp Web está indisponível. Reconecte-a nas configurações ou selecione o canal oficial.
                      </div>
                    )}
                    <div className="crm-composer-channel-row">
                      <label htmlFor="crm-send-channel">Enviar esta mensagem por</label>
                      <select
                        id="crm-send-channel"
                        value={sendChannel}
                        disabled={messageBusy}
                        onChange={(event) => {
                          const channel = event.target.value === 'web' ? 'web' : 'official';
                          setSendChannel(channel);
                          window.localStorage.setItem('crmSendChannel', channel);
                          if (channel === 'web') {
                            setReplyingTo(null);
                            setAttachment(null);
                            if (attachmentInputRef.current) attachmentInputRef.current.value = '';
                          }
                        }}
                      >
                        <option value="official">Oficial · Cloud API{currentConversation.canSendFreeform ? '' : ' (janela fechada)'}</option>
                        <option value="web" disabled={!whatsappWebReady}>Sessão Web · não oficial{whatsappWebReady ? '' : ' (desconectada)'}</option>
                      </select>
                      <span className={`crm-composer-channel-state ${sendChannel}`}>
                        {sendChannel === 'web' ? 'Saída pela sessão vinculada · recebimento continua oficial' : 'Saída e recebimento pela API oficial'}
                      </span>
                    </div>
                    <div className="crm-composer-identity">
                      <span>
                        <b>{user.name || user.login}</b> conectado · cliente verá <strong>{senderDisplayName}</strong> em negrito
                      </span>
                      <button
                        type="button"
                        disabled={messageBusy || senderIdentityBusy}
                        onClick={() => {
                          setSenderNameDraft(senderDisplayName);
                          setSenderEditorOpen((current) => !current);
                        }}
                      >
                        {senderEditorOpen ? 'Fechar' : 'Alterar nome'}
                      </button>
                    </div>
                    {senderEditorOpen && (
                      <div className="crm-composer-identity-editor">
                        <window.Input
                          value={senderNameDraft}
                          maxLength={80}
                          disabled={senderIdentityBusy}
                          placeholder="Ex.: Rafael, Comercial ou Suporte"
                          aria-label="Nome mostrado ao cliente"
                          onChange={(event) => setSenderNameDraft(event.target.value)}
                          onKeyDown={(event) => {
                            if (event.key === 'Enter') {
                              event.preventDefault();
                              saveSenderIdentity();
                            }
                          }}
                        />
                        <window.Button type="button" size="sm" onClick={saveSenderIdentity} disabled={senderIdentityBusy}>
                          {senderIdentityBusy ? 'Salvando…' : 'Salvar nome'}
                        </window.Button>
                        <button
                          type="button"
                          className="crm-composer-identity-reset"
                          disabled={senderIdentityBusy}
                          onClick={() => setSenderNameDraft('')}
                        >
                          Usar nome do usuário
                        </button>
                      </div>
                    )}
                    {quickReplies.length > 0 && <div className="crm-quick-replies" aria-label="Respostas rápidas">
                      {quickReplies.map((reply) => (
                        <button
                          type="button"
                          key={reply.id}
                          disabled={messageBusy || !selectedChannelReady}
                          onClick={() => setMessageBody(reply.body)}
                          title={reply.body}
                        >
                          {reply.title}
                        </button>
                      ))}
                    </div>}
                    {attachment && (
                      <div className="crm-composer-attachment">
                        <window.Icon name="file" size={18} />
                        <span><strong>{attachment.name}</strong><small>{(attachment.size / 1024 / 1024).toFixed(1)} MB</small></span>
                        <button type="button" onClick={() => { setAttachment(null); if (attachmentInputRef.current) attachmentInputRef.current.value = ''; }} aria-label="Remover anexo">×</button>
                      </div>
                    )}
                    {replyingTo && (
                      <div className="crm-composer-reply" role="status">
                        <span className="crm-composer-reply-icon"><window.Icon name="reply" size={17} /></span>
                        <span>
                          <strong>Respondendo à mensagem</strong>
                          <small>{crmInboxReplyPreview(replyingTo)}</small>
                        </span>
                        <button type="button" onClick={() => setReplyingTo(null)} aria-label="Cancelar resposta">×</button>
                      </div>
                    )}
                    <window.Textarea
                      value={messageBody}
                      rows={3}
                      maxLength={messageMaxLength}
                      disabled={messageBusy || !selectedChannelReady}
                      placeholder={attachment ? 'Adicione uma legenda, se quiser…' : 'Digite uma mensagem de atendimento…'}
                      onChange={(event) => setMessageBody(event.target.value)}
                      onKeyDown={(event) => {
                        if (event.key === 'Enter' && !event.shiftKey) {
                          event.preventDefault();
                          if (!messageBusy && messageBody.trim()) event.currentTarget.form.requestSubmit();
                        }
                      }}
                    />
                    <div className="crm-inbox-composer-foot">
                      <span>Enter envia · Shift + Enter quebra a linha</span>
                      <div>
                        <input
                          ref={attachmentInputRef}
                          className="crm-composer-file-input"
                          type="file"
                          accept="image/jpeg,image/png,image/webp,video/mp4,video/3gpp,audio/mpeg,audio/mp4,audio/ogg,audio/aac,application/pdf,text/plain,.doc,.docx"
                          onChange={(event) => setAttachment(event.target.files && event.target.files[0] ? event.target.files[0] : null)}
                        />
                        <button
                          className="crm-composer-attach-button"
                          type="button"
                          disabled={messageBusy || sendChannel === 'web' || !selectedChannelReady}
                          onClick={() => attachmentInputRef.current && attachmentInputRef.current.click()}
                          title={sendChannel === 'web' ? 'Anexos estão disponíveis pelo canal oficial' : 'Enviar imagem, vídeo, áudio ou documento'}
                        >
                          <window.Icon name="paperclip" size={18} /> <span>Anexar</span>
                        </button>
                        <button className="crm-composer-attach-button" type="button" disabled={messageBusy || aiSuggestBusy || !selectedChannelReady} onClick={suggestAiReply} title="Gerar um rascunho para revisão">
                          <window.Icon name="star" size={18} /> <span>{aiSuggestBusy ? 'Gerando…' : 'Sugerir com IA'}</span>
                        </button>
                        <span>{messageBody.length}/{messageMaxLength}</span>
                        <window.Button
                          type="submit"
                          icon="send"
                          disabled={messageBusy || (!messageBody.trim() && !attachment) || !selectedChannelReady}
                        >
                          {messageBusy ? 'Enviando…' : 'Enviar'}
                        </window.Button>
                      </div>
                    </div>
                  </form>
                </>
              )}
            </main>

            <aside className="crm-inbox-context-pane">
              <div className="crm-inbox-context-head">
                <strong>Dados do contato</strong>
                <button type="button" onClick={() => setContextOpen(false)} title="Fechar painel" aria-label="Fechar painel">
                  <window.Icon name="x" size={19} />
                </button>
              </div>
              {!currentConversation ? (
                <div className="crm-inbox-context-empty">Os dados do contato aparecerão aqui.</div>
              ) : (
                <>
                  <section className="crm-inbox-context-profile">
                    <window.Avatar
                      initials={crmInboxInitials(currentContactName)}
                      src={(currentClient && currentClient.photoUrl) || (currentConversation.crmContact && currentConversation.crmContact.photoUrl) || ''}
                      alt={currentContactName}
                      color="gray"
                      size={54}
                    />
                    <strong>{currentContactName}</strong>
                    <span>{crmInboxPhone(currentConversation.counterpartPhone)}</span>
                    <span className={`crm-inbox-status crm-inbox-status-${currentConversation.lastMessageDirection === 'inbound' ? 'awaiting' : currentConversation.status}`}>
                      {currentConversation.lastMessageDirection === 'inbound'
                        ? 'Aguardando resposta'
                        : (crmInboxStatusLabels[currentConversation.status] || currentConversation.status)}
                    </span>
                  </section>

                  {!currentClient && <section className="crm-inbox-context-section crm-contact-register-panel">
                    <h3>{currentConversation.crmContact ? 'Contato salvo somente no CRM' : 'Cadastrar este contato'}</h3>
                    {!contactEditor || contactEditor.key !== `conversation:${currentConversation.id}` ? (
                      <><p>{currentConversation.crmContact ? 'Você pode promovê-lo a cliente para usar também na Agenda.' : 'Salve o número no CRM ou transforme-o em cliente da Agenda.'}</p><window.Button icon="users" variant="outline" onClick={beginConversationContact}>{currentConversation.crmContact ? 'Cadastrar na Agenda' : 'Cadastrar contato'}</window.Button></>
                    ) : (
                      <div className="crm-contact-register-form">
                        <window.Field label="Nome"><window.Input value={contactEditor.name} maxLength={140} onChange={(event) => setContactEditor({ ...contactEditor, name: event.target.value })} /></window.Field>
                        <window.Field label="E-mail (opcional)"><window.Input type="email" value={contactEditor.email} maxLength={160} onChange={(event) => setContactEditor({ ...contactEditor, email: event.target.value })} /></window.Field>
                        <window.Field label="Cadastrar em"><window.Select value={contactEditor.scope} onChange={(event) => setContactEditor({ ...contactEditor, scope: event.target.value })}><option value="crm">Somente no CRM</option><option value="agenda">Agenda inteira + CRM</option></window.Select></window.Field>
                        <window.Button onClick={saveDirectoryContact} disabled={contactSaving || !contactEditor.name.trim()}>{contactSaving ? 'Salvando…' : 'Salvar contato'}</window.Button>
                        <window.Button variant="outline" onClick={() => setContactEditor(null)} disabled={contactSaving}>Cancelar</window.Button>
                      </div>
                    )}
                  </section>}

                  <section className="crm-inbox-context-section">
                    <h3>Responsável</h3>
                    {access.assign ? (
                      <window.Select
                        value={currentConversation.assignedUser ? currentConversation.assignedUser.id : ''}
                        disabled={conversationBusy}
                        onChange={(event) => {
                          const assignedUserId = Number(event.target.value) || 0;
                          const nextAssignee = assignees.find((item) => Number(item.id) === assignedUserId);
                          updateConversation(
                            { assignedUserId },
                            nextAssignee ? `Atendimento transferido para ${nextAssignee.name}.` : 'Atendimento devolvido para a fila.'
                          );
                        }}
                      >
                        <option value="">Sem responsável</option>
                        {assignees.map((assignee) => (
                          <option value={assignee.id} key={assignee.id}>
                            {assignee.name} · {crmInboxRoleLabels[assignee.role] || assignee.role}
                          </option>
                        ))}
                      </window.Select>
                    ) : currentConversation.assignedUser ? (
                      <span>{currentConversation.assignedUser.name}</span>
                    ) : (
                      <window.Button
                        variant="outline"
                        size="sm"
                        onClick={() => updateConversation({ assignedUserId: user.id }, 'Atendimento assumido.')}
                        disabled={conversationBusy}
                      >
                        Assumir atendimento
                      </window.Button>
                    )}
                  </section>

                  <section className="crm-inbox-context-section">
                    <h3>Contato na Agenda</h3>
                    {currentClient ? (
                      <dl className="crm-inbox-contact-data">
                        <div><dt>Telefone</dt><dd>{currentClient.phone || crmInboxPhone(currentConversation.counterpartPhone)}</dd></div>
                        <div><dt>E-mail</dt><dd>{currentClient.email || 'Não informado'}</dd></div>
                        <div><dt>Categoria</dt><dd>{currentClient.tag || 'Sem categoria'}</dd></div>
                        <div><dt>Atendimentos</dt><dd>{currentClient.visits}</dd></div>
                      </dl>
                    ) : (
                      <p>Este número ainda não corresponde a um cliente cadastrado na Agenda.</p>
                    )}
                  </section>

                  <section className="crm-inbox-context-section">
                    <h3>Etiquetas</h3>
                    <div className="crm-context-tags">
                      {conversationContext.tags.length === 0 ? (
                        <p>Nenhuma etiqueta cadastrada.</p>
                      ) : conversationContext.tags.map((tag) => {
                        const selected = conversationContext.selectedTagIds.includes(Number(tag.id));
                        return (
                          <button
                            type="button"
                            key={tag.id}
                            className={`crm-context-tag${selected ? ' selected' : ''}`}
                            style={{ '--crm-tag-color': tag.color }}
                            disabled={contextBusy}
                            onClick={() => toggleConversationTag(tag.id)}
                            aria-pressed={selected}
                          >
                            <i></i>{tag.name}
                          </button>
                        );
                      })}
                    </div>
                  </section>

                  <section className="crm-inbox-context-section">
                    <h3>Notas internas</h3>
                    <window.Textarea value={noteDraft} rows={3} maxLength={8000} placeholder="Visível somente para a equipe" onChange={(event) => setNoteDraft(event.target.value)} />
                    <window.Button size="sm" variant="outline" onClick={createConversationNote} disabled={contextBusy || !noteDraft.trim()}>Adicionar nota</window.Button>
                    <div className="crm-context-notes">
                      {conversationContext.notes.map((note) => (
                        <article key={note.id} className="crm-context-note">
                          <p>{note.body}</p>
                          <footer><span>{note.author_name || 'Sistema'} · {crmInboxDate(note.created_at, true)}</span><button type="button" onClick={() => deleteConversationNote(note)} disabled={contextBusy} aria-label="Excluir nota">×</button></footer>
                        </article>
                      ))}
                    </div>
                  </section>

                  <section className="crm-inbox-context-section">
                    <h3>Próximo agendamento</h3>
                    {currentConversation.nextAppointment ? (
                      <div className="crm-inbox-appointment">
                        <strong>
                          {crmInboxAppointmentDate(currentConversation.nextAppointment.date)}
                          {' · '}
                          {currentConversation.nextAppointment.start}
                        </strong>
                        <span>{currentConversation.nextAppointment.serviceName}</span>
                        {currentConversation.nextAppointment.professionalName && (
                          <small>{currentConversation.nextAppointment.professionalName}</small>
                        )}
                      </div>
                    ) : (
                      <p>Nenhum agendamento futuro encontrado.</p>
                    )}
                  </section>
                </>
              )}
            </aside>
          </div>
          )}
        </section>
      ) : (
        <section className="card card-pad crm-inbox-connect-empty">
          <window.Empty
            icon="whatsapp"
            title="Conecte o WhatsApp"
            desc="Depois da conexão, mensagens, contatos, responsáveis e pendências serão organizados nesta caixa de entrada."
          />
          {access.manageChannels && (
            <div className="row" style={{ justifyContent: 'center', marginTop: 16 }}>
              <window.Button
                onClick={connectWhatsApp}
                disabled={!channelSetupReady || !!channelBusy}
              >
                {channelBusy === 'connect' ? 'Abrindo conexão…' : 'Conectar WhatsApp'}
              </window.Button>
            </div>
          )}
        </section>
      ))}

      {settingsView && access.manageUsers && (
        <section className="card crm-access-collapsible">
          <button
            type="button"
            className="crm-access-collapsible-head"
            onClick={() => setAccessOpen((current) => !current)}
            aria-expanded={accessOpen}
          >
            <span>
              <strong>Acessos ao CRM</strong>
              <small>
                {enabledUsersCount} {enabledUsersCount === 1 ? 'usuário com acesso' : 'usuários com acesso'}
              </small>
            </span>
            <window.Icon name={accessOpen ? 'chevDown' : 'chevRight'} size={18} />
          </button>
          {accessOpen && (
            <div className="crm-access-collapsible-body">
              {users.map((item) => (
                <div className="crm-access-row" key={item.id}>
                  <window.Avatar initials={crmInboxInitials(item.name || item.login)} 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>
      )}

      <CrmNewConversationModal
        open={newConversationOpen}
        contacts={contacts}
        contactsLoading={contactsLoading}
        contactQuery={contactQuery}
        setContactQuery={setContactQuery}
        phone={newPhone}
        setPhone={setNewPhone}
        templates={templates}
        templatesLoading={templatesLoading}
        templateKey={templateKey}
        setTemplateKey={(value) => { setTemplateKey(value); setTemplateParameters({}); setTemplateMedia(null); }}
        templateParameters={templateParameters}
        setTemplateParameters={setTemplateParameters}
        templateMedia={templateMedia}
        setTemplateMedia={setTemplateMedia}
        error={newConversationError}
        busy={newBusy}
        onClose={() => {
          if (newBusy) return;
          setNewConversationOpen(false);
          setContactQuery('');
          setContacts([]);
          setNewPhone('');
          setTemplateKey('');
          setTemplateParameters({});
          setTemplateMedia(null);
          setNewConversationError('');
        }}
        onSubmit={sendNewConversation}
      />
    </div>
  );
}

// A empresa de demonstração mantém a tela usada na análise da Meta.
// Os demais tenants recebem a caixa de entrada operacional atual.
function CrmInboxRouteScreen(props) {
  return props.user && props.user.hasCrm
    ? <CrmInboxScreen {...props} />
    : <window.CrmInactiveScreen {...props} />;
}

if (window.TENANT_SLUG !== 'empresa-demonstracao') {
  window.CrmScreen = CrmInboxRouteScreen;
}