<script setup>
import { onMounted, onUnmounted, ref, watch, computed, h } from "vue";
import { Head, Link, router, usePage } from "@inertiajs/vue3";
import ApplicationMark from "@/Components/ApplicationMark.vue";
import Banner from "@/Components/Banner.vue";
import Dropdown from "@/Components/Dropdown.vue";
import DropdownLink from "@/Components/DropdownLink.vue";
import Breadcrumbs from "@/Components/Breadcrumbs.vue";
import GlobalSearch from "./Partials/GlobalSearch.vue";
import NotificationsBell from "./Partials/NotificationsBell.vue";
import ToastContainer from "@/Components/Toast/ToastContainer.vue";
import { Button } from "@/Components/ui/button";
import { MenuIcon } from "lucide-vue-next";
import { SearchIcon } from "lucide-vue-next";
import { ChevronDownIcon } from "lucide-vue-next";
import { LayoutDashboardIcon } from "lucide-vue-next";
import { FileChartColumn } from "lucide-vue-next";
import { UsersIcon } from "lucide-vue-next";
import { FoldersIcon } from "lucide-vue-next";
import { LayoutIcon } from "lucide-vue-next";
import { ImportIcon } from "lucide-vue-next";
import { FilePlusIcon } from "lucide-vue-next";
import { ListIndentIncreaseIcon } from "lucide-vue-next";
import { MapIcon } from "lucide-vue-next";
import { SettingsIcon } from "lucide-vue-next";
import { ShieldUserIcon } from "lucide-vue-next";
import { SmartphoneIcon } from "lucide-vue-next";
import { TabletSmartphoneIcon } from "lucide-vue-next";
import { PhoneCallIcon } from "lucide-vue-next";
import { PackageIcon } from "lucide-vue-next";
import { Badge } from "@/Components/ui/badge";

const props = defineProps({
  title: String,
});

// Collapsible sidebar state (persisted when user explicitly toggles)
const sidebarCollapsed = ref(false);
const hasSavedSidebarPref = ref(false);
// Mobile off-canvas state
const isMobile = ref(false);
const mobileSidebarOpen = ref(false);
function applyAutoCollapse() {
  if (typeof window === "undefined") return;
  isMobile.value = window.innerWidth < 1024; // Tailwind lg breakpoint
  sidebarCollapsed.value = isMobile.value;
}
function handleResize() {
  if (typeof window !== "undefined") {
    isMobile.value = window.innerWidth < 1024;
    if (!isMobile.value) mobileSidebarOpen.value = false; // close drawer when switching to desktop
  }
  if (!hasSavedSidebarPref.value) applyAutoCollapse();
}
onMounted(() => {
  try {
    const saved = localStorage.getItem("sidebarCollapsed");
    if (saved !== null) {
      hasSavedSidebarPref.value = true;
      sidebarCollapsed.value = saved === "1";
    } else {
      applyAutoCollapse();
    }
  } catch {}
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => window.removeEventListener("resize", handleResize));
watch(sidebarCollapsed, (v) => {
  if (!hasSavedSidebarPref.value) return; // don't persist auto behavior
  try {
    localStorage.setItem("sidebarCollapsed", v ? "1" : "0");
  } catch {}
});

// Global search modal state
const searchOpen = ref(false);
const openSearch = () => (searchOpen.value = true);
const closeSearch = () => (searchOpen.value = false);

// Keyboard shortcut: Ctrl+K / Cmd+K to open search
function onKeydown(e) {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
    e.preventDefault();
    openSearch();
  }
  if (e.key === "Escape" && mobileSidebarOpen.value) {
    mobileSidebarOpen.value = false;
  }
}
onMounted(() => window.addEventListener("keydown", onKeydown));
onUnmounted(() => window.removeEventListener("keydown", onKeydown));

function toggleSidebar() {
  hasSavedSidebarPref.value = true; // user explicitly chose
  sidebarCollapsed.value = !sidebarCollapsed.value;
}

function toggleMobileSidebar() {
  mobileSidebarOpen.value = !mobileSidebarOpen.value;
}

function handleSidebarToggleClick() {
  if (isMobile.value) toggleMobileSidebar();
  else toggleSidebar();
}

const logout = () => {
  router.post(route("logout"));
};

// Flash toast notifications
const page = usePage();
// Toast notifications are now handled by ToastContainer component

// No automatic daily notifications

// Sidebar menu groups (sorted alphabetically within each group)
const rawMenuGroups = [
  {
    label: "Glavno",
    items: [
      {
        key: "dashboard",
        icon: LayoutDashboardIcon,
        title: "Nadzorna plošča",
        routeName: "dashboard",
        active: ["dashboard"],
      },
      {
        key: "reports",
        icon: FileChartColumn,
        title: "Poročila",
        routeName: "reports.index",
        active: ["reports.index", "reports.show"],
        requires: { permission: "reports-view" },
      },
    ],
  },
  {
    label: "Stranke",
    items: [
      {
        key: "clients",
        icon: UsersIcon,
        title: "Naročniki",
        routeName: "client",
        active: ["client", "client.*"],
      },
      {
        key: "cases",
        icon: FoldersIcon,
        title: "Primeri",
        routeName: "clientCase",
        active: ["clientCase", "clientCase.*"],
      },
      {
        key: "segments",
        icon: LayoutIcon,
        title: "Segmenti",
        routeName: "segments.index",
        active: ["segments.index"],
      },
      {
        key: "call-laters",
        icon: PhoneCallIcon,
        title: "Pokliči kasneje",
        routeName: "callLaters.index",
        active: ["callLaters.index"],
      },
    ],
  },
  {
    label: "Uvoz",
    requires: { permission: "manage-imports" },
    items: [
      {
        key: "imports",
        icon: ImportIcon,
        title: "Uvozi",
        routeName: "imports.index",
        active: ["imports.index", "imports.*"],
      },
      {
        key: "import-templates",
        icon: ListIndentIncreaseIcon,
        title: "Uvozne predloge",
        routeName: "importTemplates.index",
        active: ["importTemplates.index"],
      },
      {
        key: "import-templates-new",
        icon: FilePlusIcon,
        title: "Nova uvozna predloga",
        routeName: "importTemplates.create",
        active: ["importTemplates.create"],
      },
    ],
  },
  {
    label: "Terensko delo",
    requires: { permission: "field-job" },
    items: [
      {
        key: "fieldjobs",
        icon: MapIcon,
        title: "Terenske naloge",
        routeName: "fieldjobs.index",
        active: ["fieldjobs.index"],
      },
    ],
  },
  {
    label: "Konfiguracija",
    // Group-level authorization: show "Konfiguracija" only to admins or users with manage-settings
    // You can set requires on any group to hide the whole section unless allowed
    requires: { permission: "manage-settings" },
    items: [
      {
        key: "settings",
        icon: SettingsIcon,
        title: "Nastavitve",
        routeName: "settings",
        active: ["settings", "settings.*"],
      },
      {
        key: "packages",
        icon: PackageIcon,
        title: "Paketno pošiljanje",
        routeName: "packages.index",
        active: ["packages.index", "packages.show", "packages.create"],
      },
      // Admin panel (roles & permissions management)
      // Only shown if current user has admin role or manage-settings permission.
      // We'll filter it out below if not authorized.
      {
        key: "admin-panel",
        icon: ShieldUserIcon,
        title: "Administrator",
        routeName: "admin.index",
        active: ["admin.index", "admin.users.index", "admin.permissions.create"],
        requires: { role: "admin" },
      },
    ],
  },
];

const menuGroups = computed(() => {
  const user = page.props.auth?.user || {};
  const roles = (user.roles || []).map((r) => r.slug);
  const permissions = user.permissions || [];

  // Generic helper to determine inclusion based on optional `requires` meta
  function allowedMeta(entity) {
    const req = entity?.requires;
    if (!req) {
      return true;
    }
    const needRole = req.role ?? "admin";
    const needPerm = req.permission;
    return (
      (needRole && roles.includes(needRole)) ||
      (needPerm && permissions.includes(needPerm))
    );
  }

  return (
    rawMenuGroups
      // Group-level permission check (hide whole group if not allowed)
      .filter((g) => allowedMeta(g))
      .map((g) => {
        const items = (g.items || [])
          .filter((item) => allowedMeta(item))
          .sort((a, b) => a.title.localeCompare(b.title, "sl", { sensitivity: "base" }));
        return { label: g.label, items };
      })
      // Drop groups that end up empty after item filtering
      .filter((g) => g.items.length > 0)
  );
});

function isActive(patterns) {
  try {
    return patterns?.some((p) => route().current(p));
  } catch {
    return false;
  }
}

function getBadge(item) {
  if (item.key === "call-laters") {
    return page.props.callLaterCount || 0;
  }

  return 0;
}
</script>

<template>
  <div>
    <Head :title="title" />

    <Banner />

    <div class="min-h-screen bg-gray-100 flex">
      <!-- Mobile backdrop -->
      <div
        v-if="isMobile && mobileSidebarOpen"
        class="fixed inset-0 z-40 bg-black/30"
        @click="mobileSidebarOpen = false"
      ></div>

      <!-- Sidebar -->
      <aside
        :class="[
          sidebarCollapsed ? 'w-16' : 'w-64',
          'bg-sidebar text-sidebar-foreground border-r border-sidebar-border transition-all duration-300 ease-in-out z-50',
          // Off-canvas behavior on mobile; sticky fixed-like sidebar on desktop
          isMobile
            ? 'fixed inset-y-0 left-0 transform shadow-strong ' +
              (mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full')
            : 'sticky top-0 h-screen overflow-y-auto',
        ]"
      >
        <div
          class="h-16 px-4 flex items-center border-b border-sidebar-border bg-sidebar"
        >
          <Link
            :href="route('dashboard')"
            class="flex items-center gap-1 hover:opacity-80 transition-opacity"
          >
            <ApplicationMark />
            <span
              v-if="!sidebarCollapsed"
              class="text-lg font-semibold text-sidebar-foreground transition-opacity"
            >
              Aplikacija
            </span>
          </Link>
        </div>
        <nav class="py-4 overflow-y-auto">
          <ul class="space-y-4 px-2">
            <li v-for="group in menuGroups" :key="group.label">
              <div
                v-if="!sidebarCollapsed"
                class="px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/60"
              >
                {{ group.label }}
              </div>
              <ul class="space-y-0.5">
                <li v-for="item in group.items" :key="item.key">
                  <Link
                    :href="route(item.routeName)"
                    :class="[
                      'flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg transition-all duration-150',
                      isActive(item.active)
                        ? 'bg-sidebar-primary/15 text-sidebar-primary font-medium shadow-sm'
                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
                    ]"
                    :title="item.title"
                  >
                    <component
                      v-if="item.icon"
                      :is="item.icon"
                      class="w-5 h-5 shrink-0 transition-colors"
                    />
                    <!-- Title -->
                    <span
                      v-if="!sidebarCollapsed"
                      class="flex-1 truncate transition-opacity"
                      :class="{ 'font-medium': isActive(item.active) }"
                    >
                      {{ item.title }}
                    </span>
                    <Badge
                      v-if="!sidebarCollapsed && getBadge(item) > 0"
                      variant="destructive"
                      class="ml-auto shrink-0 px-1.5 py-0.5 text-xs font-mono text-amber-50"
                    >
                      {{ getBadge(item) }}
                    </Badge>
                  </Link>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- Main column -->
      <div class="flex-1 flex flex-col min-w-0">
        <!-- Top bar -->
        <div
          class="h-16 border-b border-gray-200 px-4 flex items-center justify-between sticky top-0 z-30 backdrop-blur-sm bg-white/95 shadow-sm"
        >
          <div class="flex items-center gap-3">
            <!-- Sidebar toggle -->
            <Button
              variant="ghost"
              size="icon"
              @click="handleSidebarToggleClick()"
              :title="sidebarCollapsed ? 'Razširi meni' : 'Skrči meni'"
              aria-label="Toggle sidebar"
            >
              <!-- Hamburger (Bars) icon -->
              <MenuIcon />
            </Button>
            <!-- Search trigger -->
            <Button variant="outline" size="default" @click="openSearch" class="gap-2">
              <SearchIcon />
              <span class="hidden sm:inline text-sm font-medium">Globalni iskalnik</span>
              <kbd
                class="hidden sm:inline ml-2 text-[10px] px-1.5 py-0.5 rounded border border-gray-300 bg-gray-100 text-gray-600 font-medium"
                >Ctrl K</kbd
              >
            </Button>
          </div>
          <!-- Notifications + User drop menu --->
          <div class="flex items-center">
            <NotificationsBell class="mr-2" />
            <!-- Phone page quick access button -->
            <Button
              variant="ghost"
              size="icon"
              :as-child="true"
              class="mr-2"
              title="Phone"
            >
              <Link :href="route('phone.index')">
                <TabletSmartphoneIcon />
              </Link>
            </Button>
            <div class="ms-3 relative">
              <Dropdown align="right" width="48">
                <template #trigger>
                  <button
                    v-if="$page.props.jetstream.managesProfilePhotos"
                    class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all hover:ring-2 hover:ring-gray-200"
                  >
                    <img
                      class="h-8 w-8 rounded-full object-cover ring-2 ring-gray-100"
                      :src="$page.props.auth.user.profile_photo_url"
                      :alt="$page.props.auth.user.name"
                    />
                  </button>

                  <span v-else class="inline-flex">
                    <Button variant="outline" size="default" type="button" class="gap-2">
                      {{ $page.props.auth.user.name }}
                      <ChevronDownIcon />
                    </Button>
                  </span>
                </template>

                <template #content>
                  <div class="block px-4 py-2 text-xs text-gray-400">
                    Nastavitve računa
                  </div>

                  <DropdownLink :href="route('profile.show')">Profil</DropdownLink>
                  <DropdownLink
                    v-if="$page.props.jetstream.hasApiFeatures"
                    :href="route('api-tokens.index')"
                    >API Tokens</DropdownLink
                  >

                  <div class="border-t border-gray-200" />

                  <form @submit.prevent="logout">
                    <DropdownLink as="button">Izpis</DropdownLink>
                  </form>
                </template>
              </Dropdown>
            </div>
          </div>
        </div>

        <!-- Page Heading -->
        <header v-if="$slots.header" class="bg-white border-b border-gray-200 shadow-sm">
          <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2">
            <Breadcrumbs
              v-if="$page.props.breadcrumbs && $page.props.breadcrumbs.length"
              :breadcrumbs="$page.props.breadcrumbs"
            />
            <slot name="header" />
          </div>
        </header>

        <!-- Page Content -->
        <main class="flex-1 p-4 sm:p-6">
          <slot />
        </main>
      </div>
    </div>

    <!-- Global Search Modal -->
    <GlobalSearch :open="searchOpen" @update:open="(v) => (searchOpen = v)" />

    <!-- Toast Notification Container -->
    <ToastContainer />
  </div>
</template>
