<template>
  <header class="header-container" :class="headerClass">
    <nav class="header-nav">
      <!-- Left side: Hamburger + Brand -->
      <div class="header-left">
        <button
          class="hamburger-btn"
          :class="{ active: menuOpen }"
          @click="$emit('menu-toggle')"
          aria-label="Toggle navigation menu"
        >
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
          <span class="hamburger-line"></span>
        </button>
        <router-link :to="brandLink" class="header-brand">
          <slot name="brand">
            <span>{{ title }}</span>
          </slot>
        </router-link>
      </div>

      <!-- Right side: Period + Company + User -->
      <div class="header-actions">
        <PeriodSelector
          v-if="showPeriod && selectedCompany"
          :period-store="periodStore"
          :companies-store="companiesStore"
          variant="header"
          @period-changed="onPeriodChanged"
        />
        <CompanySelector
          v-if="showCompany"
          :companies-store="companiesStore"
          :show-fiscal-code="true"
          variant="header"
          @company-changed="onCompanyChanged"
        />
        <slot name="user-menu">
          <div v-if="showUser && currentUser" class="header-user" @click="$emit('user-menu-toggle')">
            <i class="pi pi-user"></i>
            <span class="desktop-only">{{ currentUser?.username || 'User' }}</span>
          </div>
        </slot>
      </div>
    </nav>
  </header>
</template>

<script>
import { computed } from "vue";
import CompanySelector from "../CompanySelector.vue";
import PeriodSelector from "../PeriodSelector.vue";

export default {
  name: "AppHeader",
  components: {
    CompanySelector,
    PeriodSelector,
  },
  props: {
    // Header title/brand text
    title: {
      type: String,
      default: "ROA2WEB",
    },
    // Router link for brand click
    brandLink: {
      type: String,
      default: "/",
    },
    // Additional CSS class for header (e.g., 'header-container--gradient')
    headerClass: {
      type: String,
      default: "",
    },
    // Is hamburger menu open?
    menuOpen: {
      type: Boolean,
      default: false,
    },
    // Companies store instance (required for selectors)
    companiesStore: {
      type: Object,
      required: true,
    },
    // Period store instance (required for period selector)
    periodStore: {
      type: Object,
      required: true,
    },
    // Current user object for display
    currentUser: {
      type: Object,
      default: null,
    },
    // Show/hide period selector
    showPeriod: {
      type: Boolean,
      default: true,
    },
    // Show/hide company selector
    showCompany: {
      type: Boolean,
      default: true,
    },
    // Show/hide user info
    showUser: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["menu-toggle", "company-changed", "period-changed", "user-menu-toggle"],
  setup(props, { emit }) {
    const selectedCompany = computed(() => props.companiesStore.selectedCompany);

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

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

    return {
      selectedCompany,
      onCompanyChanged,
      onPeriodChanged,
    };
  },
};
</script>
