<script lang="ts">
  import { useQuery, useConvexClient } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";
  import CalendarioFerias from "./CalendarioFerias.svelte";
  import { toast } from "svelte-sonner";
  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";

  interface Props {
    funcionarioId: Id<"funcionarios">;
    onSucesso?: () => void;
    onCancelar?: () => void;
  }

  let { funcionarioId, onSucesso, onCancelar }: Props = $props();

  // Cliente Convex
  const client = useConvexClient();

  // Estado do wizard
  let passoAtual = $state(1);
  const totalPassos = 3;

  // Dados da solicitação
  let anoSelecionado = $state(new Date().getFullYear());
  let periodosFerias: Array<{ dataInicio: string; dataFim: string; dias: number }> = $state([]);
  let observacao = $state("");
  let processando = $state(false);

  // Queries
  const saldoQuery = $derived(
    useQuery(api.saldoFerias.obterSaldo, {
      funcionarioId,
      anoReferencia: anoSelecionado,
    })
  );

  const validacaoQuery = $derived(
    periodosFerias.length > 0
      ? useQuery(api.saldoFerias.validarSolicitacao, {
          funcionarioId,
          anoReferencia: anoSelecionado,
          periodos: periodosFerias.map((p) => ({
            dataInicio: p.dataInicio,
            dataFim: p.dataFim,
          })),
        })
      : { data: null }
  );

  // Derivados
  const saldo = $derived(saldoQuery.data);
  const validacao = $derived(validacaoQuery.data);
  const totalDiasSelecionados = $derived(
    periodosFerias.reduce((acc, p) => acc + p.dias, 0)
  );

  // Anos disponíveis (últimos 3 anos + próximo ano)
  const anosDisponiveis = $derived.by(() => {
    const anoAtual = new Date().getFullYear();
    return [anoAtual - 1, anoAtual, anoAtual + 1];
  });

  // Configurações do calendário (baseado no saldo/regime)
  const maxPeriodos = $derived(saldo?.regimeTrabalho?.includes("Servidor") ? 2 : 3);
  const minDiasPorPeriodo = $derived(
    saldo?.regimeTrabalho?.includes("Servidor") ? 10 : 5
  );

  // Funções
  function proximoPasso() {
    if (passoAtual === 1 && !saldo) {
      toast.error("Selecione um ano com saldo disponível");
      return;
    }

    if (passoAtual === 2 && periodosFerias.length === 0) {
      toast.error("Selecione pelo menos 1 período de férias");
      return;
    }

    if (passoAtual === 2 && validacao && !validacao.valido) {
      toast.error("Corrija os erros antes de continuar");
      return;
    }

    if (passoAtual < totalPassos) {
      passoAtual++;
    }
  }

  function passoAnterior() {
    if (passoAtual > 1) {
      passoAtual--;
    }
  }

  async function enviarSolicitacao() {
    if (!validacao || !validacao.valido) {
      toast.error("Valide os períodos antes de enviar");
      return;
    }

    processando = true;

    try {
      await client.mutation(api.ferias.criarSolicitacao, {
        funcionarioId,
        anoReferencia: anoSelecionado,
        periodos: periodosFerias.map((p) => ({
          dataInicio: p.dataInicio,
          dataFim: p.dataFim,
          diasCorridos: p.dias,
        })),
        observacao: observacao || undefined,
      });

      toast.success("Solicitação de férias enviada com sucesso! 🎉");
      if (onSucesso) onSucesso();
    } catch (error: any) {
      toast.error(error.message || "Erro ao enviar solicitação");
    } finally {
      processando = false;
    }
  }

  function handlePeriodoAdicionado(periodo: {
    dataInicio: string;
    dataFim: string;
    dias: number;
  }) {
    periodosFerias = [...periodosFerias, periodo];
    toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
  }

  function handlePeriodoRemovido(index: number) {
    const removido = periodosFerias[index];
    periodosFerias = periodosFerias.filter((_, i) => i !== index);
    toast.info(`Período de ${removido.dias} dias removido`);
  }
</script>

<div class="wizard-ferias-container">
  <!-- Progress Bar -->
  <div class="mb-8">
    <div class="flex justify-between items-center">
      {#each Array(totalPassos) as _, i}
        <div class="flex items-center flex-1">
          <!-- Círculo do passo -->
          <div
            class="relative flex items-center justify-center w-12 h-12 rounded-full font-bold transition-all duration-300"
            class:bg-primary={passoAtual > i + 1}
            class:text-white={passoAtual > i + 1}
            class:border-4={passoAtual === i + 1}
            class:border-primary={passoAtual === i + 1}
            class:bg-base-200={passoAtual < i + 1}
            class:text-base-content={passoAtual < i + 1}
            style:box-shadow={passoAtual === i + 1 ? "0 0 20px rgba(102, 126, 234, 0.5)" : "none"}
          >
            {#if passoAtual > i + 1}
              <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="3"
                  d="M5 13l4 4L19 7"
                />
              </svg>
            {:else}
              {i + 1}
            {/if}
          </div>

          <!-- Linha conectora -->
          {#if i < totalPassos - 1}
            <div
              class="flex-1 h-1 mx-2 transition-all duration-300"
              class:bg-primary={passoAtual > i + 1}
              class:bg-base-300={passoAtual <= i + 1}
            ></div>
          {/if}
        </div>
      {/each}
    </div>

    <!-- Labels dos passos -->
    <div class="flex justify-between mt-4 px-1">
      <div class="text-center flex-1">
        <p class="text-sm font-semibold" class:text-primary={passoAtual === 1}>Ano & Saldo</p>
      </div>
      <div class="text-center flex-1">
        <p class="text-sm font-semibold" class:text-primary={passoAtual === 2}>Períodos</p>
      </div>
      <div class="text-center flex-1">
        <p class="text-sm font-semibold" class:text-primary={passoAtual === 3}>Confirmação</p>
      </div>
    </div>
  </div>

  <!-- Conteúdo dos Passos -->
  <div class="wizard-content">
    <!-- PASSO 1: Ano & Saldo -->
    {#if passoAtual === 1}
      <div class="passo-content animate-fadeIn">
        <h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          Escolha o Ano de Referência
        </h2>

        <!-- Seletor de Ano -->
        <div class="grid grid-cols-3 gap-4 mb-8">
          {#each anosDisponiveis as ano}
            <button
              type="button"
              class="btn btn-lg transition-all duration-300 hover:scale-105"
              class:btn-primary={anoSelecionado === ano}
              class:btn-outline={anoSelecionado !== ano}
              onclick={() => (anoSelecionado = ano)}
            >
              {ano}
            </button>
          {/each}
        </div>

        <!-- Card de Saldo -->
        {#if saldoQuery.isLoading}
          <div class="skeleton h-64 w-full rounded-2xl"></div>
        {:else if saldo}
          <div
            class="card bg-gradient-to-br from-primary/10 to-secondary/10 shadow-2xl border-2 border-primary/20"
          >
            <div class="card-body">
              <h3 class="card-title text-2xl mb-4">
                📊 Saldo de Férias {anoSelecionado}
              </h3>

              <div class="stats stats-vertical lg:stats-horizontal shadow-lg w-full">
                <div class="stat">
                  <div class="stat-figure text-primary">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      class="inline-block w-8 h-8 stroke-current"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M13 10V3L4 14h7v7l9-11h-7z"
                      ></path>
                    </svg>
                  </div>
                  <div class="stat-title">Total Direito</div>
                  <div class="stat-value text-primary">{saldo.diasDireito}</div>
                  <div class="stat-desc">dias no ano</div>
                </div>

                <div class="stat">
                  <div class="stat-figure text-success">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      class="inline-block w-8 h-8 stroke-current"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 13l4 4L19 7"
                      ></path>
                    </svg>
                  </div>
                  <div class="stat-title">Disponível</div>
                  <div class="stat-value text-success">{saldo.diasDisponiveis}</div>
                  <div class="stat-desc">para usar</div>
                </div>

                <div class="stat">
                  <div class="stat-figure text-warning">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      class="inline-block w-8 h-8 stroke-current"
                    >
                      <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"
                      ></path>
                    </svg>
                  </div>
                  <div class="stat-title">Usado</div>
                  <div class="stat-value text-warning">{saldo.diasUsados}</div>
                  <div class="stat-desc">até agora</div>
                </div>
              </div>

              <!-- Informações do Regime -->
              <div class="alert alert-info mt-4">
                <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>
                <div>
                  <h4 class="font-bold">{saldo.regimeTrabalho}</h4>
                  <p class="text-sm">
                    Período aquisitivo: {new Date(saldo.dataInicio).toLocaleDateString("pt-BR")}
                    a {new Date(saldo.dataFim).toLocaleDateString("pt-BR")}
                  </p>
                </div>
              </div>

              {#if saldo.diasDisponiveis === 0}
                <div class="alert alert-warning mt-4">
                  <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>
                  <span>Você não tem saldo disponível para este ano.</span>
                </div>
              {/if}
            </div>
          </div>
        {:else}
          <div class="alert alert-warning">
            <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>
            <span>Nenhum saldo encontrado para este ano.</span>
          </div>
        {/if}
      </div>
    {/if}

    <!-- PASSO 2: Seleção de Períodos -->
    {#if passoAtual === 2}
      <div class="passo-content animate-fadeIn">
        <h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          Selecione os Períodos de Férias
        </h2>

        <!-- Resumo rápido -->
        <div class="alert bg-base-200 mb-6">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            class="stroke-info shrink-0 w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <div>
            <p>
              <strong>Saldo disponível:</strong>
              {saldo?.diasDisponiveis || 0} dias | <strong>Selecionados:</strong>
              {totalDiasSelecionados} dias | <strong>Restante:</strong>
              {(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
            </p>
          </div>
        </div>

        <!-- Calendário -->
        <CalendarioFerias
          periodosExistentes={periodosFerias}
          onPeriodoAdicionado={handlePeriodoAdicionado}
          onPeriodoRemovido={handlePeriodoRemovido}
          maxPeriodos={maxPeriodos}
          minDiasPorPeriodo={minDiasPorPeriodo}
          modoVisualizacao="month">
        </CalendarioFerias>

        <!-- Validações -->
        {#if validacao && periodosFerias.length > 0}
          <div class="mt-6">
            {#if validacao.valido}
              <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>✅ Períodos válidos! Total: {validacao.totalDias} dias</span>
              </div>
            {:else}
              <div class="alert alert-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>
                <div>
                  <p class="font-bold">Erros encontrados:</p>
                  <ul class="list-disc list-inside">
                    {#each validacao.erros as erro}
                      <li>{erro}</li>
                    {/each}
                  </ul>
                </div>
              </div>
            {/if}

            {#if validacao.avisos.length > 0}
              <div class="alert alert-warning mt-4">
                <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>
                  <p class="font-bold">Avisos:</p>
                  <ul class="list-disc list-inside">
                    {#each validacao.avisos as aviso}
                      <li>{aviso}</li>
                    {/each}
                  </ul>
                </div>
              </div>
            {/if}
          </div>
        {/if}
      </div>
    {/if}

    <!-- PASSO 3: Confirmação -->
    {#if passoAtual === 3}
      <div class="passo-content animate-fadeIn">
        <h2 class="text-3xl font-bold mb-6 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          Confirme sua Solicitação
        </h2>

        <!-- Resumo Final -->
        <div class="card bg-base-100 shadow-2xl">
          <div class="card-body">
            <h3 class="card-title text-xl mb-4">📝 Resumo da Solicitação</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <div class="stat bg-base-200 rounded-lg">
                <div class="stat-title">Ano de Referência</div>
                <div class="stat-value text-primary">{anoSelecionado}</div>
              </div>

              <div class="stat bg-base-200 rounded-lg">
                <div class="stat-title">Total de Dias</div>
                <div class="stat-value text-success">{totalDiasSelecionados}</div>
              </div>
            </div>

            <h4 class="font-bold text-lg mb-2">Períodos Selecionados:</h4>
            <div class="space-y-3">
              {#each periodosFerias as periodo, index}
                <div class="flex items-center gap-4 p-4 bg-base-200 rounded-lg">
                  <div
                    class="badge badge-lg badge-primary font-bold text-white w-12 h-12 flex items-center justify-center"
                  >
                    {index + 1}
                  </div>
                  <div class="flex-1">
                    <p class="font-semibold">
                      {new Date(periodo.dataInicio).toLocaleDateString("pt-BR", {
                        day: "2-digit",
                        month: "long",
                        year: "numeric",
                      })}
                      até
                      {new Date(periodo.dataFim).toLocaleDateString("pt-BR", {
                        day: "2-digit",
                        month: "long",
                        year: "numeric",
                      })}
                    </p>
                    <p class="text-sm text-base-content/70">{periodo.dias} dias corridos</p>
                  </div>
                </div>
              {/each}
            </div>

            <!-- Campo de Observação -->
            <div class="form-control mt-6">
              <label for="observacao" class="label">
                <span class="label-text font-semibold">Observações (opcional)</span>
              </label>
              <textarea
                id="observacao"
                class="textarea textarea-bordered h-24"
                placeholder="Adicione alguma observação ou justificativa..."
                bind:value={observacao}
              ></textarea>
            </div>
          </div>
        </div>
      </div>
    {/if}
  </div>

  <!-- Botões de Navegação -->
  <div class="flex justify-between mt-8">
    <div>
      {#if passoAtual > 1}
        <button type="button" class="btn btn-outline btn-lg gap-2" onclick={passoAnterior}>
          <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="M15 19l-7-7 7-7"
            />
          </svg>
          Voltar
        </button>
      {:else if onCancelar}
        <button type="button" class="btn btn-ghost btn-lg" onclick={onCancelar}>
          Cancelar
        </button>
      {/if}
    </div>

    <div>
      {#if passoAtual < totalPassos}
        <button
          type="button"
          class="btn btn-primary btn-lg gap-2"
          onclick={proximoPasso}
          disabled={passoAtual === 1 && (!saldo || saldo.diasDisponiveis === 0)}
        >
          Próximo
          <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="M9 5l7 7-7 7"
            />
          </svg>
        </button>
      {:else}
        <button
          type="button"
          class="btn btn-success btn-lg gap-2"
          onclick={enviarSolicitacao}
          disabled={processando}
        >
          {#if processando}
            <span class="loading loading-spinner"></span>
            Enviando...
          {: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>
            Enviar Solicitação
          {/if}
        </button>
      {/if}
    </div>
  </div>
</div>

<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
  }

  .wizard-ferias-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }

  .passo-content {
    min-height: 500px;
  }

  /* Gradiente no texto */
  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .wizard-ferias-container {
      padding: 1rem;
    }

    .passo-content {
      min-height: 400px;
    }
  }
</style>

