<script lang="ts">
  import { onMount } from "svelte";
  import { Calendar } from "@fullcalendar/core";
  import dayGridPlugin from "@fullcalendar/daygrid";
  import interactionPlugin from "@fullcalendar/interaction";
  import multiMonthPlugin from "@fullcalendar/multimonth";
  import ptBrLocale from "@fullcalendar/core/locales/pt-br";

  interface Props {
    periodosExistentes?: Array<{ dataInicio: string; dataFim: string; dias: number }>;
    onPeriodoAdicionado?: (periodo: { dataInicio: string; dataFim: string; dias: number }) => void;
    onPeriodoRemovido?: (index: number) => void;
    maxPeriodos?: number;
    minDiasPorPeriodo?: number;
    modoVisualizacao?: "month" | "multiMonth";
    readonly?: boolean;
  }

  let {
    periodosExistentes = [],
    onPeriodoAdicionado,
    onPeriodoRemovido,
    maxPeriodos = 3,
    minDiasPorPeriodo = 5,
    modoVisualizacao = "month",
    readonly = false,
  }: Props = $props();

  let calendarEl: HTMLDivElement;
  let calendar: Calendar | null = null;
  let selecaoInicio: Date | null = null;
  let eventos: any[] = $state([]);

  // Cores dos períodos
  const coresPeriodos = [
    { bg: "#667eea", border: "#5568d3", text: "#ffffff" }, // Roxo
    { bg: "#f093fb", border: "#c75ce6", text: "#ffffff" }, // Rosa
    { bg: "#4facfe", border: "#00c6ff", text: "#ffffff" }, // Azul
  ];

  // Converter períodos existentes em eventos
  function atualizarEventos() {
    eventos = periodosExistentes.map((periodo, index) => ({
      id: `periodo-${index}`,
      title: `Período ${index + 1} (${periodo.dias} dias)`,
      start: periodo.dataInicio,
      end: calcularDataFim(periodo.dataFim),
      backgroundColor: coresPeriodos[index % coresPeriodos.length].bg,
      borderColor: coresPeriodos[index % coresPeriodos.length].border,
      textColor: coresPeriodos[index % coresPeriodos.length].text,
      display: "block",
      extendedProps: {
        index,
        dias: periodo.dias,
      },
    }));
  }

  // Helper: Adicionar 1 dia à data fim (FullCalendar usa exclusive end)
  function calcularDataFim(dataFim: string): string {
    const data = new Date(dataFim);
    data.setDate(data.getDate() + 1);
    return data.toISOString().split("T")[0];
  }

  // Helper: Calcular dias entre datas (inclusivo)
  function calcularDias(inicio: Date, fim: Date): number {
    const diffTime = Math.abs(fim.getTime() - inicio.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
    return diffDays;
  }

  // Atualizar eventos quando períodos mudam
  $effect(() => {
    atualizarEventos();
    if (calendar) {
      calendar.removeAllEvents();
      calendar.addEventSource(eventos);
    }
  });

  onMount(() => {
    if (!calendarEl) return;

    atualizarEventos();

    calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin, interactionPlugin, multiMonthPlugin],
      initialView: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
      locale: ptBrLocale,
      headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
      },
      height: "auto",
      selectable: !readonly,
      selectMirror: true,
      unselectAuto: false,
      events: eventos,
      
      // Estilo customizado
      buttonText: {
        today: "Hoje",
        month: "Mês",
        multiMonthYear: "Ano",
      },
      
      // Seleção de período
      select: (info) => {
        if (readonly) return;

        const inicio = new Date(info.startStr);
        const fim = new Date(info.endStr);
        fim.setDate(fim.getDate() - 1); // FullCalendar usa exclusive end

        const dias = calcularDias(inicio, fim);

        // Validar número de períodos
        if (periodosExistentes.length >= maxPeriodos) {
          alert(`Máximo de ${maxPeriodos} períodos permitidos`);
          calendar?.unselect();
          return;
        }

        // Validar mínimo de dias
        if (dias < minDiasPorPeriodo) {
          alert(`Período deve ter no mínimo ${minDiasPorPeriodo} dias`);
          calendar?.unselect();
          return;
        }

        // Adicionar período
        const novoPeriodo = {
          dataInicio: info.startStr,
          dataFim: fim.toISOString().split("T")[0],
          dias,
        };

        if (onPeriodoAdicionado) {
          onPeriodoAdicionado(novoPeriodo);
        }

        calendar?.unselect();
      },

      // Click em evento para remover
      eventClick: (info) => {
        if (readonly) return;

        const index = info.event.extendedProps.index;
        if (
          confirm(
            `Deseja remover o Período ${index + 1} (${info.event.extendedProps.dias} dias)?`
          )
        ) {
          if (onPeriodoRemovido) {
            onPeriodoRemovido(index);
          }
        }
      },

      // Tooltip ao passar mouse
      eventDidMount: (info) => {
        info.el.title = `Click para remover\n${info.event.title}`;
        info.el.style.cursor = readonly ? "default" : "pointer";
      },

      // Desabilitar datas passadas
      selectAllow: (selectInfo) => {
        const hoje = new Date();
        hoje.setHours(0, 0, 0, 0);
        return new Date(selectInfo.start) >= hoje;
      },

      // Highlight de fim de semana
      dayCellClassNames: (arg) => {
        if (arg.date.getDay() === 0 || arg.date.getDay() === 6) {
          return ["fc-day-weekend-custom"];
        }
        return [];
      },
    });

    calendar.render();

    return () => {
      calendar?.destroy();
    };
  });
</script>

<div class="calendario-ferias-wrapper">
  <!-- Header com instruções -->
  {#if !readonly}
    <div class="alert alert-info mb-4 shadow-lg">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="stroke-current shrink-0 w-6 h-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ></path>
      </svg>
      <div class="text-sm">
        <p class="font-bold">Como usar:</p>
        <ul class="list-disc list-inside mt-1">
          <li>Clique e arraste no calendário para selecionar um período de férias</li>
          <li>Clique em um período colorido para removê-lo</li>
          <li>
            Você pode adicionar até {maxPeriodos} períodos (mínimo {minDiasPorPeriodo} dias cada)
          </li>
        </ul>
      </div>
    </div>
  {/if}

  <!-- Calendário -->
  <div
    bind:this={calendarEl}
    class="calendario-ferias shadow-2xl rounded-2xl overflow-hidden border-2 border-primary/10"
  ></div>

  <!-- Legenda de períodos -->
  {#if periodosExistentes.length > 0}
    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      {#each periodosExistentes as periodo, index}
        <div
          class="stat bg-base-100 shadow-lg rounded-xl border-2 transition-all hover:scale-105"
          style="border-color: {coresPeriodos[index % coresPeriodos.length].border}"
        >
          <div
            class="stat-figure text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold"
            style="background: {coresPeriodos[index % coresPeriodos.length].bg}"
          >
            {index + 1}
          </div>
          <div class="stat-title">Período {index + 1}</div>
          <div class="stat-value text-2xl" style="color: {coresPeriodos[index % coresPeriodos.length].bg}">
            {periodo.dias} dias
          </div>
          <div class="stat-desc">
            {new Date(periodo.dataInicio).toLocaleDateString("pt-BR")} até
            {new Date(periodo.dataFim).toLocaleDateString("pt-BR")}
          </div>
        </div>
      {/each}
    </div>
  {/if}
</div>

<style>
  /* Calendário Premium */
  .calendario-ferias {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  /* Toolbar moderna */
  :global(.fc .fc-toolbar) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    color: white !important;
  }

  :global(.fc .fc-toolbar-title) {
    color: white !important;
    font-weight: 700;
    font-size: 1.5rem;
  }

  :global(.fc .fc-button) {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-weight: 600;
    text-transform: capitalize;
    transition: all 0.3s ease;
  }

  :global(.fc .fc-button:hover) {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  :global(.fc .fc-button-active) {
    background: rgba(255, 255, 255, 0.4) !important;
  }

  /* Cabeçalho dos dias */
  :global(.fc .fc-col-header-cell) {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.5rem;
    color: #495057;
  }

  /* Células dos dias */
  :global(.fc .fc-daygrid-day) {
    transition: all 0.2s ease;
  }

  :global(.fc .fc-daygrid-day:hover) {
    background: rgba(102, 126, 234, 0.05);
  }

  :global(.fc .fc-daygrid-day-number) {
    padding: 0.5rem;
    font-weight: 600;
    color: #495057;
  }

  /* Fim de semana */
  :global(.fc .fc-day-weekend-custom) {
    background: rgba(255, 193, 7, 0.05);
  }

  /* Hoje */
  :global(.fc .fc-day-today) {
    background: rgba(102, 126, 234, 0.1) !important;
    border: 2px solid #667eea !important;
  }

  /* Eventos (períodos selecionados) */
  :global(.fc .fc-event) {
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  :global(.fc .fc-event:hover) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  /* Seleção (arrastar) */
  :global(.fc .fc-highlight) {
    background: rgba(102, 126, 234, 0.3) !important;
    border: 2px dashed #667eea;
  }

  /* Datas desabilitadas (passado) */
  :global(.fc .fc-day-past .fc-daygrid-day-number) {
    opacity: 0.4;
  }

  /* Remover bordas padrão */
  :global(.fc .fc-scrollgrid) {
    border: none !important;
  }

  :global(.fc .fc-scrollgrid-section > td) {
    border: none !important;
  }

  /* Grid moderno */
  :global(.fc .fc-daygrid-day-frame) {
    border: 1px solid #e9ecef;
    min-height: 80px;
  }

  /* Responsivo */
  @media (max-width: 768px) {
    :global(.fc .fc-toolbar) {
      flex-direction: column;
      gap: 0.75rem;
    }

    :global(.fc .fc-toolbar-title) {
      font-size: 1.25rem;
    }

    :global(.fc .fc-button) {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
    }
  }
</style>


