<script setup lang="ts">
import { useUiStore } from "~/stores/ui"
import { useDates } from "~/composables/useDates"
import TimelineRail from "~/components/TimelineRail.vue"

const ui = useUiStore()
const { lastDays, getToday } = useDates()

const dateKeys = lastDays(14)
const today = getToday()
</script>

<template>
  <div class="flex h-screen overflow-hidden bg-default">
    <USidebar
      v-model:open="ui.leftSidebarOpen"
      collapsible="offcanvas"
      side="left"
      title="Timeline"
      close
      rail
    >
      <div class="flex flex-col gap-0.5 p-2">
        <UButton
          icon="i-lucide-calendar"
          label="Today"
          color="neutral"
          variant="ghost"
          size="sm"
          class="justify-start w-full"
          @click="ui.setActiveDate(today)"
        />
      </div>

      <TimelineRail
        :days="dateKeys"
        :active-date="ui.activeDate"
        @select="ui.setActiveDate"
      />

      <template #footer>
        <div class="p-2 border-t border-default">
          <UTooltip text="Settings (coming soon)">
            <UButton
              icon="i-lucide-settings"
              color="neutral"
              variant="ghost"
              size="sm"
              class="w-full justify-start"
              disabled
            />
          </UTooltip>
        </div>
      </template>
    </USidebar>

    <UMain class="flex flex-col flex-1 min-w-0">
      <slot />
    </UMain>

    <AppRightSidebar v-model:open="ui.rightSidebarOpen" />
  </div>
</template>
