<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 UserStatusBadge from "./UserStatusBadge.svelte";
  import UserAvatar from "./UserAvatar.svelte";

  interface Props {
    onClose: () => void;
  }

  let { onClose }: Props = $props();

  const client = useConvexClient();
  const usuarios = useQuery(api.chat.listarTodosUsuarios, {});

  let activeTab = $state<"individual" | "grupo">("individual");
  let searchQuery = $state("");
  let selectedUsers = $state<string[]>([]);
  let groupName = $state("");
  let loading = $state(false);

  const usuariosFiltrados = $derived(() => {
    if (!usuarios) return [];
    if (!searchQuery.trim()) return usuarios;

    const query = searchQuery.toLowerCase();
    return usuarios.filter((u: any) =>
      u.nome.toLowerCase().includes(query) ||
      u.email.toLowerCase().includes(query) ||
      u.matricula.toLowerCase().includes(query)
    );
  });

  function toggleUserSelection(userId: string) {
    if (selectedUsers.includes(userId)) {
      selectedUsers = selectedUsers.filter((id) => id !== userId);
    } else {
      selectedUsers = [...selectedUsers, userId];
    }
  }

  async function handleCriarIndividual(userId: string) {
    try {
      loading = true;
      const conversaId = await client.mutation(api.chat.criarConversa, {
        tipo: "individual",
        participantes: [userId as any],
      });
      abrirConversa(conversaId);
      onClose();
    } catch (error) {
      console.error("Erro ao criar conversa:", error);
      alert("Erro ao criar conversa");
    } finally {
      loading = false;
    }
  }

  async function handleCriarGrupo() {
    if (selectedUsers.length < 2) {
      alert("Selecione pelo menos 2 participantes");
      return;
    }

    if (!groupName.trim()) {
      alert("Digite um nome para o grupo");
      return;
    }

    try {
      loading = true;
      const conversaId = await client.mutation(api.chat.criarConversa, {
        tipo: "grupo",
        participantes: selectedUsers as any,
        nome: groupName.trim(),
      });
      abrirConversa(conversaId);
      onClose();
    } catch (error) {
      console.error("Erro ao criar grupo:", error);
      alert("Erro ao criar grupo");
    } finally {
      loading = false;
    }
  }
</script>

<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={onClose}>
  <div
    class="bg-base-100 rounded-xl shadow-2xl w-full max-w-lg max-h-[80vh] flex flex-col m-4"
    onclick={(e) => e.stopPropagation()}
  >
    <!-- Header -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
      <h2 class="text-xl font-semibold">Nova Conversa</h2>
      <button
        type="button"
        class="btn btn-ghost btn-sm btn-circle"
        onclick={onClose}
        aria-label="Fechar"
      >
        <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"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Tabs -->
    <div class="tabs tabs-boxed p-4">
      <button
        type="button"
        class={`tab ${activeTab === "individual" ? "tab-active" : ""}`}
        onclick={() => (activeTab = "individual")}
      >
        Individual
      </button>
      <button
        type="button"
        class={`tab ${activeTab === "grupo" ? "tab-active" : ""}`}
        onclick={() => (activeTab = "grupo")}
      >
        Grupo
      </button>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-y-auto px-6">
      {#if activeTab === "grupo"}
        <!-- Criar Grupo -->
        <div class="mb-4">
          <label class="label">
            <span class="label-text">Nome do Grupo</span>
          </label>
          <input
            type="text"
            placeholder="Digite o nome do grupo..."
            class="input input-bordered w-full"
            bind:value={groupName}
            maxlength="50"
          />
        </div>

        <div class="mb-2">
          <label class="label">
            <span class="label-text">
              Participantes {selectedUsers.length > 0 ? `(${selectedUsers.length})` : ""}
            </span>
          </label>
        </div>
      {/if}

      <!-- Search -->
      <div class="mb-4">
        <input
          type="text"
          placeholder="Buscar usuários..."
          class="input input-bordered w-full"
          bind:value={searchQuery}
        />
      </div>

      <!-- Lista de usuários -->
      <div class="space-y-2">
        {#if usuarios && usuariosFiltrados().length > 0}
          {#each usuariosFiltrados() as usuario (usuario._id)}
            <button
              type="button"
              class={`w-full text-left px-4 py-3 rounded-lg border transition-colors flex items-center gap-3 ${
                activeTab === "grupo" && selectedUsers.includes(usuario._id)
                  ? "border-primary bg-primary/10"
                  : "border-base-300 hover:bg-base-200"
              }`}
              onclick={() => {
                if (activeTab === "individual") {
                  handleCriarIndividual(usuario._id);
                } else {
                  toggleUserSelection(usuario._id);
                }
              }}
              disabled={loading}
            >
              <!-- Avatar -->
              <div class="relative flex-shrink-0">
                <UserAvatar 
                  avatar={usuario.avatar}
                  fotoPerfilUrl={usuario.fotoPerfil}
                  nome={usuario.nome}
                  size="sm"
                />
                <div class="absolute bottom-0 right-0">
                  <UserStatusBadge status={usuario.statusPresenca} size="sm" />
                </div>
              </div>

              <!-- Info -->
              <div class="flex-1 min-w-0">
                <p class="font-medium text-base-content truncate">{usuario.nome}</p>
                <p class="text-sm text-base-content/60 truncate">
                  {usuario.setor || usuario.email}
                </p>
              </div>

              <!-- Checkbox (apenas para grupo) -->
              {#if activeTab === "grupo"}
                <input
                  type="checkbox"
                  class="checkbox checkbox-primary"
                  checked={selectedUsers.includes(usuario._id)}
                  readonly
                />
              {/if}
            </button>
          {/each}
        {:else if !usuarios}
          <div class="flex items-center justify-center py-8">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        {:else}
          <div class="text-center py-8 text-base-content/50">
            Nenhum usuário encontrado
          </div>
        {/if}
      </div>
    </div>

    <!-- Footer (apenas para grupo) -->
    {#if activeTab === "grupo"}
      <div class="px-6 py-4 border-t border-base-300">
        <button
          type="button"
          class="btn btn-primary btn-block"
          onclick={handleCriarGrupo}
          disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
        >
          {#if loading}
            <span class="loading loading-spinner"></span>
            Criando...
          {:else}
            Criar Grupo
          {/if}
        </button>
      </div>
    {/if}
  </div>
</div>

