<template>
  <div class="loyalty-suite-conditions">
    <div v-for="(item, index) in conditions" :key="index" :class="[
      'loyalty-suite-condition',
      'loyalty-suite-condition_' + item.status,
      'loyalty-suite-condition_' + order
    ]">
      <div class="loyalty-suite-condition__order">
        <span v-if="order === 'sequential'" class="loyalty-suite-condition__order-label">
          {{ item.order }}
        </span>
        <span v-else-if="order === 'any'" class="loyalty-suite-condition__order-label">
        </span>
      </div>
      <div class="loyalty-suite-condition__main">
        <div class="loyalty-suite-condition__label">
          {{ formatLabel(item) }} <span>{{ item.network ? item.network : '' }}</span>
        </div>
        <div v-if="item.key === 'earned_units'" class="loyalty-suite-condition__sublabel">
          {{ '(' + $t('howEarnUnits') + ')' }}
        </div>
        <div v-if="item.key === 'units_spent'" class="loyalty-suite-condition__sublabel">
          {{ '(' + $t('howSpendUnits') + ')' }}
        </div>
        <div v-if="item.goal" class="loyalty-suite-condition__option">
          <div class="loyalty-suite-condition__option-label loyalty-suite-condition__option-label_capitalize">
            {{ $t('goal') }}:
          </div>
          <div class="loyalty-suite-condition__option-value">
            {{ formatGoalValue(item) }} {{ getUnitLabel(item) }}
          </div>
        </div>

        <div v-if="item.social_link" class="loyalty-suite-condition__option loyalty-suite-condition-social">
          <template v-if="submissionSentMap[item.id]">
            <span class="loyalty-suite-condition__submission-success">
              {{ $t('submissionPending') }}
            </span>
          </template>
          <template v-else>
            <div class="loyalty-suite-condition__option-value">
              <a :href="item.social_link" class="loyalty-suite-condition__option-link" target="_blank"
                @click.prevent="handleNetworkTrustClick(item)">
                {{ $t('follow') }}
                <span class="loyalty-suite-material-icons">thumb_up_off_alt</span>
              </a>
            </div>
            <div v-if="item.network_verification === 'network_admin' && item.status !== 'complete'"
              class="loyalty-suite-condition__submission">
              <span v-if="item.submission_status && item.submission_status === 'rejected'"
                class="loyalty-suite-condition__submission-rejected">
                {{ $t('submissionRejected') }}
              </span>
              <div class="loyalty-suite-condition__submission-label">
                {{ $t('toAdminReviewAccount') }}:
              </div>
              <div class="loyalty-suite-condition__submission-value">
                <input :id="item.id" type="text" :placeholder="$t('enterAccount')" @input="clearError(item.id)"
                  class="loyalty-suite-condition__submission-input">
                <span v-if="showEmptyErrorMap[item.id]" class="loyalty-suite-condition__submission-error">
                  {{ $t('emptySubmissionError') }}
                </span>
                <span :class="['loyalty-suite-button', {
                  'loyalty-suite-button_loading':
                    isLoadingSubmission
                }]" @click="submitUserAnswer(item)">
                  {{ $t('submit') }}
                </span>
              </div>
            </div>
          </template>
        </div>

        <div v-if="item.shared_link" class="loyalty-suite-condition__option loyalty-suite-condition-social">
          <template v-if="submissionSentMap[item.id]">
            <span class="loyalty-suite-condition__submission-success">
              {{ $t('submissionPending') }}
            </span>
          </template>
          <template v-else>
            <div class="loyalty-suite-condition__option-value">
              <a :href="getShareUrl(item.network, item.shared_link)" class="loyalty-suite-condition__option-link"
                target="_blank" @click.prevent="handleNetworkTrustClick(item)">
                {{ $t('share') }}
                <span class="loyalty-suite-material-icons">share</span>
              </a>
            </div>
            <div v-if="item.network_verification === 'network_admin' && item.status !== 'complete'"
              class="loyalty-suite-condition__submission">
              <span v-if="item.submission_status && item.submission_status === 'rejected'"
                class="loyalty-suite-condition__submission-rejected">
                {{ $t('submissionRejected') }}
              </span>
              <div class="loyalty-suite-condition__submission-label">
                {{ $t('toAdminReview') }}:
              </div>
              <div class="loyalty-suite-condition__submission-value">
                <input :id="item.id" type="text" :placeholder="$t('enterLinkUrl')" @input="clearError(item.id)"
                  class="loyalty-suite-condition__submission-input">
                <span v-if="showEmptyErrorMap[item.id]" class="loyalty-suite-condition__submission-error">
                  {{ $t('emptySubmissionError') }}
                </span>
                <span :class="['loyalty-suite-button', { 'loyalty-suite-button_loading': isLoadingSubmission }]"
                  @click="submitUserAnswer(item)">
                  {{ $t('submit') }}
                </span>
              </div>
            </div>
          </template>
        </div>

        <div v-if="item.publish_content_desc" class="loyalty-suite-condition__option loyalty-suite-condition-ugc">
          <template v-if="submissionSentMap[item.id]">
            <span class="loyalty-suite-condition__submission-success">
              {{ $t('submissionPending') }}
            </span>
          </template>
          <template v-else>
            <div class="loyalty-suite-condition__option-label loyalty-suite-condition__option-label_capitalize">
              {{ $t('publishСontentCondition') }}:
            </div>
            <div class="loyalty-suite-condition__option-value">
              {{ item.publish_content_desc }}
            </div>

            <div v-if="item.status !== 'complete'" class="loyalty-suite-condition__submission">
              <span v-if="item.submission_status && item.submission_status === 'rejected'"
                class="loyalty-suite-condition__submission-rejected">
                {{ $t('submissionRejected') }}
              </span>
              <div class="loyalty-suite-condition__submission-label">
                {{ $t('toAdminReview') }}:
              </div>
              <div class="loyalty-suite-condition__submission-value">
                <input :id="item.id" type="text" :placeholder="$t('enterLinkUrl')" @input="clearError(item.id)"
                  class=" loyalty-suite-condition__submission-input">
                <span v-if="showEmptyErrorMap[item.id]" class="loyalty-suite-condition__submission-error">
                  {{ $t('emptySubmissionError') }}
                </span>
                <span :class="['loyalty-suite-button', { 'loyalty-suite-button_loading': isLoadingSubmission }]"
                  @click="submitUserAnswer(item)">
                  {{ $t('submit') }}
                </span>
              </div>
            </div>
          </template>
        </div>

        <div v-if="item.categories" class="loyalty-suite-condition__option">
          <div class="loyalty-suite-condition__option-label">
            {{ $t('categoriesCondition') }}:
          </div>
          <div class="loyalty-suite-condition__option-value loyalty-suite-condition__option-value_block">
            <template v-for="(cat, index) in item.categories">
              <template v-if="cat.link">
                <a :href="cat.link" class="loyalty-suite-condition__option-link-text" target="_blank">{{ cat.label
                }}</a>
              </template>
              <template v-else>
                {{ cat.label }}
              </template>
              <span v-if="index < item.categories.length - 1">, </span>
            </template>
          </div>
        </div>

        <div v-if="item.brands" class="loyalty-suite-condition__option">
          <div class="loyalty-suite-condition__option-label">
            {{ $t('brandsCondition') }}:
          </div>
          <div class="loyalty-suite-condition__option-value loyalty-suite-condition__option-value_block">
            <template v-for="(brand, index) in item.brands">
              <template v-if="brand.link">
                <a :href="brand.link" class="loyalty-suite-condition__option-link-text" target="_blank">{{ brand.label
                }}</a>
              </template>
              <template v-else>
                {{ brand.label }}
              </template>
              <span v-if="index < item.brands.length - 1">, </span>
            </template>
          </div>
        </div>

        <div v-if="item.product" class="loyalty-suite-condition__option">
          <div class="loyalty-suite-condition__option-label">
            {{ $t('productsCondition') }}:
          </div>
          <div class="loyalty-suite-condition__option-value loyalty-suite-condition__option-value_block">
            <template v-for="(prod, index) in item.product">
              <template v-if="prod.link">
                <a :href="prod.link" class="loyalty-suite-condition__option-link-text" target="_blank">{{ prod.label
                }}</a>
              </template>
              <template v-else>
                {{ prod.label }}
              </template>
              <span v-if="index < item.product.length - 1">, </span>
            </template>
          </div>
        </div>

        <div v-if="item.refer_link_signup"
          class="loyalty-suite-condition__option loyalty-suite-condition__option_refer">
          <div class="loyalty-suite-condition__option-label loyalty-suite-condition__option-label_refer">
            <span>{{ $t('referLinkSignup') }}</span> {{ $t('referLinkSignupHint') }}:
          </div>
          <div class="loyalty-suite-condition__option-value">
            <a href="#" class="loyalty-suite-condition__option-link"
              :class="{ 'loyalty-suite-condition__option-link_copied': copiedLink === addQueryParam(item.refer_link_signup, 'ls-refer-signup') }"
              @click.prevent="copyToClipboard(addQueryParam(item.refer_link_signup, 'ls-refer-signup'))">
              {{ $t('copyLink') }}
              <span class="loyalty-suite-material-icons">content_copy</span>
            </a>
            <a href="#" class="loyalty-suite-condition__option-link"
              @click.prevent="openShare(addQueryParam(item.refer_link_signup, 'ls-refer-signup'))">
              {{ $t('share') }}
              <span class="loyalty-suite-material-icons">share</span>
            </a>
          </div>
        </div>

        <div v-if="item.refer_link_purchase"
          class="loyalty-suite-condition__option loyalty-suite-condition__option_refer">
          <div class="loyalty-suite-condition__option-label loyalty-suite-condition__option-label_refer">
            <span>{{ $t('referLinkPurchase') }}</span> {{ $t('referLinkPurchaseHint') }}:
          </div>
          <div class="loyalty-suite-condition__option-value">
            <a href="#" class="loyalty-suite-condition__option-link"
              :class="{ 'loyalty-suite-condition__option-link_copied': copiedLink === addQueryParam(item.refer_link_purchase, 'ls-refer-purchase') }"
              @click.prevent="copyToClipboard(addQueryParam(item.refer_link_purchase, 'ls-refer-purchase'))">
              {{ $t('copyLink') }}
              <span class="loyalty-suite-material-icons">content_copy</span>
            </a>
            <a href="#" class="loyalty-suite-condition__option-link"
              @click.prevent="openShare(addQueryParam(item.refer_link_purchase, 'ls-refer-purchase'))">
              {{ $t('share') }}
              <span class="loyalty-suite-material-icons">share</span>
            </a>
          </div>
        </div>

        <div v-if="item.wallet" class="loyalty-suite-condition__option">
          <div class="loyalty-suite-condition__option-label loyalty-suite-condition__option-label_capitalize">
            {{ $t('wallet') }}:
          </div>
          <div class="loyalty-suite-condition__option-value">
            <a class="loyalty-suite-condition__option-link-view" :href="`${homeUrl}/wallet/${item.wallet}`"
              target="_blank">
              <span class="loyalty-suite-material-icons">visibility</span>
              {{ $t('view') }}
            </a>
          </div>
        </div>

        <div v-if="getProgress(item) > 0" class="loyalty-suite-condition__progress">
          <div class="loyalty-suite-condition__progress-wrapper">
            <div class="loyalty-suite-condition__progress-bar" :style="{ width: getProgress(item) + '%' }"></div>
          </div>
          <div class="loyalty-suite-condition__progress-value">
            <span class="loyalty-suite-condition__progress-complete">
              {{ getProgress(item) }}% {{ $t('complete') }}
            </span>
            <span v-if="item.current_value && item.goal" class="loyalty-suite-condition__progress-details">
              ({{ formatCurrentValue(item) + ' ' + $t('ofGoal') + ' ' + formatGoalValue(item) }})
            </span>
          </div>
        </div>
      </div>
    </div>
    <ShareModal v-model="shareStatus" :link="currentLink" @close="closeShare" />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatCurrency } from '../utils/formatters';
import ShareModal from './ShareModal.vue';

export default defineComponent({
  components: {
    ShareModal
  },
  props: {
    conditions: {
      type: Array as PropType<Record<string, any>[]>,
      required: true,
    },
    order: {
      type: String,
      required: true,
    },
    currency: {
      type: Array,
      required: true,
    },
    entityId: {
      type: Number,
      required: true,
    },
    entityType: {
      type: String,
      required: true,
    }
  },
  setup(props) {
    const apiRoutes = window.loyalty_suite_account_data.apiRoutes;
    const nonce = window.loyalty_suite_account_data.nonce;
    const { t } = useI18n();
    const isLoadingSubmission = ref(false);
    const homeUrl = window.loyalty_suite_account_data.homeUrl + window.loyalty_suite_account_data.basePath;
    const userId = window.loyalty_suite_account_data.userId;
    const showEmptyErrorMap = ref<Record<number, boolean>>({});
    const submissionSentMap = ref<Record<number, boolean>>({});
    const shareStatus = ref(false);
    const currentLink = ref('');
    const copiedLink = ref('');

    props.conditions.forEach((condition) => {
      if (condition.submission_status === 'pending') {
        submissionSentMap.value[condition.id] = true;
      }
    });

    const closeShare = () => {
      shareStatus.value = false;
    }

    const openShare = (link: string) => {
      currentLink.value = link;
      shareStatus.value = true;
    };

    const copyToClipboard = async (text: string) => {
      const canUseModern =
        typeof navigator !== 'undefined' &&
        'clipboard' in navigator &&
        (window.isSecureContext || location.hostname === 'localhost');

      if (canUseModern) {
        try {
          if (navigator.permissions?.query) {
            const perm = await navigator.permissions.query({ name: 'clipboard-write' as PermissionName });
            if (perm.state === 'denied') throw new Error('clipboard denied');
          }

          await navigator.clipboard.writeText(text);
          copiedLink.value = text;
          setTimeout(() => (copiedLink.value = ''), 1000);
          return;
        } catch (e) {
          console.warn('clipboard.writeText failed, fallback to execCommand', e);
        }
      }

      try {
        const ta = document.createElement('textarea');
        ta.value = text;

        ta.setAttribute('readonly', '');
        ta.style.position = 'fixed';
        ta.style.top = '-9999px';
        ta.style.left = '-9999px';
        document.body.appendChild(ta);

        ta.focus();
        ta.select();
        ta.setSelectionRange(0, ta.value.length);

        const ok = document.execCommand('copy');
        document.body.removeChild(ta);

        if (!ok) throw new Error('execCommand returned false');

        copiedLink.value = text;
        setTimeout(() => (copiedLink.value = ''), 1000);
      } catch (err) {
        console.error('Copy fallback failed:', err);
      }
    };

    const getProgress = (item: Record<string, any>): number => {
      if (item.completed) return 100;

      const current = parseFloat(item.current_value) || 0;
      const goal = parseFloat(item.goal) || 0;

      if (goal <= 0) return 0;

      return Math.min(100, Math.floor((current / goal) * 100));
    };

    const formatGoalValue = (item: Record<string, any>): string => {
      switch (item.key) {
        case 'purchase_amount':
          return formatCurrency(Number(item.goal), props.currency);
        case 'earned_units':
        case 'units_spent':
          return formatCurrency(Number(item.goal), props.currency, true) + ' ' + (parseFloat(item.goal) === 1 ? item.currency_singular ?? '' : item.currency ?? '');
        default:
          return item.goal;
      }
    };

    const formatCurrentValue = (item: Record<string, any>): string => {
      switch (item.key) {
        case 'purchase_amount':
          return formatCurrency(Number(item.current_value), props.currency);
        case 'earned_units':
        case 'units_spent':
          return formatCurrency(Number(item.current_value), props.currency, true) + ' ' + (parseFloat(item.current_value) === 1 ? item.currency_singular ?? '' : item.currency ?? '')
        default:
          return item.current_value;
      }
    };

    const formatLabel = (item: Record<string, any>): string => {
      switch (item.key) {
        case 'earned_units':
          return t('earn') + ' ' + (item.currency ?? '') + ' ' + t(item.key);
        case 'units_spent':
          return t('spend') + ' ' + (item.currency ?? '') + ' ' + t(item.key);
        default:
          return t(item.key);
      }
    }

    const getUnitLabel = (item: Record<string, any>): string => {
      const count = Number(item.goal);
      const isPlural = count !== 1;

      switch (item.key) {
        case 'add_comments':
          return t(isPlural ? 'comments' : 'comment');
        case 'add_reviews':
          return t(isPlural ? 'reviews' : 'review');
        case 'refer_for_purchase':
        case 'refer_for_signup':
          return t(isPlural ? 'friends' : 'friend');
        case 'place_orders':
          return t(isPlural ? 'orders' : 'order');
        case 'buy_products':
          return t(isPlural ? 'products' : 'product');
        default:
          return '';
      }
    }

    const getShareUrl = (network: string, link: string): string => {
      switch (network) {
        case 'facebook':
          return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(link)}`;
        case 'twitter':
          return `https://twitter.com/intent/tweet?url=${encodeURIComponent(link)}`;
        case 'threads':
          return `https://www.threads.net/intent/post?url=${encodeURIComponent(link)}`;
        case 'linkedin':
          return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(link)}`;
        case 'reddit':
          return `https://www.reddit.com/submit?url=${encodeURIComponent(link)}`;
        case 'pinterest':
          return `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(link)}`;
        case 'vk':
          return `https://vk.com/share.php?url=${encodeURIComponent(link)}`;
        default:
          return link;
      }
    };

    const addQueryParam = (urlStr: string, key: string): string => {
      const url = new URL(urlStr);
      url.searchParams.set(key, String(userId));
      return url.toString();
    };

    const clearError = (id: number) => {
      if (showEmptyErrorMap.value[id]) {
        showEmptyErrorMap.value[id] = false;
      }
    };

    const submitUserAnswer = async (item: Record<string, any>) => {
      const input = document.getElementById(item.id) as HTMLInputElement;
      const value = input?.value?.trim();

      if (!value) {
        showEmptyErrorMap.value[item.id] = true;
        return;
      }

      isLoadingSubmission.value = true;

      try {
        const response = await fetch(apiRoutes.account.add_submission, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': nonce,
          },
          body: JSON.stringify({
            condition_id: item.id,
            condition_type: item.key,
            entity_id: props.entityId,
            entity_type: props.entityType,
            user_id: userId,
            user_answer: value,
          }),
        });

        const result = await response.json();

        if (result.success) {
          input.value = '';
          showEmptyErrorMap.value[item.id] = false;
          submissionSentMap.value[item.id] = true;
        }
      } catch (error) {
        console.error('Submission error:', error);
      } finally {
        isLoadingSubmission.value = false;
      }
    };

    const handleNetworkTrustClick = async (item: Record<string, any>) => {
      let url = '';
      if (item.shared_link) {
        url = getShareUrl(item.network, item.shared_link);
      } else if (item.social_link) {
        url = item.social_link;
      }

      window.open(url, '_blank');

      if (item.network_verification !== 'network_trust' || item.completed ) {
        return;
      }

      try {
        isLoadingSubmission.value = true;

        const response = await fetch(apiRoutes.account.complete_submission, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': nonce,
          },
          body: JSON.stringify({
            user_id: userId,
            condition_id: item.id,
            condition_type: item.key,
          }),
        });

        const result = await response.json();

        if (result.success) {
          window.location.reload();
        } else {
          console.error('Server error:', result?.error || 'Unknown error');
        }
      } catch (err) {
        console.error('Submission error:', err);
      } finally {
        isLoadingSubmission.value = false;
      }
    };

    return {
      getProgress,
      formatLabel,
      formatGoalValue,
      formatCurrentValue,
      getUnitLabel,
      getShareUrl,
      isLoadingSubmission,
      homeUrl,
      closeShare,
      openShare,
      shareStatus,
      currentLink,
      copyToClipboard,
      copiedLink,
      addQueryParam,
      submitUserAnswer,
      showEmptyErrorMap,
      submissionSentMap,
      handleNetworkTrustClick,
      clearError
    };
  }
})
</script>

<style lang="scss" scoped>
.loyalty-suite-conditions {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.loyalty-suite-condition {
  display: flex;
  width: 100%;
  align-items: flex-start;
  padding-bottom: 25px;
  position: relative;

  &::after {
    display: flex;
    content: '';
    position: absolute;
    left: 19.5px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--loyalty-suite-borders-60);
  }

  &:last-child {
    padding-bottom: 0;

    &::after {
      display: none;
    }
  }

  &.loyalty-suite-condition_any {
    &::after {
      background: var(--loyalty-suite-primary);
    }

    .loyalty-suite-condition__order {
      &-label {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--loyalty-suite-primary);
      }
    }
  }

  &.loyalty-suite-condition_complete {
    &::after {
      background: var(--loyalty-suite-primary);
    }

    .loyalty-suite-condition {
      &__order {
        background: var(--loyalty-suite-primary);
        border-color: var(--loyalty-suite-primary);

        &::after {
          display: flex;
          justify-content: center;
          align-items: center;
          content: '\2714';
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: var(--loyalty-suite-primary);
          color: var(--loyalty-suite-light);
          font-size: 16px;
          font-weight: 700;
          line-height: normal;
          z-index: 2;
          position: absolute;
          top: 0;
          left: 0;
          padding-bottom: 1px;
        }
      }
    }
  }

  &.loyalty-suite-condition_disabled {
    .loyalty-suite-condition {
      &__label {
        color: var(--loyalty-suite-borders);
      }

      &__sublabel {
        color: var(--loyalty-suite-borders);
      }

      &__option {
        &-value {
          color: var(--loyalty-suite-borders);
        }

        &-label {
          color: var(--loyalty-suite-borders);
        }

        a.loyalty-suite-condition__option-link {
          pointer-events: none;
          opacity: 0.5;
        }

        a.loyalty-suite-condition__option-link-view {
          pointer-events: none;
          opacity: 0.5;
        }

        a.loyalty-suite-condition__option-link-text {
          pointer-events: none;
          opacity: 0.5;
        }

        .loyalty-suite-button {
          pointer-events: none;
          opacity: 0.5;
        }
      }

      &__submission {
        &-value {
          color: var(--loyalty-suite-borders);
        }

        &-label {
          color: var(--loyalty-suite-borders);
        }

        &-input {
          pointer-events: none;
        }

        &-rejected {
          color: var(--loyalty-suite-borders);
        }

        &-success {
          color: var(--loyalty-suite-borders);
        }
      }
    }

    &.loyalty-suite-condition_any {
      &::after {
        background: var(--loyalty-suite-borders);
      }

      .loyalty-suite-condition {
        &__order {
          &-label {
            background: var(--loyalty-suite-borders);
          }
        }
      }
    }
  }

  &.loyalty-suite-condition_in_progress {
    .loyalty-suite-condition {
      &__order {
        border-color: var(--loyalty-suite-primary);

        &-label {
          color: var(--loyalty-suite-primary);
        }
      }
    }
  }

  &__order {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--loyalty-suite-borders-60);
    margin-right: 20px;
    position: relative;

    &-label {
      display: flex;
      font-size: 16px;
      line-height: 1;
      font-weight: 700;
      text-transform: capitalize;
      color: var(--loyalty-suite-borders-60);
    }
  }

  &__main {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    margin-top: -2px;
  }

  &__label {
    display: block;
    width: 100%;
    font-weight: 700;
    line-height: normal;
    font-size: 14px;
    color: var(--loyalty-suite-primary);
    margin-bottom: 0;

    span {
      text-transform: capitalize;
    }
  }

  &__sublabel {
    display: block;
    width: 100%;
    font-weight: 400;
    line-height: normal;
    font-size: 14px;
    color: var(--loyalty-suite-dark);
    margin: 6px 0;
  }

  &__option {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    &:nth-child(2) {
      margin-top: 6px;
    }

    &.loyalty-suite-condition-social {
      flex-direction: column;
    }

    &.loyalty-suite-condition__option_refer {
      flex-direction: column;

      .loyalty-suite-condition__option-value {
        flex-wrap: wrap;
        text-transform: none;
      }
    }

    &.loyalty-suite-condition-ugc {
      flex-direction: column;

      .loyalty-suite-condition__option-value {
        white-space: pre-wrap;
        word-break: break-word;
        text-transform: none;
      }

      .loyalty-suite-condition__submission {
        padding-top: 10px;
        border-top: 1px solid var(--loyalty-suite-borders-60);
      }
    }

    &:last-child {
      margin-bottom: 0;
    }

    a.loyalty-suite-condition__option-link {
      display: flex;
      align-items: center;
      width: auto;
      height: 35px;
      text-decoration: none;
      padding: 10px 15px;
      font-size: 14px;
      text-transform: capitalize;
      line-height: normal;
      color: var(--loyalty-suite-dark);
      background: var(--loyalty-suite-light);
      outline: 1px solid var(--loyalty-suite-borders-60);
      border-radius: 4px;
      transition: 0.3s;
      margin-top: 5px;
      margin-right: 10px;
      position: relative;

      &.loyalty-suite-condition__option-link_copied {
        &::after {
          display: flex;
          content: '\2714';
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          background: var(--loyalty-suite-light);
          border-radius: 4px;
          font-size: 12px;
          font-weight: 400;
          line-height: normal;
          color: var(--loyalty-suite-positive);
        }
      }

      &:last-child {
        margin-right: 0;
      }

      span {
        margin-left: 7px;
        font-size: 16px;
      }

      &:hover {
        color: var(--loyalty-suite-primary);
        outline-color: var(--loyalty-suite-primary);
      }
    }

    a.loyalty-suite-condition__option-link-text {
      text-decoration: none;
      color: var(--loyalty-suite-primary);
      transition: 0.3s;

      &:hover {
        color: var(--loyalty-suite-primary-90);
      }
    }

    a.loyalty-suite-condition__option-link-view {
      display: inline-flex;
      width: auto;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      text-transform: capitalize;
      font-size: 12px;
      line-height: 1;
      transition: .3s;
      border-radius: 1em;
      padding: 2px 7px;
      background: var(--loyalty-suite-light);
      color: var(--loyalty-suite-dark);
      border: 1px solid var(--loyalty-suite-borders-60);

      span {
        transition: 0.3s;
        margin-right: 4px;
        line-height: normal;
        font-size: 14px;
        color: var(--loyalty-suite-dark);
      }

      &:hover {
        color: var(--loyalty-suite-primary);
        border-color: var(--loyalty-suite-primary);

        span {
          color: var(--loyalty-suite-primary);
        }
      }
    }

    &-value {
      display: flex;
      font-size: 14px;
      text-transform: lowercase;
      line-height: normal;
      margin-bottom: 6px;

      &.loyalty-suite-condition__option-value_block {
        text-transform: capitalize;
        display: block;
      }
    }

    &-label {
      display: flex;
      font-size: 14px;
      font-weight: 700;
      line-height: normal;
      margin-right: 5px;
      margin-bottom: 6px;

      &.loyalty-suite-condition__option-label_capitalize {
        text-transform: capitalize;
      }

      &.loyalty-suite-condition__option-label_refer {
        display: block;
        font-weight: 400;

        span {
          font-weight: 700;
        }
      }
    }
  }

  &__submission {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;

    &-value {
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }

    &-label {
      display: flex;
      font-size: 14px;
      line-height: normal;
      margin-bottom: 6px;
    }

    &-rejected {
      margin-bottom: 10px;
      color: var(--loyalty-suite-negative);
    }

    &-success {
      color: var(--loyalty-suite-positive);
    }

    .loyalty-suite-button {
      margin-bottom: 10px;
    }

    input.loyalty-suite-condition__submission-input {
      display: flex;
      align-items: center;
      width: 250px;
      height: 35px;
      border: 1px solid var(--loyalty-suite-borders-60);
      background: var(--loyalty-suite-light);
      box-shadow: none;
      outline: none;
      border-radius: 4px;
      margin: 0 10px 10px 0 !important;
      padding: 0 10px;
      font-size: 14px;
      color: var(--loyalty-suite-dark);
      font-weight: 400;
      line-height: normal;
      transition: 0.3s;

      &:hover {
        border-color: var(--loyalty-suite-primary);
        box-shadow: none;
        outline: none;
      }

      &:focus {
        box-shadow: none;
        outline: none;
      }

      &::placeholder {
        font-size: 14px;
        color: var(--loyalty-suite-borders-60);
        font-weight: 400;
        line-height: normal;
      }
    }
    &-error {
      display: flex;
      width: 100%;
      color: var(--loyalty-suite-negative);
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      position: absolute;
      left: 0;
      bottom: -10px;
      z-index: 2;
    }
  }

  &__progress {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 200px;
    margin-top: 5px;

    &-value {
      display: flex;
      flex-wrap: wrap;
    }

    &-complete {
      display: flex;
      font-size: 14px;
      margin-top: 7px;
      margin-right: 4px;
      text-transform: lowercase;
    }

    &-details {
      display: flex;
      font-size: 14px;
      text-transform: lowercase;
      margin-top: 7px;
    }

    &-wrapper {
      display: flex;
      width: 100%;
      height: 4px;
      border-radius: 8px;
      background: var(--loyalty-suite-borders-40);
      position: relative;
    }

    &-bar {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      height: 4px;
      border-radius: 8px;
      background: var(--loyalty-suite-positive);
    }
  }
}

@media (max-width: 576px) {
  .loyalty-suite-conditions {
    input.loyalty-suite-condition__submission-input {
      width: 100%;
      margin-right: 0 !important;
    }
  }
}
</style>
