<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"
            :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 || '';
    },
    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 scoped>
.default-layout {
  display: flex;
  height: 100vh;
  background: #f0f2f5;
  overflow: hidden;
}

.default-layout__sidebar {
  width: 220px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  transition: width 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
  z-index: 100;
}

.default-layout__sidebar--collapsed {
  width: 56px;
}

.default-layout__sidebar--overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  z-index: 1000;
}

.default-layout__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.default-layout__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.default-layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.default-layout__header--minimal {
  justify-content: flex-start;
  padding: 8px 24px;
}

.default-layout__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.default-layout__header-right {
  display: flex;
  align-items: center;
}

.default-layout__toggle {
  border: 1px solid #d9d9d9;
  background: #fafafa;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.default-layout__toggle:hover {
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.default-layout__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.default-layout__page-icon {
  font-size: 20px;
  color: #1890ff;
}

.default-layout__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1d2129;
  line-height: 1.4;
}

.default-layout__version {
  font-size: 12px;
  color: #8c8c8c;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.default-layout__breadcrumb {
  padding: 8px 24px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #8c8c8c;
  flex-shrink: 0;
}

.default-layout__crumb {
  display: inline-flex;
  align-items: center;
}

.default-layout__crumb-link {
  color: #1890ff;
  cursor: pointer;
  transition: color 0.15s ease;
}

.default-layout__crumb-link:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.default-layout__crumb-text {
  color: #595959;
  font-weight: 500;
}

.default-layout__crumb-sep {
  margin: 0 8px;
  color: #bfbfbf;
  font-size: 11px;
}

.default-layout__content {
  flex: 1;
  padding: 16px 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

.default-layout__content::-webkit-scrollbar {
  width: 6px;
}

.default-layout__content::-webkit-scrollbar-track {
  background: transparent;
}

.default-layout__content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

.default-layout__content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.default-layout__body {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.default-layout__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  font-size: 13px;
  color: #8c8c8c;
  flex-shrink: 0;
}

.default-layout__footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.default-layout__footer-label {
  color: #8c8c8c;
}

.default-layout__footer-brand {
  font-weight: 600;
  color: #595959;
}

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

.page-leave-active {
  transition: opacity 0.15s ease;
}

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

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

/* Responsive */
@media (max-width: 768px) {
  .default-layout__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .default-layout__sidebar--collapsed {
    width: 0;
    border-right: none;
  }

  .default-layout__header {
    padding: 10px 16px;
  }

  .default-layout__breadcrumb {
    padding: 6px 16px;
  }

  .default-layout__content {
    padding: 12px 16px;
  }

  .default-layout__footer {
    padding: 8px 16px;
  }

  .default-layout__title {
    font-size: 16px;
  }
}
</style>
