<script setup lang="ts">
import {User} from 'lucide-vue-next'
import Navigation from './Navigation.vue'
import BalanceWidget from './BalanceWidget.vue'
import TodayWidget from './TodayWidget.vue'
import RecentActivityWidget from './RecentActivityWidget.vue'
import SwipeCards from "@/components/SwipeCards.vue";
import HeaderWidget from "@/components/HeaderWidget.vue";
import {useI18n} from "@/i18n";
import {computed, onBeforeUnmount, onMounted, ref} from "vue";

const {t} = useI18n();
const currentHour = ref(new Date().getHours());
let timerId: number | undefined;

const userName = "Alex Belyan";

const greeting = computed(() => {
  if (currentHour.value < 5) {
    return t('header.greeting.night');
  }

  if (currentHour.value < 12) {
    return t('header.greeting.morning');
  }

  if (currentHour.value < 18) {
    return t('header.greeting.afternoon');
  }

  return t('header.greeting.evening');
});

function updateCurrentHour() {
  currentHour.value = new Date().getHours();
}

onMounted(() => {
  updateCurrentHour();
  timerId = window.setInterval(updateCurrentHour, 60_000);
});
onBeforeUnmount(() => {
  if (timerId !== undefined) {
    window.clearInterval(timerId);
  }
});

const emit = defineEmits<{
  navigate: [screen: string]
}>()
</script>

<template>
  <div class="min-h-screen bg-[#0A0A0F] dark">
    <div class="mx-auto max-w-md min-h-screen flex flex-col relative">
      <!-- Header -->
      <HeaderWidget
          :icon="User"
          :eyebrow=greeting
          :title=userName
          @navigate="emit('navigate', $event)"
      />
      <!-- Main Content -->
      <main class="flex-1 px-5 pb-32 overflow-y-auto">
        <div class="space-y-4">
          <!-- Balance Widget -->
          <BalanceWidget/>

          <!-- Today Widget -->
          <TodayWidget/>

          <!-- Swipe cards Widget -->
          <SwipeCards/>

          <!-- Recent Activity Widget -->
          <RecentActivityWidget/>
        </div>
      </main>

      <!-- Bottom Navigation -->
      <Navigation active-screen="home" @navigate="emit('navigate', $event)"/>
    </div>
  </div>
</template>