<template>
  <v-app-bar class="top-nav" density="compact" flat height="64">
    <div class="top-nav-title">
      <div class="text-subtitle-2 quiet">{{ subtitle }}</div>
      <div class="text-h6 font-weight-bold">{{ title }}</div>
    </div>
    <v-spacer />
    <slot name="actions" />
    <v-menu v-model="profileMenu" :close-on-content-click="false" location="bottom end">
      <template #activator="{ props }">
        <v-btn v-bind="props" class="profile-trigger" variant="text">
          <v-avatar color="primary" size="32">
            <span class="text-caption font-weight-bold">{{ initials }}</span>
          </v-avatar>
          <span class="profile-name">{{ user?.name }}</span>
          <v-icon icon="mdi-chevron-down" size="18" />
        </v-btn>
      </template>
      <v-card width="340">
        <v-card-text>
          <div class="d-flex align-center ga-3 mb-4">
            <v-avatar color="primary" size="42">
              <span class="font-weight-bold">{{ initials }}</span>
            </v-avatar>
            <div>
              <div class="font-weight-bold">{{ user?.name }}</div>
              <div class="text-caption quiet">{{ user?.email }} · {{ user?.role }}</div>
            </div>
          </div>
          <v-select
            v-model="localPreferences.theme"
            :items="themeItems"
            item-title="title"
            item-value="value"
            label="Theme"
            prepend-inner-icon="mdi-theme-light-dark"
          />
          <v-alert v-if="status" class="mt-2" density="compact" type="success">{{ status }}</v-alert>
        </v-card-text>
        <v-card-actions>
          <v-btn variant="text" prepend-icon="mdi-logout" @click="$emit('logout')">Sign out</v-btn>
          <v-spacer />
          <v-btn color="primary" prepend-icon="mdi-content-save" :loading="saving" @click="save">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-menu>
  </v-app-bar>
</template>

<script>
export default {
  props: {
    preferences: { type: Object, required: true },
    saving: { type: Boolean, default: false },
    subtitle: { type: String, required: true },
    themeItems: { type: Array, required: true },
    title: { type: String, required: true },
    user: { type: Object, required: true }
  },
  emits: ['logout', 'save-preferences'],
  data() {
    return {
      localPreferences: { ...this.preferences },
      profileMenu: false,
      status: ''
    };
  },
  computed: {
    initials() {
      return String(this.user?.name || 'MA')
        .split(/\s+/)
        .filter(Boolean)
        .slice(0, 2)
        .map((part) => part[0]?.toUpperCase())
        .join('');
    }
  },
  watch: {
    preferences: {
      handler(value) {
        this.localPreferences = { ...value };
      },
      deep: true
    },
    'localPreferences.theme'(theme) {
      this.$emit('save-preferences', { ...this.localPreferences, theme }, { persist: false });
    }
  },
  methods: {
    async save() {
      await this.$emit('save-preferences', { ...this.localPreferences }, { persist: true });
      this.status = 'Preferences saved';
      window.setTimeout(() => {
        this.status = '';
      }, 1800);
    }
  }
};
</script>
