<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 + Theme + 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"
        />
        <!-- Theme Toggle Button -->
        <button
          class="theme-toggle-btn"
          @click="cycleTheme"
          :title="themeLabel"
          aria-label="Change theme"
        >
          <i :class="themeIcon"></i>
        </button>
        <!-- User menu slot (only rendered if showUser is true) -->
        <div v-if="showUser">
          <slot name="user-menu">
            <div v-if="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>
      </div>
    </nav>
  </header>
</template>

<script>
import { computed, ref, onMounted } 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);
    };

    // Theme toggle logic
    const currentTheme = ref(localStorage.getItem('user-theme') || 'auto');

    const themeIcon = computed(() => ({
      'auto': 'pi pi-desktop',
      'light': 'pi pi-sun',
      'dark': 'pi pi-moon'
    }[currentTheme.value]));

    const themeLabel = computed(() => ({
      'auto': 'Tema: Auto (sistem)',
      'light': 'Tema: Light',
      'dark': 'Tema: Dark'
    }[currentTheme.value]));

    const applyTheme = (theme) => {
      if (theme === 'auto') {
        document.documentElement.removeAttribute('data-theme');
        localStorage.removeItem('user-theme');
      } else {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('user-theme', theme);
      }
    };

    const cycleTheme = () => {
      const themes = ['auto', 'light', 'dark'];
      const idx = themes.indexOf(currentTheme.value);
      const next = themes[(idx + 1) % 3];
      currentTheme.value = next;
      applyTheme(next);
    };

    // Initialize theme on mount
    onMounted(() => {
      if (currentTheme.value !== 'auto') {
        applyTheme(currentTheme.value);
      }
    });

    return {
      selectedCompany,
      onCompanyChanged,
      onPeriodChanged,
      currentTheme,
      themeIcon,
      themeLabel,
      cycleTheme,
    };
  },
};
</script>
