<template>
    <div class="h-full overflow-hidden flex flex-col">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <h1 class="text-4xl font-bold text-primary-500">Heures</h1>
        </div>

        <HoursToolbar
            v-model:selected-date="selectedDate"
            v-model:view-mode="viewMode"
            v-model:selected-site-ids="selectedSiteIds"
            v-model:employee-filter="employeeFilter"
            :is-admin="isAdmin"
            :sites="sites"
            :formatted-selected-date="formattedSelectedDate"
            :shortcut-button-class="shortcutButtonClass"
            @set-yesterday="setYesterday"
            @set-today="setToday"
            @set-tomorrow="setTomorrow"
            @shift-date="shiftDate"
        />

        <div v-if="isLoading" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
            Chargement...
        </div>

        <div v-else-if="employees.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
            Aucun employé accessible.
        </div>

        <div v-else class="flex flex-1 min-h-0 flex-col gap-4">
            <HoursDayView
                v-if="viewMode === 'day'"
                v-model:rows="rows"
                :employees="visibleEmployees"
                :is-admin="isAdmin"
                :day-grid-cols="dayGridCols"
                :contract-label="contractLabel"
                :is-time-tracking="isTimeTracking"
                :is-presence-tracking="isPresenceTracking"
                :is-row-locked="isRowLocked"
                :is-validation-pending="isValidationPending"
                :on-toggle-validation="toggleValidation"
                :get-row-metrics="getRowMetrics"
                :format-minutes="formatMinutes"
            />

            <HoursWeekView
                v-else-if="isAdmin && viewMode === 'week'"
                :is-week-loading="isWeekLoading"
                :week-grid-cols="weekGridCols"
                :weekly-summary="filteredWeeklySummary"
                :week-day-headers="weekDayHeaders"
                :format-minutes="formatMinutes"
            />

            <div v-if="viewMode === 'day'" class="shrink-0 px-4 pt-4 flex justify-center">
                <button
                    type="button"
                    class="rounded-lg bg-primary-500 px-6 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                    :class="saveButtonClass"
                    :disabled="isSubmitting || visibleEmployees.length === 0"
                    @click="handleSave"
                >
                    Enregistrer
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const {
  isAdmin,
  viewMode,
  selectedDate,
  employeeFilter,
  sites,
  selectedSiteIds,
  employees,
  visibleEmployees,
  rows,
  filteredWeeklySummary,
  isLoading,
  isWeekLoading,
  isSubmitting,
  dayGridCols,
  weekGridCols,
  saveButtonClass,
  formattedSelectedDate,
  weekDayHeaders,
  shortcutButtonClass,
  setToday,
  setYesterday,
  setTomorrow,
  shiftDate,
  contractLabel,
  isTimeTracking,
  isPresenceTracking,
  isRowLocked,
  isValidationPending,
  toggleValidation,
  getRowMetrics,
  formatMinutes,
  handleSave
} = useHoursPage()
</script>
