---
import daytonaLogo from '@assets/icons/daytona-logo.svg?raw'
import searchIcon from '@assets/icons/search.svg?raw'
import packageIcon from '@assets/sidebar/package.svg?raw'
import serverIcon from '@assets/sidebar/server.svg?raw'
import terminalIcon from '@assets/sidebar/terminal.svg?raw'
import Search from '@components/Search'
import DocSearchSidepanel from '@components/DocSearchSidepanel'
import Version from '@components/Version.astro'
import gtconfig from '../../gt.config.json'
import '../styles/components/search.scss'
import { SideNavLinks } from './menu/SideNavLinks'
import { getHeaderActiveState } from '@utils/navigation'

const PUBLIC_WEB_URL = (
  import.meta.env.PUBLIC_WEB_URL || 'https://daytona.io'
).replace(/\/$/, '')

const lang = Astro.props.lang ?? Astro.locals.starlightRoute.lang

// Disable search for translations (for now)
const algoliaEnabled =
  import.meta.env.PUBLIC_ALGOLIA_APP_ID &&
  import.meta.env.PUBLIC_ALGOLIA_API_KEY &&
  lang === gtconfig.defaultLocale

// Show search in production when enabled, or always in dev mode
const showSearch = algoliaEnabled || import.meta.env.DEV

// DocSearch sidepanel (Ask AI) - separate from SiteSearch
const docSearchEnabled =
  import.meta.env.PUBLIC_DOCSEARCH_APP_ID &&
  import.meta.env.PUBLIC_DOCSEARCH_API_KEY &&
  import.meta.env.PUBLIC_DOCSEARCH_INDEX_NAME &&
  lang === gtconfig.defaultLocale

const showDocSearch = docSearchEnabled || import.meta.env.DEV

const {
  isTypescriptSdkActive,
  isPythonSdkActive,
  isRubySdkActive,
  isGoSdkActive,
  isJavaSdkActive,
  isApiActive,
  isCliActive,
  isReferencesActive,
  isGuidesActive,
} = getHeaderActiveState(import.meta.env.BASE_URL, Astro.url.pathname)
---

<header class="navbar">
  <nav class="desktop-only">
    <div class="logo-divider">
      <a
        href={import.meta.env.BASE_URL}
        aria-label="Daytona"
        class="daytona-logo"
      >
        <Fragment set:html={daytonaLogo} />
      </a>
    </div>
    <div class="navbar-links">
      <div class="dropdown">
        <span class:list={['dropdown-trigger', { active: isReferencesActive }]}>
          {Astro.locals.t('header.references' as any)}
          <svg
            class="chevron"
            width="10"
            height="6"
            viewBox="0 0 10 6"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M1 1L5 5L9 1"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
        <div class="dropdown-menu">
          <a
            href={`${import.meta.env.BASE_URL}/en/typescript-sdk`}
            class:list={[{ active: isTypescriptSdkActive }]}
          >
            <Fragment set:html={packageIcon} />
            {Astro.locals.t('sidebarconfig.tsSdkReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/python-sdk`}
            class:list={[{ active: isPythonSdkActive }]}
          >
            <Fragment set:html={packageIcon} />
            {Astro.locals.t('sidebarconfig.pythonSdkReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/ruby-sdk`}
            class:list={[{ active: isRubySdkActive }]}
          >
            <Fragment set:html={packageIcon} />
            {Astro.locals.t('sidebarconfig.rubySdkReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/go-sdk`}
            class:list={[{ active: isGoSdkActive }]}
          >
            <Fragment set:html={packageIcon} />
            {Astro.locals.t('sidebarconfig.goSdkReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/java-sdk`}
            class:list={[{ active: isJavaSdkActive }]}
          >
            <Fragment set:html={packageIcon} />
            {Astro.locals.t('sidebarconfig.javaSdkReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/tools/api/#daytona/`}
            class:list={[{ active: isApiActive }]}
          >
            <Fragment set:html={serverIcon} />
            {Astro.locals.t('sidebarconfig.apiReference' as any)}
          </a>
          <a
            href={`${import.meta.env.BASE_URL}/en/tools/cli`}
            class:list={[{ active: isCliActive }]}
          >
            <Fragment set:html={terminalIcon} />
            {Astro.locals.t('sidebarconfig.cliReference' as any)}
          </a>
        </div>
      </div>
      <a href={`/docs/en/guides`} class:list={[{ active: isGuidesActive }]}
        >{Astro.locals.t('header.guides' as any)}
      </a>
      <a href="https://www.daytona.io/changelog"
        >{Astro.locals.t('header.changelog' as any)}
      </a>
    </div>
    <div class="nav__items_side_menu">
      <a href={import.meta.env.BASE_URL} class="dotfiles-logo">v<Version /> </a>
      {
        showSearch && (
          <button id="search-icon" class="search-click search-click-desktop">
            <div class="search-label">
              <Fragment set:html={searchIcon} />
              Search
            </div>
            <kbd>⌘ K</kbd>
          </button>
        )
      }
      <SideNavLinks client:load locale={lang} />
    </div>
  </nav>
  <nav class="mobile-navigation">
    <div class="blur-section">
      <a
        href={import.meta.env.BASE_URL}
        aria-label="Daytona"
        class="daytona-logo blur-section"
      >
        <Fragment set:html={daytonaLogo} />
      </a>
    </div>
    {
      showSearch && (
        <p id="search-icon-mobile" class="search-click">
          <Fragment set:html={searchIcon} />
        </p>
      )
    }
  </nav>
</header>

{
  // Skip search for translations (for now)
  showSearch && <Search client:load locale={lang} />
}

{
  // DocSearch sidepanel with Ask AI
  showDocSearch && <DocSearchSidepanel client:only="react" />
}

<style>
  .navbar-links {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .navbar-links > a,
  .navbar-links .dropdown-trigger {
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Berkeley Mono', monospace;
    color: var(--primary-text-color);
    transition: all 0.2s;
    font-weight: 400;
    letter-spacing: -0.01rem;
    cursor: pointer;
    &:hover {
      color: var(--hover-color);
    }
  }

  .navbar-links .dropdown-trigger.active,
  .navbar-links > a.active {
    color: var(--hover-color);
  }

  .dropdown {
    position: relative;
  }

  .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .dropdown-trigger .chevron {
    width: 8px;
    height: 8px;
    transition: transform 0.3s;
  }

  .dropdown:hover .dropdown-trigger .chevron {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    min-width: 200px;
    background-color: var(--block-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 100;
    margin-top: 8px;
  }

  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-family: 'Berkeley Mono', monospace;
    color: var(--primary-text-color);
    text-transform: none;
    transition: all 0.15s;
    &:hover {
      background-color: var(--hover-bg-color, rgba(255, 255, 255, 0.05));
      color: var(--hover-color);
    }
    &.active {
      background-color: var(--hover-bg-color, rgba(255, 255, 255, 0.05));
      color: var(--hover-color);
    }
  }

  .dropdown-menu a :global(svg) {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .dropdown-menu a :global(svg path) {
    fill: currentColor;
  }

  .search-click-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--secondary-text-color);
    cursor: pointer;
    gap: 42px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 3px 4px 3px 8px;
    transition: all 0.15s;
    background-color: transparent;
    max-width: 250px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .search-click:hover {
    color: var(--primary-text-color);
    background-color: var(--block-bg-color);
  }

  .search-label {
    display: flex;
    align-items: center;
    gap: 4px;

    svg {
      height: 16px;
      width: 16px;
    }
  }

  .search-click kbd {
    background-color: var(--block-bg-color);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 12px;
    font-weight: 500;
  }
</style>
