<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { abrirConversa } from "$lib/stores/chatStore";
  import { formatDistanceToNow } from "date-fns";
  import { ptBR } from "date-fns/locale";
  import UserStatusBadge from "./UserStatusBadge.svelte";
  import UserAvatar from "./UserAvatar.svelte";

  const client = useConvexClient();
  
  // Buscar todos os usuários para o chat
  const usuarios = useQuery(api.usuarios.listarParaChat, {});
  
  // Buscar o perfil do usuário logado
  const meuPerfil = useQuery(api.usuarios.obterPerfil, {});

  let searchQuery = $state("");

  // Debug: monitorar carregamento de dados
  $effect(() => {
    console.log("📊 [ChatList] Usuários carregados:", usuarios?.data?.length || 0);
    console.log("👤 [ChatList] Meu perfil:", meuPerfil?.data?.nome || "Carregando...");
    console.log("📋 [ChatList] Lista completa:", usuarios?.data);
  });

  const usuariosFiltrados = $derived.by(() => {
    if (!usuarios?.data || !Array.isArray(usuarios.data) || !meuPerfil?.data) return [];
    
    const meuId = meuPerfil.data._id;
    
    // Filtrar o próprio usuário da lista
    let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
    
    // Aplicar busca por nome/email/matrícula
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      listaFiltrada = listaFiltrada.filter((u: any) => 
        u.nome?.toLowerCase().includes(query) ||
        u.email?.toLowerCase().includes(query) ||
        u.matricula?.toLowerCase().includes(query)
      );
    }
    
    // Ordenar: Online primeiro, depois por nome
    return listaFiltrada.sort((a: any, b: any) => {
      const statusOrder = { online: 0, ausente: 1, externo: 2, em_reuniao: 3, offline: 4 };
      const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
      const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
      
      if (statusA !== statusB) return statusA - statusB;
      return a.nome.localeCompare(b.nome);
    });
  });

  function formatarTempo(timestamp: number | undefined): string {
    if (!timestamp) return "";
    try {
      return formatDistanceToNow(new Date(timestamp), {
        addSuffix: true,
        locale: ptBR,
      });
    } catch {
      return "";
    }
  }

  let processando = $state(false);

  async function handleClickUsuario(usuario: any) {
    if (processando) {
      console.log("⏳ Já está processando uma ação, aguarde...");
      return;
    }

    try {
      processando = true;
      console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id);
      
      // Criar ou buscar conversa individual com este usuário
      console.log("📞 Chamando mutation criarOuBuscarConversaIndividual...");
      const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
        outroUsuarioId: usuario._id,
      });
      
      console.log("✅ Conversa criada/encontrada. ID:", conversaId);
      
      // Abrir a conversa
      console.log("📂 Abrindo conversa...");
      abrirConversa(conversaId as any);
      
      console.log("✅ Conversa aberta com sucesso!");
    } catch (error) {
      console.error("❌ Erro ao abrir conversa:", error);
      console.error("Detalhes do erro:", {
        message: error instanceof Error ? error.message : String(error),
        stack: error instanceof Error ? error.stack : undefined,
        usuario: usuario,
      });
      alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
    } finally {
      processando = false;
    }
  }

  function getStatusLabel(status: string | undefined): string {
    const labels: Record<string, string> = {
      online: "Online",
      offline: "Offline",
      ausente: "Ausente",
      externo: "Externo",
      em_reuniao: "Em Reunião",
    };
    return labels[status || "offline"] || "Offline";
  }
</script>

<div class="flex flex-col h-full">
  <!-- Search bar -->
  <div class="p-4 border-b border-base-300">
    <div class="relative">
      <input
        type="text"
        placeholder="Buscar usuários (nome, email, matrícula)..."
        class="input input-bordered w-full pl-10"
        bind:value={searchQuery}
      />
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
        />
      </svg>
    </div>
  </div>

  <!-- Título da Lista -->
  <div class="p-4 border-b border-base-300 bg-base-200">
    <h3 class="font-semibold text-sm text-base-content/70 uppercase tracking-wide">
      Usuários do Sistema ({usuariosFiltrados.length})
    </h3>
  </div>

  <!-- Lista de usuários -->
  <div class="flex-1 overflow-y-auto">
    {#if usuarios?.data && usuariosFiltrados.length > 0}
      {#each usuariosFiltrados as usuario (usuario._id)}
        <button
          type="button"
          class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
          onclick={() => handleClickUsuario(usuario)}
          disabled={processando}
        >
          <!-- Avatar -->
          <div class="relative flex-shrink-0">
            <UserAvatar 
              avatar={usuario.avatar}
              fotoPerfilUrl={usuario.fotoPerfilUrl}
              nome={usuario.nome}
              size="md"
            />
            <!-- Status badge -->
            <div class="absolute bottom-0 right-0">
              <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
            </div>
          </div>

          <!-- Conteúdo -->
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between mb-1">
              <p class="font-semibold text-base-content truncate">
                {usuario.nome}
              </p>
              <span class="text-xs px-2 py-0.5 rounded-full {
                usuario.statusPresenca === 'online' ? 'bg-success/20 text-success' :
                usuario.statusPresenca === 'ausente' ? 'bg-warning/20 text-warning' :
                usuario.statusPresenca === 'em_reuniao' ? 'bg-error/20 text-error' :
                'bg-base-300 text-base-content/50'
              }">
                {getStatusLabel(usuario.statusPresenca)}
              </span>
            </div>
            <div class="flex items-center gap-2">
              <p class="text-sm text-base-content/70 truncate">
                {usuario.statusMensagem || usuario.email}
              </p>
            </div>
          </div>
        </button>
      {/each}
    {:else if !usuarios?.data}
      <!-- Loading -->
      <div class="flex items-center justify-center h-full">
        <span class="loading loading-spinner loading-lg"></span>
      </div>
    {:else}
      <!-- Nenhum usuário encontrado -->
      <div class="flex flex-col items-center justify-center h-full text-center px-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-16 h-16 text-base-content/30 mb-4"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
          />
        </svg>
        <p class="text-base-content/70">Nenhum usuário encontrado</p>
      </div>
    {/if}
  </div>
</div>


