<template>
  <div class="dashboard-container">
    <Row>
      <Col
        :span="16"
        :offset="4"
      >
        <Row :gutter="10">
          <Col
            v-for="feature in listFeature"
            :key="feature.key"
            :span="12"
            class="feature-col"
          >
            <Card
              class="feature-card"
              :bordered="false"
              shadow="hover"
            >
              <div class="feature-header">
                <Icon
                  :type="getIconType(feature.icon)"
                  size="20"
                  class="feature-icon"
                />
                <h3 class="feature-title">
                  {{ feature.title }}
                </h3>
              </div>

              <div class="feature-content">
                <router-link
                  :to="feature.to"
                  target="_blank"
                  class="feature-link"
                >
                  <div class="feature-image-container">
                    <img
                      :src="feature.thumbnail"
                      :alt="feature.title"
                      class="feature-image"
                    >
                    <div class="feature-overlay">
                      <Icon
                        type="ios-eye"
                        size="32"
                      />
                    </div>
                  </div>

                  <div class="feature-description">
                    <p class="feature-note">
                      {{ feature.note }}
                    </p>
                  </div>
                </router-link>
              </div>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </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 scoped>
  .header-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-icon {
    color: #ff9900;
  }

  .header-title {
    margin: 0;
    color: #ff9900;
    font-size: 24px;
    font-weight: 600;
  }

  .dashboard-container {
    padding: 24px 0;
  }

  .feature-col {
    margin-bottom: 24px;
  }

  .feature-card {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
  }

  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .feature-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
  }

  .feature-icon {
    color: #2d8cf0;
  }

  .feature-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .feature-content {
    height: calc(100% - 60px);
  }

  .feature-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
  }

  .feature-image-container {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .feature-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .feature-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .feature-link:hover .feature-overlay {
    opacity: 1;
  }

  .feature-link:hover .feature-image {
    transform: scale(1.05);
  }

  .feature-description {
    padding: 0 4px;
  }

  .feature-note {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    font-style: italic;
  }
</style>
