<template>
  <div class="subscription-management">
    <h2>구독/결제 관리</h2>

    <!-- 현재 구독 상태 -->
    <div v-if="currentSubscription" class="current-subscription">
      <h3>현재 구독 정보</h3>
      <div class="subscription-info">
        <p><strong>플랜:</strong> {{ currentSubscription.planName }}</p>
        <p><strong>상태:</strong> {{ currentSubscription.status }}</p>
        <p><strong>시작일:</strong> {{ formatDate(currentSubscription.startDate) }}</p>
        <p><strong>만료일:</strong> {{ formatDate(currentSubscription.endDate) }}</p>
        <p v-if="currentSubscription.planPrice"><strong>월 구독료:</strong> {{ formatPrice(currentSubscription.planPrice) }}원</p>
        <div v-if="activeFeatures.length > 0">
          <p><strong>활성화된 추가 기능:</strong></p>
          <ul class="active-features-list">
            <li v-for="feature in activeFeatures" :key="feature.featureId">
              {{ getFeatureName(feature.featureId) }} (만료일: {{ formatDate(feature.expiryDate) }})
            </li>
          </ul>
        </div>
        <p><strong>총 결제 금액:</strong> {{ formatPrice(calculateTotalPrice()) }}원/월</p>
      </div>
    </div>

    <!-- 구독 플랜 변경 섹션 -->
    <div class="subscription-section">
      <div class="section-header">
        <h3>구독 플랜 {{ currentSubscription ? '변경' : '선택' }}</h3>
        <button 
          class="toggle-btn" 
          @click="showPlans = true"
        >
          플랜 {{ currentSubscription ? '변경하기' : '선택하기' }}
        </button>
      </div>

      <div v-if="showPlans || isSelectingPlan" class="plans-grid">
        <div 
          v-for="plan in plans" 
          :key="plan.id" 
          class="plan-card"
          :class="{ 'selected': selectedPlan?.id === plan.id, 'current': isCurrentPlan(plan.id) }"
          @click="selectPlan(plan)"
        >
          <div class="plan-header">
            <h4>{{ plan.name }}</h4>
            <p class="price">월 {{ formatPrice(plan.price) }}원</p>
          </div>
          
          <div class="plan-description">
            <p>{{ plan.description || '해당 플랜에 대한 설명이 없습니다.' }}</p>
          </div>
          
          <div class="plan-details">
            <div class="plan-detail-item">
              <span class="detail-label">최대 회원수:</span>
              <span class="detail-value">{{ plan.maxMembers || '제한 없음' }}</span>
            </div>
            <div class="plan-detail-item">
              <span class="detail-label">구독 기간:</span>
              <span class="detail-value">월간</span>
            </div>
          </div>
          
          <div class="plan-features">
            <h5>포함된 기능</h5>
            <ul class="features">
              <li v-for="feature in plan.Features" :key="feature.id" class="feature-item">
                <i class="pi pi-check"></i>
                <div class="feature-info">
                  <span class="feature-name">{{ feature.name }}</span>
                  <span class="feature-description">{{ feature.description }}</span>
                </div>
              </li>
              <li v-if="!plan.Features || plan.Features.length === 0" class="no-features">
                <i class="pi pi-info-circle"></i> 포함된 기능이 없습니다.
              </li>
            </ul>
          </div>
          
          <button 
            class="select-plan-btn" 
            :class="{ 'current-plan': isCurrentPlan(plan.id) }" 
            @click="handlePlanSelection(plan)"
          >
            {{ isCurrentPlan(plan.id) ? '현재 이용중' : '선택하기' }}
          </button>
        </div>
      </div>

      <div v-if="selectedPlan && selectedPlan.id !== (currentSubscription?.planId || null)" class="selected-plan-info">
        <h4>선택한 플랜: {{ selectedPlan.name }}</h4>
        <div class="plan-price-details">
          <p class="plan-price">
            <span class="monthly-price">월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원</span>
            <span v-if="selectedPlanDuration > 1" class="discount-badge">
              {{ getDurationDiscount(selectedPlanDuration) }}% 할인
            </span>
          </p>
          <p v-if="selectedPlanDuration > 1" class="discounted-monthly-price">
            할인된 월 가격: {{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원
          </p>
          <p v-if="selectedPlanDuration > 1" class="total-duration-price">
            {{ selectedPlanDuration }}개월 총액: <span class="total-price">{{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원</span>
            <span class="payment-note">(한 번에 결제)</span>
          </p>
        </div>
        
        <div class="plan-description">
          <p>{{ selectedPlan.description || '해당 플랜에 대한 설명이 없습니다.' }}</p>
        </div>
        
        <div class="plan-details">
          <div>
            <span class="detail-label mr-3">최대 회원수:</span>
            <span class="detail-value">{{ selectedPlan.maxMembers || '제한 없음' }}</span>
          </div>
          
          <!-- 구독 기간 선택 옵션 -->
          <div class="plan-detail-item subscription-duration">
            <span class="detail-label">구독 기간:</span>
            <div class="duration-selector">
              <button 
                v-for="duration in [1, 3, 6, 12]" 
                :key="duration" 
                :class="['duration-btn', selectedPlanDuration === duration ? 'active' : '']" 
                @click="selectedPlanDuration = duration"
              >
                {{ duration }}개월
                <span v-if="duration > 1" class="discount-badge">
                  {{ getDurationDiscount(duration) }}% 할인
                </span>
              </button>
            </div>
            <p class="duration-info">
              * 장기 구독(3, 6, 12개월)은 한 번에 전체 기간 금액을 결제합니다.
            </p>
          </div>
        </div>
        
        <div class="plan-features">
          <h5>포함된 기능</h5>
          <div class="features-container">
            <div v-for="feature in selectedPlan.Features" :key="feature.id" class="feature-item">
              <i class="pi pi-check"></i>
              <div class="feature-info">
                <span class="feature-name">{{ feature.name }}</span>
                <span class="feature-description">{{ feature.description }}</span>
              </div>
            </div>
            <div v-if="!selectedPlan.Features || selectedPlan.Features.length === 0" class="no-features">
              <i class="pi pi-info-circle"></i> 포함된 기능이 없습니다.
            </div>
          </div>
        </div>
        
        <!-- 플랜 변경 옵션 -->
        <div class="plan-change-options" v-if="currentSubscription">
          <h5>플랜 변경 옵션</h5>
          
          <div class="option-selector">
            <label v-if="isUpgrade">
              <input type="radio" v-model="changeOption" value="immediate" />
              즉시 적용 (금액 차액 정산)
            </label>
            
            <label v-if="!isUpgrade">
              <input type="radio" v-model="changeOption" value="nextBilling" />
              다음 결제일부터 적용 (현재 플랜 유지)
            </label>
          </div>
          
          <div v-if="changeOption === 'immediate' && isUpgrade" class="price-calculation">
            <p>현재 플랜: {{ currentSubscription.planName }} (월 {{ formatPrice(currentSubscription.planPrice) }}원)</p>
            <p>
              선택한 플랜: {{ selectedPlan.name }} 
              <span class="price-details">
                월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원
                <span v-if="selectedPlanDuration > 1" class="discount-info">
                  ({{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용)
                </span>
              </span>
            </p>
            <p v-if="selectedPlanDuration > 1" class="duration-total">
              {{ selectedPlanDuration }}개월 총액: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원
            </p>
            <p>남은 기간: {{ remainingDays }}일</p>
            <p>현재 플랜 남은 기간 환불액: {{ formatPrice(refundAmount) }}원</p>
            <p>새 플랜 결제액: {{ formatPrice(proRatedNewPlanPrice) }}원</p>
            <p class="subtotal">플랜 변경 차액: {{ formatPrice(planPriceDifference) }}원</p>
          </div>
          
          <div v-if="changeOption === 'nextBilling' && !isUpgrade" class="price-calculation">
            <p>현재 플랜: {{ currentSubscription.planName }} (월 {{ formatPrice(currentSubscription.planPrice) }}원)</p>
            <p>
              선택한 플랜: {{ selectedPlan.name }} 
              <span class="price-details">
                월 {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원
                <span v-if="selectedPlanDuration > 1" class="discount-info">
                  ({{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용)
                </span>
              </span>
            </p>
            <p v-if="selectedPlanDuration > 1" class="duration-total">
              {{ selectedPlanDuration }}개월 총액: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원
            </p>
            <p>적용 시점: 다음 결제일 ({{ formatDate(nextBillingDate) }})</p>
            <p class="note">* 현재 구독 기간이 종료될 때까지 현재 플랜이 유지됩니다.</p>
          </div>
        </div>
        
        <div class="plan-actions">
          <button class="primary-btn" @click="selectPlanAndContinue">선택 후 추가 기능 선택하기</button>
          <button class="cancel-btn" @click="cancelPlanSelection">취소</button>
        </div>
      </div>
    </div>

    <!-- 추가 기능 선택 섹션 -->
    <div class="subscription-section">
      <div class="section-header">
        <h3>추가 기능 선택</h3>
        <button 
          class="toggle-btn" 
          @click="showAdditionalFeatures = true"
        >
          기능 추가하기
        </button>
      </div>
      
      <!-- 선택한 플랜 정보 표시 -->
      <div v-if="showAdditionalFeatures && (selectedPlan || currentSubscription)" class="selected-plan-summary">
        <h4>선택한 플랜 정보</h4>
        <div class="plan-info">
          <p class="plan-name">{{ selectedPlan ? selectedPlan.name : currentSubscription.planName }}</p>
          <p class="plan-duration">구독 기간: {{ selectedPlanDuration }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}</p>
          <p class="plan-price" v-if="selectedPlan">총 가격: {{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원 <span v-if="selectedPlanDuration > 1" class="payment-note">(한 번에 결제)</span></p>
          <p class="plan-price" v-else>현재 월 구독료: {{ formatPrice(currentSubscription.planPrice) }}원</p>
          <p v-if="selectedPlan && selectedPlanDuration > 1" class="plan-monthly-price">할인된 월 가격: {{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원/월</p>
        </div>
      </div>

      <div v-if="showAdditionalFeatures" class="features-grid">
        <div 
          v-for="feature in availableFeatures.filter(f => f.price)" 
          :key="feature.id" 
          class="feature-card"
          :class="{ 
            'selected': selectedFeatures.some(f => f.id === feature.id),
            'active': isFeatureActive(feature.id),
            'included-in-plan': feature.isIncludedInPlan,
            'included-in-selected-plan': isFeatureIncludedInSelectedPlan(feature.id)
          }"
        >
          <div class="feature-badge" v-if="isFeatureActive(feature.id)">사용중</div>
          <div class="feature-badge plan-badge" v-if="feature.isIncludedInPlan">플랜 포함</div>
          <div class="feature-header">
            <h4>{{ feature.name }}</h4>
          </div>
          <p class="description">{{ feature.description }}</p>
          <p class="price">
            <template v-if="feature.price">월 {{ formatPrice(feature.price) }}원</template>
            <template v-else>기본기능</template>
          </p>
          
          <!-- 추가 기능 선택 가능한 경우 -->
          <div v-if="shouldShowFeatureActions(feature)" class="feature-actions">
            <div class="feature-info">
              <p class="duration-info">구독 기간: {{ selectedPlanDuration || 1 }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}</p>
              <p class="price-info">총 금액: {{ formatPrice(calculateFeaturePriceWithDuration(feature, selectedPlanDuration || 1)) }}원</p>
            </div>
            <button 
              class="feature-btn"
              @click="toggleFeatureSelection(feature)"
            >
              {{ selectedFeatures.some(f => f.id === feature.id) ? '선택 취소' : '선택하기' }}
            </button>
          </div>
          
          <!-- 이미 활성화된 기능 -->
          <div v-else-if="isFeatureActive(feature.id)" class="feature-active-info">
            <p>만료일: {{ getFeatureExpiryDate(feature.id) }}</p>
          </div>
          
          <!-- 선택한 플랜에 포함된 기능 -->
          <div v-else-if="isFeatureIncludedInSelectedPlan(feature.id)" class="feature-included-info">
            <p>현재 선택한 플랜에 포함된 기능입니다.</p>
          </div>
          
          <!-- 현재 구독 플랜에 포함된 기능 -->
          <div v-else-if="feature.isIncludedInPlan" class="feature-included-info">
            <p>현재 구독 플랜에 포함된 기능입니다.</p>
          </div>
        </div>
      </div>

      <div v-if="showAdditionalFeatures && (selectedPlan || currentSubscription)" class="selected-features-summary">
        <h4>선택 요약</h4>
        
        <!-- 추가 기능 선택 요약 -->
        <div v-if="selectedFeatures.length > 0">
          <h5>추가 기능</h5>
          <div class="features-container">
            <div v-for="feature in selectedFeatures" :key="feature.id" class="feature-item selected-feature-item">
              <div class="feature-info">
                <span class="feature-name">{{ feature.name }}</span>
                <span class="feature-price">
                  <span v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)">
                    {{ selectedPlanDuration || 1 }}개월 {{ selectedPlanDuration > 1 ? `(${getDurationDiscount(selectedPlanDuration)}% 할인)` : '' }}
                  </span>
                  <span v-else>
                    남은 구독 기간({{ remainingDays }}일)
                  </span>
                  <strong>{{ formatPrice(calculateFeaturePrice(feature)) }}원</strong>
                </span>
              </div>
              <button class="remove-btn" @click="removeFeature(feature.id)">제거</button>
            </div>
          </div>
          <div class="summary-total">
            <p>추가 기능 총액: {{ formatPrice(calculateSelectedFeaturesTotal()) }}원
              <span v-if="!selectedPlan || isCurrentPlan(selectedPlan.id)" class="calculation-note">(남은 구독 기간 {{ remainingDays }}일 기준 일할 계산)</span>
            </p>
          </div>
        </div>
        
        <!-- 포함된 기능 표시 -->
        <div v-if="selectedPlan && selectedPlan.Features && selectedPlan.Features.length > 0" class="included-features">
          <h5>플랜에 포함된 기능</h5>
          <div class="features-container">
            <div v-for="feature in selectedPlan.Features" :key="feature.id" class="feature-item included-feature-item">
              <i class="pi pi-check"></i>
              <div class="feature-info">
                <span class="feature-name">{{ feature.name }}</span>
                <span v-if="feature.description" class="feature-description">{{ feature.description }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 총 결제 금액 -->
        <div class="final-total">
          <p>총 결제 금액: {{ formatPrice(selectedPlan ? calculatePlanTotalPrice(selectedPlan) + calculateSelectedFeaturesTotal() : calculateSelectedFeaturesTotal()) }}원
            <span v-if="(!selectedPlan || isCurrentPlan(selectedPlan.id)) && selectedFeatures.length > 0" class="calculation-note">(추가 기능은 남은 구독 기간 기준 일할 계산)</span>
          </p>
        </div>
        
        <div class="summary-actions">
          <button class="primary-btn" @click="proceedToPayment">결제 진행하기</button>
          <button class="secondary-btn" @click="showPlans = true; isSelectingPlan = true; showAdditionalFeatures = false">플랜 다시 선택하기</button>
          <button class="cancel-btn" @click="cancelFeatureSelection">취소</button>
        </div>
      </div>
    </div>

    <!-- 결제 섹션 -->
    <div v-if="showPaymentSection" class="payment-section">
      <!-- 결제 요약 -->
      <div class="payment-summary">
        <h4>결제 요약</h4>
        <div class="summary-items">
          <!-- 플랜 변경 요약 -->
          <div v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)" class="summary-item">
            <span class="item-label">선택한 플랜:</span>
            <span class="item-value">{{ selectedPlan.name }}</span>
            <span class="item-price">
              {{ formatPrice(calculatePlanMonthlyPrice(selectedPlan)) }}원/월
              <span v-if="selectedPlanDuration > 1" class="discount-tag">
                ({{ getDurationDiscount(selectedPlanDuration) }}% 할인)
              </span>
            </span>
          </div>
          
          <!-- 구독 기간 -->
          <div v-if="selectedPlan && selectedPlanDuration > 1" class="summary-item duration-item">
            <span class="item-label">구독 기간:</span>
            <span class="item-value">{{ selectedPlanDuration }}개월</span>
            <span class="item-price">{{ formatPrice(calculatePlanTotalPrice(selectedPlan)) }}원 <span class="payment-note">(한 번에 결제)</span></span>
          </div>
          
          <!-- 할인된 월 가격 -->
          <div v-if="selectedPlan && selectedPlanDuration > 1" class="summary-item discounted-monthly">
            <span class="item-label">할인된 월 가격:</span>
            <span class="item-value">월 평균</span>
            <span class="item-price">{{ formatPrice(calculateDiscountedMonthlyPrice(selectedPlan)) }}원/월</span>
          </div>
          
          <!-- 플랜 변경 관련 금액 -->
          <template v-if="selectedPlan && !isCurrentPlan(selectedPlan.id) && currentSubscription">
            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change">
              <span class="item-label">현재 플랜 환불액:</span>
              <span class="item-value">남은 {{ remainingDays }}일 기준</span>
              <span class="item-price">-{{ formatPrice(refundAmount) }}원</span>
            </div>
            
            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change">
              <span class="item-label">새 플랜 결제액:</span>
              <span class="item-value">남은 {{ remainingDays }}일 기준</span>
              <span class="item-price">{{ formatPrice(proRatedNewPlanPrice) }}원</span>
            </div>
            
            <div v-if="isUpgrade && changeOption === 'immediate'" class="summary-item plan-change subtotal">
              <span class="item-label">플랜 변경 차액:</span>
              <span class="item-value"></span>
              <span class="item-price">{{ formatPrice(planPriceDifference) }}원</span>
            </div>
            
            <div v-if="!isUpgrade && changeOption === 'nextBilling'" class="summary-item plan-change note">
              <span class="item-label">다운그레이드:</span>
              <span class="item-value">다음 결제일({{ formatDate(nextBillingDate) }})부터 적용</span>
              <span class="item-price">0원</span>
            </div>
          </template>
          
          <!-- 추가 기능 요약 -->
          <div v-if="selectedFeatures.length > 0" class="feature-section-header">
            <span>추가 기능</span>
          </div>
          
          <div v-for="feature in selectedFeatures" :key="feature.id" class="summary-item">
            <span class="item-label">기능:</span>
            <span class="item-value">
              {{ feature.name }}
              <span v-if="selectedPlan && !isCurrentPlan(selectedPlan.id)">
                ({{ feature.selectedDuration }}개월)
              </span>
              <span v-else class="calculation-note">
                (남은 {{ remainingDays }}일 기준 일할 계산)
              </span>
            </span>
            <span class="item-price">{{ formatPrice(calculateProRatedFeaturePrice(feature)) }}원</span>
          </div>
          
          <div v-if="selectedFeatures.length > 0" class="summary-item subtotal">
            <span class="item-label">추가 기능 총액:</span>
            <span class="item-value">
              <span v-if="!selectedPlan || isCurrentPlan(selectedPlan.id)" class="calculation-note">
                (남은 구독 기간 기준 일할 계산)
              </span>
            </span>
            <span class="item-price">{{ formatPrice(totalFeaturesPrice) }}원</span>
          </div>
          
          <!-- 총 결제금액 -->
          <div class="summary-total">
            <div class="total-header">
              <span class="total-label">총 결제금액:</span>
              <span class="total-price">{{ formatPrice(finalAmount) }}원</span>
            </div>
            <div v-if="(!selectedPlan || isCurrentPlan(selectedPlan.id)) && selectedFeatures.length > 0" class="calculation-summary">
              <span class="calculation-note">
                추가 기능은 남은 구독 기간 {{ remainingDays }}일 기준으로 일할 계산되었습니다.
              </span>
            </div>
            <div v-if="selectedPlanDuration > 1" class="discount-summary">
              <span class="discount-info">
                {{ selectedPlanDuration }}개월 구독 {{ getDurationDiscount(selectedPlanDuration) }}% 할인 적용됨
              </span>
              <span class="payment-note">
                (장기 구독은 한 번에 결제되며, 총 금액에 할인이 적용됩니다)
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="payment-method">
        <h4>결제 방법</h4>
        <p class="payment-info">결제 버튼을 클릭하면 토스페이먼츠 결제 창이 열리며, 다양한 결제 수단을 선택할 수 있습니다.</p>
      </div>

      <div class="payment-agreement">
        <label>
          <input type="checkbox" v-model="paymentAgreement" />
          결제 진행 및 서비스 이용약관에 동의합니다.
        </label>
      </div>

      <div class="payment-actions">
        <button 
          class="payment-btn" 
          :disabled="!paymentAgreement"
          @click="processPayment"
        >
          결제하기
        </button>
        <button class="cancel-btn" @click="cancelPayment">취소</button>
      </div>
    </div>

    <!-- 기능 구매 내역 -->
    <div class="feature-history">
      <h3>기능 구매 내역</h3>
      <table v-if="featurePayments.length > 0">
        <thead>
          <tr>
            <th>구매일</th>
            <th>기능</th>
            <th>기간</th>
            <th>금액</th>
            <th>만료일</th>
            <th>상태</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="payment in featurePayments" :key="payment.id">
            <td>{{ formatDate(payment.purchaseDate) }}</td>
            <td>{{ payment.featureName }}</td>
            <td>{{ payment.duration }}개월</td>
            <td>{{ formatPrice(payment.amount) }}원</td>
            <td>{{ formatDate(payment.expiryDate) }}</td>
            <td>{{ payment.status }}</td>
          </tr>
        </tbody>
      </table>
      <p v-else>기능 구매 내역이 없습니다.</p>
    </div>

    <!-- 결제 내역 -->
    <div class="payment-history">
      <h3>결제 내역</h3>
      <table v-if="payments.length > 0">
        <thead>
          <tr>
            <th>결제일</th>
            <th>플랜</th>
            <th>금액</th>
            <th>상태</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="payment in payments" :key="payment.id">
            <td>{{ formatDate(payment.paymentDate) }}</td>
            <td>{{ payment.planName }}</td>
            <td>{{ formatPrice(payment.amount) }}원</td>
            <td>{{ payment.status }}</td>
          </tr>
        </tbody>
      </table>
      <p v-else>결제 내역이 없습니다.</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import apiClient from '@/services/api';

const router = useRouter();
// 전역 clubId
const clubId = ref(localStorage.getItem('clubId'));
const currentSubscription = ref(null);
const plans = ref([]);
const payments = ref([]);
const availableFeatures = ref([]);
const featurePayments = ref([]);
const activeFeatures = ref([]);

// UI 상태 관리
const showPlans = ref(false);
const showAdditionalFeatures = ref(false); // 초기에는 기능 목록 표시하지 않음
const showPaymentSection = ref(false);
const isSelectingPlan = ref(false);
const selectedPlan = ref(null);
const selectedFeatures = ref([]);
const paymentAgreement = ref(false);

// 플랜 변경 관련 변수
const changeOption = ref('immediate'); // 기본값은 업그레이드일 경우 즉시 적용, 다운그레이드일 경우 다음 결제일 적용

// 구독 기간 관련 변수
const selectedPlanDuration = ref(1); // 기본값은 1개월

// 결제 관련 상태

// 날짜 포맷팅
const formatDate = (date) => {
  if (!date) return '-';
  return new Date(date).toLocaleDateString('ko-KR');
};

// 가격 포맷팅
const formatPrice = (price) => {
  if (price === undefined || price === null) return '0';
  return price.toLocaleString('ko-KR');
};

// 현재 구독중인 플랜인지 확인
const isCurrentPlan = (planId) => {
  return currentSubscription.value?.planId === planId;
};

// 기능이 활성화되어 있는지 확인
const isFeatureActive = (featureId) => {
  return activeFeatures.value.some(f => f.featureId === featureId);
};

// 기능 이름 가져오기
const getFeatureName = (featureId) => {
  const feature = availableFeatures.value.find(f => f.id === featureId);
  return feature ? feature.name : '알 수 없는 기능';
};

// 기능 만료일 가져오기
const getFeatureExpiryDate = (featureId) => {
  const feature = activeFeatures.value.find(f => f.featureId === featureId);
  return feature ? formatDate(feature.expiryDate) : '-';
};

// 기능이 현재 선택한 플랜에 포함되어 있는지 확인
const isFeatureIncludedInSelectedPlan = (featureId) => {
  if (!selectedPlan.value) return false;
  if (!selectedPlan.value.Features) return false;
  return selectedPlan.value.Features.some(f => f.id === featureId);
};

// 추가 기능 표시 여부 확인 (활성화 또는 플랜에 포함된 기능은 비활성화)
const shouldShowFeatureActions = (feature) => {
  // 현재 활성화된 기능은 비활성화
  if (isFeatureActive(feature.id)) return false;
  
  // 현재 사용 중인 플랜에 포함된 기능은 비활성화
  if (feature.isIncludedInPlan) return false;
  
  // 선택한 플랜에 포함된 기능은 비활성화
  if (isFeatureIncludedInSelectedPlan(feature.id)) return false;
  
  return true;
};

// 현재 구독 정보 로드
const loadCurrentSubscription = async () => {
  try {
    const response = await apiClient.post('/api/subscriptions/current', { clubId: clubId.value });
    
    // 플랜에 포함된 기능 정보 가져오기
    if (response.data && response.data.planId) {
      try {
        const planResponse = await apiClient.get(`/api/subscriptions/plans/${response.data.planId}`);
        if (planResponse.data && planResponse.data.Features) {
          response.data.planFeatures = planResponse.data.Features;
        }
      } catch (planError) {
        console.error('플랜 상세 정보 로드 실패:', planError);
        // 플랜 정보 로드 실패 시 기본 값 설정
        response.data.planFeatures = [];
      }
    }
    
    currentSubscription.value = response.data;
    
    // 현재 구독 플랜에 포함된 기능 표시 업데이트
    if (availableFeatures.value.length > 0) {
      updateFeaturesIncludedInCurrentPlan();
    }
  } catch (error) {
    console.error('구독 정보 로드 실패:', error);
    currentSubscription.value = null;
  }
};

// 구독 플랜 목록 로드
const loadPlans = async () => {
  try {
    const response = await apiClient.get('/api/subscriptions/plans');
    plans.value = response.data;
  } catch (error) {
    console.error('플랜 목록 로드 실패:', error);
  }
};

// 결제 내역 로드
const loadPayments = async () => {
  try {
    const response = await apiClient.post('/api/subscriptions/payments', { clubId: clubId.value });
    payments.value = response.data;
  } catch (error) {
    console.error('결제 내역 로드 실패:', error);
  }
};

// 사용 가능한 기능 목록 로드
const loadAvailableFeatures = async () => {
  try {
    const response = await apiClient.get('/api/features');
    availableFeatures.value = response.data.map(feature => ({
      ...feature,
      selectedDuration: 1,
      isIncludedInPlan: false // 초기에는 false로 설정
    }));
    
    // 현재 구독 플랜이 있는 경우, 포함된 기능 표시 업데이트
    updateFeaturesIncludedInCurrentPlan();
  } catch (error) {
    console.error('추가 기능 로드 오류:', error);
  }
};

// 현재 구독 플랜에 포함된 기능 표시 업데이트
const updateFeaturesIncludedInCurrentPlan = () => {
  if (!currentSubscription.value || !currentSubscription.value.planFeatures) return;
  
  const includedFeatureIds = currentSubscription.value.planFeatures.map(f => f.id);
  
  availableFeatures.value.forEach(feature => {
    feature.isIncludedInPlan = includedFeatureIds.includes(feature.id);
  });
};

// 활성화된 기능 목록 로드
const loadActiveFeatures = async () => {
  try {
    const response = await apiClient.post('/api/features/active', { clubId: clubId.value });
    activeFeatures.value = response.data;
  } catch (error) {
    console.error('활성화된 기능 로드 실패:', error);
  }
};

// 기능 구매 내역 로드
const loadFeaturePayments = async () => {
  try {
    const response = await apiClient.post('/api/features/payments', { clubId: clubId.value });
    featurePayments.value = response.data;
  } catch (error) {
    console.error('기능 구매 내역 로드 실패:', error);
  }
};

// 플랜 선택 처리
const handlePlanSelection = (plan) => {
  // 현재 이용중인 플랜을 다시 선택한 경우
  if (isCurrentPlan(plan.id)) {
    // 결제 요약 초기화
    selectedPlan.value = null;
    selectedPlanDuration.value = 1;
    isSelectingPlan.value = false;
    showPaymentSection.value = false;
    
    // 현재 구독 플랜에 포함된 기능 표시로 되돌리기
    updateFeaturesIncludedInCurrentPlan();
    return;
  }
  
  // 다른 플랜 선택의 경우 기존 함수 호출
  selectPlan(plan);
};

// 플랜 선택 함수
const selectPlan = async (plan) => {
  try {
    // 플랜에 포함된 기능 정보 가져오기
    const planResponse = await apiClient.get(`/api/subscriptions/plans/${plan.id}`);
    if (planResponse.data && planResponse.data.Features) {
      plan.Features = planResponse.data.Features;
    }
  } catch (error) {
    console.error('플랜 상세 정보 로드 실패:', error);
    // 오류가 발생해도 기본 플랜 정보는 유지
    if (!plan.Features) {
      plan.Features = [];
    }
  }
  
  selectedPlan.value = plan;
  isSelectingPlan.value = true;
};

// 플랜 선택 후 추가 기능 선택으로 이동
const selectPlanAndContinue = () => {
  isSelectingPlan.value = false;
  showPlans.value = false;
  showAdditionalFeatures.value = true;
  
  // 선택한 플랜에 포함된 기능 표시 업데이트
  updateFeatureSelectionBasedOnSelectedPlan();
};

// 플랜 선택 취소
const cancelPlanSelection = () => {
  selectedPlan.value = null;
  selectedPlanDuration.value = 1;
  isSelectingPlan.value = false;
  showPlans.value = false;
  
  // 현재 구독 플랜에 포함된 기능 표시로 되돌리기
  updateFeaturesIncludedInCurrentPlan();
};

// 선택한 플랜에 따라 기능 선택 상태 업데이트
const updateFeatureSelectionBasedOnSelectedPlan = () => {
  if (!selectedPlan.value || !selectedPlan.value.Features) return;
  
  const includedFeatureIds = selectedPlan.value.Features.map(f => f.id);
  
  // 이미 선택한 기능 중 플랜에 포함된 기능 제거
  selectedFeatures.value = selectedFeatures.value.filter(f => !includedFeatureIds.includes(f.id));
};

// 기능 선택 토글
const toggleFeatureSelection = (feature) => {
  const index = selectedFeatures.value.findIndex(f => f.id === feature.id);
  if (index === -1) {
    selectedFeatures.value.push({
      ...feature,
      selectedDuration: parseInt(feature.selectedDuration)
    });
  } else {
    selectedFeatures.value.splice(index, 1);
  }
};

// 기능 제거
const removeFeature = (featureId) => {
  const index = selectedFeatures.value.findIndex(f => f.id === featureId);
  if (index !== -1) {
    selectedFeatures.value.splice(index, 1);
  }
};

// 기능 선택 취소
const cancelFeatureSelection = () => {
  selectedFeatures.value = [];
  showAdditionalFeatures.value = false;
};

// 플랜 기간에 따른 할인율 계산
const getDurationDiscount = (duration) => {
  duration = parseInt(duration) || 1;
  if (duration === 3) return 5;
  else if (duration === 6) return 10;
  else if (duration === 12) return 20;
  return 0;
};

// 플랜 월 가격 계산 (할인 없음)
const calculatePlanMonthlyPrice = (plan) => {
  if (!plan || !plan.price) return 0;
  return plan.price;
};

// 플랜 총 가격 계산 (기간과 할인 적용)
const calculatePlanTotalPrice = (plan) => {
  if (!plan || !plan.price) return 0;
  // 기본 가격 (월 가격 * 기간)
  const basePrice = plan.price * (selectedPlanDuration.value || 1);
  // 할인율 계산
  const discount = getDurationDiscount(selectedPlanDuration.value) / 100;
  // 총 가격에 할인 적용
  return basePrice * (1 - discount);
};

// 할인된 월 가격 계산 (표시용)
const calculateDiscountedMonthlyPrice = (plan) => {
  if (!plan || !plan.price) return 0;
  // 총 가격을 기간으로 나누어 할인된 월 가격 계산
  const totalPrice = calculatePlanTotalPrice(plan);
  const duration = selectedPlanDuration.value || 1;
  return totalPrice / duration;
};

// 플랜 기간에 따른 추가 기능 가격 계산
// 월 구독 기준 일수 상수 정의
const DAYS_PER_MONTH = 30;

// 일할 계산을 위한 일일 요금 계산 함수
const calculateDailyRate = (monthlyPrice) => {
  return monthlyPrice / DAYS_PER_MONTH;
};

// 기간에 따른 기능 가격 계산 (할인 적용)
const calculateFeaturePriceWithDuration = (feature, duration) => {
  if (!feature || !feature.price) return 0;
  // 기본 가격 (월 가격 * 기간)
  const basePrice = feature.price * (parseInt(duration) || 1);
  // 할인율 계산
  const discount = getDurationDiscount(parseInt(duration) || 1) / 100;
  // 총 가격에 할인 적용
  return basePrice * (1 - discount);
};

// 추가 기능 가격 계산 (현재 구독 기간에 맞게 계산)
const calculateFeaturePrice = (feature) => {
  if (!feature || !feature.price) return 0;
  
  // 플랜을 변경하는 경우는 선택한 기간으로 계산
  if (selectedPlan.value && !isCurrentPlan(selectedPlan.value.id)) {
    return calculateFeaturePriceWithDuration(feature, selectedPlanDuration.value || 1);
  }
  
  // 플랜 변경 없이 기능만 추가하는 경우는 남은 구독 기간에 맞게 계산
  const dailyRate = calculateDailyRate(feature.price);
  
  // 남은 기간에 대한 가격 계산 (일수에 따라 정확히 계산)
  return Math.floor(dailyRate * remainingDays.value);
};

// 선택한 추가 기능 총액 계산
const calculateSelectedFeaturesTotal = () => {
  return selectedFeatures.value.reduce((total, feature) => {
    return total + calculateFeaturePrice(feature);
  }, 0);
};

// 현재 총 결제 금액 계산
const calculateTotalPrice = () => {
  console.log('currentSubscription.value', currentSubscription.value);
  const planPrice = currentSubscription.value?.planPrice || 0;
  
  // 활성화된 기능의 월 금액 계산
  const activeFeatureTotal = activeFeatures.value.reduce((total, feature) => {
    // 각 활성화된 기능에 대해 해당 기능의 가격 찾기
    const featureInfo = availableFeatures.value.find(f => f.id === feature.featureId);
    // 기능 정보가 있고 가격이 있으면 더하기, 없으면 0 더하기
    return total + (featureInfo?.price || 0);
  }, 0);
  
  return planPrice + activeFeatureTotal;
};

// 업그레이드인지 다운그레이드인지 확인
const isUpgrade = computed(() => {
  if (!currentSubscription.value || !selectedPlan.value) return false;
  return selectedPlan.value.price > currentSubscription.value.planPrice;
});

// 남은 기간 계산
const remainingDays = computed(() => {
  if (!currentSubscription.value) return 0;
  const today = new Date();
  const endDate = new Date(currentSubscription.value.endDate);
  const diffTime = endDate - today;
  return Math.max(0, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
});

// 다음 결제일 계산
const nextBillingDate = computed(() => {
  if (!currentSubscription.value) return new Date();
  return currentSubscription.value.endDate;
});

// 현재 플랜 환불액 (정확한 일할 계산)
const refundAmount = computed(() => {
  if (!currentSubscription.value) return 0;
  
  // 일단위 가격 계산
  const dailyRate = calculateDailyRate(currentSubscription.value.planPrice);
  
  // 남은 기간에 대한 환불액 계산 (정수로 내림)
  return Math.floor(dailyRate * remainingDays.value);
});

// 새 플랜 일할 계산 금액 (할인 및 일할 계산 적용)
const proRatedNewPlanPrice = computed(() => {
  if (!selectedPlan.value) return 0;
  
  // 월 가격에 할인을 적용
  const monthlyPrice = calculatePlanMonthlyPrice(selectedPlan.value);
  
  // 일단위 가격 계산
  const dailyRate = calculateDailyRate(monthlyPrice);
  
  // 남은 기간에 대한 결제액 계산 (정수로 내림)
  return Math.floor(dailyRate * remainingDays.value);
});

// 플랜 가격 차액
const planPriceDifference = computed(() => {
  if (!selectedPlan.value || !currentSubscription.value) return 0;
  
  // 업그레이드이고 즉시 적용인 경우
  if (isUpgrade.value && changeOption.value === 'immediate') {
    // 새 플랜 결제액에서 현재 플랜 환불액을 차감 (정수로 내림)
    return Math.floor(proRatedNewPlanPrice.value - refundAmount.value);
  }
  
  // 다운그레이드나 다음 결제일 적용인 경우
  return 0;
});

// 추가 기능 일할 계산 가격
const calculateProRatedFeaturePrice = (feature) => {
  if (!feature || !feature.price) return 0;
  
  const fullPrice = calculateFeaturePrice(feature);
  
  // 1개월 구독이고 남은 기간이 기준 일수 미만인 경우에만 일할 계산
  if (feature.selectedDuration === 1 && remainingDays.value < DAYS_PER_MONTH) {
    const dailyRate = calculateDailyRate(fullPrice);
    return dailyRate * remainingDays.value;
  }
  
  return fullPrice;
};

// 추가 기능 총액
const totalFeaturesPrice = computed(() => {
  return selectedFeatures.value.reduce((total, feature) => {
    return total + calculateProRatedFeaturePrice(feature);
  }, 0);
});

// 최종 결제 금액
const finalAmount = computed(() => {
  // 현재 구독이 없고 새로운 플랜을 선택한 경우 (신규 구독)
  if (!currentSubscription.value && selectedPlan.value) {
    // 플랜 총액 계산 (기간 할인 적용)
    const planTotal = calculatePlanTotalPrice(selectedPlan.value);
    // 추가 기능 총액
    const featuresTotal = totalFeaturesPrice.value;
    // 10원 단위로 절삭
    const amount = planTotal + featuresTotal;
    return Math.floor(amount / 10) * 10;
  }
  // 플랜 변경이 있는 경우
  else if (selectedPlan.value && !isCurrentPlan(selectedPlan.value.id)) {
    // 업그레이드이고 즉시 적용인 경우
    if (isUpgrade.value && changeOption.value === 'immediate') {
      // 3개월 이상 구독인 경우 총 금액에서 환불액을 빼야 함
      if (selectedPlanDuration.value > 1) {
        // 플랜 총 금액 - 환불액 + 추가 기능 가격 (10원 단위로 절삭)
        const amount = calculatePlanTotalPrice(selectedPlan.value) - refundAmount.value + totalFeaturesPrice.value;
        return Math.floor(amount / 10) * 10;
      } else {
        // 1개월 구독은 기존과 동일하게 차액 계산 (10원 단위로 절삭)
        const amount = planPriceDifference.value + totalFeaturesPrice.value;
        return Math.floor(amount / 10) * 10;
      }
    } 
    // 다운그레이드나 다음 결제일부터 적용인 경우 추가 기능만 계산
    else if (!isUpgrade.value || changeOption.value === 'nextBilling') {
      // 10원 단위로 절삭
      return Math.floor(totalFeaturesPrice.value / 10) * 10;
    }
    // 기타 플랜 변경 케이스
    else {
      // 10원 단위로 절삭
      const amount = calculatePlanTotalPrice(selectedPlan.value) + totalFeaturesPrice.value;
      return Math.floor(amount / 10) * 10;
    }
  } 
  // 플랜 변경이 없고 추가 기능만 있는 경우
  else {
    // 10원 단위로 절삭
    return Math.floor(totalFeaturesPrice.value / 10) * 10;
  }
});

// 총 결제 금액 계산
const calculateTotalPaymentAmount = () => {
  return finalAmount.value;
};

// 결제 화면으로 진행
const proceedToPayment = () => {
  if (selectedFeatures.value.length === 0 && (!selectedPlan.value || isCurrentPlan(selectedPlan.value.id))) {
    alert('구매할 플랜이나 기능을 선택해주세요.');
    return;
  }
  
  showPaymentSection.value = true;
  showAdditionalFeatures.value = false;
  showPlans.value = false;
};

// 결제 취소
const cancelPayment = () => {
  showPaymentSection.value = false;
  paymentAgreement.value = false;
};

// 토스페이먼츠 결제 처리
const processPayment = async () => {
  try {
    // 결제 정보 준비
    const paymentRequestData = {
      clubId: clubId.value,
      planChange: selectedPlan.value && selectedPlan.value.id !== (currentSubscription.value?.planId || null),
      planId: selectedPlan.value?.id,
      currentPlanId: currentSubscription.value?.planId,
      isUpgrade: isUpgrade.value,
      planDuration: selectedPlanDuration.value || 1,
      features: selectedFeatures.value.map(f => ({
        featureId: f.id,
        duration: selectedPlanDuration.value || 1,
        price: calculateProRatedFeaturePrice(f)
      })),
      totalAmount: Math.round(finalAmount.value),
      successUrl: `${window.location.origin}/payment/success`,
      failUrl: `${window.location.origin}/payment/fail`
    };
    
    // 결제 요청 API 호출
    const response = await apiClient.post('/api/subscriptions/payment/request', paymentRequestData);
    
    // 토스페이먼츠 SDK 초기화
    const tossPayments = await loadTossPaymentsSDK();
    
    // 결제 성공/실패 핸들러 등록 (전역 함수로 등록)
    window.handlePaymentSuccess = handlePaymentSuccess;
    window.handlePaymentFail = handlePaymentFail;
    
    // 결제 창 열기 - 결제 방법을 미리 지정하지 않고 토스페이먼츠 결제 창에서 선택하도록 함
    await tossPayments.requestPayment({
      ...response.data.paymentData,
      customerEmail: localStorage.getItem('userEmail') || '',
      customerName: localStorage.getItem('userName') || ''
    });
    
  } catch (error) {
    console.error('결제 처리 실패:', error);
    
    // 결제 창을 닫은 경우 예외 처리 (POPUP_CLOSED 오류)
    if (error.code === 'POPUP_CLOSED' || error.message?.includes('closed') || error.message?.includes('닫')) {
      console.log('결제 창이 닫혔습니다. 다시 시도해주세요.');
      return; // 사용자가 의도적으로 창을 닫은 경우 알림 표시하지 않음
    }
    
    // 그 외 오류는 알림 표시
    alert(error.response?.data?.message || '결제 처리 중 오류가 발생했습니다.');
  }
};

// 선택 항목 초기화
const resetSelections = () => {
  selectedPlan.value = null;
  selectedFeatures.value = [];
  selectedPlanDuration.value = 1;
  showPlans.value = false;
  showFeatures.value = false;
  isSelectingPlan.value = false;
  isSelectingFeatures.value = false;
  changeOption.value = 'immediate';
  paymentAgreement.value = false;
  showPaymentSection.value = false;
  showAdditionalFeatures.value = false;
};

// 토스페이먼츠 SDK 로드
const loadTossPaymentsSDK = () => {
  return new Promise((resolve, reject) => {
    try {
      // 기존 스크립트 제거 (재사용 문제 해결을 위해)
      const existingScript = document.querySelector('script[src="https://js.tosspayments.com/v1/payment-widget"]');
      if (existingScript) {
        existingScript.remove();
      }
      
      // 스크립트 로드
      const script = document.createElement('script');
      script.src = 'https://js.tosspayments.com/v1/payment-widget';
      script.onload = () => {
        if (window.TossPayments) {
          const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
          const tossPayments = window.TossPayments(clientKey);
          resolve(tossPayments);
        } else {
          reject(new Error('페이먼츠 SDK를 찾을 수 없습니다.'));
        }
      };
      script.onerror = () => {
        reject(new Error('페이먼츠 SDK 로드 실패'));
      };
      document.head.appendChild(script);
    } catch (error) {
      reject(error);
    }
  });
};

// 결제 성공 처리
const handlePaymentSuccess = async (orderId) => {
  try {
    console.log('결제 성공:', orderId);
    
    // 데이터 다시 로드
    await Promise.all([
      loadCurrentSubscription(),
      loadActiveFeatures(),
      loadFeaturePayments(),
      loadPayments()
    ]);
    
    // 상태 초기화
    resetSelections();
    
    // 성공 메시지 표시 (토스트 메시지 추가)
    toast.add({
      severity: 'success',
      summary: '결제 성공',
      detail: '구독 플랜 결제가 성공적으로 완료되었습니다.',
      life: 5000
    });
  } catch (error) {
    console.error('결제 성공 후 처리 오류:', error);
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '구독 정보를 새로고침하는 중 오류가 발생했습니다.',
      life: 5000
    });
  }
};

// 결제 실패 처리
const handlePaymentFail = (message) => {
  console.log('결제 실패:', message);
  
  // 실패 메시지 표시 (토스트 메시지 추가)
  toast.add({
    severity: 'error',
    summary: '결제 실패',
    detail: message || '결제 처리 중 오류가 발생했습니다.',
    life: 5000
  });
  
  // 결제 실패 후 초기화
  resetSelections();
};

// 플랜 구독 (기존 기능 - 레거시)
const subscribeToPlan = async (planId) => {
  try {
    await apiClient.post('/api/subscriptions/subscribe', { planId });
    await loadCurrentSubscription();
  } catch (error) {
    console.error('구독 신청 실패:', error);
  }
};

// 기능 구매 (기존 기능 - 레거시)
const purchaseFeature = async (feature) => {
  try {
    await apiClient.post('/api/features/purchase', {
      featureId: feature.id,
      duration: feature.selectedDuration
    });
    await Promise.all([
      loadActiveFeatures(),
      loadFeaturePayments()
    ]);
  } catch (error) {
    console.error('기능 구매 실패:', error);
  }
};

onMounted(async () => {
  await Promise.all([
    loadCurrentSubscription(),
    loadPlans(),
    loadPayments(),
    loadAvailableFeatures(),
    loadActiveFeatures(),
    loadFeaturePayments()
  ]);
});
</script>

<style scoped>
.subscription-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
}

.subscription-management h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.subscription-management h3 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
  color: #2c3e50;
}

.subscription-management h4 {
  font-size: 1.2rem;
  margin: 1rem 0;
  color: #2c3e50;
}

/* 현재 구독 정보 */
.current-subscription {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #0d6efd;
}

.subscription-info p {
  margin: 8px 0;
  line-height: 1.5;
}

.active-features-list {
  list-style: none;
  padding-left: 20px;
  margin: 10px 0;
}

.active-features-list li {
  margin: 5px 0;
  position: relative;
  padding-left: 20px;
}

.active-features-list li:before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #198754;
  font-weight: bold;
}

/* 섹션 헤더 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.toggle-btn {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.toggle-btn:hover {
  background: #0b5ed7;
}

/* 플랜 그리드 */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  gap: 30px;
  margin: 20px 0;
}

.plan-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #fff;
  /* 고정 높이 제거하고 최소 높이 설정 */
  min-height: 500px;
  /* 카드 내부 요소를 위에서 아래로 배치하기 위한 설정 */
  justify-content: space-between;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.plan-card.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.plan-card.current {
  border-color: #2196F3;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.plan-card .price {
  font-size: 1.2rem;
  color: #0d6efd;
  margin: 0;
  font-weight: bold;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  width: 100%;
}

.plan-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

.plan-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
}

.plan-detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.detail-label {
  font-weight: 500;
  color: #555;
}

.detail-value {
  color: #333;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-features h5 {
  margin: 0;
  font-size: 1rem;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.features-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  flex: 1 1 calc(33% - 15px);
  min-width: 200px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.feature-item i {
  color: #4CAF50;
  margin-right: 10px;
  margin-top: 3px;
}

@media (max-width: 768px) {
  .feature-item {
    flex: 1 1 100%;
  }
}

.feature-info {
  display: flex;
  flex-direction: column;
}

.feature-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.feature-description {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2px;
}

.no-features {
  color: #999;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-plan-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  margin-top: auto; /* 자동 마진으로 버튼을 하단에 고정 */
  transition: background-color 0.2s;
  /* 추가 - 모든 버튼이 동일한 높이에 표시되도록 설정 */
  align-self: flex-end;
  width: 100%;
  margin-bottom: 5px;
}

.select-plan-btn:hover {
  background-color: #45a049;
}

.select-plan-btn.current-plan {
  background-color: #2196F3;
}

.features {
  list-style: none;
  padding: 0;
  text-align: left;
}

.features li {
  margin: 10px 0;
  padding-left: 25px;
  position: relative;
}

.features li i {
  position: absolute;
  left: 0;
  top: 25px;
  color: #198754;
}

.selected-plan-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  border-left: 4px solid #0d6efd;
}

/* 기능 그리드 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  gap: 30px;
  margin: 20px 0;
}

.feature-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #fff;
  min-height: 400px;
  justify-content: space-between;
}

.feature-card.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.feature-card.active {
  border-color: #2196F3;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.feature-card.included-in-plan {
  border-color: #9C27B0;
  box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
  background-color: rgba(156, 39, 176, 0.05);
}

.feature-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #2196F3;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.feature-included-info {
  margin-top: 15px;
  padding: 10px;
  background-color: rgba(156, 39, 176, 0.1);
  border-radius: 4px;
  color: #9C27B0;
  font-weight: 500;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.description {
  color: #6c757d;
  margin: 12px 0;
  min-height: 60px;
  line-height: 1.5;
}

.feature-card .price {
  font-size: 1.4em;
  color: #0d6efd;
  margin: 15px 0;
  font-weight: bold;
}

.feature-actions {
  margin-top: 15px;
}

.duration-select {
  margin: 15px 0;
}

.duration-select label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.duration-select select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  font-size: 0.95rem;
}

.feature-btn {
  width: 100%;
  background: #0d6efd;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.feature-btn:hover {
  background: #0b5ed7;
}

.feature-active-info {
  margin-top: 15px;
  padding: 10px;
  background: #e9f7ef;
  border-radius: 6px;
  color: #198754;
}

.selected-plan-info {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #4CAF50;
  border-radius: 8px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.selected-plan-info h4 {
  margin: 0;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-price {
  font-size: 1.2rem;
  font-weight: 500;
  color: #4CAF50;
  margin: 0;
}

.plan-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.plan-change-options {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

.plan-change-options h5 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 1rem;
  margin-bottom: 15px;
}

.option-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.option-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.price-calculation {
  background-color: #fff;
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid #e0e0e0;
}

.price-calculation p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.price-calculation .subtotal {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e0e0e0;
  font-weight: bold;
  color: #2c3e50;
}

.price-calculation .note {
  font-size: 0.8rem;
  color: #666;
  font-style: italic;
  margin-top: 8px;
}

.plan-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

/* 선택된 기능 요약 */
.selected-features-summary {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  border: 1px solid #dee2e6;
}

.selected-features-summary h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.2rem;
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 8px;
}

.selected-features-summary h5 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #555;
  font-size: 1rem;
}

.selected-features-summary ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 15px;
}

.selected-features-summary li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.summary-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #dee2e6;
  padding-top: 15px;
  border-top: 1px solid #dee2e6;
  font-weight: bold;
  font-size: 1.1rem;
}

.summary-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* 결제 섹션 */
.payment-section {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  margin: 30px 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.payment-summary {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-summary h4 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 1.2rem;
  border-bottom: 2px solid #4caf50;
  padding-bottom: 10px;
}

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-item {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 8px 0;
}

.item-label {
  font-weight: 500;
  color: #555;
}

.item-value {
  color: #333;
}

.item-price {
  text-align: right;
  font-weight: 500;
}

.feature-included-info {
  background-color: #e8f5e9;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  border-left: 4px solid #2e7d32;
}

.feature-included-info p {
  margin: 0;
  color: #2e7d32;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.feature-included-info p::before {
  content: '\2713'; /* 체크 마크 */
  margin-right: 8px;
  font-weight: bold;
  font-size: 1.2em;
}

.feature-card.included-in-selected-plan {
  border: 2px solid #ed6c02;
  box-shadow: 0 0 8px rgba(237, 108, 2, 0.2);
}

.feature-card.included-in-selected-plan .feature-title::after {
  content: '선택한 플랜에 포함됨';
  display: inline-block;
  margin-left: 10px;
  font-size: 0.8rem;
  background-color: #ed6c02;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: normal;
  vertical-align: middle;
}

.plan-change {
  background-color: #f0f7ff;
  padding: 8px 10px;
  border-radius: 6px;
  margin-left: 15px;
}

.plan-change.subtotal {
  background-color: #e3f2fd;
  font-weight: bold;
  border-top: 1px dashed #bbdefb;
  padding-top: 10px;
}

.plan-change.note {
  background-color: #fff3e0;
  font-size: 0.9rem;
}

.feature-section-header {
  margin-top: 15px;
  margin-bottom: 5px;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
  font-weight: bold;
  color: #2c3e50;
}

.summary-item.subtotal {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
  font-weight: 500;
}

.summary-total {
  margin-top: 20px;
  padding: 15px 10px;
  border-top: 2px solid #ddd;
  background-color: #e8f5e9;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
}

.calculation-note {
  font-size: 0.8em;
  font-weight: normal;
  color: #6c757d;
  margin-left: 5px;
}

.total-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-summary {
  margin-top: 8px;
  padding: 5px 10px;
  background-color: #fff3e0;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #ed6c02;
}

.calculation-summary {
  margin-top: 8px;
  padding: 5px 10px;
  background-color: #e8f4fd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.discount-tag {
  display: inline-block;
  background-color: #e8f5e9;
  color: #2e7d32;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
  font-weight: 500;
}

.duration-item {
  background-color: #f8f9fa;
  border-left: 3px solid #0d6efd;
  padding: 10px 15px;
  margin: 8px 0;
  border-radius: 4px;
}

.total-label {
  color: #2c3e50;
}

.total-price {
  color: #2e7d32;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin: 15px 0;
}

.payment-method-item {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-method-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.payment-method-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.payment-icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.payment-emoji {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-method-name {
  font-size: 14px;
  font-weight: 500;
}

.selected-feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e8f5e9;
}

.selected-feature-item .feature-info {
  flex: 1;
}

.feature-price {
  display: block;
  font-size: 0.9rem;
  color: #555;
  margin-top: 3px;
}

.feature-price strong {
  color: #2e7d32;
  margin-left: 5px;
}

.remove-btn {
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.2s;
}

.remove-btn:hover {
  background-color: #d32f2f;
}

.payment-method-item:hover {
  border-color: #adb5bd;
}

.payment-method-item.selected {
  border: 2px solid #0d6efd;
  background: #e7f1ff;
}

.payment-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 10px;
}

.payment-agreement {
  margin: 20px 0;
}

.duration-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

.duration-info {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #0d6efd;
  background-color: #e6f0ff;
  padding: 8px;
  border-radius: 4px;
  font-weight: 500;
}

.payment-note {
  font-size: 0.8rem;
  color: #2e7d32;
  margin-left: 5px;
  font-weight: normal;
}

.duration-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 0.9rem;
  position: relative;
  transition: all 0.2s;
  min-width: 80px;
  text-align: center;
}

.duration-btn:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.duration-btn.active {
  background-color: #e3f2fd;
  border-color: #90caf9;
  font-weight: bold;
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,105,217,0.2);
}

.discount-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ff6b6b;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.subscription-duration {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ddd;
}

.feature-info {
  padding: 8px;
  background-color: #f0f7ff;
  border-radius: 6px;
  font-size: 0.9rem;
}

.duration-info {
  color: #0069d9;
  font-weight: 500;
  margin-bottom: 5px;
}

.price-info {
  color: #2e7d32;
  font-weight: 500;
}

.payment-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.payment-btn {
  flex: 1;
  background: #0d6efd;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.1rem;
  transition: background 0.2s;
}

.payment-btn:hover:not(:disabled) {
  background: #0b5ed7;
}

.payment-btn:disabled {
  background: #adb5bd;
  cursor: not-allowed;
}

.primary-btn {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  min-width: 120px;
}

.primary-btn:hover {
  background-color: #0b5ed7;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.secondary-btn {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
  min-width: 120px;
}

.secondary-btn:hover {
  background-color: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cancel-btn {
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #dee2e6;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
}

.plan-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.plan-price-details {
  margin-bottom: 15px;
}

.plan-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.monthly-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

.total-duration-price {
  font-size: 0.95rem;
  color: #0d6efd;
  background-color: #e6f0ff;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
}

.total-price {
  font-weight: bold;
  color: #0d6efd;
}

.discount-info {
  color: #2e7d32;
  font-size: 0.9rem;
  font-weight: 500;
}

.duration-total {
  background-color: #e8f5e9;
  padding: 5px 10px;
  border-radius: 4px;
  color: #2e7d32;
  font-weight: 500;
  margin: 8px 0;
}

.price-details {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  font-weight: 500;
}

.selected-plan-summary {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid #0d6efd;
}

.selected-plan-summary h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #0d6efd;
  font-size: 1.1rem;
}

.plan-info {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.plan-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin: 0;
  flex-basis: 100%;
}

.plan-duration, .plan-price {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

.continue-btn {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.continue-btn:hover {
  background: #0b5ed7;
}

/* 기능 구매 내역 및 결제 내역 */
.feature-history, .payment-history {
  margin: 30px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

th {
  background: #f1f3f5;
  font-weight: 600;
  color: #495057;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background-color: #f8f9fa;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  .plans-grid, .features-grid, .payment-methods {
    grid-template-columns: 1fr;
  }
  
  .summary-actions, .payment-actions {
    flex-direction: column;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .toggle-btn {
    width: 100%;
  }
  
  .selected-features-summary li {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr {
    border: 1px solid #dee2e6;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    text-align: right;
  }
  
  td:before {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    content: attr(data-label);
  }
  
  td:last-child {
    border-bottom: 0;
  }
}
</style>
