<template>
  <b-modal
    id="group-plan-selection"
    :hide-footer="true"
    :hide-header="true"
    size="md"
    @show="loadData"
    @hide="onHide"
  >
    <div class="selection-modal">
      <div class="modal-header-row">
        <h2 class="title">
          {{ $t('chooseAnOption') }}
        </h2>
        <div class="header-actions">
          <span
            class="cancel-text"
            @click="close"
          >
            {{ $t('cancel') }}
          </span>
          <button
            class="btn btn-primary next-button"
            :class="{ disabled: !selectedOption }"
            :disabled="!selectedOption"
            @click="continueFlow"
          >
            {{ $t('next') }}
          </button>
        </div>
      </div>

      <div
        v-if="loading"
        class="loading-container"
      >
        <div class="spinner-border text-secondary"></div>
      </div>

      <template v-else>
        <div
          v-if="hasUpgradeableGroups"
          class="section-header"
        >
          {{ $t('upgradeExistingGroup') }}
        </div>

        <selectable-card
          v-for="group in upgradeableGuilds"
          :key="group._id"
          class="option-card"
          :selected="isSelected(group)"
          @click="selectOption(group)"
        >
          <div class="option-content">
            <div class="option-info">
              <div class="option-name">
                {{ group.name }}
              </div>
              <div class="option-members">
                {{ $t('membersCount', { count: group.memberCount }) }}
              </div>
              <div class="option-label previously-upgraded">
                <div
                  class="svg-icon sparkle-icon"
                  v-html="icons.sparkles"
                ></div>
                {{ $t('previouslyUpgradedGroup') }}
              </div>
            </div>
            <div class="option-price">
              ${{ calculatePrice(group.memberCount) }}.00/mo
            </div>
          </div>
        </selectable-card>

        <selectable-card
          v-if="upgradeableParty"
          class="option-card"
          :selected="isSelected(upgradeableParty)"
          @click="selectOption(upgradeableParty)"
        >
          <div class="option-content">
            <div class="option-info">
              <div class="option-name">
                {{ upgradeableParty.name }}
              </div>
              <div class="option-members">
                {{ $t('membersCount', { count: upgradeableParty.memberCount }) }}
              </div>
              <div class="option-label your-party">
                <div
                  class="svg-icon member-icon"
                  v-html="icons.member"
                ></div>
                {{ $t('yourParty') }}
              </div>
            </div>
            <div class="option-price">
              ${{ calculatePrice(upgradeableParty.memberCount) }}.00/mo
            </div>
          </div>
        </selectable-card>

        <div
          v-if="hasUpgradeableGroups"
          class="or-divider"
        >
          <div class="divider-line"></div>
          <span class="or-text">{{ $t('or') }}</span>
          <div class="divider-line"></div>
        </div>

        <selectable-card
          class="option-card create-new"
          :selected="selectedOption === 'new'"
          @click="selectOption('new')"
        >
          <div class="option-content">
            <div class="option-info">
              <div class="option-name">
                {{ $t('createNewGroup') }}
              </div>
              <div class="option-description">
                {{ $t('inviteOthersForAdditional') }}
                <span class="price-highlight">${{ perMemberPrice }}.00</span>
                {{ $t('perMember') }}.
              </div>
            </div>
            <div class="option-price">
              ${{ basePrice }}.00/mo
            </div>
          </div>
        </selectable-card>

        <div class="footer-note">
          {{ $t('additionalMembersProrated') }}
        </div>
      </template>
    </div>
  </b-modal>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/colors.scss';

.selection-modal {
  padding: 24px;
}

.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: $purple-200;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
}

.cancel-text {
  color: $blue-10;
  font-size: 0.875rem;
  margin-right: 16px;
  cursor: pointer;
}

.next-button {
  min-width: 64px;

  &.disabled {
    background-color: $gray-300;
    border-color: $gray-300;
    cursor: not-allowed;
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.section-header {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: $gray-10;
  margin-bottom: 12px;
}

.option-card {
  margin-bottom: 12px;

  ::v-deep .option-name {
    color: $gray-50;
  }

  &.selected ::v-deep .option-name {
    color: $purple-200;
  }
}

.option-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 32px;
  padding-right: 8px;
}

.option-info {
  flex: 1;
}

.option-name {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 4px;
}

.option-members {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: $gray-100;
  margin-bottom: 8px;
}

.option-label {
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 16px;
  gap: 4px;

  &.previously-upgraded {
    font-weight: 700;
    color: $blue-10;
  }

  &.your-party {
    font-weight: 700;
    color: $gray-100;
  }

  .svg-icon {
    width: 14px;
    height: 14px;
  }

  .sparkle-icon {
    color: $blue-10;
  }

  .member-icon {
    color: $gray-100;

    ::v-deep path {
      fill: $gray-100;
      stroke: $gray-100;
      stroke-width: 0.5px;
    }
  }
}

.option-description {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: $gray-100;

  .price-highlight {
    font-weight: 700;
  }
}

.option-price {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: $purple-200;
  white-space: nowrap;
}

.or-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;

  .divider-line {
    flex: 1;
    height: 1px;
    background-color: $gray-500;
  }

  .or-text {
    padding: 0 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: $gray-100;
  }
}

.create-new {
  .option-name {
    margin-bottom: 8px;
  }
}

.footer-note {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: $gray-100;
  text-align: center;
  margin-top: 16px;
  margin-left: 24px;
  margin-right: 24px;
}
</style>

<style lang="scss">
#group-plan-selection {
  .modal-dialog {
    max-width: 504px;
  }

  .modal-content {
    border-radius: 8px;
    box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
  }

  .modal-body {
    padding: 0;
  }
}
</style>

<script>
import axios from 'axios';
import paymentsMixin from '@/mixins/payments';
import { mapState } from '@/libs/store';
import SelectableCard from '@/components/ui/selectableCard.vue';
import svgSparkles from '@/assets/svg/sparkles.svg?raw';
import svgMember from '@/assets/svg/member-icon.svg?raw';

export default {
  components: {
    SelectableCard,
  },
  mixins: [paymentsMixin],
  data () {
    return {
      selectedOption: null,
      userGuilds: [],
      userParty: null,
      activeGroupPlanIds: [],
      loading: true,
      basePrice: 9,
      perMemberPrice: 3,
      icons: Object.freeze({
        sparkles: svgSparkles,
        member: svgMember,
      }),
    };
  },
  computed: {
    ...mapState({ user: 'user.data' }),
    upgradeableGuilds () {
      return this.userGuilds.filter(group => {
        const leaderId = group.leader?._id || group.leader;
        if (leaderId !== this.user._id) return false;
        const plan = group.purchased?.plan;
        if (!plan?.customerId) return false;
        if (this.activeGroupPlanIds.includes(group._id)) return false;
        if (!plan.dateTerminated) return false;
        return new Date(plan.dateTerminated) < new Date();
      });
    },
    upgradeableParty () {
      if (!this.userParty) return null;

      const leaderId = this.userParty.leader?._id || this.userParty.leader;
      if (leaderId !== this.user._id) return null;

      if (this.activeGroupPlanIds.includes(this.userParty._id)) return null;

      return this.userParty;
    },
    hasUpgradeableGroups () {
      return this.upgradeableGuilds.length > 0 || this.upgradeableParty !== null;
    },
  },
  methods: {
    async loadData () {
      this.loading = true;
      this.selectedOption = null;

      try {
        const [guildsResponse, partyResponse] = await Promise.all([
          axios.get('/api/v4/groups', { params: { type: 'guilds', includeExpiredPlans: 'true' } }),
          axios.get('/api/v4/groups/party').catch(() => ({ data: { data: null } })),
        ]);

        this.userGuilds = guildsResponse.data.data || [];
        this.userParty = partyResponse.data.data;

        await this.$store.dispatch('guilds:getGroupPlans', true);
        const groupPlans = this.$store.state.groupPlans?.data || [];
        this.activeGroupPlanIds = groupPlans.map(g => g._id);
      } catch (e) {
        console.error('Error loading group data:', e);
      }

      this.loading = false;
    },
    selectOption (option) {
      this.selectedOption = option;
    },
    isSelected (group) {
      if (!this.selectedOption || this.selectedOption === 'new') return false;
      return this.selectedOption._id === group._id;
    },
    calculatePrice (memberCount) {
      return this.basePrice + (this.perMemberPrice * (memberCount - 1));
    },
    continueFlow () {
      if (!this.selectedOption) return;

      const selection = this.selectedOption;
      this.close();

      if (selection === 'new') {
        this.$root.$emit('bv::show::modal', 'create-group');
      } else {
        this.stripeGroup({ group: selection, upgrade: true });
      }
    },
    close () {
      this.$root.$emit('bv::hide::modal', 'group-plan-selection');
    },
    onHide () {
      this.selectedOption = null;
    },
  },
};
</script>
