<template>
  <div class="au-dash">
    <div class="au-dash__grid">
      <div
        v-for="feature in listFeature"
        :key="feature.key"
        class="au-dash__col"
      >
        <router-link
          :to="feature.to"
          target="_blank"
          class="au-dash__card"
        >
          <div class="au-dash__media">
            <img
              :src="feature.thumbnail"
              :alt="feature.title"
              class="au-dash__thumb"
            >
            <div class="au-dash__overlay">
              <Icon
                type="ios-eye"
                size="32"
              />
            </div>
          </div>

          <div class="au-dash__body">
            <div class="au-dash__head">
              <span class="au-dash__icon">
                <Icon
                  :type="getIconType(feature.icon)"
                  size="18"
                />
              </span>
              <h3 class="au-dash__title">
                {{ feature.title }}
              </h3>
            </div>

            <p class="au-dash__note">
              {{ feature.note }}
            </p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ShopeeAutoDashboard',
  data() {
    return {
      listFeature: [
        {
          title: this.$t('SHOPEE_AUTO_REPLY_RATING'),
          key: 'ReplyRating',
          icon: 'fa fa-reply-all',
          note: this.$t('SHOPEE_AUTO_REPLY_RATING_NOTE'),
          to: '/shopee/seller/auto/reply-rating',
          thumbnail: '/images/screenshot/shopee-auto-reply-rating.jpg',
          show: true,
        },
        {
          title: this.$t('SHOPEE_AUTO_RATING_ORDER'),
          key: 'RatingOrder',
          icon: 'fa fa-star',
          note: this.$t('SHOPEE_AUTO_RATING_ORDER_NOTE'),
          to: '/shopee/seller/auto/rating-order',
          thumbnail: '/images/screenshot/shopee-auto-rating-order.jpg',
          show: true,
        },
        {
          title: this.$t('SHOPEE_AUTO_PUSH_PRODUCT'),
          key: 'PushProduct',
          icon: 'fa fa-upload',
          note: this.$t('SHOPEE_AUTO_PUSH_PRODUCT_NOTE'),
          to: '/shopee/seller/auto/push-product',
          thumbnail: '/images/screenshot/shopee-auto-push-product.jpg',
          show: this.getBetaMode,
        },
        {
          title: this.$t('SHOPEE_AUTO_SEND_MESSAGE'),
          key: 'SendMessage',
          icon: 'fa fa-paper-plane-o',
          note: this.$t('SHOPEE_AUTO_SEND_MESSAGE_NOTE'),
          to: '/shopee/seller/auto/send-message',
          thumbnail: '/images/screenshot/shopee-auto-send-message.jpg',
          show: true,
        },
      ].filter((item) => item.show),
    };
  },
  methods: {
    getIconType(faIcon) {
      const iconMap = {
        'fa fa-reply-all': 'ios-undo',
        'fa fa-star': 'ios-star',
        'fa fa-upload': 'ios-cloud-upload',
        'fa fa-paper-plane-o': 'ios-send',
      };
      return iconMap[faIcon] || 'ios-cog';
    },
  },
};
</script>

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

.au-dash {
  padding: 24px;

  &__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
  }

  &__col {
    display: flex;
    min-width: 0;
  }

  &__card {
    @include card(0);
    @include card-hover;

    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid $c-border;

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

  &__media {
    position: relative;
    overflow: hidden;
    background: $c-surface-alt;
  }

  &__thumb {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform $motion-base;
  }

  &__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $c-surface;
    background: rgba(31, 35, 41, 0.45);
    opacity: 0;
    transition: opacity $motion-fast;
  }

  &__card:hover &__thumb {
    transform: scale(1.04);
  }

  &__card:hover &__overlay {
    opacity: 1;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    min-width: 0;
  }

  &__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: $radius-item;
    color: $c-brand;
    background: $c-brand-tint;
  }

  &__title {
    @include ellipsis;

    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: $c-text-strong;
  }

  &__note {
    @include line-clamp(2);

    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: $c-text-muted;
  }
}

@media (max-width: 860px) {
  .au-dash {
    padding: 16px;

    &__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }
  }
}
</style>
