<template>
  <header class="header-container">
    <nav class="header-nav">
      <!-- Left side: Brand + Hamburger -->
      <div class="flex items-center gap-4">
        <button
          class="hamburger-btn"
          :class="{ active: menuOpen }"
          @click="toggleMenu"
          aria-label="Toggle navigation menu"
        >
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
        </button>

        <router-link to="/dashboard" class="header-brand">
          <span>ROA2WEB</span>
        </router-link>
      </div>

      <!-- Right side: Period + Company + User -->
      <div class="header-actions">
        <PeriodSelectorMini
          v-if="selectedCompany"
          @period-changed="onPeriodChanged"
        />
        <CompanySelectorMini
          v-model="selectedCompany"
          @company-changed="onCompanyChanged"
        />
        <div class="user-menu-container mobile-hide">
          <div class="header-user" @click="toggleUserMenu">
            <i class="pi pi-user"></i>
            <span class="desktop-only">{{
              currentUser?.username || "User"
            }}</span>
            <i
              class="pi pi-chevron-down"
              :class="{ 'rotate-180': userMenuOpen }"
            ></i>
          </div>

          <!-- User Dropdown Menu -->
          <div v-if="userMenuOpen" class="user-dropdown">
            <div class="user-dropdown-header">
              <div class="user-info">
                <div class="user-name">
                  {{ currentUser?.username || "User" }}
                </div>
                <div class="user-email">{{ currentUser?.email || "" }}</div>
              </div>
            </div>
            <div class="user-dropdown-divider"></div>
            <button class="user-dropdown-item" @click="navigateToTelegram">
              <i class="pi pi-telegram"></i>
              <span>Telegram Bot</span>
            </button>
            <div class="user-dropdown-divider"></div>
            <button class="user-dropdown-item" @click="handleLogout">
              <i class="pi pi-sign-out"></i>
              <span>Logout</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- Overlay for user menu -->
    <div
      v-if="userMenuOpen"
      class="user-menu-overlay"
      @click="closeUserMenu"
    ></div>
  </header>
</template>

<script>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import CompanySelectorMini from "../dashboard/CompanySelectorMini.vue";
import PeriodSelectorMini from "../dashboard/PeriodSelectorMini.vue";
import { useCompanyStore } from "../../stores/companies";
import { useAuthStore } from "../../stores/auth";

export default {
  name: "DashboardHeader",
  components: {
    CompanySelectorMini,
    PeriodSelectorMini,
  },
  props: {
    menuOpen: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["menu-toggle", "company-changed", "period-changed"],
  setup(props, { emit }) {
    const router = useRouter();
    const companiesStore = useCompanyStore();
    const authStore = useAuthStore();

    const userMenuOpen = ref(false);

    const selectedCompany = computed({
      get: () => companiesStore.selectedCompany,
      set: (value) => companiesStore.setSelectedCompany(value),
    });

    const currentUser = computed(() => authStore.currentUser);

    const toggleMenu = () => {
      emit("menu-toggle");
    };

    const toggleUserMenu = () => {
      userMenuOpen.value = !userMenuOpen.value;
    };

    const closeUserMenu = () => {
      userMenuOpen.value = false;
    };

    const onCompanyChanged = (company) => {
      emit("company-changed", company);
    };

    const onPeriodChanged = (period) => {
      emit("period-changed", period);
    };

    const navigateToTelegram = async () => {
      try {
        closeUserMenu();
        await router.push("/telegram");
      } catch (error) {
        console.error("Navigation error:", error);
      }
    };

    const handleLogout = async () => {
      try {
        authStore.logout();
        closeUserMenu();
        await router.push("/login");
      } catch (error) {
        console.error("Logout error:", error);
      }
    };

    return {
      userMenuOpen,
      selectedCompany,
      currentUser,
      toggleMenu,
      toggleUserMenu,
      closeUserMenu,
      onCompanyChanged,
      onPeriodChanged,
      navigateToTelegram,
      handleLogout,
    };
  },
};
</script>

<style scoped>
/* Hamburger Button */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 10;
  transition: all 0.3s ease;
}

.hamburger-btn:hover {
  opacity: 0.7;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background-color: var(--color-primary, #4361ee);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* User Menu Container */
.user-menu-container {
  position: relative;
}

/* User Dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
}

.user-dropdown-header {
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.user-name {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.user-email {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.user-dropdown-divider {
  height: 1px;
  background: var(--color-border);
}

.user-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.user-dropdown-item:hover {
  background: var(--color-bg-secondary);
}

.user-dropdown-item:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-bg-secondary);
}

/* User Menu Overlay */
.user-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}

/* Chevron rotation animation */
.rotate-180 {
  transform: rotate(180deg);
  transition: transform var(--transition-fast);
}

.pi-chevron-down {
  transition: transform var(--transition-fast);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .user-dropdown {
    min-width: 200px;
  }

  .user-dropdown-header {
    padding: var(--space-sm);
  }

  .user-dropdown-item {
    padding: var(--space-sm);
  }

  /* Hide profile menu on mobile - use hamburger menu instead */
  .mobile-hide {
    display: none !important;
  }
}
</style>
