<script lang="ts">
  import "../lib/iconify-offline";
  import { slide } from "svelte/transition";
  import Icon from "@iconify/svelte";
  import Search from "./Search.svelte";
  import { overlayOpen, overlayClose } from "../lib/overlay-store";
  import { t as tStatic, T } from "../lib/translations";
  import type { Translations } from "../lib/translations";

  type NavChild = { href: string; label: string };
  /** Flacher Link oder Navgroup (nur Label + Unterlinks, optional eigener Parent-href). */
  type NavItem =
    | NavChild
    | { label: string; href?: string; children: NavChild[] };

  function isNavGroup(
    item: NavItem,
  ): item is { label: string; href?: string; children: NavChild[] } {
    return (
      "children" in item &&
      Array.isArray(item.children) &&
      item.children.length > 0
    );
  }

  interface SocialLink {
    href: string;
    icon: string;
    label?: string;
  }

  let {
    links = [],
    socialLinks = [],
    logoUrl = null,
    logoSvgHtml = null,
    translations = {},
  }: {
    links?: NavItem[];
    socialLinks?: SocialLink[];
    logoUrl?: string | null;
    /** Inline-SVG-Markup (z. B. aus Layout per fetch); hat Vorrang vor logoUrl. */
    logoSvgHtml?: string | null;
    translations?: Translations | null;
  } = $props();

  function t(key: string) {
    return tStatic(translations ?? null, key);
  }
  let menuOpen = $state(false);
  let searchOpen = $state(false);

  function toggleMenu() {
    if (menuOpen) {
      menuOpen = false;
    } else {
      searchOpen = false;
      menuOpen = true;
    }
  }

  function closeMenu() {
    menuOpen = false;
  }

  function closeOverlays() {
    menuOpen = false;
    searchOpen = false;
  }

  $effect(() => {
    if (searchOpen) menuOpen = false;
  });
  $effect(() => {
    if (menuOpen) searchOpen = false;
  });
  $effect(() => {
    if (typeof window === "undefined") return;
    const open = menuOpen || searchOpen;
    overlayOpen.set(open);
    overlayClose.set(open ? closeOverlays : null);
  });
  $effect(() => {
    if (typeof window === "undefined") return;
    const open = menuOpen || searchOpen;
    if (open) window.scrollTo({ top: 0, behavior: "smooth" });
    document.documentElement.style.overflow = open ? "hidden" : "";
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.documentElement.style.overflow = "";
      document.body.style.overflow = "";
    };
  });
  $effect(() => {
    if (!menuOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") closeMenu();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  });
</script>

<header
  id="horizontal-navigation"
  class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-linear-to-br from-stein-50 from-0% via-wald-100/90 via-42% to-himmel-100 to-100%"
>
  <div class="flex items-center justify-between container-custom py-2">
    <a
      href="/"
      class="logo logo--color-cycle flex items-center origin-left font-bold text-lg tracking-wide hover:scale-[1.12] transition-transform duration-200 ease-out relative"
    >
      {#if logoSvgHtml && logoSvgHtml.trim() !== ""}
        <span
          class="logo-svg h-10 w-auto inline-flex items-center text-inherit [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-10"
          aria-hidden="true"
        >{@html logoSvgHtml}</span>
      {:else if logoUrl && logoUrl.trim() !== ""}
        <img src={logoUrl} alt="" class="h-10 w-auto object-contain" />
      {:else}
        <span>{t(T.site_name_fallback)}</span>
      {/if}
    </a>

    <!-- Desktop: horizontale Nav (ab lg) -->
    <nav
      class="hidden lg:flex items-center gap-4"
      aria-label={t(T.header_nav_aria)}
    >
      {#each links as item}
        {#if isNavGroup(item)}
          <details class="relative group">
            <summary
              class="cursor-pointer list-none text-xs tracking-wide hover:animate-pulse transition-all [&::-webkit-details-marker]:hidden"
            >
              {item.label}
            </summary>
            <ul
              class="absolute left-0 top-full z-30 mt-1 min-w-48 rounded-md border border-stein-200/80 bg-linear-to-br from-stein-50 to-himmel-50 py-1 shadow-lg"
            >
              {#if item.href}
                <li>
                  <a
                    href={item.href}
                    class="block px-3 py-2 text-xs tracking-wide hover:bg-stein-200/50"
                  >
                    {item.label}
                  </a>
                </li>
              {/if}
              {#each item.children as child}
                <li>
                  <a
                    href={child.href}
                    class="block px-3 py-2 text-xs tracking-wide hover:bg-stein-200/50"
                  >
                    {child.label}
                  </a>
                </li>
              {/each}
            </ul>
          </details>
        {:else}
          <a
            href={item.href}
            class=" hover:animate-pulse transition-all text-xs tracking-wide"
          >
            {item.label}
          </a>
        {/if}
      {/each}
      <div><span class="opacity-20">|</span></div>
      {#each socialLinks as social}
        <a
          href={social.href}
          target="_blank"
          rel="noopener noreferrer"
          class="p-1.5 -m-1.5 rounded-md transition-colors flex items-center justify-center"
          aria-label={social.label || t(T.header_social_aria)}
        >
          <Icon icon={social.icon} aria-hidden="true" />
        </a>
      {/each}
      <button
        type="button"
        class="p-2 -mr-2  rounded-md transition-colors flex items-center justify-center"
        aria-label={searchOpen
          ? t(T.header_search_close)
          : t(T.header_search_open)}
        aria-expanded={searchOpen}
        aria-controls="search-panel"
        onclick={() => (searchOpen = !searchOpen)}
      >
        {#if searchOpen}
          <Icon icon="mdi:close" class="text-error!" aria-hidden="true" />
        {:else}
          <Icon icon="mdi:magnify" aria-hidden="true" />
        {/if}
      </button>
    </nav>

    <!-- Mobile: Such- und Burger-Buttons (unter lg) -->
    <div class="lg:hidden flex items-center gap-1">
      <button
        type="button"
        class="p-2 rounded-md transition-colors flex items-center justify-center"
        aria-label={searchOpen
          ? t(T.header_search_close)
          : t(T.header_search_open)}
        aria-expanded={searchOpen}
        aria-controls="search-panel"
        onclick={() => (searchOpen = !searchOpen)}
      >
        {#if searchOpen}
          <Icon
            icon="mdi:close"
            class="text-2xl text-error!"
            aria-hidden="true"
          />
        {:else}
          <Icon
            icon="mdi:magnify"
            class="text-2xl"
            aria-hidden="true"
          />
        {/if}
      </button>
      <button
        type="button"
        class="p-2 -mr-2  hover:bg-stein-0/10 rounded-md transition-colors aria-expanded={menuOpen} flex items-center justify-center"
        aria-label={menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}
        aria-controls="mobile-nav"
        onclick={toggleMenu}
      >
        <span class="sr-only"
          >{menuOpen ? t(T.header_menu_close) : t(T.header_menu_open)}</span
        >
        {#if menuOpen}
          <Icon icon="mdi:close" class="text-2xl" aria-hidden="true" />
        {:else}
          <Icon icon="mdi:menu" class="text-2xl" aria-hidden="true" />
        {/if}
      </button>
    </div>
  </div>

  <Search bind:open={searchOpen} />

  <!-- Mobile: Dropdown-Menü (unter lg) -->
  {#if menuOpen}
    <div
      id="mobile-nav"
      class="lg:hidden border-t border-stein-0/10 bg-stein-900/98 backdrop-blur overflow-hidden"
      role="dialog"
      aria-label="Navigation"
      in:slide={{ duration: 200 }}
      out:slide={{ duration: 150 }}
    >
      <nav
        class="container-custom py-4 flex flex-col gap-1"
        aria-label={t(T.header_nav_aria)}
      >
        {#each links as item}
          {#if isNavGroup(item)}
            <span
              class="block py-2 px-2 text-xs font-medium uppercase tracking-wide text-stein-400"
            >
              {item.label}
            </span>
            <div class="ml-2 flex flex-col border-l border-stein-0/20 pl-3">
              {#if item.href}
                <a
                  href={item.href}
                  class="block py-2 px-2 text-sm text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
                  onclick={closeMenu}
                >
                  {item.label}
                </a>
              {/if}
              {#each item.children as child}
                <a
                  href={child.href}
                  class="block py-2 px-2 text-sm text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
                  onclick={closeMenu}
                >
                  {child.label}
                </a>
              {/each}
            </div>
          {:else}
            <a
              href={item.href}
              class="block py-3 px-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors text-sm"
              onclick={closeMenu}
            >
              {item.label}
            </a>
          {/if}
        {/each}
        {#if socialLinks.length > 0}
          <div
            class="flex flex-wrap gap-2 pt-2 mt-2 border-t border-stein-0/10"
          >
            {#each socialLinks as social}
              <a
                href={social.href}
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex p-2 text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 rounded-md transition-colors"
                aria-label={social.label || t(T.header_social_aria)}
                onclick={closeMenu}
              >
                <Icon
                  icon={social.icon}
                  class="text-[1.5rem]"
                  aria-hidden="true"
                />
              </a>
            {/each}
          </div>
        {/if}
      </nav>
    </div>
  {/if}
</header>

