<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import Navigation from './components/Navigation.vue';
import FinanceScreen from './components/FinanceScreen.vue';
import SettingsScreen from './components/SettingsScreen.vue';
import { getFamilyById } from './api/families';
import HomeScreen from "@/components/HomeScreen.vue";
import CalendarScreen from "@/components/CalendarScreen.vue";
import IntimacyScreen from "@/components/IntimacyScreen.vue";
import {Heart} from "lucide-vue-next";

const activeScreen = ref('home');
const previousScreen = ref('home');
const familyName = ref<string | null>(null);
const familyOwnerId = ref<number | null>(null);

const configuredFamilyId = Number.parseInt(import.meta.env.VITE_FAMILY_ID ?? '1', 10);
const configuredUserId = Number.parseInt(import.meta.env.VITE_USER_ID ?? '', 10);


function handleNavigate(screen: string) {
  if (screen === 'settings') {
    if (activeScreen.value !== 'settings') {
      previousScreen.value = activeScreen.value;
    }
    activeScreen.value = 'settings';
    return;
  }

  if (screen === 'close-settings') {
    activeScreen.value = previousScreen.value;
    return;
  }

  activeScreen.value = screen;
}

async function loadFamily() {
  if (!Number.isFinite(configuredFamilyId) || configuredFamilyId <= 0) {
    return;
  }

  try {
    const family = await getFamilyById(configuredFamilyId);
    familyName.value = family.name;
    familyOwnerId.value = family.owner_id;
  } catch (error) {
    console.error('Failed to load family', error);
  }
}

onMounted(() => {
  void loadFamily();
});

const resolvedUserId = computed(() => {
  if (Number.isFinite(configuredUserId) && configuredUserId > 0) {
    return configuredUserId;
  }

  return familyOwnerId.value;
});
</script>

<template>
  <!-- Home Screen -->
  <HomeScreen
      v-if="activeScreen === 'home'"
      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
      :on-navigate="handleNavigate"
      @navigate="handleNavigate"
  />

  <!-- Finance Screen -->
  <FinanceScreen
    v-else-if="activeScreen === 'finance'"
    :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
    :user-id="resolvedUserId ?? undefined"
    :on-navigate="handleNavigate"
    @navigate="handleNavigate"
  />

  <!-- Settings Screen -->
  <SettingsScreen
    v-else-if="activeScreen === 'settings'"
    @navigate="handleNavigate"
  />

  <!-- Calendar Screen -->
  <CalendarScreen
      v-else-if="activeScreen === 'calendar'"
      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
      @navigate="handleNavigate"
  />

  <!-- Intimacy Screen -->
  <IntimacyScreen
      v-else-if="activeScreen === 'intimacy'"
      :family-id="Number.isFinite(configuredFamilyId) && configuredFamilyId > 0 ? configuredFamilyId : undefined"
      @navigate="handleNavigate"
  />

  <!-- Fallback for other screens -->
  <div v-else class="min-h-screen bg-[#0A0A0F] dark flex items-center justify-center">
    <div class="text-center px-8">
      <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center mx-auto mb-4">
        <Heart :size="32" :stroke-width="2" class="text-white" />
      </div>
      <h2 class="text-white text-[20px] font-bold mb-2">{{ activeScreen.charAt(0).toUpperCase() + activeScreen.slice(1) }}</h2>
      <p class="text-zinc-400 text-[14px] mb-6">
        This screen is coming soon!
      </p>
      <button
          @click="handleNavigate('home')"
          class="px-6 py-3 rounded-[14px] bg-gradient-to-br from-purple-500 to-blue-600 text-white text-[14px] font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all"
      >
        Go to Home
      </button>
    </div>
    <Navigation :active-screen="activeScreen" @navigate="handleNavigate" />
  </div>
</template>
