<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
  import StatsCard from "$lib/components/ti/StatsCard.svelte";
  import { format } from "date-fns";
  import { ptBR } from "date-fns/locale";
  import { FileText, Clock, CheckCircle2, XCircle } from "lucide-svelte";

  type StatusSolicitacao = "pendente" | "aprovado" | "rejeitado";

  type SolicitacaoAcesso = {
    _id: Id<"solicitacoesAcesso">;
    _creationTime: number;
    nome: string;
    matricula: string;
    email: string;
    telefone: string;
    status: StatusSolicitacao;
    dataSolicitacao: number;
    dataResposta: number | null;
    observacoes: string | null;
  };

  type FiltroStatus = "todos" | "pendente" | "aprovado" | "rejeitado";

  type Mensagem = {
    tipo: "success" | "error" | "info";
    texto: string;
  };

  const client = useConvexClient();
  
  // Queries
  const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
  
  // Estados
  let filtroStatus = $state<FiltroStatus>("todos");
  let busca = $state("");
  let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
  let modalDetalhesAberto = $state(false);
  let modalAprovarAberto = $state(false);
  let modalRejeitarAberto = $state(false);
  let observacoes = $state("");
  let mensagem = $state<Mensagem | null>(null);
  let processando = $state(false);

  // Extrair dados das solicitações
  const solicitacoes = $derived.by(() => {
    if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
      return [];
    }
    
    if ("data" in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
      return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
    }
    
    if (Array.isArray(solicitacoesQuery)) {
      return solicitacoesQuery;
    }
    
    return [];
  });

  const carregando = $derived.by(() => {
    return solicitacoesQuery === undefined || solicitacoesQuery === null;
  });

  // Estatísticas
  const stats = $derived.by(() => {
    if (carregando) return null;
    
    const total = solicitacoes.length;
    const pendentes = solicitacoes.filter(s => s.status === "pendente").length;
    const aprovadas = solicitacoes.filter(s => s.status === "aprovado").length;
    const rejeitadas = solicitacoes.filter(s => s.status === "rejeitado").length;
    
    return {
      total,
      pendentes,
      aprovadas,
      rejeitadas
    };
  });

  // Filtrar e buscar solicitações
  const solicitacoesFiltradas = $derived.by(() => {
    let resultado = solicitacoes;

    // Filtrar por status
    if (filtroStatus !== "todos") {
      resultado = resultado.filter(s => s.status === filtroStatus);
    }

    // Buscar por nome, matrícula ou email
    if (busca.trim()) {
      const termo = busca.toLowerCase().trim();
      resultado = resultado.filter(s =>
        s.nome.toLowerCase().includes(termo) ||
        s.matricula.toLowerCase().includes(termo) ||
        s.email.toLowerCase().includes(termo)
      );
    }

    // Ordenar por data (mais recente primeiro)
    return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
  });

  // Funções auxiliares
  function formatarData(timestamp: number): string {
    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
  }

  function formatarDataRelativa(timestamp: number): string {
    const agora = Date.now();
    const diff = agora - timestamp;
    const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
    const horas = Math.floor(diff / (1000 * 60 * 60));
    const minutos = Math.floor(diff / (1000 * 60));

    if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
    if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
    if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
    return "Agora";
  }

  function getStatusBadge(status: StatusSolicitacao): string {
    switch (status) {
      case "pendente":
        return "badge-warning";
      case "aprovado":
        return "badge-success";
      case "rejeitado":
        return "badge-error";
      default:
        return "badge-neutral";
    }
  }

  function getStatusTexto(status: StatusSolicitacao): string {
    switch (status) {
      case "pendente":
        return "Pendente";
      case "aprovado":
        return "Aprovado";
      case "rejeitado":
        return "Rejeitado";
      default:
        return status;
    }
  }

  // Funções de modal
  function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
    solicitacaoSelecionada = solicitacao;
    modalDetalhesAberto = true;
  }

  function fecharDetalhes() {
    modalDetalhesAberto = false;
    solicitacaoSelecionada = null;
  }

  function abrirAprovar(solicitacao: SolicitacaoAcesso) {
    solicitacaoSelecionada = solicitacao;
    observacoes = "";
    modalAprovarAberto = true;
  }

  function fecharAprovar() {
    modalAprovarAberto = false;
    solicitacaoSelecionada = null;
    observacoes = "";
  }

  function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
    solicitacaoSelecionada = solicitacao;
    observacoes = "";
    modalRejeitarAberto = true;
  }

  function fecharRejeitar() {
    modalRejeitarAberto = false;
    solicitacaoSelecionada = null;
    observacoes = "";
  }

  // Funções de ação
  async function aprovarSolicitacao() {
    if (!solicitacaoSelecionada) return;

    processando = true;
    mensagem = null;

    try {
      await client.mutation(api.solicitacoesAcesso.aprovar, {
        solicitacaoId: solicitacaoSelecionada._id,
        observacoes: observacoes.trim() || undefined,
      });

      mensagem = {
        tipo: "success",
        texto: "Solicitação aprovada com sucesso!",
      };

      fecharAprovar();
      
      // Limpar mensagem após 3 segundos
      setTimeout(() => {
        mensagem = null;
      }, 3000);
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Erro ao aprovar solicitação";
      mensagem = {
        tipo: "error",
        texto: errorMessage,
      };
    } finally {
      processando = false;
    }
  }

  async function rejeitarSolicitacao() {
    if (!solicitacaoSelecionada) return;

    processando = true;
    mensagem = null;

    try {
      await client.mutation(api.solicitacoesAcesso.rejeitar, {
        solicitacaoId: solicitacaoSelecionada._id,
        observacoes: observacoes.trim() || undefined,
      });

      mensagem = {
        tipo: "success",
        texto: "Solicitação rejeitada com sucesso!",
      };

      fecharRejeitar();
      
      // Limpar mensagem após 3 segundos
      setTimeout(() => {
        mensagem = null;
      }, 3000);
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "Erro ao rejeitar solicitação";
      mensagem = {
        tipo: "error",
        texto: errorMessage,
      };
    } finally {
      processando = false;
    }
  }
</script>

<ProtectedRoute allowedRoles={["ti_master", "admin", "ti_usuario"]} maxLevel={3}>
  <div class="container mx-auto px-4 py-6 max-w-7xl">
    <!-- Mensagem de Feedback -->
    {#if mensagem}
      <div class="alert alert-{mensagem.tipo} shadow-lg mb-6">
        {#if mensagem.tipo === "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>
        {:else if mensagem.tipo === "error"}
          <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>
        {/if}
        <span>{mensagem.texto}</span>
      </div>
    {/if}

    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <div class="flex items-center gap-4">
        <div class="p-3 bg-primary/10 rounded-xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
          </svg>
        </div>
        <div>
          <h1 class="text-3xl font-bold text-base-content">Solicitações de Acesso</h1>
          <p class="text-base-content/60 mt-1">Gerencie e analise solicitações de acesso ao sistema</p>
        </div>
      </div>
    </div>

    <!-- Estatísticas -->
    {#if stats}
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <StatsCard 
          title="Total de Solicitações" 
          value={stats.total} 
          Icon={FileText}
          color="primary"
        />
        
        <StatsCard 
          title="Pendentes" 
          value={stats.pendentes} 
          description="{stats.total > 0 ? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
          Icon={Clock}
          color="warning"
        />
        
        <StatsCard 
          title="Aprovadas" 
          value={stats.aprovadas} 
          description="{stats.total > 0 ? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
          Icon={CheckCircle2}
          color="success"
        />
        
        <StatsCard 
          title="Rejeitadas" 
          value={stats.rejeitadas} 
          description="{stats.total > 0 ? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
          Icon={XCircle}
          color="error"
        />
      </div>
    {:else}
      <div class="flex justify-center items-center py-20">
        <span class="loading loading-spinner loading-lg text-primary"></span>
      </div>
    {/if}

    <!-- Filtros e Busca -->
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <!-- Tabs de Status -->
        <div class="tabs tabs-boxed mb-4 bg-base-200 p-2">
          <button 
            class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
            onclick={() => filtroStatus = "todos"}
          >
            Todas
          </button>
          <button 
            class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
            onclick={() => filtroStatus = "pendente"}
          >
            Pendentes
          </button>
          <button 
            class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
            onclick={() => filtroStatus = "aprovado"}
          >
            Aprovadas
          </button>
          <button 
            class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
            onclick={() => filtroStatus = "rejeitado"}
          >
            Rejeitadas
          </button>
        </div>

        <!-- Campo de Busca -->
        <div class="form-control">
          <label class="label">
            <span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
          </label>
          <div class="relative">
            <input
              type="text"
              placeholder="Digite para buscar..."
              class="input input-bordered w-full pl-10"
              bind:value={busca}
            />
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- Lista de Solicitações -->
    {#if carregando}
      <div class="flex justify-center items-center py-20">
        <span class="loading loading-spinner loading-lg text-primary"></span>
      </div>
    {:else if solicitacoesFiltradas.length === 0}
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body text-center py-20">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/30 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
          <h3 class="text-xl font-semibold text-base-content/70 mb-2">Nenhuma solicitação encontrada</h3>
          <p class="text-base-content/50">
            {#if busca.trim() || filtroStatus !== "todos"}
              Tente ajustar os filtros ou a busca.
            {:else}
              Ainda não há solicitações de acesso cadastradas.
            {/if}
          </p>
        </div>
      </div>
    {:else}
      <div class="grid grid-cols-1 gap-4">
        {#each solicitacoesFiltradas as solicitacao}
          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
            <div class="card-body">
              <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="flex-1">
                  <div class="flex items-center gap-3 mb-2">
                    <h3 class="text-xl font-bold text-base-content">{solicitacao.nome}</h3>
                    <span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
                      {getStatusTexto(solicitacao.status)}
                    </span>
                  </div>
                  
                  <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm text-base-content/70">
                    <div class="flex items-center gap-2">
                      <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="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>
                      <span class="font-semibold">Matrícula:</span>
                      <span>{solicitacao.matricula}</span>
                    </div>
                    
                    <div class="flex items-center gap-2">
                      <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="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>
                      <span class="font-semibold">E-mail:</span>
                      <span>{solicitacao.email}</span>
                    </div>
                    
                    <div class="flex items-center gap-2">
                      <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                      <span class="font-semibold">Telefone:</span>
                      <span>{solicitacao.telefone}</span>
                    </div>
                  </div>
                  
                  <div class="mt-3 text-xs text-base-content/50">
                    <span class="font-semibold">Solicitado em:</span> {formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(solicitacao.dataSolicitacao)})
                    {#if solicitacao.dataResposta}
                      <span class="ml-4 font-semibold">Processado em:</span> {formatarData(solicitacao.dataResposta)}
                    {/if}
                  </div>
                </div>
                
                <div class="flex flex-col gap-2">
                  <button 
                    class="btn btn-sm btn-outline btn-primary"
                    onclick={() => abrirDetalhes(solicitacao)}
                  >
                    <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>
                    Ver Detalhes
                  </button>
                  
                  {#if solicitacao.status === "pendente"}
                    <button 
                      class="btn btn-sm btn-success"
                      onclick={() => abrirAprovar(solicitacao)}
                    >
                      <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="M5 13l4 4L19 7" />
                      </svg>
                      Aprovar
                    </button>
                    
                    <button 
                      class="btn btn-sm btn-error"
                      onclick={() => abrirRejeitar(solicitacao)}
                    >
                      <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>
                      Rejeitar
                    </button>
                  {/if}
                </div>
              </div>
            </div>
          </div>
        {/each}
      </div>
    {/if}

    <!-- Modal de Detalhes -->
    {#if modalDetalhesAberto && solicitacaoSelecionada}
      <dialog class="modal modal-open">
        <div class="modal-box max-w-2xl">
          <h3 class="font-bold text-2xl mb-4">Detalhes da Solicitação</h3>
          
          <div class="space-y-4">
            <div class="flex items-center gap-3 mb-4">
              <span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
                {getStatusTexto(solicitacaoSelecionada.status)}
              </span>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label class="label">
                  <span class="label-text font-semibold">Nome Completo</span>
                </label>
                <div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
              </div>
              
              <div>
                <label class="label">
                  <span class="label-text font-semibold">Matrícula</span>
                </label>
                <div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
              </div>
              
              <div>
                <label class="label">
                  <span class="label-text font-semibold">E-mail</span>
                </label>
                <div class="input input-bordered">{solicitacaoSelecionada.email}</div>
              </div>
              
              <div>
                <label class="label">
                  <span class="label-text font-semibold">Telefone</span>
                </label>
                <div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
              </div>
              
              <div>
                <label class="label">
                  <span class="label-text font-semibold">Data da Solicitação</span>
                </label>
                <div class="input input-bordered">
                  {formatarData(solicitacaoSelecionada.dataSolicitacao)}
                </div>
              </div>
              
              {#if solicitacaoSelecionada.dataResposta}
                <div>
                  <label class="label">
                    <span class="label-text font-semibold">Data de Processamento</span>
                  </label>
                  <div class="input input-bordered">
                    {formatarData(solicitacaoSelecionada.dataResposta)}
                  </div>
                </div>
              {/if}
            </div>
            
            {#if solicitacaoSelecionada.observacoes}
              <div>
                <label class="label">
                  <span class="label-text font-semibold">Observações</span>
                </label>
                <div class="textarea textarea-bordered min-h-24">
                  {solicitacaoSelecionada.observacoes}
                </div>
              </div>
            {/if}
          </div>
          
          <div class="modal-action">
            <button class="btn" onclick={fecharDetalhes}>Fechar</button>
          </div>
        </div>
        <form method="dialog" class="modal-backdrop">
          <button onclick={fecharDetalhes}>fechar</button>
        </form>
      </dialog>
    {/if}

    <!-- Modal de Aprovar -->
    {#if modalAprovarAberto && solicitacaoSelecionada}
      <dialog class="modal modal-open">
        <div class="modal-box">
          <h3 class="font-bold text-2xl mb-4">Aprovar Solicitação</h3>
          
          <div class="mb-4">
            <p class="text-base-content/70 mb-2">
              Você está prestes a aprovar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
            </p>
            <p class="text-sm text-base-content/60">
              Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
            </p>
          </div>
          
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-semibold">Observações (opcional)</span>
            </label>
            <textarea
              class="textarea textarea-bordered"
              placeholder="Adicione observações sobre a aprovação..."
              bind:value={observacoes}
              rows="3"
            ></textarea>
          </div>
          
          <div class="modal-action">
            <button 
              class="btn btn-ghost" 
              onclick={fecharAprovar}
              disabled={processando}
            >
              Cancelar
            </button>
            <button 
              class="btn btn-success" 
              onclick={aprovarSolicitacao}
              disabled={processando}
            >
              {#if processando}
                <span class="loading loading-spinner loading-sm"></span>
                Processando...
              {:else}
                <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="M5 13l4 4L19 7" />
                </svg>
                Confirmar Aprovação
              {/if}
            </button>
          </div>
        </div>
        <form method="dialog" class="modal-backdrop">
          <button onclick={fecharAprovar}>fechar</button>
        </form>
      </dialog>
    {/if}

    <!-- Modal de Rejeitar -->
    {#if modalRejeitarAberto && solicitacaoSelecionada}
      <dialog class="modal modal-open">
        <div class="modal-box">
          <h3 class="font-bold text-2xl mb-4">Rejeitar Solicitação</h3>
          
          <div class="mb-4">
            <p class="text-base-content/70 mb-2">
              Você está prestes a rejeitar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
            </p>
            <p class="text-sm text-base-content/60">
              Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
            </p>
          </div>
          
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
            </label>
            <textarea
              class="textarea textarea-bordered"
              placeholder="Descreva o motivo da rejeição..."
              bind:value={observacoes}
              rows="3"
            ></textarea>
          </div>
          
          <div class="modal-action">
            <button 
              class="btn btn-ghost" 
              onclick={fecharRejeitar}
              disabled={processando}
            >
              Cancelar
            </button>
            <button 
              class="btn btn-error" 
              onclick={rejeitarSolicitacao}
              disabled={processando}
            >
              {#if processando}
                <span class="loading loading-spinner loading-sm"></span>
                Processando...
              {:else}
                <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="M6 18L18 6M6 6l12 12" />
                </svg>
                Confirmar Rejeição
              {/if}
            </button>
          </div>
        </div>
        <form method="dialog" class="modal-backdrop">
          <button onclick={fecharRejeitar}>fechar</button>
        </form>
      </dialog>
    {/if}
  </div>
</ProtectedRoute>
