<script lang="ts">
  import { useConvexClient, useQuery } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import { authStore } from "$lib/stores/auth.svelte";
  import { goto } from "$app/navigation";
  
  const client = useConvexClient();
  
  // Queries
  const timesQuery = useQuery(api.times.listar, {});
  const usuariosQuery = useQuery(api.usuarios.listar, {});
  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
  
  const times = $derived(timesQuery?.data || []);
  const usuarios = $derived(usuariosQuery?.data || []);
  const funcionarios = $derived(funcionariosQuery?.data || []);
  
  // Estados
  let modoEdicao = $state(false);
  let timeEmEdicao = $state<any>(null);
  let mostrarModalMembros = $state(false);
  let timeParaMembros = $state<any>(null);
  let mostrarConfirmacaoExclusao = $state(false);
  let timeParaExcluir = $state<any>(null);
  let processando = $state(false);
  
  // Form
  let formNome = $state("");
  let formDescricao = $state("");
  let formGestorId = $state("");
  let formCor = $state("#3B82F6");
  
  // Membros
  let membrosDisponiveis = $derived(
    funcionarios.filter((f: any) => {
      // Verificar se o funcionário já está em algum time ativo
      const jaNaEquipe = timeParaMembros?.membros?.some((m: any) => m.funcionario?._id === f._id);
      return !jaNaEquipe;
    })
  );
  
  // Cores predefinidas
  const coresDisponiveis = [
    "#3B82F6", // Blue
    "#10B981", // Green
    "#F59E0B", // Yellow
    "#EF4444", // Red
    "#8B5CF6", // Purple
    "#EC4899", // Pink
    "#14B8A6", // Teal
    "#F97316", // Orange
  ];
  
  function novoTime() {
    modoEdicao = true;
    timeEmEdicao = null;
    formNome = "";
    formDescricao = "";
    formGestorId = "";
    formCor = coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
  }
  
  function editarTime(time: any) {
    modoEdicao = true;
    timeEmEdicao = time;
    formNome = time.nome;
    formDescricao = time.descricao || "";
    formGestorId = time.gestorId;
    formCor = time.cor || "#3B82F6";
  }
  
  function cancelarEdicao() {
    modoEdicao = false;
    timeEmEdicao = null;
    formNome = "";
    formDescricao = "";
    formGestorId = "";
    formCor = "#3B82F6";
  }
  
  async function salvarTime() {
    if (!formNome.trim() || !formGestorId) {
      alert("Preencha todos os campos obrigatórios!");
      return;
    }
    
    processando = true;
    try {
      if (timeEmEdicao) {
        await client.mutation(api.times.atualizar, {
          id: timeEmEdicao._id,
          nome: formNome,
          descricao: formDescricao || undefined,
          gestorId: formGestorId as any,
          cor: formCor,
        });
      } else {
        await client.mutation(api.times.criar, {
          nome: formNome,
          descricao: formDescricao || undefined,
          gestorId: formGestorId as any,
          cor: formCor,
        });
      }
      cancelarEdicao();
    } catch (e: any) {
      alert("Erro ao salvar: " + (e.message || e));
    } finally {
      processando = false;
    }
  }
  
  function confirmarExclusao(time: any) {
    timeParaExcluir = time;
    mostrarConfirmacaoExclusao = true;
  }
  
  async function excluirTime() {
    if (!timeParaExcluir) return;
    
    processando = true;
    try {
      await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
      mostrarConfirmacaoExclusao = false;
      timeParaExcluir = null;
    } catch (e: any) {
      alert("Erro ao excluir: " + (e.message || e));
    } finally {
      processando = false;
    }
  }
  
  async function abrirGerenciarMembros(time: any) {
    const detalhes = await client.query(api.times.obterPorId, { id: time._id });
    timeParaMembros = detalhes;
    mostrarModalMembros = true;
  }
  
  async function adicionarMembro(funcionarioId: string) {
    if (!timeParaMembros) return;
    
    processando = true;
    try {
      await client.mutation(api.times.adicionarMembro, {
        timeId: timeParaMembros._id,
        funcionarioId: funcionarioId as any,
      });
      
      // Recarregar detalhes do time
      const detalhes = await client.query(api.times.obterPorId, { id: timeParaMembros._id });
      timeParaMembros = detalhes;
    } catch (e: any) {
      alert("Erro: " + (e.message || e));
    } finally {
      processando = false;
    }
  }
  
  async function removerMembro(membroId: string) {
    if (!confirm("Deseja realmente remover este membro do time?")) return;
    
    processando = true;
    try {
      await client.mutation(api.times.removerMembro, { membroId: membroId as any });
      
      // Recarregar detalhes do time
      const detalhes = await client.query(api.times.obterPorId, { id: timeParaMembros._id });
      timeParaMembros = detalhes;
    } catch (e: any) {
      alert("Erro: " + (e.message || e));
    } finally {
      processando = false;
    }
  }
  
  function fecharModalMembros() {
    mostrarModalMembros = false;
    timeParaMembros = null;
  }
</script>

<main class="container mx-auto px-4 py-6 max-w-7xl">
  <!-- Breadcrumb -->
  <div class="text-sm breadcrumbs mb-4">
    <ul>
      <li><a href="/ti" class="text-primary hover:underline">Tecnologia da Informação</a></li>
      <li>Gestão de Times</li>
    </ul>
  </div>

  <!-- Header -->
  <div class="mb-6">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="p-3 bg-blue-500/20 rounded-xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <div>
          <h1 class="text-3xl font-bold text-primary">Gestão de Times</h1>
          <p class="text-base-content/70">Organize funcionários em equipes e defina gestores</p>
        </div>
      </div>
      <div class="flex gap-2">
        <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Voltar
        </button>
        <button class="btn btn-primary gap-2" onclick={novoTime}>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
          </svg>
          Novo Time
        </button>
      </div>
    </div>
  </div>

  <!-- Formulário de Edição -->
  {#if modoEdicao}
    <div class="card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl mb-6 border-2 border-primary/20">
      <div class="card-body">
        <h2 class="card-title text-xl mb-4">
          {timeEmEdicao ? "Editar Time" : "Novo Time"}
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="form-control">
            <label class="label" for="nome">
              <span class="label-text font-semibold">Nome do Time *</span>
            </label>
            <input
              id="nome"
              type="text"
              class="input input-bordered"
              bind:value={formNome}
              placeholder="Ex: Equipe Administrativa"
            />
          </div>

          <div class="form-control">
            <label class="label" for="gestor">
              <span class="label-text font-semibold">Gestor *</span>
            </label>
            <select id="gestor" class="select select-bordered" bind:value={formGestorId}>
              <option value="">Selecione um gestor</option>
              {#each usuarios as usuario}
                <option value={usuario._id}>{usuario.nome}</option>
              {/each}
            </select>
          </div>

          <div class="form-control md:col-span-2">
            <label class="label" for="descricao">
              <span class="label-text font-semibold">Descrição</span>
            </label>
            <textarea
              id="descricao"
              class="textarea textarea-bordered"
              bind:value={formDescricao}
              placeholder="Descrição opcional do time"
              rows="2"
            ></textarea>
          </div>

          <div class="form-control">
            <label class="label" for="cor">
              <span class="label-text font-semibold">Cor do Time</span>
            </label>
            <div class="flex gap-2 flex-wrap">
              {#each coresDisponiveis as cor}
                <button
                  type="button"
                  class="w-10 h-10 rounded-lg border-2 transition-all hover:scale-110"
                  style="background-color: {cor}; border-color: {formCor === cor ? '#000' : cor}"
                  onclick={() => formCor = cor}
                  aria-label="Selecionar cor"
                ></button>
              {/each}
            </div>
          </div>
        </div>

        <div class="card-actions justify-end mt-6">
          <button class="btn btn-ghost" onclick={cancelarEdicao} disabled={processando}>
            Cancelar
          </button>
          <button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
            {processando ? "Salvando..." : "Salvar"}
          </button>
        </div>
      </div>
    </div>
  {/if}

  <!-- Lista de Times -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {#each times as time}
      {#if time.ativo}
        <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all border-l-4" style="border-color: {time.cor}">
          <div class="card-body">
            <div class="flex items-start justify-between">
              <h2 class="card-title text-lg">{time.nome}</h2>
              <div class="dropdown dropdown-end">
                <button tabindex="0" class="btn btn-ghost btn-sm btn-square" aria-label="Menu do time">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                  </svg>
                </button>
                <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 border border-base-300">
                  <li>
                    <button type="button" onclick={() => editarTime(time)}>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                      Editar
                    </button>
                  </li>
                  <li>
                    <button type="button" onclick={() => abrirGerenciarMembros(time)}>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                      </svg>
                      Gerenciar Membros
                    </button>
                  </li>
                  <li>
                    <button type="button" onclick={() => confirmarExclusao(time)} class="text-error">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                      Desativar
                    </button>
                  </li>
                </ul>
              </div>
            </div>

            <p class="text-sm text-base-content/70 mb-3">{time.descricao || "Sem descrição"}</p>

            <div class="divider my-2"></div>

            <div class="space-y-2">
              <div class="flex items-center gap-2 text-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span><strong>Gestor:</strong> {time.gestor?.nome}</span>
              </div>
              <div class="flex items-center gap-2 text-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
                <span><strong>Membros:</strong> {time.totalMembros || 0}</span>
              </div>
            </div>
          </div>
        </div>
      {/if}
    {/each}

    {#if times.filter((t: any) => t.ativo).length === 0}
      <div class="col-span-full">
        <div class="alert">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span>Nenhum time cadastrado. Clique em "Novo Time" para começar.</span>
        </div>
      </div>
    {/if}
  </div>

  <!-- Modal de Gerenciar Membros -->
  {#if mostrarModalMembros && timeParaMembros}
    <dialog class="modal modal-open">
      <div class="modal-box max-w-4xl">
        <h3 class="font-bold text-2xl mb-4 flex items-center gap-2">
          <div class="w-3 h-3 rounded-full" style="background-color: {timeParaMembros.cor}"></div>
          {timeParaMembros.nome}
        </h3>

        <!-- Membros Atuais -->
        <div class="mb-6">
          <h4 class="font-bold text-lg mb-3">Membros Atuais ({timeParaMembros.membros?.length || 0})</h4>
          
          {#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
            <div class="space-y-2 max-h-60 overflow-y-auto">
              {#each timeParaMembros.membros as membro}
                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
                  <div class="flex items-center gap-3">
                    <div class="avatar placeholder">
                      <div class="bg-primary text-primary-content rounded-full w-10">
                        <span class="text-xs">{membro.funcionario?.nome.substring(0, 2).toUpperCase()}</span>
                      </div>
                    </div>
                    <div>
                      <div class="font-semibold">{membro.funcionario?.nome}</div>
                      <div class="text-xs text-base-content/50">
                        Desde {new Date(membro.dataEntrada).toLocaleDateString("pt-BR")}
                      </div>
                    </div>
                  </div>
                  <button
                    class="btn btn-sm btn-error btn-square"
                    onclick={() => removerMembro(membro._id)}
                    disabled={processando}
                    aria-label="Remover membro"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              {/each}
            </div>
          {:else}
            <div class="alert alert-info">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Nenhum membro neste time ainda.</span>
            </div>
          {/if}
        </div>

        <div class="divider"></div>

        <!-- Adicionar Membros -->
        <div>
          <h4 class="font-bold text-lg mb-3">Adicionar Membros</h4>
          
          {#if membrosDisponiveis.length > 0}
            <div class="space-y-2 max-h-60 overflow-y-auto">
              {#each membrosDisponiveis as funcionario}
                <div class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors">
                  <div class="flex items-center gap-3">
                    <div class="avatar placeholder">
                      <div class="bg-neutral text-neutral-content rounded-full w-10">
                        <span class="text-xs">{funcionario.nome.substring(0, 2).toUpperCase()}</span>
                      </div>
                    </div>
                    <div>
                      <div class="font-semibold">{funcionario.nome}</div>
                      <div class="text-xs text-base-content/50">{funcionario.matricula || "S/N"}</div>
                    </div>
                  </div>
                  <button
                    class="btn btn-sm btn-primary"
                    onclick={() => adicionarMembro(funcionario._id)}
                    disabled={processando}
                  >
                    Adicionar
                  </button>
                </div>
              {/each}
            </div>
          {:else}
            <div class="alert">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Todos os funcionários já estão em times.</span>
            </div>
          {/if}
        </div>

        <div class="modal-action">
          <button class="btn" onclick={fecharModalMembros}>Fechar</button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="button" onclick={fecharModalMembros} aria-label="Fechar modal">Fechar</button>
      </form>
    </dialog>
  {/if}

  <!-- Modal de Confirmação de Exclusão -->
  {#if mostrarConfirmacaoExclusao && timeParaExcluir}
    <dialog class="modal modal-open">
      <div class="modal-box">
        <h3 class="font-bold text-lg">Confirmar Desativação</h3>
        <p class="py-4">
          Tem certeza que deseja desativar o time <strong>{timeParaExcluir.nome}</strong>?
          Todos os membros serão removidos.
        </p>
        <div class="modal-action">
          <button class="btn" onclick={() => mostrarConfirmacaoExclusao = false} disabled={processando}>
            Cancelar
          </button>
          <button class="btn btn-error" onclick={excluirTime} disabled={processando}>
            {processando ? "Processando..." : "Desativar"}
          </button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="button" onclick={() => mostrarConfirmacaoExclusao = false} aria-label="Fechar modal">Fechar</button>
      </form>
    </dialog>
  {/if}
</main>

