<script setup lang="ts">
  import { defineProps, ref, onMounted, onUnmounted, computed } from "vue";
  import Navigation from "./Navigation.vue";
  import LoggedInUser from "./LoggedInUser.vue";
  import { X, Menu } from "lucide-vue-next";
  import ThemeToggle from "./ThemeToggle.vue";

  interface Props {
    header: string;
  }
  defineProps<Props>();

  const isSidebarOpen = ref(false);
  const isDesktopView = ref(window.innerWidth >= 768);
  const handleResize = () => {
    isDesktopView.value = window.innerWidth >= 768;
  };

  onMounted(() => {
    window.addEventListener("resize", handleResize);
  });
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
  });

  const sidebarVisibilityClass = computed(() => {
    if (isDesktopView.value) {
      return "translate-x-0";
    }
    return isSidebarOpen.value ? "translate-x-0" : "-translate-x-full";
  });

  const toggleSidebar = () => {
    isSidebarOpen.value = !isSidebarOpen.value;
  };

  const closeSidebar = () => {
    isSidebarOpen.value = false;
  };

  const currentYear = new Date().getFullYear();
</script>

<template>
  <div class="min-h-screen md:flex">
    <aside
      :class="[
        'fixed inset-y-0 left-0 z-40 w-64 shadow-lg bg-primary-foreground',
        sidebarVisibilityClass,
        'md:static md:transform-none md:flex-shrink-0 md:shadow-none',
      ]"
      aria-label="Sidebar navigation">
      <div class="h-full flex flex-col md:border-r">
        <div
          class="px-4 py-6 sm:px-6 lg:px-8 min-h-[81px] flex items-center border-b gap-4">
          <h2 class="text-xl font-semibold">Budget Manager</h2>
          <button
            @click="closeSidebar"
            class="p-2 rounded-md md:hidden focus:outline-none focus:ring-2"
            aria-label="Close sidebar">
            <X class="h-6 w-6" aria-hidden="true" />
          </button>
        </div>
        <nav class="flex-1 overflow-y-auto" aria-label="Main navigation">
          <Navigation />
        </nav>
        <div class="border-t p-4">
          <LoggedInUser />
        </div>
      </div>
    </aside>

    <div class="flex flex-col w-full h-screen md:flex-grow">
      <header class="shadow-sm flex-shrink-0" role="banner">
        <div class="px-4 py-6 sm:px-6 lg:px-8 flex items-center">
          <button
            @click="toggleSidebar"
            class="md:hidden mr-4 p-2 rounded-md focus:outline-none focus:ring-2"
            aria-label="Toggle sidebar"
            :aria-expanded="isSidebarOpen">
            <Menu class="h-6 w-6" aria-hidden="true" />
          </button>
          <h1 class="text-2xl font-semibold">{{ header }}</h1>
          <div class="flex-grow"></div>
        </div>
      </header>

      <main class="flex-1 p-4 sm:p-6 lg:p-8 overflow-y-auto" role="main">
        <slot></slot>
      </main>

      <footer class="border-t" role="contentinfo">
        <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
          <p class="text-center text-sm">
            © {{ currentYear }} Budget Manager PWA. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  </div>
</template>
