<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 WizardSolicitacaoFerias from "$lib/components/ferias/WizardSolicitacaoFerias.svelte";
  import DashboardFerias from "$lib/components/ferias/DashboardFerias.svelte";
  import AprovarFerias from "$lib/components/AprovarFerias.svelte";
  import { generateAvatarGallery, type Avatar } from "$lib/utils/avatars";

  const client = useConvexClient();
  
  let abaAtiva = $state<"meu-perfil" | "minhas-ferias" | "aprovar-ferias">("meu-perfil");
  let mostrarFormSolicitar = $state(false);
  let solicitacaoSelecionada = $state<any>(null);
  let mostrarModalFoto = $state(false);
  let uploadandoFoto = $state(false);
  let erroUpload = $state("");
  let modoFoto = $state<"upload" | "avatar">("avatar");
  let avatarSelecionado = $state<string>("");
  let mostrarBotaoCamera = $state(false);
  
  // Estados locais para atualização imediata
  let fotoPerfilLocal = $state<string | null>(null);
  let avatarLocal = $state<string | null>(null);
  
  // Galeria de avatares (30 avatares profissionais 3D realistas)
  const avatarGallery = generateAvatarGallery(30);
  
  // Sincronizar com authStore
  $effect(() => {
    if (authStore.usuario?.fotoPerfilUrl !== undefined) {
      fotoPerfilLocal = authStore.usuario.fotoPerfilUrl;
    }
    if (authStore.usuario?.avatar !== undefined) {
      avatarLocal = authStore.usuario.avatar;
    }
  });
  
  // Queries
  const funcionarioQuery = $derived(
    authStore.usuario?.funcionarioId
      ? useQuery(api.funcionarios.getById, { id: authStore.usuario.funcionarioId as any })
      : { data: null }
  );
  
  const minhasSolicitacoesQuery = $derived(
    funcionarioQuery.data
      ? useQuery(api.ferias.listarMinhasSolicitacoes, { funcionarioId: funcionarioQuery.data._id })
      : { data: [] }
  );
  
  const solicitacoesSubordinadosQuery = $derived(
    authStore.usuario?._id
      ? useQuery(api.ferias.listarSolicitacoesSubordinados, { gestorId: authStore.usuario._id as any })
      : { data: [] }
  );
  
  const meuTimeQuery = $derived(
    funcionarioQuery.data
      ? useQuery(api.times.obterTimeFuncionario, { funcionarioId: funcionarioQuery.data._id })
      : { data: null }
  );
  
  const meusTimesGestorQuery = $derived(
    authStore.usuario?._id
      ? useQuery(api.times.listarPorGestor, { gestorId: authStore.usuario._id as any })
      : { data: [] }
  );
  
  const funcionario = $derived(funcionarioQuery.data);
  const minhasSolicitacoes = $derived(minhasSolicitacoesQuery?.data || []);
  const solicitacoesSubordinados = $derived(solicitacoesSubordinadosQuery?.data || []);
  const meuTime = $derived(meuTimeQuery?.data);
  const meusTimesGestor = $derived(meusTimesGestorQuery?.data || []);
  
  // Verificar se é gestor
  const ehGestor = $derived((meusTimesGestor || []).length > 0);
  
  async function recarregar() {
    mostrarFormSolicitar = false;
    solicitacaoSelecionada = null;
  }
  
  async function selecionarSolicitacao(solicitacaoId: string) {
    const detalhes = await client.query(api.ferias.obterDetalhes, {
      solicitacaoId: solicitacaoId as any,
    });
    solicitacaoSelecionada = detalhes;
  }
  
  function getStatusBadge(status: string) {
    const badges: Record<string, string> = {
      aguardando_aprovacao: "badge-warning",
      aprovado: "badge-success",
      reprovado: "badge-error",
      data_ajustada_aprovada: "badge-info",
    };
    return badges[status] || "badge-neutral";
  }
  
  function getStatusTexto(status: string) {
    const textos: Record<string, string> = {
      aguardando_aprovacao: "Aguardando",
      aprovado: "Aprovado",
      reprovado: "Reprovado",
      data_ajustada_aprovada: "Ajustado",
    };
    return textos[status] || status;
  }
  
  async function handleUploadFoto(event: Event) {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    
    if (!file) return;

    // Validar tipo de arquivo
    if (!file.type.startsWith("image/")) {
      erroUpload = "Por favor, selecione uma imagem válida";
      return;
    }

    // Validar tamanho (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      erroUpload = "A imagem deve ter no máximo 5MB";
      return;
    }
    
    uploadandoFoto = true;
    erroUpload = "";

    try {
      // 1. Gerar URL de upload (NOME CORRETO DA FUNÇÃO!)
      const uploadUrl = await client.mutation(api.usuarios.uploadFotoPerfil, {});

      // 2. Upload do arquivo
      const response = await fetch(uploadUrl, {
        method: "POST",
        headers: { "Content-Type": file.type },
        body: file,
      });

      if (!response.ok) {
        throw new Error("Falha no upload da imagem");
      }

      const { storageId } = await response.json();

      // 3. Atualizar perfil com o novo storageId
      await client.mutation(api.usuarios.atualizarPerfil, {
        fotoPerfil: storageId,
        avatar: undefined, // Remove avatar se colocar foto
      });
      
      // 4. Atualizar authStore para obter a URL da foto
      await authStore.refresh();
      
      // 5. Atualizar localmente IMEDIATAMENTE com a URL do authStore
      if (authStore.usuario?.fotoPerfilUrl) {
        fotoPerfilLocal = authStore.usuario.fotoPerfilUrl;
        avatarLocal = null;
      }
      
      mostrarModalFoto = false;
      
      // Toast de sucesso
      const toast = document.createElement('div');
      toast.className = 'toast toast-top toast-end';
      toast.innerHTML = `
        <div class="alert alert-success">
          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>Foto de perfil atualizada!</span>
        </div>
      `;
      document.body.appendChild(toast);
      setTimeout(() => toast.remove(), 3000);
    } catch (e: any) {
      erroUpload = e.message || "Erro ao fazer upload da foto";
    } finally {
      uploadandoFoto = false;
    }
  }
  
  async function handleSelecionarAvatar(avatarUrl: string) {
    uploadandoFoto = true;
    erroUpload = "";
    
    try {
      // 1. Atualizar localmente IMEDIATAMENTE (antes mesmo da API)
      avatarLocal = avatarUrl;
      fotoPerfilLocal = null;
      
      // 2. Salvar avatar selecionado no backend
      await client.mutation(api.usuarios.atualizarPerfil, {
        avatar: avatarUrl,
        fotoPerfil: undefined, // Remove foto se colocar avatar
      });
      
      // 3. Atualizar authStore em background
      authStore.refresh();
      
      mostrarModalFoto = false;
      
      // Toast de sucesso mais discreto
      const toast = document.createElement('div');
      toast.className = 'toast toast-top toast-end';
      toast.innerHTML = `
        <div class="alert alert-success">
          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>Avatar atualizado!</span>
        </div>
      `;
      document.body.appendChild(toast);
      setTimeout(() => toast.remove(), 3000);
    } catch (e: any) {
      erroUpload = e.message || "Erro ao salvar avatar";
      // Reverter mudança local se houver erro
      avatarLocal = authStore.usuario?.avatar || null;
      fotoPerfilLocal = authStore.usuario?.fotoPerfilUrl || null;
    } finally {
      uploadandoFoto = false;
    }
  }
  
  function abrirModalFoto() {
    erroUpload = "";
    modoFoto = "avatar";
    avatarSelecionado = "";
    mostrarModalFoto = true;
  }
</script>

<style>
  @keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 15s ease infinite;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
</style>

<main class="min-h-screen pb-12">
  <!-- BANNER HERO PREMIUM -->
  <div class="relative overflow-hidden mb-8">
    <!-- Background com gradiente animado -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 animate-gradient"></div>
    
    <!-- Overlay pattern -->
    <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    
    <!-- Conteúdo do Banner -->
    <div class="relative container mx-auto px-6 py-16">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <!-- Avatar PREMIUM -->
        <div 
          class="relative group"
          role="button"
          tabindex="0"
          onmouseenter={() => mostrarBotaoCamera = true}
          onmouseleave={() => mostrarBotaoCamera = false}
        >
          <button 
            type="button" 
            class="avatar cursor-pointer p-0 border-0 bg-transparent" 
            onclick={abrirModalFoto}
          >
            <div class="w-40 h-40 rounded-full ring-4 ring-white ring-offset-4 ring-offset-transparent shadow-2xl transition-all duration-300 hover:scale-105 hover:ring-8 animate-float">
              {#if fotoPerfilLocal}
                <img src={fotoPerfilLocal} alt="Foto de perfil" class="object-cover" />
              {:else if avatarLocal}
                <img src={avatarLocal} alt="Avatar" class="object-cover" />
              {:else}
                <div class="bg-white text-purple-700 flex items-center justify-center">
                  <span class="text-5xl font-black">{authStore.usuario?.nome.substring(0, 2).toUpperCase()}</span>
                </div>
              {/if}
            </div>
          </button>
          
          <!-- Botão de editar MODERNO -->
          <button
            type="button"
            class={`absolute bottom-2 right-2 flex items-center justify-center w-12 h-12 rounded-full bg-white text-purple-600 shadow-2xl transition-all duration-300 hover:scale-110 ${mostrarBotaoCamera ? 'opacity-100 scale-100' : 'opacity-0 scale-50'}`}
            onclick={abrirModalFoto}
            aria-label="Editar foto de perfil"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </button>
        </div>
        
        <!-- Informações do Usuário PREMIUM -->
        <div class="flex-1 text-white text-center md:text-left">
          <h1 class="text-5xl font-black mb-3 drop-shadow-lg">
            {authStore.usuario?.nome}
          </h1>
          
          {#if funcionario?.descricaoCargo}
            <p class="text-2xl font-semibold text-white/90 mb-3 flex items-center justify-center md:justify-start gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              {funcionario.descricaoCargo}
            </p>
          {/if}
          
          <p class="text-lg text-white/80 mb-4 flex items-center justify-center md:justify-start gap-2">
            <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            {authStore.usuario?.email}
          </p>
          
          <div class="flex items-center gap-3 flex-wrap justify-center md:justify-start">
            <div class="badge badge-lg bg-white/90 text-purple-700 border-0 font-bold shadow-lg px-4">
              {authStore.usuario?.role?.nome || "Usuário"}
            </div>
            
            {#if meuTime}
              <div class="badge badge-lg bg-white/80 border-0 font-semibold shadow-lg px-4" style="color: {meuTime.cor}">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" 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>
                {meuTime.nome}
              </div>
            {/if}
            
            {#if funcionario?.statusFerias === "em_ferias"}
              <div class="badge badge-lg bg-yellow-400 text-yellow-900 border-0 font-bold shadow-lg px-4 animate-pulse">
                🏖️ Em Férias
              </div>
            {:else}
              <div class="badge badge-lg bg-green-400 text-green-900 border-0 font-bold shadow-lg px-4">
                ✅ Ativo
              </div>
            {/if}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container mx-auto px-6 max-w-7xl">
    <!-- Tabs PREMIUM -->
    <div role="tablist" class="tabs tabs-boxed mb-8 bg-gradient-to-r from-base-200 to-base-300 shadow-xl p-2">
      <button
        type="button"
        role="tab"
        class={`tab tab-lg font-semibold transition-all duration-300 ${abaAtiva === "meu-perfil" ? "tab-active bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg scale-105" : "hover:bg-base-100"}`}
        onclick={() => abaAtiva = "meu-perfil"}
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        Meu Perfil
      </button>
      
      <button
        type="button"
        role="tab"
        class={`tab tab-lg font-semibold transition-all duration-300 ${abaAtiva === "minhas-ferias" ? "tab-active bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg scale-105" : "hover:bg-base-100"}`}
        onclick={() => abaAtiva = "minhas-ferias"}
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        Minhas Férias
      </button>
      
      {#if ehGestor}
        <button
          type="button"
          role="tab"
          class={`tab tab-lg font-semibold transition-all duration-300 ${abaAtiva === "aprovar-ferias" ? "tab-active bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg scale-105" : "hover:bg-base-100"}`}
          onclick={() => abaAtiva = "aprovar-ferias"}
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
          Aprovar Férias
          {#if (solicitacoesSubordinados || []).filter((s: any) => s.status === "aguardando_aprovacao").length > 0}
            <span class="badge badge-error badge-sm ml-2 animate-pulse">
              {(solicitacoesSubordinados || []).filter((s: any) => s.status === "aguardando_aprovacao").length}
            </span>
          {/if}
        </button>
      {/if}
    </div>

    <!-- Conteúdo das Abas -->
    {#if abaAtiva === "meu-perfil"}
      <!-- Meu Perfil PREMIUM -->
      <div class="space-y-6">
        <!-- STATS CARDS -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <!-- Stat 1: Perfil -->
          <div class="card bg-gradient-to-br from-purple-500 to-purple-700 text-white shadow-2xl hover:scale-105 transition-transform">
            <div class="card-body">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-white/80 text-sm font-medium">Seu Perfil</p>
                  <p class="text-2xl font-black">{authStore.usuario?.role?.nome || "Usuário"}</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-80" 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>
              </div>
            </div>
          </div>

          <!-- Stat 2: Time -->
          <div class="card bg-gradient-to-br from-blue-500 to-blue-700 text-white shadow-2xl hover:scale-105 transition-transform">
            <div class="card-body">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-white/80 text-sm font-medium">Seu Time</p>
                  <p class="text-2xl font-black truncate">{meuTime?.nome || "Sem time"}</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-80" 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>
          </div>

          <!-- Stat 3: Status -->
          <div class="card bg-gradient-to-br from-green-500 to-green-700 text-white shadow-2xl hover:scale-105 transition-transform">
            <div class="card-body">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-white/80 text-sm font-medium">Status</p>
                  <p class="text-2xl font-black">{funcionario?.statusFerias === "em_ferias" ? "Em Férias" : "Ativo"}</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
            </div>
          </div>

          <!-- Stat 4: Matrícula -->
          <div class="card bg-gradient-to-br from-indigo-500 to-indigo-700 text-white shadow-2xl hover:scale-105 transition-transform">
            <div class="card-body">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-white/80 text-sm font-medium">Matrícula</p>
                  <p class="text-2xl font-black">{funcionario?.matricula || "---"}</p>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
                </svg>
              </div>
            </div>
          </div>
        </div>

        <!-- CARDS PRINCIPAIS -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Informações Pessoais PREMIUM -->
          <div class="card bg-base-100 shadow-2xl hover:shadow-3xl transition-shadow border-t-4 border-purple-500">
        <div class="card-body">
              <h2 class="card-title text-2xl mb-6 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                Informações Pessoais
              </h2>
              <div class="space-y-4">
                <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                  <div class="flex-1">
                    <span class="label-text font-bold text-base-content/70 text-sm">Nome Completo</span>
                    <p class="text-base-content font-semibold text-lg">{authStore.usuario?.nome}</p>
                  </div>
                </div>
                
                <div class="divider my-1"></div>
                
                <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  <div class="flex-1">
                    <span class="label-text font-bold text-base-content/70 text-sm">E-mail Institucional</span>
                    <p class="text-base-content font-semibold text-lg break-all">{authStore.usuario?.email}</p>
                  </div>
                </div>
                
                <div class="divider my-1"></div>
                
                <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                  <div class="flex-1">
                    <span class="label-text font-bold text-base-content/70 text-sm">Perfil de Acesso</span>
                    <div class="badge badge-primary badge-lg mt-1 font-bold">{authStore.usuario?.role?.nome || "Usuário"}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Dados Funcionais PREMIUM -->
          {#if funcionario}
            <div class="card bg-base-100 shadow-2xl hover:shadow-3xl transition-shadow border-t-4 border-blue-500">
              <div class="card-body">
                <h2 class="card-title text-2xl mb-6 flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  Dados Funcionais
                </h2>
                <div class="space-y-4">
                  <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
                    </svg>
                    <div class="flex-1">
                      <span class="label-text font-bold text-base-content/70 text-sm">Matrícula</span>
                      <p class="text-base-content font-semibold text-lg">{funcionario.matricula || "Não informada"}</p>
                    </div>
                  </div>
                  
                  <div class="divider my-1"></div>
                  
                  <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                    </svg>
                    <div class="flex-1">
                      <span class="label-text font-bold text-base-content/70 text-sm">CPF</span>
                      <p class="text-base-content font-semibold text-lg">{funcionario.cpf}</p>
                    </div>
                  </div>
                  
                  <div class="divider my-1"></div>
                  
                  <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" 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 class="flex-1">
                      <span class="label-text font-bold text-base-content/70 text-sm">Time</span>
                      {#if meuTime}
                        <div class="flex items-center gap-2 mt-1">
                          <div class="badge badge-lg font-semibold" style="background-color: {meuTime.cor}20; border-color: {meuTime.cor}; color: {meuTime.cor}">
                            {meuTime.nome}
                          </div>
                        </div>
                        <p class="text-xs text-base-content/60 mt-1">Gestor: <span class="font-semibold">{meuTime.gestor?.nome}</span></p>
              {:else}
                        <p class="text-base-content/50 text-sm mt-1">Não atribuído a um time</p>
                      {/if}
                    </div>
                  </div>
                  
                  <div class="divider my-1"></div>
                  
                  <div class="flex items-start gap-3 p-3 rounded-lg hover:bg-base-200 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div class="flex-1">
                      <span class="label-text font-bold text-base-content/70 text-sm">Status Atual</span>
                      {#if funcionario.statusFerias === "em_ferias"}
                        <div class="badge badge-warning badge-lg mt-1 font-bold">🏖️ Em Férias</div>
                      {:else}
                        <div class="badge badge-success badge-lg mt-1 font-bold">✅ Ativo</div>
                      {/if}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {/if}
        </div>

        <!-- Times Gerenciados PREMIUM -->
        {#if ehGestor}
          <div class="card bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950 dark:to-orange-950 shadow-2xl border-t-4 border-amber-500">
            <div class="card-body">
              <h2 class="card-title text-2xl mb-6 flex items-center gap-2 text-amber-700 dark:text-amber-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                Times que Você Gerencia
                <div class="badge badge-warning badge-lg ml-2">{meusTimesGestor.length}</div>
              </h2>
              
              {#if meusTimesGestor.length === 0}
                <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>Você não gerencia nenhum time no momento.</span>
                </div>
              {:else}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {#each meusTimesGestor as time}
                    <div class="card bg-white dark:bg-base-100 shadow-xl hover:shadow-2xl hover:scale-105 transition-all border-l-4" style="border-color: {time.cor}">
                      <div class="card-body">
                        <div class="flex items-start gap-2">
                          <div class="flex-1">
                            <h3 class="font-black text-xl mb-2" style="color: {time.cor}">{time.nome}</h3>
                            <p class="text-sm text-base-content/70 mb-4 line-clamp-2">{time.descricao || "Sem descrição"}</p>
            </div>
          </div>

                        <div class="divider my-2"></div>
                        
                        <div class="flex items-center justify-between">
                          <div class="flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 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 class="font-bold text-lg">{time.membros?.length || 0}</span>
                            <span class="text-sm text-base-content/70">membros</span>
                          </div>
                          <div class="badge badge-lg font-semibold" style="background-color: {time.cor}20; border-color: {time.cor}; color: {time.cor}">
                            Gestor
                          </div>
                        </div>
                      </div>
                    </div>
                  {/each}
                </div>
              {/if}
            </div>
          </div>
        {/if}
      </div>

    {:else if abaAtiva === "minhas-ferias"}
      <!-- Minhas Férias MODERNO -->
      <div class="space-y-8">
        {#if !mostrarFormSolicitar}
          <!-- Dashboard de Férias -->
          {#if funcionario}
            <DashboardFerias funcionarioId={funcionario._id} />
            
            <!-- Botão para solicitar -->
            <div class="flex justify-center">
              <button
                type="button"
                class="btn btn-lg gap-3 shadow-2xl hover:shadow-3xl transition-all hover:scale-105"
                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;"
                onclick={() => mostrarFormSolicitar = true}
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                Solicitar Novas Férias
              </button>
            </div>
          {:else}
            <div class="alert alert-warning shadow-xl">
              <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div>
                <h3 class="font-bold">Perfil de funcionário não encontrado</h3>
                <div class="text-xs">Seu usuário ainda não está associado a um cadastro de funcionário. Entre em contato com o RH.</div>
          </div>
        </div>
          {/if}
        {:else}
          <!-- Wizard de Solicitação de Férias -->
          {#if funcionario}
            <WizardSolicitacaoFerias 
              funcionarioId={funcionario._id} 
              onSucesso={recarregar} 
              onCancelar={() => mostrarFormSolicitar = false}
            />
          {/if}
        {/if}
      </div>

    {:else if abaAtiva === "aprovar-ferias"}
      <!-- Aprovar Férias (Gestores) PREMIUM -->
      <div class="card bg-base-100 shadow-2xl border-t-4 border-green-500">
        <div class="card-body">
          <h2 class="card-title text-2xl mb-6 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>
            Solicitações da Equipe
            <div class="badge badge-lg badge-primary ml-2">{solicitacoesSubordinados.length}</div>
          </h2>

          {#if solicitacoesSubordinados.length === 0}
            <div class="alert alert-success">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span class="font-semibold">Nenhuma solicitação pendente no momento.</span>
            </div>
          {:else}
            <div class="overflow-x-auto">
              <table class="table table-zebra table-lg">
                <thead>
                  <tr class="bg-base-200">
                    <th class="font-bold">Funcionário</th>
                    <th class="font-bold">Time</th>
                    <th class="font-bold">Ano</th>
                    <th class="font-bold">Períodos</th>
                    <th class="font-bold">Dias</th>
                    <th class="font-bold">Status</th>
                    <th class="font-bold">Ações</th>
                  </tr>
                </thead>
                <tbody>
                  {#each solicitacoesSubordinados as solicitacao}
                    <tr class="hover:bg-base-200 transition-colors">
                      <td>
                        <div class="font-bold">{solicitacao.funcionario?.nome}</div>
                      </td>
                      <td>
                        {#if solicitacao.time}
                          <div class="badge badge-lg font-semibold" style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time.cor}; color: {solicitacao.time.cor}">
                            {solicitacao.time.nome}
                          </div>
                        {/if}
                      </td>
                      <td class="font-semibold">{solicitacao.anoReferencia}</td>
                      <td class="font-semibold">{solicitacao.periodos.length}</td>
                      <td class="font-bold text-lg">{solicitacao.periodos.reduce((acc: number, p: any) => acc + p.diasCorridos, 0)}</td>
                      <td>
                        <div class={`badge badge-lg font-semibold ${getStatusBadge(solicitacao.status)}`}>
                          {getStatusTexto(solicitacao.status)}
                        </div>
                      </td>
                      <td>
                        {#if solicitacao.status === "aguardando_aprovacao"}
                          <button
                            type="button"
                            class="btn btn-primary btn-sm gap-2 shadow-lg hover:scale-105 transition-transform"
                            onclick={() => selecionarSolicitacao(solicitacao._id)}
                          >
                            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                            </svg>
                            Analisar
                          </button>
                        {:else}
                          <button
                            type="button"
                            class="btn btn-ghost btn-sm gap-2"
                            onclick={() => selecionarSolicitacao(solicitacao._id)}
                          >
                            <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                            Detalhes
                          </button>
                        {/if}
                      </td>
                    </tr>
                  {/each}
                </tbody>
              </table>
            </div>
          {/if}
        </div>
      </div>
    {/if}
            </div>

  <!-- Modal de Aprovação -->
  {#if solicitacaoSelecionada}
    <dialog class="modal modal-open">
      <div class="modal-box max-w-4xl">
        {#if authStore.usuario}
          <AprovarFerias
            solicitacao={solicitacaoSelecionada}
            gestorId={authStore.usuario._id}
            onSucesso={recarregar}
            onCancelar={() => solicitacaoSelecionada = null}
          />
        {/if}
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="button" onclick={() => solicitacaoSelecionada = null} aria-label="Fechar modal">Fechar</button>
      </form>
    </dialog>
  {/if}

  <!-- Modal de Upload de Foto / Escolher Avatar -->
  {#if mostrarModalFoto}
    <dialog class="modal modal-open">
      <div class="modal-box max-w-4xl max-h-[90vh] overflow-y-auto">
        <h3 class="font-black text-3xl mb-8 text-center bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
          Alterar Foto de Perfil
        </h3>
        
        <!-- Preview da foto atual -->
        <div class="flex justify-center mb-8">
          <div class="avatar">
            <div class="w-32 h-32 rounded-full ring-4 ring-primary ring-offset-base-100 ring-offset-4 shadow-2xl">
              {#if fotoPerfilLocal}
                <img src={fotoPerfilLocal} alt="Foto atual" class="object-cover" />
              {:else if avatarLocal}
                <img src={avatarLocal} alt="Avatar atual" class="object-cover" />
              {:else}
                <div class="bg-primary text-primary-content flex items-center justify-center">
                  <span class="text-4xl font-bold">{authStore.usuario?.nome.substring(0, 2).toUpperCase()}</span>
                </div>
              {/if}
            </div>
          </div>
        </div>

        <!-- Tabs: Avatar ou Upload -->
        <div role="tablist" class="tabs tabs-boxed mb-8 bg-gradient-to-r from-base-200 to-base-300 p-2 shadow-xl">
          <button
            type="button"
            role="tab"
            class={`tab tab-lg font-semibold transition-all ${modoFoto === "avatar" ? "tab-active bg-gradient-to-r from-purple-600 to-blue-600 text-white" : ""}`}
            onclick={() => modoFoto = "avatar"}
            disabled={uploadandoFoto}
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Escolher Avatar
          </button>
          <button
            type="button"
            role="tab"
            class={`tab tab-lg font-semibold transition-all ${modoFoto === "upload" ? "tab-active bg-gradient-to-r from-purple-600 to-blue-600 text-white" : ""}`}
            onclick={() => modoFoto = "upload"}
            disabled={uploadandoFoto}
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            Enviar Foto
          </button>
      </div>

        <!-- Conteúdo das Tabs -->
        {#if modoFoto === "avatar"}
          <!-- Galeria de Avatares -->
          <div class="mb-4">
            <p class="text-center text-base-content/70 mb-6 text-lg">
              Escolha um dos <strong class="text-primary">30 avatares profissionais</strong> para seu perfil
            </p>
            
            <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-4 p-6 bg-base-200 rounded-2xl max-h-[500px] overflow-y-auto shadow-inner">
              {#each avatarGallery as avatar}
                <button
                  type="button"
                  class={`flex flex-col items-center cursor-pointer transition-all hover:scale-110 p-2 rounded-xl ${avatarSelecionado === avatar.url ? 'ring-4 ring-primary bg-primary/10 scale-105' : 'hover:ring-2 hover:ring-primary/50 hover:bg-base-100'}`}
                  onclick={() => avatarSelecionado = avatar.url}
                  ondblclick={() => handleSelecionarAvatar(avatar.url)}
                  disabled={uploadandoFoto}
                  aria-label="Selecionar avatar {avatar.name}"
                >
                  <div class="avatar">
                    <div class="w-20 h-20 rounded-full shadow-lg">
                      <img src={avatar.url} alt={avatar.name} loading="lazy" />
                    </div>
                  </div>
                  <div class="text-[10px] text-center mt-2 truncate w-full font-semibold">{avatar.name}</div>
                </button>
              {/each}
          </div>

            <div class="alert alert-info mt-6 shadow-lg">
              <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>
                <strong>Dica:</strong> Clique uma vez para selecionar, clique duas vezes para aplicar imediatamente!
              </span>
              </div>
          </div>

          {#if avatarSelecionado}
            <div class="flex justify-center gap-3 mt-6">
              <button 
                type="button"
                class="btn btn-lg gap-2 shadow-xl hover:scale-105 transition-all" 
                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;"
                onclick={() => handleSelecionarAvatar(avatarSelecionado)}
                disabled={uploadandoFoto}
              >
                {#if uploadandoFoto}
                  <span class="loading loading-spinner"></span>
                {:else}
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
                {/if}
                {uploadandoFoto ? "Salvando..." : "Confirmar Avatar"}
              </button>
            </div>
          {/if}

        {:else}
          <!-- Upload de nova foto -->
          <div class="form-control">
            <label class="label" for="foto-upload">
              <span class="label-text font-bold text-lg">Selecionar nova foto</span>
            </label>
            <input
              id="foto-upload"
              type="file"
              class="file-input file-input-bordered file-input-lg w-full shadow-lg"
              accept="image/*"
              onchange={handleUploadFoto}
              disabled={uploadandoFoto}
            />
            <div class="label">
              <span class="label-text-alt text-base-content/70">Formatos aceitos: JPG, PNG, GIF. Tamanho máximo: 5MB</span>
            </div>
          </div>
        {/if}

        {#if erroUpload}
          <div class="alert alert-error mt-6 shadow-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="font-semibold">{erroUpload}</span>
          </div>
        {/if}

        {#if uploadandoFoto && modoFoto === "upload"}
          <div class="flex justify-center items-center gap-3 mt-6">
            <span class="loading loading-spinner loading-lg text-primary"></span>
            <span class="font-semibold text-lg">Enviando foto...</span>
          </div>
        {/if}

        <div class="modal-action mt-8">
            <button
              type="button"
            class="btn btn-lg" 
            onclick={() => mostrarModalFoto = false}
            disabled={uploadandoFoto}
          >
            Cancelar
            </button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button type="button" onclick={() => mostrarModalFoto = false} aria-label="Fechar modal" disabled={uploadandoFoto}>Fechar</button>
      </form>
    </dialog>
  {/if}
</main>
