<!-- [DEF:TopNavbar:Component] -->
<script>
  /**
   * @TIER: CRITICAL
   * @PURPOSE: Unified top navigation bar with Logo, Search, Activity, and User menu
   * @LAYER: UI
   * @RELATION: BINDS_TO -> activityStore, authStore
   * @SEMANTICS: Navigation, UserSession
   * @INVARIANT: Always visible on non-login pages
   *
   * @UX_STATE: Idle -> Navbar showing current state
   * @UX_STATE: SearchFocused -> Search input expands
   * @UX_FEEDBACK: Activity badge shows count of running tasks
   * @UX_RECOVERY: Click outside closes dropdowns
   * @UX_TEST: SearchFocused -> {focus: search input, expected: focused style class applied}
   * @UX_TEST: ActivityClick -> {click: activity button, expected: task drawer opens}
   *
   * @TEST_CONTRACT Component_TopNavbar ->
   * {
   *   required_props: {},
   *   optional_props: {},
   *   invariants: [
   *       "Displays user menu and handles logical toggling",
   *       "Initiates global search successfully taking debounce into account",
   *       "Correctly handles activity notification badge visibility"
   *   ]
   * }
   * @TEST_FIXTURE logged_in -> {"user": {"username": "admin"}}
   * @TEST_EDGE network_down -> search fetch fails, handles error state
   * @TEST_INVARIANT ui_consistency -> verifies: [logged_in]
   */

  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
  import { page } from "$app/state";
  import { api } from "$lib/api.js";
  import { getReports } from "$lib/api/reports.js";
  import { activityStore } from "$lib/stores/activity.js";
  import {
    taskDrawerStore,
    openDrawerForTask,
    openDrawer,
    setTaskDrawerAutoOpenPreference,
  } from "$lib/stores/taskDrawer.js";
  import { sidebarStore, toggleMobileSidebar } from "$lib/stores/sidebar.js";
  import { t } from "$lib/i18n";
  import { auth } from "$lib/auth/store.js";
  import { hasPermission } from "$lib/auth/permissions.js";
  import { toggleAssistantChat } from "$lib/stores/assistantChat.js";
  import Icon from "$lib/ui/Icon.svelte";
  import LanguageSwitcher from "$lib/ui/LanguageSwitcher.svelte";
  import {
    environmentContextStore,
    initializeEnvironmentContext,
    setSelectedEnvironment,
    selectedEnvironmentStore,
  } from "$lib/stores/environmentContext.js";
  import { fromStore } from "svelte/store";

  let showUserMenu = $state(false);
  let isSearchFocused = $state(false);
  let searchQuery = $state("");
  let showSearchDropdown = $state(false);
  let isSearchLoading = $state(false);
  let groupedSearchResults = $state([]);
  let searchTimer = null;

  const SEARCH_DEBOUNCE_MS = 250;
  const SEARCH_MIN_LENGTH = 2;
  const SEARCH_LIMIT = 5;

  const sidebarState = fromStore(sidebarStore);
  const activityState = fromStore(activityStore);
  const authState = fromStore(auth);
  const environmentContextState = fromStore(environmentContextStore);
  const selectedEnvironmentState = fromStore(selectedEnvironmentStore);

  let isExpanded = $derived(sidebarState.current?.isExpanded ?? true);
  let activeCount = $derived(activityState.current?.activeCount || 0);
  let recentTasks = $derived(activityState.current?.recentTasks || []);
  let user = $derived(authState.current?.user || null);
  let canOpenSettings = $derived(
    hasPermission(user, "admin:settings", "READ"),
  );
  let globalEnvironments = $derived(
    environmentContextState.current?.environments || [],
  );
  let globalSelectedEnvId = $derived(
    environmentContextState.current?.selectedEnvId || "",
  );
  let globalSelectedEnv = $derived(selectedEnvironmentState.current);
  let isProdContext = $derived(
    String(globalSelectedEnv?.stage || "").toUpperCase() === "PROD" ||
      Boolean(globalSelectedEnv?.is_production),
  );

  function toggleUserMenu(event) {
    event.stopPropagation();
    showUserMenu = !showUserMenu;
  }

  function closeUserMenu() {
    showUserMenu = false;
  }

  function handleLogout() {
    auth.logout();
    closeUserMenu();
    window.location.href = "/login";
  }

  function handleActivityClick() {
    const runningTask = recentTasks.find((t) => t.status === "RUNNING");
    if (runningTask) {
      openDrawerForTask(runningTask.taskId);
    } else if (recentTasks.length > 0) {
      openDrawerForTask(recentTasks[recentTasks.length - 1].taskId);
    } else {
      openDrawer();
    }
  }

  function handleAssistantClick() {
    toggleAssistantChat();
  }

  async function hydrateTaskDrawerPreference() {
    try {
      const response = await api.getProfilePreferences();
      const autoOpenTaskDrawer = response?.preference?.auto_open_task_drawer;
      setTaskDrawerAutoOpenPreference(autoOpenTaskDrawer !== false);
    } catch (error) {
      console.warn(
        "[TopNavbar][REFLECT] Failed to hydrate task drawer preference, fallback to local preference cache",
        error,
      );
    }
  }

  function handleSearchFocus() {
    isSearchFocused = true;
    showSearchDropdown = groupedSearchResults.length > 0;
  }

  function clearSearchState() {
    showSearchDropdown = false;
    isSearchLoading = false;
    groupedSearchResults = [];
  }

  function handleDocumentClick(event) {
    if (!event.target.closest(".user-menu-container")) {
      closeUserMenu();
    }
    if (!event.target.closest(".global-search-container")) {
      isSearchFocused = false;
      clearSearchState();
    }
  }

  function handleHamburgerClick(event) {
    event.stopPropagation();
    toggleMobileSidebar();
  }

  function handleGlobalEnvironmentChange(event) {
    setSelectedEnvironment(event.target.value);
    if (searchQuery.trim().length >= SEARCH_MIN_LENGTH) {
      triggerSearch(searchQuery.trim());
    }
  }

  function buildSearchResultSections(
    dashboardResponse,
    datasetResponse,
    tasksResponse,
    reportsResponse,
    query,
  ) {
    const dashboards = (dashboardResponse?.dashboards || []).slice(
      0,
      SEARCH_LIMIT,
    );
    const datasets = (datasetResponse?.datasets || []).slice(0, SEARCH_LIMIT);
    const dashboardItems = dashboards.map((dashboard) => ({
      key: `dashboard-${dashboard.id}`,
      type: "dashboard",
      title: dashboard.title || dashboard.dashboard_title || `#${dashboard.id}`,
      subtitle: `ID: ${dashboard.id}`,
      href: `/dashboards/${encodeURIComponent(String(dashboard.slug || dashboard.id))}?env_id=${encodeURIComponent(globalSelectedEnvId)}`,
    }));
    const datasetItems = datasets.map((dataset) => ({
      key: `dataset-${dataset.id}`,
      type: "dataset",
      title: dataset.table_name || `#${dataset.id}`,
      subtitle: dataset.schema || "-",
      href: `/datasets/${dataset.id}?env_id=${encodeURIComponent(globalSelectedEnvId)}`,
    }));
    const q = String(query || "").toLowerCase();
    const tasks = (tasksResponse || []).slice(0, 30);
    const taskItems = tasks
      .filter((task) => {
        const haystack =
          `${task?.id || ""} ${task?.plugin_id || ""} ${task?.status || ""}`.toLowerCase();
        return q && haystack.includes(q);
      })
      .slice(0, SEARCH_LIMIT)
      .map((task) => ({
        key: `task-${task.id}`,
        type: "task",
        title: task.plugin_id || "task",
        subtitle: `${task.id} · ${task.status || "-"}`,
        taskId: task.id,
      }));
    const reportItems = (reportsResponse?.items || [])
      .slice(0, SEARCH_LIMIT)
      .map((report) => ({
        key: `report-${report.report_id}`,
        type: "report",
        title: report.summary || report.report_id,
        subtitle: `${report.task_type || "-"} · ${report.status || "-"}`,
        href: "/reports",
      }));

    const sections = [];
    if (dashboardItems.length > 0) {
      sections.push({
        key: "dashboards",
        label: $t.nav?.dashboards || "Dashboards",
        items: dashboardItems,
      });
    }
    if (datasetItems.length > 0) {
      sections.push({
        key: "datasets",
        label: $t.nav?.datasets || "Datasets",
        items: datasetItems,
      });
    }
    if (taskItems.length > 0) {
      sections.push({
        key: "tasks",
        label: $t.nav?.tasks || "Tasks",
        items: taskItems,
      });
    }
    if (reportItems.length > 0) {
      sections.push({
        key: "reports",
        label: $t.nav?.reports || "Reports",
        items: reportItems,
      });
    }
    return sections;
  }

  async function triggerSearch(query) {
    const normalizedQuery = String(query || "").trim();
    if (normalizedQuery.length < SEARCH_MIN_LENGTH || !globalSelectedEnvId) {
      clearSearchState();
      return;
    }
    isSearchLoading = true;
    showSearchDropdown = true;
    try {
      const [
        dashboardResponse,
        datasetResponse,
        tasksResponse,
        reportsResponse,
      ] = await Promise.all([
        api.getDashboards(globalSelectedEnvId, {
          search: normalizedQuery,
          page: 1,
          page_size: SEARCH_LIMIT,
        }),
        api.getDatasets(globalSelectedEnvId, {
          search: normalizedQuery,
          page: 1,
          page_size: SEARCH_LIMIT,
        }),
        api.getTasks({ limit: 30, offset: 0 }),
        getReports({
          page: 1,
          page_size: SEARCH_LIMIT,
          search: normalizedQuery,
          sort_by: "updated_at",
          sort_order: "desc",
        }),
      ]);
      groupedSearchResults = buildSearchResultSections(
        dashboardResponse,
        datasetResponse,
        tasksResponse,
        reportsResponse,
        normalizedQuery,
      );
    } catch (error) {
      console.error(
        "[TopNavbar][Coherence:Failed] Global search failed",
        error,
      );
      groupedSearchResults = [];
    } finally {
      isSearchLoading = false;
    }
  }

  function handleSearchInput(event) {
    searchQuery = event.target.value;
    if (searchTimer) {
      clearTimeout(searchTimer);
    }
    searchTimer = setTimeout(() => {
      triggerSearch(searchQuery);
    }, SEARCH_DEBOUNCE_MS);
  }

  async function openSearchResult(item) {
    clearSearchState();
    searchQuery = "";
    isSearchFocused = false;
    if (item.type === "task" && item.taskId) {
      openDrawerForTask(item.taskId);
      return;
    }
    if (item.href) {
      await goto(item.href);
    }
  }

  async function handleSearchKeydown(event) {
    if (event.key === "Escape") {
      clearSearchState();
      searchQuery = "";
      isSearchFocused = false;
      return;
    }
    const firstItem = groupedSearchResults[0]?.items?.[0];
    if (event.key === "Enter" && firstItem) {
      event.preventDefault();
      await openSearchResult(firstItem);
    }
  }

  onMount(() => {
    void initializeEnvironmentContext();
    void hydrateTaskDrawerPreference();
    if (typeof document !== "undefined") {
      document.addEventListener("click", handleDocumentClick);
    }
    return () => {
      if (searchTimer) {
        clearTimeout(searchTimer);
      }
      if (typeof document !== "undefined") {
        document.removeEventListener("click", handleDocumentClick);
      }
    };
  });
</script>

<nav
  class="fixed left-0 right-0 top-0 z-40 flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 shadow-sm
    {isExpanded ? 'md:left-[240px]' : 'md:left-16'}"
>
  <!-- Left section: Hamburger (mobile) + Logo -->
  <div class="flex items-center gap-2">
    <!-- Hamburger Menu (mobile only) -->
    <button
      class="rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 md:hidden"
      onclick={handleHamburgerClick}
      aria-label={$t.common?.toggle_menu}
    >
      <Icon name="menu" size={22} />
    </button>

    <!-- Logo/Brand -->
    <a
      href="/"
      class="flex items-center text-xl font-bold text-slate-800 transition-colors hover:text-primary"
    >
      <span
        class="mr-2 inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 via-cyan-500 to-indigo-600 text-white shadow-sm"
      >
        <Icon name="layers" size={18} strokeWidth={2.1} />
      </span>
      <span>{$t.common?.brand}</span>
    </a>
  </div>

  <!-- Global search -->
  <div
    class="global-search-container relative flex-1 max-w-xl mx-4 hidden md:block"
  >
    <input
      type="text"
      class="w-full px-4 py-2 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-ring transition-all
        {isSearchFocused ? 'bg-white border border-primary-ring' : ''}"
      placeholder={$t.common.search}
      value={searchQuery}
      oninput={handleSearchInput}
      onfocus={handleSearchFocus}
      onkeydown={handleSearchKeydown}
    />
    {#if showSearchDropdown}
      <div
        class="absolute left-0 right-0 top-12 z-50 rounded-lg border border-slate-200 bg-white shadow-lg"
      >
        {#if isSearchLoading}
          <div class="px-4 py-3 text-sm text-slate-500">
            {$t.common?.loading || "Loading..."}
          </div>
        {:else if groupedSearchResults.length === 0}
          <div class="px-4 py-3 text-sm text-slate-500">
            {$t.common?.not_found || "No results found"}
          </div>
        {:else}
          {#each groupedSearchResults as section}
            <div class="border-b border-slate-100 last:border-b-0">
              <div
                class="px-4 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500"
              >
                {section.label}
              </div>
              {#each section.items as result}
                <button
                  class="flex w-full items-center justify-between px-4 py-2 text-left hover:bg-slate-50"
                  onclick={() => openSearchResult(result)}
                >
                  <div class="min-w-0">
                    <div class="truncate text-sm font-medium text-slate-800">
                      {result.title}
                    </div>
                    <div class="truncate text-xs text-slate-500">
                      {result.subtitle}
                    </div>
                  </div>
                </button>
              {/each}
            </div>
          {/each}
        {/if}
      </div>
    {/if}
  </div>

  <!-- Nav Actions -->
  <div class="flex items-center gap-3 md:gap-4">
    {#if globalEnvironments.length > 0}
      <div class="hidden lg:flex items-center gap-2">
        <select
          class="h-9 rounded-lg border px-3 text-sm font-medium focus:outline-none focus:ring-2
            {isProdContext
            ? 'border-red-300 bg-red-50 text-red-900 focus:ring-red-200'
            : 'border-slate-300 bg-white text-slate-700 focus:ring-sky-200'}"
          value={globalSelectedEnvId}
          onchange={handleGlobalEnvironmentChange}
          aria-label={$t.dashboard?.environment || "Environment"}
          title={$t.dashboard?.environment || "Environment"}
        >
          {#each globalEnvironments as env}
            <option value={env.id}>
              {env.name}{(String(env.stage || "").toUpperCase() === "PROD" || env.is_production) ? " [PROD]" : ""}
            </option>
          {/each}
        </select>
        {#if isProdContext}
          <span
            class="rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white"
          >
            PROD
          </span>
        {/if}
      </div>
    {/if}

    <LanguageSwitcher />

    <!-- Assistant -->
    <button
      class="rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100"
      onclick={handleAssistantClick}
      aria-label={$t.assistant?.open}
      title={$t.assistant?.title}
    >
      <Icon name="clipboard" size={22} />
    </button>

    <!-- Activity Indicator -->
    <div
      class="relative cursor-pointer rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100"
      onclick={handleActivityClick}
      onkeydown={(e) =>
        (e.key === "Enter" || e.key === " ") && handleActivityClick()}
      role="button"
      tabindex="0"
      aria-label={$t.common?.activity}
    >
      <Icon name="activity" size={22} />
      {#if activeCount > 0}
        <span
          class="absolute -top-1 -right-1 bg-destructive text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
          >{activeCount}</span
        >
      {/if}
    </div>

    <!-- User Menu -->
    <div class="user-menu-container relative">
      <div
        class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center cursor-pointer hover:bg-primary-hover transition-colors"
        onclick={toggleUserMenu}
        onkeydown={(e) =>
          (e.key === "Enter" || e.key === " ") && toggleUserMenu(e)}
        role="button"
        tabindex="0"
        aria-label={$t.common?.user_menu}
      >
        {#if user}
          <span
            >{user.username ? user.username.charAt(0).toUpperCase() : "U"}</span
          >
        {:else}
          <span>U</span>
        {/if}
      </div>

      <!-- User Dropdown -->
      <div
        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 {showUserMenu
          ? ''
          : 'hidden'}"
      >
        <div class="px-4 py-2 text-sm text-gray-700">
          <strong>{user?.username || $t.common?.user}</strong>
        </div>
        <div class="border-t border-gray-200 my-1"></div>
        {#if canOpenSettings}
          <div
            class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
            onclick={() => {
              window.location.href = "/settings";
            }}
            onkeydown={(e) =>
              (e.key === "Enter" || e.key === " ") &&
              (window.location.href = "/settings")}
            role="button"
            tabindex="0"
          >
            {$t.nav?.settings}
          </div>
        {/if}
        <div
          class="px-4 py-2 text-sm text-destructive hover:bg-destructive-light cursor-pointer"
          onclick={handleLogout}
          onkeydown={(e) =>
            (e.key === "Enter" || e.key === " ") && handleLogout()}
          role="button"
          tabindex="0"
        >
          {$t.common?.logout}
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- [/DEF:TopNavbar:Component] -->
