<template>
  <div class="sm-content-block">
    <div
      v-for="(item, index) in listContent"
      :key="index"
      class="sm-content-block__item"
    >
      <div class="sm-content-block__item-header">
        <div class="sm-content-block__item-type">
          <Icon :type="getContentTypeIcon(item.type)" />
          <span>{{ getContentTypeLabel(item.type) }}</span>
        </div>
        <Button
          v-if="isAllowDeleteContent"
          type="text"
          size="small"
          class="sm-content-block__item-delete"
          @click="removeContentItem(index)"
        >
          <Icon type="ios-close" />
        </Button>
      </div>

      <div class="sm-content-block__item-body">
        <Input
          v-if="item.type === 'text'"
          v-model="item.text"
          type="textarea"
          :rows="2"
          :placeholder="$t('SEND_MESSAGE_CONTENT_TEXT_PLACEHOLDER')"
          :disabled="disabled"
        />

        <div
          v-else-if="item.type === 'sticker'"
          class="sm-sticker"
        >
          <div
            v-if="getSelectedSticker(item)"
            class="sm-sticker__selected"
            @click="toggleStickerGrid(index)"
          >
            <img
              :src="getSelectedSticker(item).url"
              class="sm-sticker__selected-img"
            >
            <span class="sm-sticker__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="sm-sticker__placeholder"
            @click="toggleStickerGrid(index)"
          >
            <Icon
              type="ios-happy-outline"
              size="24"
            />
            <span>{{ $t('SEND_MESSAGE_STICKER_SELECT_BTN') }}</span>
          </div>
          <div
            v-if="isStickerGridOpen(index)"
            class="sm-sticker__dropdown"
          >
            <div class="sm-sticker__grid">
              <div
                v-for="option in stickerOptions"
                :key="option.key"
                class="sm-sticker__option"
                :class="{ 'is-active': isStickerSelected(item, option) }"
                @click="selectSticker(item, option, index)"
              >
                <img :src="option.url">
              </div>
            </div>
          </div>
        </div>

        <div
          v-else-if="item.type === 'voucher'"
          class="sm-voucher"
        >
          <div
            v-if="item.payload && item.payload.voucherId"
            class="sm-voucher__selected"
            @click="toggleVoucherGrid(index)"
          >
            <div class="sm-voucher__icon">
              <Icon type="ios-pricetag" />
            </div>
            <div class="sm-voucher__content">
              <span class="sm-voucher__code">{{ item.payload.voucherCode }}</span>
              <span class="sm-voucher__name">{{ item.payload.voucherName }}</span>
            </div>
            <span class="sm-voucher__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="sm-voucher__placeholder"
            @click="toggleVoucherGrid(index)"
          >
            <Icon
              type="ios-pricetag-outline"
              size="24"
            />
            <span>{{ $t('SEND_MESSAGE_VOUCHER_SELECT_BTN') }}</span>
          </div>
          <div
            v-if="isVoucherGridOpen(index)"
            class="sm-voucher__dropdown"
          >
            <div
              v-if="voucherLoading"
              class="sm-voucher__state"
            >
              <Spin size="small" />
              <span>{{ $t('LOADING_TEXT') }}</span>
            </div>
            <div
              v-else-if="voucherList.length === 0"
              class="sm-voucher__state"
            >
              {{ $t('SEND_MESSAGE_VOUCHER_EMPTY') }}
            </div>
            <div
              v-else
              class="sm-voucher__list"
            >
              <div
                v-for="voucher in voucherList"
                :key="voucher.voucher_id"
                class="sm-voucher__option"
                :class="{ 'is-active': isVoucherSelected(item, voucher) }"
                @click="selectVoucher(item, voucher, index)"
              >
                <div class="sm-voucher__option-icon">
                  <Icon type="ios-pricetag" />
                </div>
                <div class="sm-voucher__option-content">
                  <span class="sm-voucher__option-code">{{ voucher.voucher_code }}</span>
                  <span class="sm-voucher__option-name">{{ voucher.voucher_name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-else-if="item.type === 'product'"
          class="sm-product"
        >
          <div
            v-if="item.payload && item.payload.productId"
            class="sm-product__selected"
            @click="toggleProductGrid(index)"
          >
            <img
              v-if="item.payload.productImage"
              :src="item.payload.productImage"
              class="sm-product__img"
            >
            <div
              v-else
              class="sm-product__icon"
            >
              <Icon type="ios-cube" />
            </div>
            <div class="sm-product__content">
              <span class="sm-product__name">{{ item.payload.productName }}</span>
              <span class="sm-product__id">ID: {{ item.payload.productId }}</span>
            </div>
            <span class="sm-product__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="sm-product__placeholder"
            @click="toggleProductGrid(index)"
          >
            <Icon
              type="ios-cube-outline"
              size="24"
            />
            <span>{{ $t('SEND_MESSAGE_PRODUCT_SELECT_PLACEHOLDER') }}</span>
          </div>
          <div
            v-if="isProductGridOpen(index)"
            class="sm-product__dropdown"
          >
            <div class="sm-product__search">
              <Input
                :value="getProductSearchQuery(index)"
                :placeholder="$t('SEND_MESSAGE_PRODUCT_SEARCH_PLACEHOLDER')"
                prefix="ios-search"
                size="small"
                @on-change="(e) => onSearchProduct(e.target.value, index)"
              />
            </div>
            <div
              v-if="getProductSearchState(index).loading"
              class="sm-product__state"
            >
              <Spin size="small" />
              <span>{{ $t('SEND_MESSAGE_PRODUCT_SEARCHING') }}</span>
            </div>
            <div
              v-else-if="getProductSearchList(index).length === 0"
              class="sm-product__state"
            >
              <span v-if="getProductSearchQuery(index)">
                {{ $t('SEND_MESSAGE_PRODUCT_SEARCH_EMPTY') }}
              </span>
              <span v-else>
                {{ $t('SEND_MESSAGE_PRODUCT_SEARCH_PLACEHOLDER') }}
              </span>
            </div>
            <div
              v-else
              class="sm-product__list"
            >
              <div
                v-for="product in getProductSearchList(index)"
                :key="product.id"
                class="sm-product__option"
                :class="{ 'is-active': isProductSelected(item, product) }"
                @click="selectProduct(item, product, index)"
              >
                <img
                  v-if="product.cover_image"
                  :src="getProductImageUrl(product.cover_image)"
                  class="sm-product__option-img"
                >
                <div
                  v-else
                  class="sm-product__option-icon"
                >
                  <Icon type="ios-cube" />
                </div>
                <div class="sm-product__option-content">
                  <span class="sm-product__option-name">{{ product.name }}</span>
                  <span class="sm-product__option-id">ID: {{ product.id }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-else-if="item.type === 'image'"
          class="sm-image"
        >
          <div
            v-if="getSelectedImage(item)"
            class="sm-image__selected"
          >
            <img
              :src="getSelectedImage(item)"
              class="sm-image__img"
            >
            <div
              v-if="isImageUploading(index)"
              class="sm-image__loading"
            >
              <Spin />
            </div>
            <div
              v-else
              class="sm-image__actions"
            >
              <Icon
                v-if="item.payload && item.payload.imageId"
                type="ios-checkmark-circle"
                class="sm-image__check"
              />
              <Icon
                type="ios-trash"
                class="sm-image__remove"
                @click="removeImage(item)"
              />
            </div>
          </div>
          <Upload
            v-else
            action=""
            accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
            :before-upload="(file) => handleImageUpload(file, item)"
            :show-upload-list="false"
            :disabled="disabled || isImageUploading(index)"
          >
            <div class="sm-image__placeholder">
              <Icon
                type="ios-cloud-upload-outline"
                size="28"
              />
              <span>{{ $t('SEND_MESSAGE_IMAGE_UPLOAD_BTN') }}</span>
            </div>
          </Upload>
        </div>

        <div
          v-else
          class="sm-content-block__unsupported"
        >
          {{ $t('SEND_MESSAGE_CONTENT_UNSUPPORTED', { type: item.type }) }}
        </div>
      </div>
    </div>

    <Dropdown
      :disabled="disabled"
      trigger="click"
      @on-click="addContentItem"
    >
      <div class="sm-content-block__add">
        <Icon type="ios-add" />
        <span>{{ $t('SEND_MESSAGE_ADD_CONTENT_ITEM') }}</span>
      </div>
      <DropdownMenu slot="list">
        <DropdownItem
          v-for="option in contentTypeOptions"
          :key="option.value"
          :name="option.value"
        >
          <div class="sm-content-block__add-option">
            <Icon :type="option.icon" />
            <span>{{ option.label }}</span>
          </div>
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import stickerList from '@/data/shopee/sticker.json';
import * as shopeeRender from '@/adapter/shopee/render/index';
import { shopeeSellerSearchProductList } from '@/api/shopee/seller/product/list';
import { getListVoucherAll } from '@/api/shopee/seller/marketing';
import { uploadImageWebchat } from '@/api/shopee/seller/chat';

export default {
  name: 'SendMessageContentEditor',

  props: {
    value: {
      type: Array,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      stickerGridOpen: {},
      voucherGridOpen: {},
      productGridOpen: {},
      uploadingImage: {},
      productSearch: {},
      voucherList: [],
      voucherLoading: false,
    };
  },

  computed: {
    listContent: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },

    isAllowDeleteContent() {
      return this.listContent.length > 1 && !this.disabled;
    },

    contentTypeOptions() {
      return [
        {
          value: 'text',
          label: this.$t('SEND_MESSAGE_CONTENT_TYPE.text'),
          icon: 'ios-text',
        },
        {
          value: 'sticker',
          label: this.$t('SEND_MESSAGE_CONTENT_TYPE.sticker'),
          icon: 'ios-happy-outline',
        },
        {
          value: 'voucher',
          label: this.$t('SEND_MESSAGE_CONTENT_TYPE.voucher'),
          icon: 'ios-pricetag-outline',
        },
        {
          value: 'product',
          label: this.$t('SEND_MESSAGE_CONTENT_TYPE.product'),
          icon: 'ios-cube-outline',
        },
        {
          value: 'image',
          label: this.$t('SEND_MESSAGE_CONTENT_TYPE.image'),
          icon: 'ios-image-outline',
        },
      ];
    },

    stickerOptions() {
      return stickerList.map((item, index) => {
        const names = Array.isArray(item.name) ? item.name : [];
        const primaryName = names[1] || names[0] || `sticker ${index + 1}`;
        const packageId = item.package;
        const stickerId = item.sid;
        const url = `https://deo.shopeemobile.com/shopee/shopee-sticker-live-vn/packs/${packageId}/${stickerId}@1x.png`;

        return {
          key: `${packageId}:${stickerId}`,
          value: {
            stickerId,
            stickerPackage: packageId,
          },
          label: primaryName,
          url,
        };
      });
    },
  },

  methods: {
    getContentTypeIcon(type) {
      const icons = {
        text: 'ios-text',
        sticker: 'ios-happy-outline',
        voucher: 'ios-pricetag-outline',
        product: 'ios-cube-outline',
        image: 'ios-image-outline',
      };

      return icons[type] || 'ios-help-circle-outline';
    },

    getContentTypeLabel(type) {
      return this.$t(`SEND_MESSAGE_CONTENT_TYPE.${type}`) || type;
    },

    isStickerGridOpen(index) {
      return !!this.stickerGridOpen[index];
    },

    toggleStickerGrid(index) {
      this.$set(this.stickerGridOpen, index, !this.stickerGridOpen[index]);
    },

    getStickerKey(item) {
      if (
        !item
        || !item.payload
        || !item.payload.stickerId
        || !item.payload.stickerPackage
      ) {
        return null;
      }

      return {
        stickerId: item.payload.stickerId,
        stickerPackage: item.payload.stickerPackage,
      };
    },

    getSelectedSticker(item) {
      const stickerKey = this.getStickerKey(item);

      if (!stickerKey) {
        return null;
      }

      return this.stickerOptions.find((option) => {
        return (
          option.value.stickerId === stickerKey.stickerId
          && option.value.stickerPackage === stickerKey.stickerPackage
        );
      });
    },

    isStickerSelected(item, option) {
      const stickerKey = this.getStickerKey(item);

      if (!stickerKey) {
        return false;
      }

      return (
        stickerKey.stickerId === option.value.stickerId
        && stickerKey.stickerPackage === option.value.stickerPackage
      );
    },

    selectSticker(item, option, index) {
      if (this.disabled) {
        return;
      }

      if (!item.payload) {
        this.$set(item, 'payload', {});
      }

      this.$set(item.payload, 'stickerId', option.value.stickerId);
      this.$set(item.payload, 'stickerPackage', option.value.stickerPackage);

      this.toggleStickerGrid(index);
      this.emitChange();
    },

    async handleImageUpload(file, item) {
      if (this.disabled) {
        return false;
      }

      if (!file) {
        return false;
      }

      const maxSize = 5 * 1024 * 1024;

      if (file.size > maxSize) {
        this.$Message.error(this.$t('SEND_MESSAGE_IMAGE_SIZE_ERROR'));
        return false;
      }

      const itemIndex = this.listContent.indexOf(item);

      this.$set(this.uploadingImage, itemIndex, true);

      if (!item.payload) {
        this.$set(item, 'payload', {});
      }

      this.$set(item.payload, 'imageUrl', URL.createObjectURL(file));

      try {
        const imageId = await uploadImageWebchat(file);

        this.$set(item.payload, 'imageId', imageId);
        this.$set(item.payload, 'imageUrl', shopeeRender.imageUrl(imageId));

        this.$Message.success(this.$t('SEND_MESSAGE_IMAGE_UPLOAD_SUCCESS'));
        this.emitChange();
      } catch (error) {
        this.$set(item.payload, 'imageUrl', null);
        this.$Message.error(this.$t('SEND_MESSAGE_IMAGE_UPLOAD_ERROR'));
        this.loggerApi.error('Handle image upload error:', error);
      } finally {
        this.$set(this.uploadingImage, itemIndex, false);
      }

      return false;
    },

    isImageUploading(index) {
      return !!this.uploadingImage[index];
    },

    getSelectedImage(item) {
      if (!item || !item.payload) {
        return null;
      }

      return item.payload.imageUrl || null;
    },

    removeImage(item) {
      if (this.disabled) {
        return;
      }

      if (!item.payload) {
        return;
      }

      if (item.payload.imageUrl) {
        URL.revokeObjectURL(item.payload.imageUrl);
      }

      this.$set(item.payload, 'imageUrl', null);
      this.$set(item.payload, 'imageId', null);
      this.emitChange();
    },

    addContentItem(type) {
      this.listContent.push({
        text: '',
        payload: {},
        type: type || 'text',
      });

      this.emitChange();
    },

    removeContentItem(index) {
      if (this.listContent.length > 1) {
        this.listContent.splice(index, 1);
        this.emitChange();
      }
    },

    getProductSearchState(index) {
      if (!this.productSearch[index]) {
        this.$set(this.productSearch, index, { query: '', list: [], loading: false });
      }

      return this.productSearch[index];
    },

    getProductSearchQuery(index) {
      return this.getProductSearchState(index).query;
    },

    getProductSearchList(index) {
      return this.getProductSearchState(index).list;
    },

    isProductGridOpen(index) {
      return !!this.productGridOpen[index];
    },

    toggleProductGrid(index) {
      this.$set(this.productGridOpen, index, !this.productGridOpen[index]);
    },

    isProductSelected(item, product) {
      if (
        !item
        || !item.payload
        || !item.payload.productId
      ) {
        return false;
      }

      return item.payload.productId === product.id;
    },

    async onSearchProduct(query, index) {
      const state = this.getProductSearchState(index);

      this.$set(state, 'query', query);

      if (!query || query.length < 2) {
        this.$set(state, 'list', []);
        return;
      }

      this.$set(state, 'loading', true);

      try {
        const searchType = isNaN(query) ? 'name' : 'id';
        const { listProduct } = await shopeeSellerSearchProductList(query, 1, 10, searchType);

        this.$set(state, 'list', listProduct || []);
      } catch (error) {
        this.loggerApi.error('Search product error:', error);
      } finally {
        this.$set(state, 'loading', false);
      }
    },

    selectProduct(item, product, index) {
      if (this.disabled) {
        return;
      }

      if (!item.payload) {
        this.$set(item, 'payload', {});
      }

      this.$set(item.payload, 'productId', product.id);
      this.$set(item.payload, 'productName', product.name);
      this.$set(item.payload, 'productImage', this.getProductImageUrl(product.cover_image));

      this.toggleProductGrid(index);
      this.emitChange();
    },

    getProductImageUrl(coverImage) {
      if (!coverImage) {
        return null;
      }

      return shopeeRender.imageUrl(coverImage);
    },

    emitChange() {
      this.$emit('change', this.listContent);
    },

    async loadVoucherList() {
      if (this.voucherList.length > 0) {
        return;
      }

      this.voucherLoading = true;

      try {
        this.voucherList = await getListVoucherAll();
      } catch (error) {
        this.loggerApi.error('Load voucher list error:', error);
        this.voucherList = [];
      } finally {
        this.voucherLoading = false;
      }
    },

    isVoucherGridOpen(index) {
      return !!this.voucherGridOpen[index];
    },

    toggleVoucherGrid(index) {
      const isOpen = !this.voucherGridOpen[index];

      this.$set(this.voucherGridOpen, index, isOpen);

      if (isOpen) {
        this.loadVoucherList();
      }
    },

    isVoucherSelected(item, voucher) {
      if (
        !item
        || !item.payload
        || !item.payload.voucherId
      ) {
        return false;
      }

      return item.payload.voucherId === voucher.voucher_id;
    },

    selectVoucher(item, voucher, index) {
      if (this.disabled) {
        return;
      }

      if (!item.payload) {
        this.$set(item, 'payload', {});
      }

      this.$set(item.payload, 'voucherId', voucher.voucher_id);
      this.$set(item.payload, 'voucherCode', voucher.voucher_code);
      this.$set(item.payload, 'voucherName', voucher.voucher_name);
      this.$set(item.payload, 'voucherTime', {
        startTime: voucher.start_time,
        endTime: voucher.end_time,
      });

      this.toggleVoucherGrid(index);
      this.emitChange();
    },
  },
};
</script>

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

.sm-content-block {
  display: flex;
  flex-direction: column;
  gap: 12px;

  &__item {
    position: relative;
    background: $c-surface;
    border: 1px solid $c-border;
    border-radius: $radius-item;
    overflow: hidden;
    transition: border-color $motion-base, box-shadow $motion-base;

    &:hover {
      border-color: $c-border-strong;
      box-shadow: $shadow-card;
    }
  }

  &__item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: $c-surface-soft;
    border-bottom: 1px solid $c-border;
  }

  &__item-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: $c-text;
  }

  &__item-delete.ivu-btn {
    padding: 0;
    width: 24px;
    height: 24px;
    color: $c-text-placeholder;
    transition: color $motion-fast;

    &:hover {
      color: $c-error;
    }
  }

  &__item-body {
    padding: 12px;
  }

  &__unsupported {
    padding: 12px;
    background: $c-error-bg;
    border-radius: $radius-item;
    color: $c-error;
    font-size: 12px;
  }

  &__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px dashed $c-border-input;
    border-radius: $radius-item;
    color: $c-text-muted;
    font-size: 13px;
    cursor: pointer;
    transition: border-color $motion-fast, color $motion-fast, background $motion-fast;

    &:hover {
      border-color: $c-link;
      color: $c-link;
      background: $c-surface-soft;
    }
  }

  &__add-option {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.sm-sticker {
  position: relative;

  &__selected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid $c-border;
    border-radius: $radius-item;
    cursor: pointer;
    transition: border-color $motion-fast;

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

  &__selected-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  &__change {
    font-size: 12px;
    color: $c-link;
  }

  &__placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed $c-border-input;
    border-radius: $radius-item;
    color: $c-text-muted;
    font-size: 13px;
    cursor: pointer;
    transition: border-color $motion-fast, color $motion-fast;

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

  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 8px;
    background: $c-surface;
    border: 1px solid $c-border;
    border-radius: $radius-card;
    box-shadow: $shadow-card-lg;
    z-index: 100;
  }

  &__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;

    @include scrollbar;
  }

  &__option {
    aspect-ratio: 1;
    padding: 1px;
    border: 2px solid transparent;
    border-radius: $radius-sm;
    cursor: pointer;
    transition: background $motion-fast, border-color $motion-fast;

    &:hover {
      background: $c-surface-alt;
      border-color: $c-link;
    }

    &.is-active {
      background: $c-success-bg;
      border-color: $c-success;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.sm-voucher {
  position: relative;

  &__selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid $c-border;
    border-radius: $radius-item;
    cursor: pointer;
    transition: border-color $motion-fast;

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

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

  &__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__code {
    font-size: 13px;
    font-weight: 600;
    color: $c-text-strong;
  }

  &__name {
    font-size: 11px;
    color: $c-text-muted;

    @include ellipsis;
  }

  &__change {
    font-size: 12px;
    color: $c-brand;
    flex-shrink: 0;
  }

  &__placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed $c-border-input;
    border-radius: $radius-item;
    color: $c-text-muted;
    font-size: 13px;
    cursor: pointer;
    transition: border-color $motion-fast, color $motion-fast;

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

  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 8px;
    background: $c-surface;
    border: 1px solid $c-border;
    border-radius: $radius-card;
    box-shadow: $shadow-card-lg;
    z-index: 100;
  }

  &__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: $c-text-placeholder;
    font-size: 12px;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;

    @include scrollbar;
  }

  &__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: $radius-item;
    cursor: pointer;
    transition: background $motion-fast, border-color $motion-fast;

    &:hover,
    &.is-active {
      background: $c-brand-tint;
      border-color: $c-brand;
    }
  }

  &__option-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $c-brand-tint;
    color: $c-brand;
    border-radius: $radius-sm;
    flex-shrink: 0;
    font-size: 14px;
  }

  &__option-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  &__option-code {
    font-size: 12px;
    font-weight: 600;
    color: $c-text-strong;
  }

  &__option-name {
    font-size: 11px;
    color: $c-text-muted;

    @include ellipsis;
  }
}

.sm-product {
  position: relative;

  &__selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid $c-border;
    border-radius: $radius-item;
    cursor: pointer;
    transition: border-color $motion-fast;

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

  &__img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: $radius-sm;
    flex-shrink: 0;
  }

  &__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $c-surface-alt;
    color: $c-link;
    border-radius: $radius-sm;
    flex-shrink: 0;
  }

  &__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  &__name {
    font-size: 13px;
    font-weight: 600;
    color: $c-text-strong;

    @include ellipsis;
  }

  &__id {
    font-size: 11px;
    color: $c-text-muted;
  }

  &__change {
    font-size: 12px;
    color: $c-link;
    flex-shrink: 0;
  }

  &__placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed $c-border-input;
    border-radius: $radius-item;
    color: $c-text-muted;
    font-size: 13px;
    cursor: pointer;
    transition: border-color $motion-fast, color $motion-fast;

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

  &__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    padding: 8px;
    background: $c-surface;
    border: 1px solid $c-border;
    border-radius: $radius-card;
    box-shadow: $shadow-card-lg;
    z-index: 100;
  }

  &__search {
    margin-bottom: 8px;
  }

  &__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: $c-text-placeholder;
    font-size: 12px;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;

    @include scrollbar;
  }

  &__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: $radius-item;
    cursor: pointer;
    transition: background $motion-fast, border-color $motion-fast;

    &:hover,
    &.is-active {
      background: $c-surface-alt;
      border-color: $c-link;
    }
  }

  &__option-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: $radius-sm;
    flex-shrink: 0;
  }

  &__option-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $c-surface-alt;
    color: $c-link;
    border-radius: $radius-sm;
    flex-shrink: 0;
    font-size: 14px;
  }

  &__option-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  &__option-name {
    font-size: 12px;
    font-weight: 600;
    color: $c-text-strong;

    @include ellipsis;
  }

  &__option-id {
    font-size: 11px;
    color: $c-text-muted;
  }
}

.sm-image {
  width: 100%;

  &__selected {
    position: relative;
    display: inline-block;

    &:hover .sm-image__remove {
      opacity: 1;
    }
  }

  &__img {
    max-width: 120px;
    max-height: 120px;
    border-radius: $radius-item;
    object-fit: cover;
  }

  &__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: $radius-item;
  }

  &__actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
  }

  &__check {
    color: $c-success;
    font-size: 18px;
    background: $c-surface;
    border-radius: 50%;
  }

  &__remove {
    color: $c-error;
    font-size: 18px;
    background: $c-surface;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity $motion-fast;
  }

  &__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    border: 1px dashed $c-border-input;
    border-radius: $radius-item;
    color: $c-text-muted;
    font-size: 12px;
    cursor: pointer;
    transition: border-color $motion-fast, color $motion-fast;

    &:hover {
      border-color: $c-link;
      color: $c-link;
    }
  }
}
</style>
