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

      <div class="content-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="sticker-selector"
        >
          <div
            v-if="getSelectedSticker(item)"
            class="sticker-selected"
            @click="toggleStickerGrid(index)"
          >
            <img
              :src="getSelectedSticker(item).url"
              class="sticker-selected__img"
            >
            <span class="sticker-selected__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="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="sticker-dropdown"
          >
            <div class="sticker-dropdown__grid">
              <div
                v-for="option in stickerOptions"
                :key="option.key"
                class="sticker-dropdown__item"
                :class="{ 'sticker-dropdown__item--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="voucher-selector"
        >
          <div
            v-if="item.payload && item.payload.voucherId"
            class="voucher-selected"
            @click="toggleVoucherGrid(index)"
          >
            <div class="voucher-selected__icon">
              <Icon type="ios-pricetag" />
            </div>
            <div class="voucher-selected__content">
              <span class="voucher-selected__code">{{ item.payload.voucherCode }}</span>
              <span class="voucher-selected__name">{{ item.payload.voucherName }}</span>
            </div>
            <span class="voucher-selected__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="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="voucher-dropdown"
          >
            <div
              v-if="voucherLoading"
              class="voucher-dropdown__loading"
            >
              <Spin size="small" />
              <span>Đang tải...</span>
            </div>
            <div
              v-else-if="voucherList.length === 0"
              class="voucher-dropdown__empty"
            >
              Không có voucher
            </div>
            <div
              v-else
              class="voucher-dropdown__grid"
            >
              <div
                v-for="voucher in voucherList"
                :key="voucher.voucher_id"
                class="voucher-dropdown__item"
                :class="{ 'voucher-dropdown__item--active': isVoucherSelected(item, voucher) }"
                @click="selectVoucher(item, voucher, index)"
              >
                <div class="voucher-dropdown__item-icon">
                  <Icon type="ios-pricetag" />
                </div>
                <div class="voucher-dropdown__item-content">
                  <span class="voucher-dropdown__item-code">{{ voucher.voucher_code }}</span>
                  <span class="voucher-dropdown__item-name">{{ voucher.voucher_name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-else-if="item.type === 'product'"
          class="product-selector"
        >
          <div
            v-if="item.payload && item.payload.productId"
            class="product-selected"
            @click="toggleProductGrid(index)"
          >
            <img
              v-if="item.payload.productImage"
              :src="item.payload.productImage"
              class="product-selected__img"
            >
            <div
              v-else
              class="product-selected__icon"
            >
              <Icon type="ios-cube" />
            </div>
            <div class="product-selected__content">
              <span class="product-selected__name">{{ item.payload.productName }}</span>
              <span class="product-selected__id">ID: {{ item.payload.productId }}</span>
            </div>
            <span class="product-selected__change">{{ $t('CHANGE_BTN') }}</span>
          </div>
          <div
            v-else
            class="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="product-dropdown"
          >
            <div class="product-dropdown__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="product-dropdown__loading"
            >
              <Spin size="small" />
              <span>Đang tìm...</span>
            </div>
            <div
              v-else-if="getProductSearchList(index).length === 0"
              class="product-dropdown__empty"
            >
              {{ getProductSearchQuery(index) ? 'Không tìm thấy sản phẩm' : 'Nhập tên hoặc ID sản phẩm' }}
            </div>
            <div
              v-else
              class="product-dropdown__grid"
            >
              <div
                v-for="product in getProductSearchList(index)"
                :key="product.id"
                class="product-dropdown__item"
                :class="{ 'product-dropdown__item--active': isProductSelected(item, product) }"
                @click="selectProduct(item, product, index)"
              >
                <img
                  v-if="product.cover_image"
                  :src="getProductImageUrl(product.cover_image)"
                  class="product-dropdown__item-img"
                >
                <div
                  v-else
                  class="product-dropdown__item-icon"
                >
                  <Icon type="ios-cube" />
                </div>
                <div class="product-dropdown__item-content">
                  <span class="product-dropdown__item-name">{{ product.name }}</span>
                  <span class="product-dropdown__item-id">ID: {{ product.id }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          v-else-if="item.type === 'image'"
          class="image-field"
        >
          <div
            v-if="getSelectedImage(item)"
            class="image-selected"
          >
            <img
              :src="getSelectedImage(item)"
              class="image-selected__img"
            >
            <div
              v-if="isImageUploading(index)"
              class="image-selected__loading"
            >
              <Spin />
            </div>
            <div
              v-else
              class="image-selected__actions"
            >
              <Icon
                v-if="item.payload && item.payload.imageId"
                type="ios-checkmark-circle"
                class="image-selected__check"
              />
              <Icon
                type="ios-trash"
                class="image-selected__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="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="unsupported-field"
        >
          {{ $t('SEND_MESSAGE_CONTENT_UNSUPPORTED', { type: item.type }) }}
        </div>
      </div>
    </div>

    <Dropdown
      :disabled="disabled"
      trigger="click"
      @on-click="addContentItem"
    >
      <div class="add-content-btn">
        <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="add-content-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 scoped>
.content-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-item {
  position: relative;
  border: 1px solid #e8eaec;
  border-radius: 8px;
  background: #fff;
}

.content-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaec;
}

.content-item__type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #515a6e;
}

.content-item__delete {
  padding: 0;
  width: 24px;
  height: 24px;
  color: #c5c8ce;
}

.content-item__delete:hover {
  color: #ed4014;
}

.content-item__body {
  padding: 12px;
}

.add-content-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #c5c8ce;
  border-radius: 8px;
  color: #808695;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.add-content-btn:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
  background: #f0f9ff;
}

.add-content-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sticker-selector {
  position: relative;
}

.sticker-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.sticker-selected:hover {
  border-color: #2d8cf0;
}

.sticker-selected__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sticker-selected__change {
  font-size: 12px;
  color: #2d8cf0;
}

.sticker-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #c5c8ce;
  border-radius: 6px;
  color: #808695;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.sticker-placeholder:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
}

.sticker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

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

.sticker-dropdown__item {
  aspect-ratio: 1;
  padding: 1px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.sticker-dropdown__item:hover {
  background: #f0f9ff;
  border-color: #2d8cf0;
}

.sticker-dropdown__item--active {
  background: #e6fff0;
  border-color: #19be6b;
}

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

.voucher-selector {
  position: relative;
}

.voucher-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.voucher-selected:hover {
  border-color: #ee4d2d;
}

.voucher-selected__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff1f0;
  color: #ee4d2d;
  border-radius: 4px;
  flex-shrink: 0;
}

.voucher-selected__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voucher-selected__code {
  font-size: 13px;
  font-weight: 500;
  color: #17233d;
}

.voucher-selected__name {
  font-size: 11px;
  color: #808695;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voucher-selected__change {
  font-size: 12px;
  color: #ee4d2d;
  flex-shrink: 0;
}

.voucher-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #c5c8ce;
  border-radius: 6px;
  color: #808695;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.voucher-placeholder:hover {
  border-color: #ee4d2d;
  color: #ee4d2d;
}

.voucher-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.voucher-dropdown__loading,
.voucher-dropdown__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #808695;
  font-size: 12px;
}

.voucher-dropdown__grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}

.voucher-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.voucher-dropdown__item:hover {
  background: #fff1f0;
  border-color: #ee4d2d;
}

.voucher-dropdown__item--active {
  background: #fff1f0;
  border-color: #ee4d2d;
}

.voucher-dropdown__item-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff1f0;
  color: #ee4d2d;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 14px;
}

.voucher-dropdown__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.voucher-dropdown__item-code {
  font-size: 12px;
  font-weight: 500;
  color: #17233d;
}

.voucher-dropdown__item-name {
  font-size: 11px;
  color: #808695;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-selector {
  position: relative;
}

.product-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.product-selected:hover {
  border-color: #2d8cf0;
}

.product-selected__img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.product-selected__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #2d8cf0;
  border-radius: 4px;
  flex-shrink: 0;
}

.product-selected__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-selected__name {
  font-size: 13px;
  font-weight: 500;
  color: #17233d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-selected__id {
  font-size: 11px;
  color: #808695;
}

.product-selected__change {
  font-size: 12px;
  color: #2d8cf0;
  flex-shrink: 0;
}

.product-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #c5c8ce;
  border-radius: 6px;
  color: #808695;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.product-placeholder:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
}

.product-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e8eaec;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.product-dropdown__search {
  margin-bottom: 8px;
}

.product-dropdown__loading,
.product-dropdown__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: #808695;
  font-size: 12px;
}

.product-dropdown__grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.product-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.product-dropdown__item:hover {
  background: #e6f7ff;
  border-color: #2d8cf0;
}

.product-dropdown__item--active {
  background: #e6f7ff;
  border-color: #2d8cf0;
}

.product-dropdown__item-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.product-dropdown__item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #2d8cf0;
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 14px;
}

.product-dropdown__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-dropdown__item-name {
  font-size: 12px;
  font-weight: 500;
  color: #17233d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-dropdown__item-id {
  font-size: 11px;
  color: #808695;
}

.image-field {
  width: 100%;
}

.image-selected {
  position: relative;
  display: inline-block;
}

.image-selected__img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
}

.image-selected__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
}

.image-selected__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
}

.image-selected__check {
  color: #19be6b;
  font-size: 18px;
  background: #fff;
  border-radius: 50%;
}

.image-selected__remove {
  color: #ed4014;
  font-size: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-selected:hover .image-selected__remove {
  opacity: 1;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed #c5c8ce;
  border-radius: 6px;
  color: #808695;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.image-placeholder:hover {
  border-color: #2d8cf0;
  color: #2d8cf0;
}

.unsupported-field {
  padding: 12px;
  background: #fff2f0;
  border-radius: 6px;
  color: #ed4014;
  font-size: 12px;
}
</style>
