<template>
  <div class="default-layout">
    <div
      class="default-layout__sidebar"
      :class="{
        'default-layout__sidebar--collapsed': !showMenu,
        'default-layout__sidebar--overlay': isMobile && showMenu,
      }"
    >
      <menu-side
        :collapsed="!showMenu"
        :has-notify="hasUnreadNotify"
      />
    </div>

    <div
      v-if="isMobile && showMenu"
      class="default-layout__overlay"
      @click="toggleMenu"
    />

    <div class="default-layout__main">
      <div
        v-if="showPageHeader"
        class="default-layout__header"
      >
        <div class="default-layout__header-left">
          <Button
            v-tooltip="$t('MENU_TOGGLE_SHOW_HIDE')"
            class="default-layout__toggle"
            size="small"
            @click="toggleMenu"
          >
            <i
              :class="showMenu ? 'fa fa-angle-double-left' : 'fa fa-angle-double-right'"
              aria-hidden="true"
            />
          </Button>

          <div class="default-layout__title-group">
            <i
              v-if="pageIcon"
              :class="pageIcon"
              class="default-layout__page-icon"
              aria-hidden="true"
            />
            <h1 class="default-layout__title">
              {{ pageTitle }}
            </h1>
          </div>
        </div>

        <div class="default-layout__header-right">
          <span class="default-layout__version">{{ configApp.verText }}</span>
        </div>
      </div>

      <div
        v-else
        class="default-layout__header default-layout__header--minimal"
      >
        <Button
          v-tooltip="$t('MENU_TOGGLE_SHOW_HIDE')"
          class="default-layout__toggle"
          size="small"
          @click="toggleMenu"
        >
          <i
            :class="showMenu ? 'fa fa-angle-double-left' : 'fa fa-angle-double-right'"
            aria-hidden="true"
          />
        </Button>
      </div>

      <div
        v-if="breadcrumbs.length > 1"
        class="default-layout__breadcrumb"
      >
        <span
          v-for="(crumb, index) in breadcrumbs"
          :key="index"
          class="default-layout__crumb"
        >
          <span
            v-if="crumb.to"
            class="default-layout__crumb-link"
            @click="$router.push(crumb.to)"
          >{{ crumb.label }}</span>
          <span
            v-else
            class="default-layout__crumb-text"
          >{{ crumb.label }}</span>
          <i
            v-if="index < breadcrumbs.length - 1"
            class="fa fa-angle-right default-layout__crumb-sep"
            aria-hidden="true"
          />
        </span>
      </div>

      <div class="default-layout__content">
        <notify-app from="single" />
        <transition
          name="page"
          mode="out-in"
        >
          <div
            :key="$route.path"
            class="default-layout__body"
            :class="{ 'default-layout__body--bare': bareBody }"
            :style="bodyContainer"
          >
            <router-view />
          </div>
        </transition>
      </div>

      <div class="default-layout__footer">
        <div class="default-layout__footer-left">
          <span class="default-layout__footer-label">{{ $t('APP_PROFILE_ID') }}</span>
          <Input
            size="small"
            :value="getProfileId"
            style="width: 140px"
            readonly
          />
        </div>
        <span class="default-layout__footer-brand">{{ configApp.title }}</span>
      </div>
    </div>

    <banner-popup />
  </div>
</template>

<script>
import MenuSide from '@/vue/components/Popup/MenuSide.vue';
import NotifyApp from '@/vue/components/Plugin/NotifyApp.vue';
import BannerPopup from '@/vue/components/Widget/BannerPopup.vue';
import { appSetting } from '@/plugins/setting';

const MOBILE_BREAKPOINT = 768;

const BREADCRUMB_MAP = {
  shopee: 'Shopee',
  tiktok: 'TikTok',
  lazada: 'Lazada',
  seller: 'Seller',
  spy: 'Spy',
  product: 'Product',
  auto: 'Auto',
  flashsale: 'Flash Sale',
  ads: 'Ads',
  keyword: 'Keyword',
  printer: 'Printer',
  setting: 'Setting',
  login: 'Login',
  market: 'Market',
  dashboard: 'Dashboard',
  clone: 'Clone',
  create: 'Create',
  config: 'Config',
  review: 'Review',
  manager: 'Manager',
  shop: 'Shop',
  info: 'Info',
  log: 'Log',
  live: 'Live',
  index: 'Index',
  'send-message': 'Send Message',
  'reply-rating': 'Reply Rating',
  'rating-order': 'Rating Order',
  'push-product': 'Push Product',
};

export default {
  name: 'DefaultLayout',
  components: {
    'menu-side': MenuSide,
    NotifyApp,
    'banner-popup': BannerPopup,
  },
  data() {
    return {
      showMenu: !appSetting.toggleMenu.get(),
      isMobile: window.innerWidth < MOBILE_BREAKPOINT,
    };
  },
  created() {
    if (this.isMobile) {
      this.showMenu = false;
    }
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu;
      appSetting.toggleMenu.set(!this.showMenu);
    },
    onResize() {
      const wasMobile = this.isMobile;
      this.isMobile = window.innerWidth < MOBILE_BREAKPOINT;

      if (!wasMobile && this.isMobile) {
        this.showMenu = false;
      }
    },
  },
  computed: {
    bodyContainer() {
      return {
        minHeight: `${window.innerHeight - 200}px`,
      };
    },
    pageTitle() {
      const pageTitleKey = this.$route.meta.pageTitleKey;

      if (!pageTitleKey) {
        return '';
      }

      return this.$t(pageTitleKey);
    },
    pageIcon() {
      return this.$route.meta.pageIcon || '';
    },
    bareBody() {
      return this.$route.meta.bareBody === true;
    },
    showPageHeader() {
      if (this.$route.meta.showPageHeader === false) {
        return false;
      }

      return !!this.pageTitle;
    },
    hasUnreadNotify() {
      const notify = this.getNotifyApp;

      if (!notify || !notify.content || !notify.title || !notify.is_show) {
        return false;
      }

      const readId = appSetting.readNotifyId.get();
      return readId !== notify.uuid;
    },
    breadcrumbs() {
      const path = this.$route.path;
      const segments = path.split('/').filter(Boolean);
      const crumbs = [];
      let accumulated = '';

      for (let i = 0; i < segments.length; i++) {
        const seg = segments[i];

        if (/^\d+$/.test(seg) || /^[0-9a-f-]{36}$/.test(seg)) {
          // eslint-disable-next-line no-continue
          continue;
        }

        accumulated += `/${seg}`;
        const label = BREADCRUMB_MAP[seg] || seg.charAt(0).toUpperCase() + seg.slice(1);
        const isLast = i === segments.length - 1;

        crumbs.push({
          label,
          to: isLast ? null : accumulated,
        });
      }

      return crumbs;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.default-layout {
  display: flex;
  height: 100vh;
  background: $c-surface-alt;
  overflow: hidden;

  &__sidebar {
    width: 220px;
    height: 100vh;
    background: $c-surface;
    border-right: 1px solid $c-border;
    transition: width 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 100;

    &--collapsed {
      width: 56px;
    }

    &--overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 220px;
      z-index: 1000;
      box-shadow: $shadow-card-lg;
    }
  }

  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.32);
    z-index: 999;
  }

  &__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: $c-surface;
    border-bottom: 1px solid $c-border;
    flex-shrink: 0;

    &--minimal {
      justify-content: flex-start;
      padding: 8px 24px;
    }
  }

  &__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  &__header-right {
    display: flex;
    align-items: center;
  }

  &__toggle.ivu-btn {
    border: 1px solid $c-border-input;
    background: $c-surface-soft;
    color: $c-text-muted;
    border-radius: $radius-item;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color $motion-fast, border-color $motion-fast, color $motion-fast;

    &:hover {
      background: $c-brand-tint;
      border-color: $c-brand;
      color: $c-brand;
    }
  }

  &__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  &__page-icon {
    font-size: 20px;
    color: $c-brand;
    flex-shrink: 0;
  }

  &__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: $c-text-strong;
    line-height: 1.4;
    @include ellipsis;
  }

  &__version {
    font-size: 12px;
    font-weight: 500;
    color: $c-text-muted;
    background: $c-surface-alt;
    padding: 3px 10px;
    border-radius: $radius-pill;
  }

  &__breadcrumb {
    padding: 8px 24px;
    background: $c-surface-soft;
    border-bottom: 1px solid $c-border;
    font-size: 13px;
    color: $c-text-muted;
    flex-shrink: 0;
  }

  &__crumb {
    display: inline-flex;
    align-items: center;
  }

  &__crumb-link {
    color: $c-link;
    cursor: pointer;
    transition: color $motion-fast;

    &:hover {
      color: $c-link-hover;
      text-decoration: underline;
    }
  }

  &__crumb-text {
    color: $c-text;
    font-weight: 600;
  }

  &__crumb-sep {
    margin: 0 8px;
    color: $c-text-placeholder;
    font-size: 11px;
  }

  &__content {
    flex: 1;
    padding: 16px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    @include scrollbar;
  }

  &__body {
    @include card;

    &--bare {
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: $c-surface;
    border-top: 1px solid $c-border;
    font-size: 13px;
    color: $c-text-muted;
    flex-shrink: 0;
  }

  &__footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__footer-label {
    color: $c-text-muted;
  }

  &__footer-brand {
    font-weight: 600;
    color: $c-text;
  }
}

.page-enter-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-leave-active {
  transition: opacity $motion-fast;
}

.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

.page-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  .default-layout {
    &__sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;

      &--collapsed {
        width: 0;
        border-right: none;
      }
    }

    &__header {
      padding: 10px 16px;
    }

    &__breadcrumb {
      padding: 6px 16px;
    }

    &__content {
      padding: 12px 16px;
    }

    &__footer {
      padding: 8px 16px;
    }

    &__title {
      font-size: 16px;
    }
  }
}
</style>
