<script lang="ts">
  import {
    chatAberto,
    chatMinimizado,
    conversaAtiva,
    fecharChat,
    minimizarChat,
    maximizarChat,
    abrirChat,
    abrirConversa,
  } from "$lib/stores/chatStore";
  import { useQuery } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
  import ChatList from "./ChatList.svelte";
  import ChatWindow from "./ChatWindow.svelte";
  import { authStore } from "$lib/stores/auth.svelte";
  import { getAvatarUrl } from "$lib/utils/avatarGenerator";

  const count = useQuery(api.chat.contarNotificacoesNaoLidas, {});

  let isOpen = $state(false);
  let isMinimized = $state(false);
  let activeConversation = $state<string | null>(null);

  // Função para obter a URL do avatar/foto do usuário logado
  const avatarUrlDoUsuario = $derived(() => {
    const usuario = authStore.usuario;
    if (!usuario) return null;
    
    // Prioridade: fotoPerfilUrl > avatar > fallback com nome
    if (usuario.fotoPerfilUrl) {
      return usuario.fotoPerfilUrl;
    }
    if (usuario.avatar) {
      return getAvatarUrl(usuario.avatar);
    }
    // Fallback: gerar avatar baseado no nome
    return getAvatarUrl(usuario.nome);
  });

  // Posição do widget (arrastável)
  let position = $state({ x: 0, y: 0 });
  let isDragging = $state(false);
  let dragStart = $state({ x: 0, y: 0 });
  let isAnimating = $state(false);

  // Tamanho da janela (redimensionável)
  const MIN_WIDTH = 300;
  const MAX_WIDTH = 1200;
  const MIN_HEIGHT = 400;
  const MAX_HEIGHT = 900;
  const DEFAULT_WIDTH = 440;
  const DEFAULT_HEIGHT = 680;

  // Carregar tamanho salvo do localStorage ou usar padrão
  function getSavedSize() {
    if (typeof window === 'undefined') return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
    const saved = localStorage.getItem('chat-window-size');
    if (saved) {
      try {
        const parsed = JSON.parse(saved);
        return {
          width: Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, parsed.width || DEFAULT_WIDTH)),
          height: Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, parsed.height || DEFAULT_HEIGHT))
        };
      } catch {
        return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
      }
    }
    return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
  }

  let windowSize = $state(getSavedSize());
  let isMaximized = $state(false);
  let previousSize = $state({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
  let previousPosition = $state({ x: 0, y: 0 });

  // Salvar tamanho no localStorage
  function saveSize() {
    if (typeof window !== 'undefined') {
      localStorage.setItem('chat-window-size', JSON.stringify(windowSize));
    }
  }

  // Redimensionamento
  let isResizing = $state(false);
  let resizeStart = $state({ x: 0, y: 0, width: 0, height: 0 });
  let resizeDirection = $state<string | null>(null); // 'n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'

  function handleResizeStart(e: MouseEvent, direction: string) {
    if (e.button !== 0) return;
    e.preventDefault();
    e.stopPropagation();
    isResizing = true;
    resizeDirection = direction;
    resizeStart = {
      x: e.clientX,
      y: e.clientY,
      width: windowSize.width,
      height: windowSize.height
    };
    document.body.classList.add('resizing');
  }

  function handleResizeMove(e: MouseEvent) {
    if (!isResizing || !resizeDirection) return;

    const deltaX = e.clientX - resizeStart.x;
    const deltaY = e.clientY - resizeStart.y;

    let newWidth = resizeStart.width;
    let newHeight = resizeStart.height;
    let newX = position.x;
    let newY = position.y;

    // Redimensionar baseado na direção
    if (resizeDirection.includes('e')) {
      newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resizeStart.width + deltaX));
    }
    if (resizeDirection.includes('w')) {
      newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resizeStart.width - deltaX));
      newX = position.x + (resizeStart.width - newWidth);
    }
    if (resizeDirection.includes('s')) {
      newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, resizeStart.height + deltaY));
    }
    if (resizeDirection.includes('n')) {
      newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, resizeStart.height - deltaY));
      newY = position.y + (resizeStart.height - newHeight);
    }

    windowSize = { width: newWidth, height: newHeight };
    position = { x: newX, y: newY };
  }

  function handleResizeEnd() {
    if (isResizing) {
      isResizing = false;
      resizeDirection = null;
      document.body.classList.remove('resizing');
      saveSize();
      ajustarPosicao();
    }
  }

  // Sincronizar com stores
  $effect(() => {
    isOpen = $chatAberto;
  });

  $effect(() => {
    isMinimized = $chatMinimizado;
  });

  $effect(() => {
    activeConversation = $conversaAtiva;
  });

  // Tipos para conversas
  type ConversaComTimestamp = {
    _id: string;
    ultimaMensagemTimestamp?: number;
    ultimaMensagemRemetenteId?: string; // ID do remetente da última mensagem
    ultimaMensagem?: string;
    nome?: string;
    outroUsuario?: { nome: string };
  };

  // Detectar novas mensagens globalmente (mesmo quando chat está fechado/minimizado)
  const todasConversas = useQuery(api.chat.listarConversas, {});
  let mensagensNotificadasGlobal = $state<Set<string>>(new Set());
  let showGlobalNotificationPopup = $state(false);
  let globalNotificationMessage = $state<{ remetente: string; conteudo: string; conversaId: string } | null>(null);
  let globalNotificationTimeout: ReturnType<typeof setTimeout> | null = null;
  
  // Carregar mensagens já notificadas do localStorage ao montar
  let mensagensCarregadasGlobal = $state(false);
  
  $effect(() => {
    if (typeof window !== 'undefined' && !mensagensCarregadasGlobal) {
      const saved = localStorage.getItem('chat-mensagens-notificadas-global');
      if (saved) {
        try {
          const ids = JSON.parse(saved) as string[];
          mensagensNotificadasGlobal = new Set(ids);
        } catch {
          mensagensNotificadasGlobal = new Set();
        }
      }
      mensagensCarregadasGlobal = true;
      
      // Marcar todas as mensagens atuais como já visualizadas (não tocar beep ao abrir)
      if (todasConversas?.data) {
        const conversas = todasConversas.data as ConversaComTimestamp[];
        conversas.forEach((conv) => {
          if (conv.ultimaMensagemTimestamp) {
            const mensagemId = `${conv._id}-${conv.ultimaMensagemTimestamp}`;
            mensagensNotificadasGlobal.add(mensagemId);
          }
        });
        salvarMensagensNotificadasGlobal();
      }
    }
  });

  // Salvar mensagens notificadas no localStorage
  function salvarMensagensNotificadasGlobal() {
    if (typeof window !== 'undefined') {
      const ids = Array.from(mensagensNotificadasGlobal);
      // Limitar a 1000 IDs para não encher o localStorage
      const idsLimitados = ids.slice(-1000);
      localStorage.setItem('chat-mensagens-notificadas-global', JSON.stringify(idsLimitados));
    }
  }
  
  // Função para tocar som de notificação
  function tocarSomNotificacaoGlobal() {
    try {
      const AudioContextClass = window.AudioContext || (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
      if (!AudioContextClass) return;
      
      const audioContext = new AudioContextClass();
      if (audioContext.state === 'suspended') {
        audioContext.resume().then(() => {
          const oscillator = audioContext.createOscillator();
          const gainNode = audioContext.createGain();
          oscillator.connect(gainNode);
          gainNode.connect(audioContext.destination);
          oscillator.frequency.value = 800;
          oscillator.type = 'sine';
          gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
          oscillator.start(audioContext.currentTime);
          oscillator.stop(audioContext.currentTime + 0.3);
        }).catch(() => {});
      } else {
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
        oscillator.frequency.value = 800;
        oscillator.type = 'sine';
        gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.3);
      }
    } catch (e) {
      // Ignorar erro de áudio
    }
  }
  
  $effect(() => {
    if (todasConversas?.data && authStore.usuario?._id) {
      const conversas = todasConversas.data as ConversaComTimestamp[];
      
      // Encontrar conversas com novas mensagens
      const meuId = String(authStore.usuario._id);
      
      conversas.forEach((conv) => {
        if (!conv.ultimaMensagemTimestamp) return;
        
        // Verificar se a última mensagem foi enviada pelo usuário atual
        const remetenteIdStr = conv.ultimaMensagemRemetenteId ? String(conv.ultimaMensagemRemetenteId) : null;
        if (remetenteIdStr && remetenteIdStr === meuId) {
          // Mensagem enviada pelo próprio usuário - não tocar beep nem mostrar notificação
          return;
        }
        
        // Criar ID único para esta mensagem: conversaId-timestamp
        const mensagemId = `${conv._id}-${conv.ultimaMensagemTimestamp}`;
        
        // Verificar se já foi notificada
        if (mensagensNotificadasGlobal.has(mensagemId)) return;
        
        const conversaAtivaId = activeConversation ? String(activeConversation) : null;
        const conversaIdStr = String(conv._id);
        
        // Só mostrar notificação se não estamos vendo essa conversa
        if (!isOpen || conversaAtivaId !== conversaIdStr) {
          // Marcar como notificada antes de tocar som (evita duplicação)
          mensagensNotificadasGlobal.add(mensagemId);
          salvarMensagensNotificadasGlobal();
          
          // Tocar som de notificação (apenas uma vez)
          tocarSomNotificacaoGlobal();
          
          // Mostrar popup de notificação
          globalNotificationMessage = {
            remetente: conv.outroUsuario?.nome || conv.nome || "Usuário",
            conteudo: conv.ultimaMensagem || "",
            conversaId: conv._id
          };
          showGlobalNotificationPopup = true;
          
          // Ocultar popup após 5 segundos
          if (globalNotificationTimeout) {
            clearTimeout(globalNotificationTimeout);
          }
          globalNotificationTimeout = setTimeout(() => {
            showGlobalNotificationPopup = false;
            globalNotificationMessage = null;
          }, 5000);
        }
      });
    }
  });

  function handleToggle() {
    if (isOpen && !isMinimized) {
      minimizarChat();
    } else {
      abrirChat();
    }
  }

  function handleClose() {
    fecharChat();
  }

  function handleMinimize() {
    minimizarChat();
  }

  function handleMaximize() {
    if (isMaximized) {
      // Restaurar tamanho anterior
      windowSize = previousSize;
      position = previousPosition;
      isMaximized = false;
      saveSize();
      ajustarPosicao();
    } else {
      // Salvar tamanho e posição atuais
      previousSize = { ...windowSize };
      previousPosition = { ...position };
      
      // Maximizar completamente: usar toda a largura e altura da tela
      windowSize = {
        width: window.innerWidth,
        height: window.innerHeight
      };
      position = {
        x: 0,
        y: 0
      };
      isMaximized = true;
      saveSize();
      ajustarPosicao();
    }
    maximizarChat();
  }

  // Funcionalidade de arrastar
  function handleMouseDown(e: MouseEvent) {
    if (e.button !== 0) return; // Apenas botão esquerdo
    isDragging = true;
    dragStart = {
      x: e.clientX - position.x,
      y: e.clientY - position.y,
    };
    document.body.classList.add('dragging');
    e.preventDefault();
  }

  function handleMouseMove(e: MouseEvent) {
    if (isResizing) {
      handleResizeMove(e);
      return;
    }
    
    if (!isDragging) return;
    
    const newX = e.clientX - dragStart.x;
    const newY = e.clientY - dragStart.y;
    
    // Dimensões do widget
    const widgetWidth = isOpen && !isMinimized ? windowSize.width : 72;
    const widgetHeight = isOpen && !isMinimized ? windowSize.height : 72;
    
    // Limites da tela com margem de segurança
    const minX = -(widgetWidth - 100); // Permitir até 100px visíveis
    const maxX = window.innerWidth - 100; // Manter 100px dentro da tela
    const minY = -(widgetHeight - 100);
    const maxY = window.innerHeight - 100;
    
    position = {
      x: Math.max(minX, Math.min(newX, maxX)),
      y: Math.max(minY, Math.min(newY, maxY)),
    };
  }

  function handleMouseUp() {
    if (isDragging) {
      isDragging = false;
      document.body.classList.remove('dragging');
      // Garantir que está dentro dos limites ao soltar
      ajustarPosicao();
    }
    handleResizeEnd();
  }

  function ajustarPosicao() {
    isAnimating = true;
    
    // Dimensões do widget
    const widgetWidth = isOpen && !isMinimized ? windowSize.width : 72;
    const widgetHeight = isOpen && !isMinimized ? windowSize.height : 72;
    
    // Verificar se está fora dos limites
    let newX = position.x;
    let newY = position.y;
    
    // Ajustar X
    if (newX < -(widgetWidth - 100)) {
      newX = -(widgetWidth - 100);
    } else if (newX > window.innerWidth - 100) {
      newX = window.innerWidth - 100;
    }
    
    // Ajustar Y
    if (newY < -(widgetHeight - 100)) {
      newY = -(widgetHeight - 100);
    } else if (newY > window.innerHeight - 100) {
      newY = window.innerHeight - 100;
    }
    
    position = { x: newX, y: newY };
    
    setTimeout(() => {
      isAnimating = false;
    }, 300);
  }

  // Event listeners globais
  if (typeof window !== 'undefined') {
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
  }
</script>

<!-- Botão flutuante MODERNO E ARRASTÁVEL -->
{#if !isOpen || isMinimized}
  <button
    type="button"
    class="fixed group relative border-0 backdrop-blur-xl"
    style="
      z-index: 99999 !important; 
      width: 4.5rem; 
      height: 4.5rem; 
      bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 72}px`};
      right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 72}px`};
      position: fixed !important;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      box-shadow: 
        0 20px 60px -10px rgba(102, 126, 234, 0.5),
        0 10px 30px -5px rgba(118, 75, 162, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      border-radius: 50%;
      cursor: {isDragging ? 'grabbing' : 'grab'};
      transform: {isDragging ? 'scale(1.05)' : 'scale(1)'};
      transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'transform 0.2s, box-shadow 0.3s'};
    "
    onclick={handleToggle}
    onmousedown={handleMouseDown}
    aria-label="Abrir chat"
  >
    <!-- Anel de brilho rotativo -->
    <div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"
         style="background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); animation: rotate 3s linear infinite;">
    </div>
    
    <!-- Ondas de pulso -->
    <div class="absolute inset-0 rounded-full" style="animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
    
    <!-- Ícone de chat moderno com efeito 3D -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="w-7 h-7 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
      style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));"
    >
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      <circle cx="9" cy="10" r="1" fill="currentColor"/>
      <circle cx="12" cy="10" r="1" fill="currentColor"/>
      <circle cx="15" cy="10" r="1" fill="currentColor"/>
    </svg>

    <!-- Badge ULTRA PREMIUM com gradiente e brilho -->
    {#if count?.data && count.data > 0}
      <span
        class="absolute -top-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full text-white text-xs font-black z-20"
        style="
          background: linear-gradient(135deg, #ff416c, #ff4b2b);
          box-shadow: 
            0 8px 24px -4px rgba(255, 65, 108, 0.6),
            0 4px 12px -2px rgba(255, 75, 43, 0.4),
            0 0 0 3px rgba(255, 255, 255, 0.3),
            0 0 0 5px rgba(255, 65, 108, 0.2);
          animation: badge-bounce 2s ease-in-out infinite;
        "
      >
        {count.data > 9 ? "9+" : count.data}
      </span>
    {/if}

    <!-- Indicador de arrastável -->
    <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 flex gap-1 opacity-50 group-hover:opacity-100 transition-opacity">
      <div class="w-1 h-1 rounded-full bg-white"></div>
      <div class="w-1 h-1 rounded-full bg-white"></div>
      <div class="w-1 h-1 rounded-full bg-white"></div>
    </div>
  </button>
{/if}

<!-- Janela do Chat ULTRA MODERNA E ARRASTÁVEL -->
{#if isOpen && !isMinimized}
  <div
    class="fixed flex flex-col overflow-hidden backdrop-blur-2xl"
    style="
      z-index: 99999 !important;
      bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - windowSize.height}px`};
      right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - windowSize.width}px`};
      width: {windowSize.width}px;
      height: {windowSize.height}px;
      max-width: calc(100vw - 3rem);
      max-height: calc(100vh - 3rem);
      position: fixed !important;
      background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.98) 100%);
      border-radius: 24px;
      box-shadow: 
        0 32px 64px -12px rgba(0, 0, 0, 0.15),
        0 16px 32px -8px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
      animation: slideInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};
    "
  >
    <!-- Header ULTRA PREMIUM com gradiente glassmorphism -->
    <div
      class="flex items-center justify-between px-6 py-5 text-white relative overflow-hidden"
      style="
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        box-shadow: 0 8px 32px -4px rgba(102, 126, 234, 0.3);
        cursor: {isDragging ? 'grabbing' : 'grab'};
      "
      onmousedown={handleMouseDown}
      role="button"
      tabindex="0"
      aria-label="Arrastar janela do chat"
    >
      <!-- Efeitos de fundo animados -->
      <div class="absolute inset-0 opacity-30" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
      <div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
      <!-- Título com avatar/foto do usuário logado -->
      <h2 class="text-xl font-bold flex items-center gap-3 relative z-10">
        <!-- Avatar/Foto do usuário logado com efeito glassmorphism -->
        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl overflow-hidden" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.2) inset;">
          {#if avatarUrlDoUsuario()}
            <img
              src={avatarUrlDoUsuario()}
              alt={authStore.usuario?.nome || "Usuário"}
              class="w-full h-full object-cover"
            />
          {:else}
            <!-- Fallback: ícone de chat genérico -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-5 h-5"
              style="filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));"
            >
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
              <line x1="9" y1="10" x2="15" y2="10"/>
              <line x1="9" y1="14" x2="13" y2="14"/>
            </svg>
          {/if}
        </div>
        <span class="tracking-wide font-extrabold" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3); letter-spacing: 0.02em;">Mensagens</span>
      </h2>

      <!-- Botões de controle modernos -->
      <div class="flex items-center gap-2 relative z-10">
        <!-- Botão minimizar MODERNO -->
        <button
          type="button"
          class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
          style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
          onclick={handleMinimize}
          aria-label="Minimizar"
        >
          <div class="absolute inset-0 bg-white/0 group-hover:bg-white/20 transition-colors duration-300"></div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 relative z-10 group-hover:scale-110 transition-transform duration-300"
            style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
          >
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </button>

        <!-- Botão maximizar MODERNO -->
        <button
          type="button"
          class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
          style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
          onclick={handleMaximize}
          aria-label="Maximizar"
        >
          <div class="absolute inset-0 bg-white/0 group-hover:bg-white/20 transition-colors duration-300"></div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 relative z-10 group-hover:scale-110 transition-transform duration-300"
            style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
          >
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
          </svg>
        </button>

        <!-- Botão fechar MODERNO -->
        <button
          type="button"
          class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden"
          style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
          onclick={handleClose}
          aria-label="Fechar"
        >
          <div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="w-5 h-5 relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
            style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
          >
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Conteúdo -->
    <div class="flex-1 overflow-hidden relative">
      {#if !activeConversation}
        <ChatList />
      {:else}
        <ChatWindow conversaId={activeConversation} />
      {/if}

      <!-- Resize Handles -->
      <!-- Top -->
      <div
        class="absolute top-0 left-0 right-0 h-2 cursor-ns-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'n')}
        style="border-radius: 24px 24px 0 0;"
      ></div>
      <!-- Bottom -->
      <div
        class="absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 's')}
        style="border-radius: 0 0 24px 24px;"
      ></div>
      <!-- Left -->
      <div
        class="absolute top-0 bottom-0 left-0 w-2 cursor-ew-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'w')}
        style="border-radius: 24px 0 0 24px;"
      ></div>
      <!-- Right -->
      <div
        class="absolute top-0 bottom-0 right-0 w-2 cursor-ew-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'e')}
        style="border-radius: 0 24px 24px 0;"
      ></div>
      <!-- Corners -->
      <div
        class="absolute top-0 left-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'nw')}
        style="border-radius: 24px 0 0 0;"
      ></div>
      <div
        class="absolute top-0 right-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'ne')}
        style="border-radius: 0 24px 0 0;"
      ></div>
      <div
        class="absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'sw')}
        style="border-radius: 0 0 0 24px;"
      ></div>
      <div
        class="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize hover:bg-primary/20 transition-colors z-50"
        onmousedown={(e) => handleResizeStart(e, 'se')}
        style="border-radius: 0 0 24px 0;"
      ></div>
    </div>
  </div>
{/if}

<!-- Popup Global de Notificação de Nova Mensagem (quando chat está fechado/minimizado) -->
{#if showGlobalNotificationPopup && globalNotificationMessage}
  <div
    class="fixed top-4 right-4 z-[1000] bg-base-100 rounded-lg shadow-2xl border border-primary/20 p-4 max-w-sm cursor-pointer"
    style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.3); animation: slideInRight 0.3s ease-out;"
    onclick={() => {
      showGlobalNotificationPopup = false;
      globalNotificationMessage = null;
      if (globalNotificationTimeout) {
        clearTimeout(globalNotificationTimeout);
      }
      // Abrir chat e conversa ao clicar
      abrirChat();
      abrirConversa(globalNotificationMessage.conversaId as Id<"conversas">);
    }}
  >
    <div class="flex items-start gap-3">
      <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="2"
          stroke="currentColor"
          class="w-5 h-5 text-primary"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="font-semibold text-base-content text-sm mb-1">Nova mensagem de {globalNotificationMessage.remetente}</p>
        <p class="text-xs text-base-content/70 line-clamp-2">{globalNotificationMessage.conteudo}</p>
        <p class="text-xs text-primary mt-1">Clique para abrir</p>
      </div>
      <button
        type="button"
        class="flex-shrink-0 w-6 h-6 rounded-full hover:bg-base-200 flex items-center justify-center transition-colors"
        onclick={(e) => {
          e.stopPropagation();
          showGlobalNotificationPopup = false;
          globalNotificationMessage = null;
          if (globalNotificationTimeout) {
            clearTimeout(globalNotificationTimeout);
          }
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
{/if}

<style>
  /* Animação do badge com bounce suave */
  @keyframes badge-bounce {
    0%, 100% {
      transform: scale(1) translateY(0);
    }
    50% {
      transform: scale(1.08) translateY(-2px);
    }
  }
  
  /* Animação de entrada da janela com escala e bounce */
  @keyframes slideInScale {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
    60% {
      transform: translateY(-5px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Ondas de pulso para o botão flutuante */
  @keyframes pulse-ring {
    0% {
      box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.5);
    }
    50% {
      box-shadow: 0 0 0 15px rgba(102, 126, 234, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
  }

  /* Rotação para anel de brilho */
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Efeito shimmer para o header */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  /* Suavizar transições */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

