<script setup>
import { onMounted, onUnmounted, ref, watch, computed } 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 GlobalSearch from "./Partials/GlobalSearch.vue";
import NotificationsBell from "./Partials/NotificationsBell.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faDesktop } from "@fortawesome/free-solid-svg-icons";

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

// Sidebar + responsive behavior (same feel as AppLayout)
const sidebarCollapsed = ref(false);
const hasSavedSidebarPref = ref(false);
const isMobile = ref(false);
const mobileSidebarOpen = ref(false);
function applyAutoCollapse() {
  if (typeof window === "undefined") return;
  isMobile.value = window.innerWidth < 1024;
  sidebarCollapsed.value = isMobile.value;
}
function handleResize() {
  if (typeof window !== "undefined") {
    isMobile.value = window.innerWidth < 1024;
    if (!isMobile.value) mobileSidebarOpen.value = false;
  }
  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;
  try {
    localStorage.setItem("sidebarCollapsed", v ? "1" : "0");
  } catch {}
});

function toggleSidebar() {
  hasSavedSidebarPref.value = true;
  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 (same as AppLayout for consistency)
const page = usePage();
const flash = computed(() => page.props.flash || {});
const isCompletedMode = computed(() => !!page.props.completed_mode);

// On mobile, always show labels in the overlay menu, regardless of collapsed state
const showLabels = computed(() => !sidebarCollapsed.value || isMobile.value);
// On mobile, force full width for the slide-out menu
const widthClass = computed(() =>
  isMobile.value ? "w-64" : sidebarCollapsed.value ? "w-16" : "w-64"
);
const showToast = ref(false);
const toastMessage = ref("");
const toastType = ref("success");
watch(
  () => [flash.value.success, flash.value.error, flash.value.warning, flash.value.info],
  ([s, e, w, i]) => {
    const message = s || e || w || i;
    const type = s ? "success" : e ? "error" : w ? "warning" : i ? "info" : null;
    if (message && type) {
      toastMessage.value = message;
      toastType.value = type;
      showToast.value = true;
      setTimeout(() => (showToast.value = false), 3000);
    }
  },
  { immediate: true }
);

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

// No automatic daily notifications
</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="[
          widthClass,
          'bg-white border-r border-gray-200 transition-all duration-200 z-50',
          isMobile
            ? 'fixed inset-y-0 left-0 transform ' +
              (mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full')
            : 'sticky top-0 h-screen overflow-y-auto',
        ]"
      >
        <div class="h-16 px-4 flex items-center justify-between border-b">
          <Link :href="route('phone.index')" class="flex items-center gap-2">
            <ApplicationMark class="h-8 w-auto" />
            <span v-if="showLabels" class="text-sm font-semibold">Teren</span>
          </Link>
        </div>
        <nav class="py-4">
          <ul class="space-y-1">
            <!-- Assigned jobs link -->
            <li>
              <Link
                :href="route('phone.index')"
                :class="[
                  'flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100',
                  route().current('phone.index') ||
                  (route().current('phone.case') && !isCompletedMode)
                    ? 'bg-gray-100 text-gray-900'
                    : 'text-gray-600',
                ]"
                title="Opravila"
              >
                <!-- clipboard-list icon -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.5"
                  class="w-5 h-5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9 6.75H7.5A2.25 2.25 0 005.25 9v9A2.25 2.25 0 007.5 20.25h9A2.25 2.25 0 0018.75 18v-9A2.25 2.25 0 0016.5 6.75H15M9 6.75A1.5 1.5 0 0010.5 5.25h3A1.5 1.5 0 0015 6.75M9 6.75A1.5 1.5 0 0110.5 8.25h3A1.5 1.5 0 0015 6.75M9 12h.008v.008H9V12zm0 3h.008v.008H9V15zm3-3h3m-3 3h3"
                  />
                </svg>
                <span v-if="showLabels">Opravila</span>
              </Link>
            </li>
            <!-- Completed today link -->
            <li>
              <Link
                :href="route('phone.completed')"
                :class="[
                  'flex items-center gap-3 px-4 py-2 text-sm hover:bg-gray-100',
                  route().current('phone.completed') ||
                  (route().current('phone.case') && isCompletedMode)
                    ? 'bg-gray-100 text-gray-900'
                    : 'text-gray-600',
                ]"
                title="Zaključeno danes"
              >
                <!-- check-circle icon -->
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.5"
                  class="w-5 h-5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <span v-if="showLabels">Zaključeno danes</span>
              </Link>
            </li>
          </ul>
        </nav>
      </aside>

      <!-- Main column -->
      <div class="flex-1 flex flex-col min-w-0">
        <!-- Top bar -->
        <div
          class="h-16 bg-white border-b border-gray-100 px-4 flex items-center justify-between sticky top-0 z-30"
        >
          <div class="flex items-center gap-2">
            <!-- Sidebar toggle -->
            <button
              @click="handleSidebarToggleClick()"
              class="inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
              :title="sidebarCollapsed ? 'Razširi meni' : 'Skrči meni'"
              aria-label="Toggle sidebar"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-5 h-5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                />
              </svg>
            </button>
            <!-- Search trigger -->
            <button
              @click="openSearch"
              class="inline-flex items-center gap-2 px-3 py-2 text-sm rounded-md border border-gray-200 text-gray-500 hover:text-gray-700 hover:border-gray-300"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-5 h-5"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 21l-4.35-4.35m0 0A7.5 7.5 0 1010.5 18.5a7.5 7.5 0 006.15-1.85z"
                />
              </svg>
              <span class="hidden sm:inline">Globalni iskalnik</span>
              <kbd
                class="hidden sm:inline ml-2 text-[10px] px-1.5 py-0.5 rounded border bg-gray-50"
                >Ctrl K</kbd
              >
            </button>
          </div>
          <!-- Notifications + User drop menu + Desktop switch button -->
          <div class="flex items-center">
            <NotificationsBell class="mr-2" />
            <!-- Desktop page quick access button -->
            <Link
              :href="route('clientCase')"
              class="inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 mr-2"
              title="Desktop"
            >
              <FontAwesomeIcon :icon="faDesktop" class="h-5 w-5" />
            </Link>
            <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-gray-300 transition"
                  >
                    <img
                      class="h-8 w-8 rounded-full object-cover"
                      :src="$page.props.auth.user.profile_photo_url"
                      :alt="$page.props.auth.user.name"
                    />
                  </button>

                  <span v-else class="inline-flex rounded-md">
                    <button
                      type="button"
                      class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition ease-in-out duration-150"
                    >
                      {{ $page.props.auth.user.name }}
                      <svg
                        class="ms-2 -me-0.5 h-4 w-4"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                        />
                      </svg>
                    </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 shadow-sm">
          <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2">
            <slot name="header" />
          </div>
        </header>

        <!-- Page Content -->
        <main class="p-4">
          <slot />
        </main>
      </div>
    </div>

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

    <!-- Simple Toast -->
    <transition name="fade">
      <div
        v-if="showToast"
        class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-white"
        :class="{
          'bg-emerald-600': toastType === 'success',
          'bg-red-600': toastType === 'error',
          'bg-amber-500': toastType === 'warning',
          'bg-blue-600': toastType === 'info',
        }"
      >
        {{ toastMessage }}
      </div>
    </transition>
  </div>
</template>
