<script lang="ts">
  import { useConvexClient, useQuery } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
  import TicketTimeline from "$lib/components/chamados/TicketTimeline.svelte";
  import {
    formatarData,
    getStatusBadge,
    getStatusLabel,
    prazoRestante,
  } from "$lib/utils/chamados";
  import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
  import { authStore } from "$lib/stores/auth.svelte";
  import SlaChart from "$lib/components/chamados/SlaChart.svelte";

  type Ticket = Doc<"tickets">;
  type Usuario = Doc<"usuarios">;
  type SlaConfig = Doc<"slaConfigs">;
  type Template = Doc<"templatesMensagens">;

  const client = useConvexClient();
  
  // createSvelteAuthClient gerencia autenticação automaticamente
  // Não precisamos verificar token manualmente, apenas garantir que useConvexWithAuth seja chamado
  $effect(() => {
    // Sempre chamar useConvexWithAuth para garantir que autenticação está configurada
    useConvexWithAuth();
  });

  // Queries - executar normalmente, o createSvelteAuthClient no layout gerencia autenticação
  const usuariosQuery = useQuery(api.usuarios.listar, {});
  const slaConfigsQuery = useQuery(api.chamados.listarSlaConfigs, {});
  const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
  const estatisticasQuery = useQuery(api.chamados.obterEstatisticasChamados, {});
  const dadosSlaGraficoQuery = useQuery(api.chamados.obterDadosSlaGrafico, {});

  // Extrair dados dos templates
  const templates = $derived.by(() => {
    // useQuery retorna undefined enquanto carrega, depois retorna os dados diretamente
    if (templatesQuery === undefined || templatesQuery === null) {
      return [];
    }
    // useQuery retorna os dados diretamente (não em .data)
    if (Array.isArray(templatesQuery)) {
      return templatesQuery;
    }
    return [];
  });

  const carregandoTemplates = $derived.by(() => {
    // useQuery retorna undefined enquanto carrega
    return templatesQuery === undefined || templatesQuery === null;
  });

  const templatesChamados = $derived.by(() => {
    return templates.filter((t: Template) => {
      if (!t.codigo) return false;
      return typeof t.codigo === 'string' && t.codigo.startsWith("chamado_");
    });
  });

  let carregandoChamados = $state(true);
  let tickets = $state<Array<Ticket>>([]);
  let filtroStatus = $state<"todos" | Ticket["status"]>("todos");
  let filtroResponsavel = $state<"todos" | Id<"usuarios">>("todos");
  let filtroSetor = $state<string>("todos");
  let ticketSelecionado = $state<Id<"tickets"> | null>(null);
  let detalheSelecionado = $state<Ticket | null>(null);
  let assignResponsavel = $state<Id<"usuarios"> | "">("");
  let assignMotivo = $state("");
  let assignFeedback = $state<string | null>(null);
  let slaForm = $state<{
    slaId?: Id<"slaConfigs">;
    nome: string;
    descricao: string;
    prioridade: "baixa" | "media" | "alta" | "critica";
    tempoRespostaHoras: number;
    tempoConclusaoHoras: number;
    tempoEncerramentoHoras?: number | null;
    alertaAntecedenciaHoras: number;
    ativo: boolean;
  }>({
    nome: "",
    descricao: "",
    prioridade: "media",
    tempoRespostaHoras: 4,
    tempoConclusaoHoras: 24,
    tempoEncerramentoHoras: 72,
    alertaAntecedenciaHoras: 2,
    ativo: true,
  });
  let slaFeedback = $state<string | null>(null);
  let slaParaExcluir = $state<Id<"slaConfigs"> | null>(null);
  let prorrogacaoForm = $state<{
    ticketId: Id<"tickets"> | "";
    horasAdicionais: number;
    prazo: "resposta" | "conclusao";
    motivo: string;
  }>({
    ticketId: "",
    horasAdicionais: 24,
    prazo: "conclusao",
    motivo: "",
  });
  let prorrogacaoFeedback = $state<string | null>(null);
  let criandoTemplates = $state(false);
  let templatesFeedback = $state<string | null>(null);

  // Estados para responder chamado
  let respostaTexto = $state("");
  let respostaAnexo = $state<File | null>(null);
  let respostaAnexoId = $state<Id<"_storage"> | null>(null);
  let respostaAnexoNome = $state<string>("");
  let marcandoConcluido = $state(false);
  let respostaFeedback = $state<string | null>(null);
  let enviandoResposta = $state(false);

  let carregamentoToken = 0;
  
  // Carregar chamados quando filtros mudarem
  $effect(() => {
    // Pequeno delay para garantir que autenticação está configurada
    const timeoutId = setTimeout(() => {
      const filtros = {
        status: filtroStatus === "todos" ? undefined : filtroStatus,
        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
        setor: filtroSetor === "todos" ? undefined : filtroSetor,
      };
      if (import.meta.env.DEV) {
        console.log("🚀 [effect] Carregando chamados com filtros:", filtros);
      }
      carregarChamados(filtros);
    }, 200);
    
    return () => clearTimeout(timeoutId);
  });

  async function carregarChamados(filtros: {
    status?: Ticket["status"];
    responsavelId?: Id<"usuarios">;
    setor?: string;
  }) {
    try {
      carregandoChamados = true;
      const token = ++carregamentoToken;
      
      if (import.meta.env.DEV) {
        console.log("🔍 [carregarChamados] Executando query com filtros:", filtros);
      }
      
      // createSvelteAuthClient gerencia autenticação automaticamente
      const data = await client.query(api.chamados.listarChamadosTI, {
        status: filtros.status,
        responsavelId: filtros.responsavelId,
        setor: filtros.setor,
      });
      
      if (token !== carregamentoToken) {
        if (import.meta.env.DEV) {
          console.log("🔍 [carregarChamados] Query cancelada (nova requisição iniciada)");
        }
        return;
      }
      
      if (import.meta.env.DEV) {
        console.log("✅ [carregarChamados] Query executada com sucesso. Chamados retornados:", data?.length ?? 0);
      }
      
      tickets = data ?? [];
      
      if (!ticketSelecionado && tickets.length > 0) {
        selecionarTicket(tickets[0]._id);
      }
    } catch (error) {
      console.error("❌ [carregarChamados] Erro ao carregar chamados:", error);
      // Se erro de autenticação, tentar novamente após um pequeno delay
      if (error instanceof Error && (error.message.includes("autenticado") || error.message.includes("authentication"))) {
        console.warn("⚠️ [carregarChamados] Erro de autenticação detectado, tentando novamente...");
        setTimeout(() => {
          carregarChamados(filtros);
        }, 1000);
      }
    } finally {
      carregandoChamados = false;
    }
  }

  function selecionarTicket(ticketId: Id<"tickets">) {
    ticketSelecionado = ticketId;
    detalheSelecionado = tickets.find((t) => t._id === ticketId) ?? null;
  }

  const usuariosTI = $derived.by(() => {
    // useQuery retorna undefined enquanto carrega, depois retorna os dados diretamente
    if (usuariosQuery === undefined || usuariosQuery === null) {
      if (import.meta.env.DEV) {
        console.log("🔍 [usuariosTI] Query ainda carregando...", usuariosQuery);
      }
      return [];
    }
    
    // Verificar se é um objeto com propriedade data (como em outros lugares do código)
    let usuarios: Usuario[] = [];
    if (typeof usuariosQuery === 'object' && usuariosQuery !== null) {
      if ('data' in usuariosQuery && Array.isArray(usuariosQuery.data)) {
        usuarios = usuariosQuery.data as Usuario[];
      } else if (Array.isArray(usuariosQuery)) {
        usuarios = usuariosQuery as Usuario[];
      } else {
        if (import.meta.env.DEV) {
          console.log("🔍 [usuariosTI] Formato inesperado:", typeof usuariosQuery, usuariosQuery);
        }
        return [];
      }
    } else if (Array.isArray(usuariosQuery)) {
      usuarios = usuariosQuery as Usuario[];
    } else {
      if (import.meta.env.DEV) {
        console.log("🔍 [usuariosTI] Tipo inesperado:", typeof usuariosQuery, usuariosQuery);
      }
      return [];
    }
    
    if (usuarios.length === 0) {
      if (import.meta.env.DEV) {
        console.log("🔍 [usuariosTI] Nenhum usuário retornado");
      }
      return [];
    }
    
    const usuariosFiltrados = usuarios.filter((usuario: Usuario) => {
      // Verificar se o usuário tem setor "TI" no role (case-insensitive)
      const setor = usuario.role?.setor;
      const temSetorTI = setor && setor.toUpperCase() === "TI";
      if (import.meta.env.DEV && temSetorTI) {
        console.log("✅ [usuariosTI] Usuário TI encontrado:", usuario.nome, usuario.role?.setor);
      }
      // Log para debug: mostrar todos os setores encontrados
      if (import.meta.env.DEV && setor) {
        console.log("🔍 [usuariosTI] Usuário:", usuario.nome, "Setor:", setor);
      }
      return temSetorTI;
    });
    if (import.meta.env.DEV) {
      console.log("📊 [usuariosTI] Total de usuários:", usuarios.length, "Usuários TI:", usuariosFiltrados.length);
    }
    return usuariosFiltrados;
  });

  const estatisticas = $derived.by(() => {
    // Usar query de estatísticas se disponível, senão calcular localmente
    if (estatisticasQuery !== undefined && estatisticasQuery !== null) {
      // useQuery retorna dados diretamente ou em propriedade data
      let dadosEstatisticas: { total: number; abertos: number; emAndamento: number; vencidos: number } | null = null;
      
      if (typeof estatisticasQuery === 'object') {
        if ('data' in estatisticasQuery && estatisticasQuery.data) {
          dadosEstatisticas = estatisticasQuery.data as { total: number; abertos: number; emAndamento: number; vencidos: number };
        } else if ('total' in estatisticasQuery) {
          dadosEstatisticas = estatisticasQuery as { total: number; abertos: number; emAndamento: number; vencidos: number };
        }
      }
      
      if (dadosEstatisticas) {
        return dadosEstatisticas;
      }
    }
    // Fallback: calcular com base nos tickets carregados
    const total = tickets.length;
    const abertos = tickets.filter((t) => t.status === "aberto").length;
    const emAndamento = tickets.filter((t) => t.status === "em_andamento").length;
    const vencidos = tickets.filter(
      (t) => (t.prazoConclusao && t.prazoConclusao < Date.now()) || t.status === "cancelado"
    ).length;
    return { total, abertos, emAndamento, vencidos };
  });

  function selecionarSla(sla: SlaConfig) {
    slaForm = {
      slaId: sla._id,
      nome: sla.nome,
      descricao: sla.descricao ?? "",
      prioridade: sla.prioridade,
      tempoRespostaHoras: sla.tempoRespostaHoras,
      tempoConclusaoHoras: sla.tempoConclusaoHoras,
      tempoEncerramentoHoras: sla.tempoEncerramentoHoras ?? undefined,
      alertaAntecedenciaHoras: sla.alertaAntecedenciaHoras,
      ativo: sla.ativo,
    };
  }

  function novoSla(prioridade?: "baixa" | "media" | "alta" | "critica") {
    slaForm = {
      nome: "",
      descricao: "",
      prioridade: prioridade || slaForm.prioridade || "media",
      tempoRespostaHoras: 4,
      tempoConclusaoHoras: 24,
      tempoEncerramentoHoras: 72,
      alertaAntecedenciaHoras: 2,
      ativo: true,
    };
    slaFeedback = null;
    slaParaExcluir = null;
  }

  async function salvarSlaConfig() {
    try {
      slaFeedback = null;
      if (!slaForm.nome.trim()) {
        slaFeedback = "Nome é obrigatório";
        return;
      }
      await client.mutation(api.chamados.salvarSlaConfig, {
        slaId: slaForm.slaId,
        nome: slaForm.nome,
        descricao: slaForm.descricao || undefined,
        prioridade: slaForm.prioridade,
        tempoRespostaHoras: slaForm.tempoRespostaHoras,
        tempoConclusaoHoras: slaForm.tempoConclusaoHoras,
        tempoEncerramentoHoras: slaForm.tempoEncerramentoHoras || undefined,
        alertaAntecedenciaHoras: slaForm.alertaAntecedenciaHoras,
        ativo: slaForm.ativo,
      });
      slaFeedback = "Configuração salva com sucesso";
      // Recarregar SLAs após salvar
      if (slaConfigsQuery?.data) {
        const slaAtualizado = await client.query(api.chamados.listarSlaConfigs, {});
        if (slaAtualizado && slaAtualizado.length > 0) {
          const slaEncontrado = slaAtualizado.find((s: SlaConfig) => 
            s.prioridade === slaForm.prioridade && s.ativo === slaForm.ativo
          );
          if (slaEncontrado) {
            selecionarSla(slaEncontrado);
          }
        }
      }
    } catch (error) {
      slaFeedback =
        error instanceof Error ? error.message : "Erro ao salvar configuração de SLA";
    }
  }

  async function excluirSlaConfig() {
    if (!slaParaExcluir) return;
    try {
      slaFeedback = null;
      await client.mutation(api.chamados.excluirSlaConfig, {
        slaId: slaParaExcluir,
      });
      slaFeedback = "Configuração excluída com sucesso";
      slaParaExcluir = null;
      novoSla();
    } catch (error) {
      slaFeedback =
        error instanceof Error ? error.message : "Erro ao excluir configuração de SLA";
    }
  }

  const slaConfigsPorPrioridade = $derived.by(() => {
    // useQuery retorna um objeto com propriedade .data
    if (slaConfigsQuery === undefined || slaConfigsQuery === null) {
      return {
        baixa: undefined,
        media: undefined,
        alta: undefined,
        critica: undefined,
      };
    }
    // Verificar se tem propriedade data
    const slaConfigs = ('data' in slaConfigsQuery && slaConfigsQuery.data !== undefined)
      ? (Array.isArray(slaConfigsQuery.data) ? slaConfigsQuery.data : [])
      : (Array.isArray(slaConfigsQuery) ? slaConfigsQuery : []);
    
    return {
      baixa: slaConfigs.find((s: SlaConfig) => s.prioridade === "baixa" && s.ativo),
      media: slaConfigs.find((s: SlaConfig) => s.prioridade === "media" && s.ativo),
      alta: slaConfigs.find((s: SlaConfig) => s.prioridade === "alta" && s.ativo),
      critica: slaConfigs.find((s: SlaConfig) => s.prioridade === "critica" && s.ativo),
    };
  });

  async function atribuirResponsavel() {
    if (!ticketSelecionado || !assignResponsavel) {
      assignFeedback = !ticketSelecionado 
        ? "Selecione um chamado primeiro" 
        : "Selecione um responsável";
      return;
    }
    try {
      assignFeedback = null;
      await client.mutation(api.chamados.atribuirResponsavel, {
        ticketId: ticketSelecionado,
        responsavelId: assignResponsavel as Id<"usuarios">,
        motivo: assignMotivo || undefined,
      });
      assignFeedback = "Responsável atribuído com sucesso";
      assignMotivo = "";
      assignResponsavel = "";
      await carregarChamados({
        status: filtroStatus === "todos" ? undefined : filtroStatus,
        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
        setor: filtroSetor === "todos" ? undefined : filtroSetor,
      });
      if (ticketSelecionado) {
        selecionarTicket(ticketSelecionado);
      }
    } catch (error) {
      assignFeedback = error instanceof Error ? error.message : "Erro ao atribuir responsável";
    }
  }

  async function prorrogarChamado() {
    // Usar o ticket selecionado se não houver ticketId no formulário
    const ticketIdParaProrrogar = prorrogacaoForm.ticketId || ticketSelecionado;
    
    if (!ticketIdParaProrrogar || !prorrogacaoForm.motivo.trim()) {
      prorrogacaoFeedback = "Selecione um chamado e preencha o motivo da prorrogação";
      return;
    }
    if (prorrogacaoForm.horasAdicionais <= 0) {
      prorrogacaoFeedback = "O número de horas deve ser maior que zero";
      return;
    }
    try {
      prorrogacaoFeedback = null;
      await client.mutation(api.chamados.prorrogarChamado, {
        ticketId: ticketIdParaProrrogar as Id<"tickets">,
        horasAdicionais: prorrogacaoForm.horasAdicionais,
        prazo: prorrogacaoForm.prazo,
        motivo: prorrogacaoForm.motivo.trim(),
      });
      prorrogacaoFeedback = "Prazo prorrogado com sucesso";
      prorrogacaoForm = {
        ticketId: "",
        horasAdicionais: 24,
        prazo: "conclusao",
        motivo: "",
      };
      await carregarChamados({
        status: filtroStatus === "todos" ? undefined : filtroStatus,
        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
        setor: filtroSetor === "todos" ? undefined : filtroSetor,
      });
      if (ticketIdParaProrrogar) {
        selecionarTicket(ticketIdParaProrrogar as Id<"tickets">);
      }
    } catch (error) {
      prorrogacaoFeedback = error instanceof Error ? error.message : "Erro ao prorrogar prazo";
    }
  }

  async function criarTemplatesPadrao() {
    try {
      criandoTemplates = true;
      templatesFeedback = null;
      const resultado = await client.mutation(api.templatesMensagens.criarTemplatesPadrao, {});
      templatesFeedback = resultado?.sucesso ? "Templates padrão criados com sucesso" : "Templates criados";
      // Aguardar um pouco para os templates aparecerem e forçar reload da query
      await new Promise((resolve) => setTimeout(resolve, 1000));
      // Forçar reload dos templates
      if (templatesQuery) {
        // A query será atualizada automaticamente pelo useQuery
      }
    } catch (error) {
      console.error("Erro ao criar templates:", error);
      templatesFeedback = error instanceof Error ? error.message : "Erro ao criar templates padrão";
    } finally {
      criandoTemplates = false;
    }
  }

  async function handleAnexoChange(event: Event) {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (!file) {
      respostaAnexo = null;
      respostaAnexoId = null;
      respostaAnexoNome = "";
      return;
    }

    respostaAnexo = file;
    respostaAnexoNome = file.name;

    try {
      // Gerar URL de upload
      const uploadUrl = await client.mutation(api.chamados.generateUploadUrl, {});
      
      // Fazer upload do arquivo
      const response = await fetch(uploadUrl, {
        method: "POST",
        headers: { "Content-Type": file.type },
        body: file,
      });

      const result = await response.json();
      respostaAnexoId = result.storageId as Id<"_storage">;
    } catch (error) {
      console.error("Erro ao fazer upload do anexo:", error);
      respostaFeedback = "Erro ao fazer upload do anexo. Tente novamente.";
      respostaAnexo = null;
      respostaAnexoId = null;
      respostaAnexoNome = "";
    }
  }

  function removerAnexo() {
    respostaAnexo = null;
    respostaAnexoId = null;
    respostaAnexoNome = "";
    // Resetar o input de arquivo
    const fileInput = document.getElementById("respostaAnexoInput") as HTMLInputElement;
    if (fileInput) {
      fileInput.value = "";
    }
  }

  async function responderChamado() {
    if (!ticketSelecionado) {
      respostaFeedback = "Selecione um chamado primeiro";
      return;
    }

    if (!respostaTexto.trim() && !respostaAnexoId) {
      respostaFeedback = "Digite uma resposta ou anexe um documento";
      return;
    }

    try {
      enviandoResposta = true;
      respostaFeedback = null;

      const anexos = respostaAnexoId
        ? [
            {
              arquivoId: respostaAnexoId,
              nome: respostaAnexoNome || undefined,
              tipo: respostaAnexo?.type || undefined,
              tamanho: respostaAnexo?.size || undefined,
            },
          ]
        : undefined;

      await client.mutation(api.chamados.registrarAtualizacao, {
        ticketId: ticketSelecionado,
        conteudo: respostaTexto.trim() || "Anexo enviado",
        anexos,
        visibilidade: "publico",
      });

      respostaFeedback = "Resposta enviada com sucesso";
      respostaTexto = "";
      removerAnexo();

      // Recarregar chamados para atualizar a lista
      await carregarChamados({
        status: filtroStatus === "todos" ? undefined : filtroStatus,
        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
        setor: filtroSetor === "todos" ? undefined : filtroSetor,
      });

      if (ticketSelecionado) {
        selecionarTicket(ticketSelecionado);
      }
    } catch (error) {
      console.error("Erro ao responder chamado:", error);
      respostaFeedback = error instanceof Error ? error.message : "Erro ao enviar resposta";
    } finally {
      enviandoResposta = false;
    }
  }

  async function marcarComoConcluido() {
    if (!ticketSelecionado) {
      respostaFeedback = "Selecione um chamado primeiro";
      return;
    }

    try {
      marcandoConcluido = true;
      respostaFeedback = null;

      const anexos = respostaAnexoId
        ? [
            {
              arquivoId: respostaAnexoId,
              nome: respostaAnexoNome || undefined,
              tipo: respostaAnexo?.type || undefined,
              tamanho: respostaAnexo?.size || undefined,
            },
          ]
        : undefined;

      await client.mutation(api.chamados.registrarAtualizacao, {
        ticketId: ticketSelecionado,
        conteudo: respostaTexto.trim() || "Chamado marcado como concluído",
        anexos,
        visibilidade: "publico",
        proximoStatus: "resolvido",
      });

      respostaFeedback = "Chamado marcado como concluído com sucesso";
      respostaTexto = "";
      removerAnexo();

      // Recarregar chamados para atualizar a lista
      await carregarChamados({
        status: filtroStatus === "todos" ? undefined : filtroStatus,
        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
        setor: filtroSetor === "todos" ? undefined : filtroSetor,
      });

      if (ticketSelecionado) {
        selecionarTicket(ticketSelecionado);
      }
    } catch (error) {
      console.error("Erro ao marcar como concluído:", error);
      respostaFeedback = error instanceof Error ? error.message : "Erro ao marcar como concluído";
    } finally {
      marcandoConcluido = false;
    }
  }


  // Debug: ver templates carregados (remover em produção)
  // $effect(() => {
  //   console.log("templatesQuery:", templatesQuery);
  //   console.log("Templates extraídos:", templates);
  //   console.log("Templates de chamados:", templatesChamados);
  // });
</script>

<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-8">
  <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-2xl border border-primary/20 bg-primary/5 p-4">
      <p class="text-sm text-base-content/60">Total de chamados</p>
      <p class="text-3xl font-bold text-primary">{estatisticas.total ?? 0}</p>
    </div>
    <div class="rounded-2xl border border-info/20 bg-info/5 p-4">
      <p class="text-sm text-base-content/60">Abertos</p>
      <p class="text-3xl font-bold text-info">{estatisticas.abertos ?? 0}</p>
    </div>
    <div class="rounded-2xl border border-warning/20 bg-warning/5 p-4">
      <p class="text-sm text-base-content/60">Em andamento</p>
      <p class="text-3xl font-bold text-warning">{estatisticas.emAndamento ?? 0}</p>
    </div>
    <div class="rounded-2xl border border-error/20 bg-error/5 p-4">
      <p class="text-sm text-base-content/60">Vencidos/Cancelados</p>
      <p class="text-3xl font-bold text-error">{estatisticas.vencidos ?? 0}</p>
    </div>
  </section>

  <!-- Gráfico de SLA em Tempo Real -->
  <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div>
        <h3 class="text-lg font-semibold text-base-content">Performance de SLA</h3>
        <p class="text-sm text-base-content/60">Monitoramento em tempo real do cumprimento de SLA por prioridade</p>
      </div>
      {#if dadosSlaGraficoQuery !== undefined && dadosSlaGraficoQuery !== null}
        {@const dadosSla = typeof dadosSlaGraficoQuery === 'object' && 'data' in dadosSlaGraficoQuery 
          ? dadosSlaGraficoQuery.data 
          : (typeof dadosSlaGraficoQuery === 'object' && 'taxaCumprimento' in dadosSlaGraficoQuery 
            ? dadosSlaGraficoQuery 
            : null)}
        {#if dadosSla}
          <div class="flex items-center gap-4">
            <div class="text-right">
              <p class="text-xs text-base-content/60">Taxa de Cumprimento</p>
              <p class="text-2xl font-bold {
                dadosSla.taxaCumprimento >= 90 ? 'text-success' :
                dadosSla.taxaCumprimento >= 70 ? 'text-warning' :
                'text-error'
              }">
                {dadosSla.taxaCumprimento}%
              </p>
            </div>
            <div class="text-right">
              <p class="text-xs text-base-content/60">Última atualização</p>
              <p class="text-xs text-base-content/40">
                {new Date(dadosSla.atualizadoEm).toLocaleTimeString('pt-BR')}
              </p>
            </div>
          </div>
        {/if}
      {/if}
    </div>
    
    {#if dadosSlaGraficoQuery === undefined || dadosSlaGraficoQuery === null}
      <div class="flex items-center justify-center py-12">
        <span class="loading loading-spinner loading-lg"></span>
      </div>
    {:else}
      {@const dadosSla = typeof dadosSlaGraficoQuery === 'object' && 'data' in dadosSlaGraficoQuery 
        ? dadosSlaGraficoQuery.data 
        : (typeof dadosSlaGraficoQuery === 'object' && 'taxaCumprimento' in dadosSlaGraficoQuery 
          ? dadosSlaGraficoQuery 
          : null)}
      {#if dadosSla}
        <div class="mb-4 grid grid-cols-2 gap-4 md:grid-cols-4">
          <div class="rounded-xl border border-success/20 bg-success/5 p-3">
            <p class="text-xs text-base-content/60">Dentro do Prazo</p>
            <p class="text-xl font-bold text-success">{dadosSla.statusSla.dentroPrazo}</p>
          </div>
          <div class="rounded-xl border border-warning/20 bg-warning/5 p-3">
            <p class="text-xs text-base-content/60">Próximo Vencimento</p>
            <p class="text-xl font-bold text-warning">{dadosSla.statusSla.proximoVencimento}</p>
          </div>
          <div class="rounded-xl border border-error/20 bg-error/5 p-3">
            <p class="text-xs text-base-content/60">Vencidos</p>
            <p class="text-xl font-bold text-error">{dadosSla.statusSla.vencido}</p>
          </div>
          <div class="rounded-xl border border-base-300 bg-base-200/50 p-3">
            <p class="text-xs text-base-content/60">Sem Prazo</p>
            <p class="text-xl font-bold text-base-content">{dadosSla.statusSla.semPrazo}</p>
          </div>
        </div>
        <SlaChart dadosSla={dadosSla} height={400} />
      {:else}
        <div class="rounded-2xl border border-base-300 bg-base-200/50 p-8 text-center">
          <p class="text-sm text-base-content/60">Carregando dados de SLA...</p>
        </div>
      {/if}
    {/if}
  </section>

  <section class="rounded-3xl border border-base-200 bg-base-100/90 p-6 shadow-xl">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div>
        <h2 class="text-xl font-semibold text-base-content">Painel de chamados</h2>
        <p class="text-sm text-base-content/60">
          Filtros por status, responsável e setor.
        </p>
      </div>
      <div class="flex flex-wrap gap-2">
        <select class="select select-sm select-bordered" bind:value={filtroStatus}>
          <option value="todos">Todos os status</option>
          <option value="aberto">Aberto</option>
          <option value="em_andamento">Em andamento</option>
          <option value="aguardando_usuario">Aguardando usuário</option>
          <option value="resolvido">Resolvido</option>
          <option value="encerrado">Encerrado</option>
          <option value="cancelado">Cancelado</option>
        </select>
        <select class="select select-sm select-bordered" bind:value={filtroResponsavel}>
          <option value="todos">Todos os responsáveis</option>
          {#each usuariosTI as usuario (usuario._id)}
            <option value={usuario._id}>{usuario.nome}</option>
          {/each}
        </select>
        <select class="select select-sm select-bordered" bind:value={filtroSetor}>
          <option value="todos">Todos os setores</option>
          <option value="TI">TI</option>
          <option value="Infraestrutura">Infraestrutura</option>
          <option value="Sistemas">Sistemas</option>
        </select>
      </div>
    </div>

    <div class="mt-6 overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th>Ticket</th>
            <th>Tipo</th>
            <th>Status</th>
            <th>Responsável</th>
            <th>Prioridade</th>
            <th>Prazo</th>
          </tr>
        </thead>
        <tbody>
          {#if carregandoChamados}
            <tr>
              <td colspan="6">
                <div class="flex items-center justify-center py-8">
                  <span class="loading loading-spinner loading-md"></span>
                </div>
              </td>
            </tr>
          {:else if tickets.length === 0}
            <tr>
              <td colspan="6" class="text-center text-sm text-base-content/60">
                Nenhum chamado encontrado.
              </td>
            </tr>
          {:else}
            {#each tickets as ticket (ticket._id)}
              <tr
                class={ticketSelecionado === ticket._id ? "bg-primary/5" : ""}
                onclick={() => selecionarTicket(ticket._id)}
              >
                <td>
                  <div class="font-semibold">{ticket.numero}</div>
                  <div class="text-xs text-base-content/60">{ticket.solicitanteNome}</div>
                </td>
                <td class="text-sm capitalize">{ticket.tipo}</td>
                <td>
                  <span class={getStatusBadge(ticket.status)}>{getStatusLabel(ticket.status)}</span>
                </td>
                <td class="text-sm">{(ticket as Ticket & { responsavelNome?: string }).responsavelNome ?? ticket.setorResponsavel ?? "—"}</td>
                <td class="text-sm capitalize">{ticket.prioridade}</td>
                <td class="text-xs text-base-content/70">
                  {ticket.prazoConclusao ? prazoRestante(ticket.prazoConclusao) : "--"}
                </td>
              </tr>
            {/each}
          {/if}
        </tbody>
      </table>
    </div>
  </section>

  <!-- Seção: Gerenciamento do Chamado Selecionado -->
  {#if !detalheSelecionado}
    <section class="rounded-3xl border-2 border-dashed border-base-300 bg-base-100/50 p-12 text-center shadow-lg">
      <div class="mx-auto max-w-md">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="mx-auto mb-4 h-16 w-16 text-base-content/30"
          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="mb-2 text-xl font-semibold text-base-content">Nenhum chamado selecionado</h3>
        <p class="text-sm text-base-content/60">
          Selecione um chamado na tabela acima para visualizar detalhes e realizar ações.
        </p>
      </div>
    </section>
  {:else}
    <!-- Container Principal: Gerenciamento do Chamado Selecionado -->
    <section class="rounded-3xl border-2 border-primary/30 bg-base-100/95 p-6 shadow-2xl">
      <!-- Cabeçalho do Chamado Selecionado -->
      <div class="mb-6 rounded-2xl border-2 border-primary/20 bg-gradient-to-r from-primary/10 via-primary/5 to-base-100/80 p-6 shadow-lg">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div class="flex-1">
            <div class="mb-2 flex items-center gap-3">
              <div class="rounded-lg bg-primary/20 px-3 py-1">
                <span class="text-sm font-bold text-primary">{detalheSelecionado.numero}</span>
              </div>
              <span class={getStatusBadge(detalheSelecionado.status)}>
                {getStatusLabel(detalheSelecionado.status)}
              </span>
            </div>
            <h2 class="mb-2 text-2xl font-bold text-base-content">{detalheSelecionado.titulo}</h2>
            <div class="flex flex-wrap items-center gap-4 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                  />
                </svg>
                <span class="font-semibold">Solicitante:</span>
                <span>{detalheSelecionado.solicitanteNome}</span>
              </div>
              {#if detalheSelecionado.prazoConclusao}
                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                  <span class="font-semibold">Prazo:</span>
                  <span>{prazoRestante(detalheSelecionado.prazoConclusao) ?? "--"}</span>
                </div>
              {/if}
            </div>
          </div>
        </div>
      </div>

      <!-- Grid de Ações do Chamado Selecionado -->
      <div class="grid gap-6 lg:grid-cols-2">
      <!-- Detalhes do Chamado -->
      <div class="rounded-3xl border-2 border-primary/20 bg-base-100/90 p-6 shadow-lg">
        <div class="mb-4 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <h3 class="text-lg font-semibold text-base-content">Detalhes do chamado</h3>
        </div>
        <div class="space-y-4">
          <div>
            <p class="mb-2 text-sm font-medium text-base-content/70">Descrição</p>
            <p class="rounded-lg bg-base-200/50 p-3 text-sm text-base-content/80">
              {detalheSelecionado.descricao}
            </p>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div class="rounded-lg bg-base-200/30 p-3">
              <p class="text-xs font-medium text-base-content/50">Prazo de resposta</p>
              <p class="mt-1 text-sm font-semibold text-base-content">
                {prazoRestante(detalheSelecionado.prazoResposta) ?? "--"}
              </p>
            </div>
            <div class="rounded-lg bg-base-200/30 p-3">
              <p class="text-xs font-medium text-base-content/50">Prazo de conclusão</p>
              <p class="mt-1 text-sm font-semibold text-base-content">
                {prazoRestante(detalheSelecionado.prazoConclusao) ?? "--"}
              </p>
            </div>
          </div>
          <div class="mt-4">
            <p class="mb-3 text-sm font-medium text-base-content/70">Histórico e Timeline</p>
            <TicketTimeline timeline={detalheSelecionado.timeline ?? []} />
          </div>
        </div>
      </div>

      <!-- Responder Chamado -->
      <div class="rounded-3xl border-2 border-primary/20 bg-base-100/90 p-6 shadow-lg">
        <div class="mb-4 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
            />
          </svg>
          <h3 class="text-lg font-semibold text-base-content">Responder chamado</h3>
        </div>
        <div class="space-y-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Resposta *</span>
            </label>
            <textarea
              class="textarea textarea-bordered w-full"
              rows="5"
              placeholder="Digite sua resposta ao chamado..."
              bind:value={respostaTexto}
              disabled={enviandoResposta || marcandoConcluido}
            ></textarea>
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Anexar documento (opcional)</span>
            </label>
            <input
              id="respostaAnexoInput"
              type="file"
              class="file-input file-input-bordered w-full"
              accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
              onchange={handleAnexoChange}
              disabled={enviandoResposta || marcandoConcluido}
            />
            {#if respostaAnexoNome}
              <div class="mt-2 flex items-center gap-2">
                <span class="text-sm text-base-content/70">{respostaAnexoNome}</span>
                <button
                  type="button"
                  class="btn btn-xs btn-ghost"
                  onclick={removerAnexo}
                  disabled={enviandoResposta || marcandoConcluido}
                >
                  Remover
                </button>
              </div>
            {/if}
          </div>

          {#if respostaFeedback}
            <div class={`alert ${respostaFeedback.includes('sucesso') ? 'alert-success' : 'alert-error'} text-sm`}>
              {respostaFeedback}
            </div>
          {/if}

          <div class="flex gap-2">
            <button
              class="btn btn-primary flex-1"
              type="button"
              onclick={responderChamado}
              disabled={enviandoResposta || marcandoConcluido || (!respostaTexto.trim() && !respostaAnexoId)}
            >
              {#if enviandoResposta}
                <span class="loading loading-spinner loading-sm"></span>
                Enviando...
              {:else}
                Enviar resposta
              {/if}
            </button>
            <button
              class="btn btn-success"
              type="button"
              onclick={marcarComoConcluido}
              disabled={enviandoResposta || marcandoConcluido || detalheSelecionado?.status === "resolvido" || detalheSelecionado?.status === "encerrado"}
            >
              {#if marcandoConcluido}
                <span class="loading loading-spinner loading-sm"></span>
              {:else}
                Marcar como concluído
              {/if}
            </button>
          </div>
        </div>
      </div>

      <!-- Atribuir Responsável -->
      <div class="rounded-3xl border-2 border-primary/20 bg-base-100/90 p-6 shadow-lg">
        <div class="mb-4 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="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>
          <h3 class="text-lg font-semibold text-base-content">Atribuir responsável</h3>
        </div>
        <div class="space-y-3">
          <select class="select select-bordered w-full" bind:value={assignResponsavel}>
            <option value="">Selecione o responsável</option>
            {#if usuariosTI.length === 0}
              <option disabled>Carregando usuários...</option>
            {:else}
              {#each usuariosTI as usuario (usuario._id)}
                <option value={usuario._id}>{usuario.nome}</option>
              {/each}
            {/if}
          </select>
          <textarea
            class="textarea textarea-bordered w-full"
            rows="3"
            placeholder="Motivo/observação (opcional)"
            bind:value={assignMotivo}
          ></textarea>
          {#if assignFeedback}
            <div class={`alert ${assignFeedback.includes('sucesso') ? 'alert-success' : 'alert-error'} text-sm`}>
              {assignFeedback}
            </div>
          {/if}
          <button class="btn btn-primary w-full" type="button" onclick={atribuirResponsavel}>
            Atribuir responsável
          </button>
        </div>
      </div>

      <!-- Prorrogar Prazo -->
      <div class="rounded-3xl border-2 border-primary/20 bg-base-100/90 p-6 shadow-lg">
        <div class="mb-4 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-base-content">Prorrogar prazo</h3>
            <p class="text-xs text-base-content/60">Recurso exclusivo para a equipe de TI</p>
          </div>
        </div>
        <div class="space-y-3">
          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Prazo a prorrogar *</span>
            </label>
            <select class="select select-bordered w-full" bind:value={prorrogacaoForm.prazo}>
              <option value="resposta">Prazo de resposta</option>
              <option value="conclusao">Prazo de conclusão</option>
            </select>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Horas adicionais</span>
            </label>
            <input
              type="number"
              min="1"
              class="input input-bordered w-full"
              bind:value={prorrogacaoForm.horasAdicionais}
              placeholder="Ex: 24"
            />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text font-semibold">Motivo *</span>
            </label>
            <textarea
              class="textarea textarea-bordered w-full"
              rows="3"
              placeholder="Descreva o motivo da prorrogação..."
              bind:value={prorrogacaoForm.motivo}
            ></textarea>
          </div>
          {#if prorrogacaoFeedback}
            <div class={`alert ${prorrogacaoFeedback.includes('sucesso') ? 'alert-success' : 'alert-error'} text-sm`}>
              {prorrogacaoFeedback}
            </div>
          {/if}
          <button
            class="btn btn-warning w-full"
            type="button"
            onclick={prorrogarChamado}
            disabled={!prorrogacaoForm.motivo.trim() || !ticketSelecionado}
          >
            Prorrogar prazo
          </button>
        </div>
      </div>
    </div>
    </section>
  {/if}

  <!-- Seção: SLAs Existentes - Visualização Detalhada -->
  <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
      <div>
        <h3 class="text-lg font-semibold text-base-content">SLAs Configurados</h3>
        <p class="text-sm text-base-content/60">Visualize todos os SLAs ativos com seus tempos e configurações</p>
      </div>
    </div>

    {#if slaConfigsQuery === undefined || slaConfigsQuery === null || ('data' in slaConfigsQuery && slaConfigsQuery.data === undefined)}
      <div class="flex justify-center py-8">
        <span class="loading loading-spinner loading-md"></span>
      </div>
    {:else}
      {@const slaConfigs = ('data' in slaConfigsQuery && slaConfigsQuery.data !== undefined)
        ? (Array.isArray(slaConfigsQuery.data) ? slaConfigsQuery.data : [])
        : (Array.isArray(slaConfigsQuery) ? slaConfigsQuery : [])}
      {@const slaConfigsAtivos = slaConfigs.filter((s: SlaConfig) => s.ativo)}
      {@const slaConfigsPorPrioridadeCount = {
        baixa: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'baixa').length,
        media: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'media').length,
        alta: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'alta').length,
        critica: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'critica').length,
      }}
      
      {#if slaConfigsAtivos.length === 0}
        <div class="rounded-2xl border border-base-300 bg-base-200/50 p-8 text-center">
          <p class="text-sm font-semibold text-base-content/70">Nenhum SLA configurado</p>
          <p class="mt-2 text-xs text-base-content/50">Configure SLAs para cada prioridade na seção abaixo</p>
        </div>
      {:else}
        <!-- Resumo de SLAs -->
        <div class="mb-4 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
            <div class="text-2xl font-bold text-base-content">{slaConfigsAtivos.length}</div>
            <div class="text-xs text-base-content/60">Total de SLAs</div>
          </div>
          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
            <div class="text-2xl font-bold text-success">{slaConfigsPorPrioridadeCount.baixa}</div>
            <div class="text-xs text-base-content/60">Prioridade Baixa</div>
          </div>
          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
            <div class="text-2xl font-bold text-info">{slaConfigsPorPrioridadeCount.media}</div>
            <div class="text-xs text-base-content/60">Prioridade Média</div>
          </div>
          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
            <div class="text-2xl font-bold text-warning">{slaConfigsPorPrioridadeCount.alta}</div>
            <div class="text-xs text-base-content/60">Prioridade Alta</div>
          </div>
          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
            <div class="text-2xl font-bold text-error">{slaConfigsPorPrioridadeCount.critica}</div>
            <div class="text-xs text-base-content/60">Prioridade Crítica</div>
          </div>
        </div>

        <!-- Tabela de SLAs -->
        <div class="overflow-x-auto rounded-xl border border-base-300">
          <table class="table w-full">
            <thead class="bg-base-200/50">
              <tr>
                <th class="font-semibold text-base-content">Nome</th>
                <th class="font-semibold text-base-content">Prioridade</th>
                <th class="font-semibold text-base-content">Tempo de Resposta</th>
                <th class="font-semibold text-base-content">Tempo de Conclusão</th>
                <th class="font-semibold text-base-content">Auto-encerramento</th>
                <th class="font-semibold text-base-content">Alerta Antecedência</th>
                <th class="font-semibold text-base-content">Status</th>
                <th class="font-semibold text-base-content text-center">Ações</th>
              </tr>
            </thead>
            <tbody>
              {#each slaConfigsAtivos as sla (sla._id)}
                <tr class="hover:bg-base-200/30 transition-colors">
                  <td>
                    <div class="font-medium text-base-content">{sla.nome}</div>
                    {#if sla.descricao}
                      <div class="text-xs text-base-content/60 mt-1 line-clamp-1">{sla.descricao}</div>
                    {/if}
                  </td>
                  <td>
                    <span class="badge badge-outline capitalize {
                      sla.prioridade === 'critica' ? 'badge-error' :
                      sla.prioridade === 'alta' ? 'badge-warning' :
                      sla.prioridade === 'media' ? 'badge-info' :
                      'badge-success'
                    }">
                      {sla.prioridade}
                    </span>
                  </td>
                  <td>
                    <div class="flex flex-col">
                      <span class="font-semibold text-base-content">{sla.tempoRespostaHoras}h</span>
                      {#if sla.tempoRespostaHoras >= 24}
                        <span class="text-xs text-base-content/50">
                          ({Math.floor(sla.tempoRespostaHoras / 24)}d {sla.tempoRespostaHoras % 24}h)
                        </span>
                      {/if}
                    </div>
                  </td>
                  <td>
                    <div class="flex flex-col">
                      <span class="font-semibold text-base-content">{sla.tempoConclusaoHoras}h</span>
                      {#if sla.tempoConclusaoHoras >= 24}
                        <span class="text-xs text-base-content/50">
                          ({Math.floor(sla.tempoConclusaoHoras / 24)}d {sla.tempoConclusaoHoras % 24}h)
                        </span>
                      {/if}
                    </div>
                  </td>
                  <td>
                    {#if sla.tempoEncerramentoHoras}
                      <div class="flex flex-col">
                        <span class="font-semibold text-base-content">{sla.tempoEncerramentoHoras}h</span>
                        {#if sla.tempoEncerramentoHoras >= 24}
                          <span class="text-xs text-base-content/50">
                            ({Math.floor(sla.tempoEncerramentoHoras / 24)}d {sla.tempoEncerramentoHoras % 24}h)
                          </span>
                        {/if}
                      </div>
                    {:else}
                      <span class="text-base-content/40 text-sm italic">Não configurado</span>
                    {/if}
                  </td>
                  <td>
                    <div class="flex items-center gap-1">
                      <span class="font-semibold text-base-content">{sla.alertaAntecedenciaHoras}h</span>
                      <span class="text-xs text-base-content/50">antes</span>
                    </div>
                  </td>
                  <td>
                    <span class="badge badge-success badge-sm gap-1">
                      <span class="h-2 w-2 rounded-full bg-success"></span>
                      Ativo
                    </span>
                  </td>
                  <td>
                    <div class="flex justify-center gap-1">
                      <button
                        class="btn btn-xs btn-ghost hover:btn-primary"
                        type="button"
                        onclick={() => selecionarSla(sla)}
                        title="Editar SLA"
                      >
                        ✏️
                      </button>
                      <button
                        class="btn btn-xs btn-ghost hover:btn-error"
                        type="button"
                        onclick={() => (slaParaExcluir = sla._id)}
                        title="Excluir SLA"
                      >
                        🗑️
                      </button>
                    </div>
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      {/if}
    {/if}
  </section>

  <!-- Seção: Configuração de SLA por Prioridade -->
  <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
    <div>
      <h3 class="text-lg font-semibold text-base-content">Configuração de SLA por Prioridade</h3>
      <p class="text-sm text-base-content/60">Configure SLAs separados para cada nível de prioridade</p>
    </div>

    <!-- Cards rápidos de prioridade -->
    <div class="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {#each ["baixa", "media", "alta", "critica"] as prioridade}
        {@const slaAtual = slaConfigsPorPrioridade[prioridade]}
        <div class="rounded-2xl border border-base-200 bg-base-100/50 p-4 transition-all hover:shadow-md">
          <div class="mb-2 flex items-center justify-between">
            <h4 class="font-semibold capitalize text-base-content">{prioridade}</h4>
            {#if slaAtual}
              <span class="badge badge-success badge-sm">Configurado</span>
            {:else}
              <span class="badge badge-warning badge-sm">Não configurado</span>
            {/if}
          </div>
          {#if slaAtual}
            <div class="space-y-2 text-xs">
              <div class="flex justify-between">
                <span class="text-base-content/60">Resposta:</span>
                <span class="font-semibold text-base-content">{slaAtual.tempoRespostaHoras}h</span>
              </div>
              <div class="flex justify-between">
                <span class="text-base-content/60">Conclusão:</span>
                <span class="font-semibold text-base-content">{slaAtual.tempoConclusaoHoras}h</span>
              </div>
              {#if slaAtual.tempoEncerramentoHoras}
                <div class="flex justify-between">
                  <span class="text-base-content/60">Auto-encerramento:</span>
                  <span class="font-semibold text-base-content">{slaAtual.tempoEncerramentoHoras}h</span>
                </div>
              {/if}
              <div class="flex justify-between">
                <span class="text-base-content/60">Alerta:</span>
                <span class="font-semibold text-base-content">{slaAtual.alertaAntecedenciaHoras}h antes</span>
              </div>
            </div>
            <div class="mt-3 flex gap-1">
              <button
                class="btn btn-xs btn-ghost flex-1"
                type="button"
                onclick={() => selecionarSla(slaAtual)}
              >
                Editar
              </button>
              <button
                class="btn btn-xs btn-error btn-ghost"
                type="button"
                onclick={() => (slaParaExcluir = slaAtual._id)}
              >
                Excluir
              </button>
            </div>
          {:else}
            <button
              class="btn btn-xs btn-primary btn-outline mt-2 w-full"
              type="button"
              onclick={() => {
                novoSla(prioridade as "baixa" | "media" | "alta" | "critica");
              }}
            >
              Configurar
            </button>
          {/if}
        </div>
      {/each}
    </div>

    <!-- Formulário de SLA -->
    <div class="mt-6 rounded-2xl border border-base-300 bg-base-100/90 p-4">
      <h4 class="mb-4 font-semibold text-base-content">
        {slaForm.slaId ? "Editar" : "Novo"} SLA - Prioridade {slaForm.prioridade.charAt(0).toUpperCase() + slaForm.prioridade.slice(1)}
      </h4>
      <div class="grid gap-4 md:grid-cols-2">
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Nome *</span></label>
          <input class="input input-bordered w-full" bind:value={slaForm.nome} placeholder="Ex: SLA Média" />
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Prioridade *</span></label>
          <select class="select select-bordered w-full" bind:value={slaForm.prioridade}>
            <option value="baixa">Baixa</option>
            <option value="media">Média</option>
            <option value="alta">Alta</option>
            <option value="critica">Crítica</option>
          </select>
        </div>
        <div class="form-control md:col-span-2">
          <label class="label"><span class="label-text font-semibold">Descrição</span></label>
          <input class="input input-bordered w-full" bind:value={slaForm.descricao} placeholder="Descrição opcional" />
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Tempo de resposta (h) *</span></label>
          <input type="number" min="1" class="input input-bordered w-full" bind:value={slaForm.tempoRespostaHoras} />
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Tempo de conclusão (h) *</span></label>
          <input type="number" min="1" class="input input-bordered w-full" bind:value={slaForm.tempoConclusaoHoras} />
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Auto-encerramento (h)</span></label>
          <input type="number" min="1" class="input input-bordered w-full" bind:value={slaForm.tempoEncerramentoHoras} placeholder="Opcional" />
        </div>
        <div class="form-control">
          <label class="label"><span class="label-text font-semibold">Alerta antes do vencimento (h) *</span></label>
          <input type="number" min="1" class="input input-bordered w-full" bind:value={slaForm.alertaAntecedenciaHoras} />
        </div>
        <div class="form-control md:col-span-2">
          <label class="label cursor-pointer gap-3">
            <span class="label-text font-semibold">Ativo</span>
            <input type="checkbox" class="toggle toggle-primary" bind:checked={slaForm.ativo} />
          </label>
        </div>
      </div>
      {#if slaFeedback}
        <div class="mt-3">
          <p class="text-sm {slaFeedback.includes('sucesso') ? 'text-success' : 'text-error'}">{slaFeedback}</p>
        </div>
      {/if}
      <div class="mt-4 flex gap-2">
        <button class="btn btn-primary" type="button" onclick={salvarSlaConfig}>
          {slaForm.slaId ? "Atualizar" : "Criar"} SLA
        </button>
        {#if slaForm.slaId}
          <button class="btn btn-ghost" type="button" onclick={novoSla}>
            Cancelar
          </button>
        {/if}
      </div>
    </div>
  </section>

  <!-- Modal de confirmação de exclusão -->
  {#if slaParaExcluir}
    <div class="modal modal-open">
      <div class="modal-box">
        <h3 class="text-lg font-bold">Confirmar exclusão</h3>
        <p class="py-4">Tem certeza que deseja excluir esta configuração de SLA? Esta ação não pode ser desfeita.</p>
        <div class="modal-action">
          <button class="btn btn-ghost" type="button" onclick={() => (slaParaExcluir = null)}>
            Cancelar
          </button>
          <button class="btn btn-error" type="button" onclick={excluirSlaConfig}>
            Excluir
          </button>
        </div>
      </div>
    </div>
  {/if}

</main>

