<script setup lang="ts">
import type { GameDataValue, GameDataGnb } from "#layers/types/api/gameData";

const gameDataStore = useGameDataStore();

const gameData = gameDataStore.gameData as GameDataValue;
const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
</script>

<template>
  <header
    class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
  >
    <LayoutStoveGnb />
    <div data-name="header-game" class="px-[40px] h-16 flex items-center">
      <!-- 로고 -->
      <div data-name="header-logo" class="mr-[40px]">
        <img
          :src="gameData?.gnb?.bi_path"
          :alt="gameData?.game_name"
          class="h-[30px]"
        />
      </div>

      <!-- 메인 네비게이션 -->
      <nav data-name="header-nav" class="flex items-center space-x-[32px]">
        <template v-if="gnbList">
          <div
            v-for="(gnbItem, key) in gnbList"
            :key="key"
            class="relative group"
          >
            <!-- Link 컴포넌트 사용 -->
            <MoleculesLink
              :to="gnbItem.url_path"
              :target="gnbItem.link_target"
              class="relative flex items-center h-[64px]"
            >
              {{ gnbItem.menu_name }}
              <AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
              <span
                class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
              ></span>
            </MoleculesLink>
            <div
              v-if="gnbItem.children"
              class="absolute top-full left-[-28px] min-w-[190px] pt-[4px]"
            >
              <ul
                class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
              >
                <li v-for="child in gnbItem.children" :key="child.menu_name">
                  <!-- Link 컴포넌트 사용 -->
                  <MoleculesLink
                    :to="child.url_path"
                    :target="child.link_target"
                    class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
                  >
                    {{ child.menu_name }}
                    <AtomsIconsLinkOut
                      v-if="child.link_target === '_blank'"
                      class="ml-1"
                    />
                  </MoleculesLink>
                </li>
              </ul>
            </div>
          </div>
        </template>

        <!-- 구분선 -->
        <div class="w-px h-4 bg-theme-foreground-reversal-30"></div>

        <!-- 이벤트 -->
        <a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
          <AtomsIconsStar />
          <span>이벤트</span>
          <AtomsIconsStar />
        </a>
      </nav>

      <!-- 오른쪽 영역 -->
      <div data-name="header-right" class="relative group ml-auto">
        <button
          class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
        >
          게임 시작
        </button>

        <!-- 2단계 드롭다운 메뉴 -->
        <div
          class="absolute top-full right-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
        >
          <div class="px-4 py-2">
            <a
              href="#"
              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
            >
              <div
                class="w-8 h-8 bg-orange-500 rounded flex items-center justify-center"
              >
                <span class="text-white font-bold text-sm">S</span>
              </div>
              <span>PC 버전 다운로드</span>
            </a>
          </div>
          <div class="px-4 py-2">
            <a
              href="#"
              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
            >
              <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"
                />
              </svg>
              <span>Google Store</span>
            </a>
          </div>
          <div class="px-4 py-2">
            <a
              href="#"
              class="flex items-center space-x-3 hover:bg-gray-700 transition-colors"
            >
              <svg class="w-8 h-8" viewBox="0 0 24 24" fill="currentColor">
                <path
                  d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"
                />
              </svg>
              <span>App Store</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
