<template>
  <div>
    <!-- Page Header -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-white">{{ t('commission_rules.title') }}</h1>
      <p class="text-slate-400 mt-1">{{ t('commission_rules.subtitle') }}</p>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="flex items-center justify-center py-20">
      <div class="text-slate-400 flex items-center gap-3">
        <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span>{{ t('commission_rules.loading') }}</span>
      </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
      <p class="text-rose-400">{{ t('commission_rules.error') }}</p>
      <button @click="fetchRules" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">{{ t('commission_rules.retry') }}</button>
    </div>

    <template v-else>
      <!-- Filters & Create Button -->
      <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <!-- Filters -->
        <div class="flex flex-wrap items-center gap-3">
          <!-- Rule Type Filter -->
          <select
            v-model="filterType"
            class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
            @change="fetchRules"
          >
            <option value="">{{ t('commission_rules.all_types') }}</option>
            <option value="L1_REWARD">{{ t('commission_rules.l1_reward') }}</option>
            <option value="L2_COMMISSION">{{ t('commission_rules.l2_commission') }}</option>
          </select>

          <!-- Tier Filter -->
          <select
            v-model="filterTier"
            class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
            @change="fetchRules"
          >
            <option value="">{{ t('commission_rules.all_tiers') }}</option>
            <option value="STANDARD">{{ t('commission_rules.tier_standard') }}</option>
            <option value="VIP">{{ t('commission_rules.tier_vip') }}</option>
            <option value="PLATINUM">{{ t('commission_rules.tier_platinum') }}</option>
            <option value="ENTERPRISE">{{ t('commission_rules.tier_enterprise') }}</option>
            <option value="CONTRACTED">{{ t('commission_rules.tier_contracted') }}</option>
          </select>

          <!-- Region Filter -->
          <input
            v-model="filterRegion"
            type="text"
            :placeholder="t('commission_rules.filter_region')"
            maxlength="10"
            class="w-28 px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
            @input="debouncedFetch"
          />

          <!-- Active Only Toggle -->
          <label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer select-none">
            <input
              v-model="filterActive"
              type="checkbox"
              class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
              @change="fetchRules"
            />
            {{ t('commission_rules.active_only') }}
          </label>

          <!-- Campaign Only Toggle -->
          <label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer select-none">
            <input
              v-model="filterCampaign"
              type="checkbox"
              class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
              @change="fetchRules"
            />
            {{ t('commission_rules.campaign_only') }}
          </label>
        </div>

        <!-- Create Button -->
        <button @click="openCreateModal" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
          </svg>
          {{ t('commission_rules.create') }}
        </button>
      </div>

      <!-- Rules Table -->
      <div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
        <table class="w-full">
          <thead>
            <tr class="border-b border-slate-700">
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.id') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.name') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.type') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.tier') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.region') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.campaign_dates') }}</th>
              <th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.status') }}</th>
              <th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">{{ t('commission_rules.actions') }}</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-700/50">
            <tr v-for="rule in rules" :key="rule.id" class="hover:bg-slate-700/30 transition">
              <td class="px-6 py-4 text-sm text-slate-400">{{ rule.id }}</td>
              <td class="px-6 py-4">
                <div class="text-sm font-medium text-white">{{ rule.name }}</div>
                <div v-if="rule.description" class="text-xs text-slate-500 mt-0.5 max-w-xs truncate">{{ rule.description }}</div>
              </td>
              <td class="px-6 py-4">
                <span
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="rule.rule_type === 'L1_REWARD' ? 'bg-amber-500/10 text-amber-400' : 'bg-blue-500/10 text-blue-400'"
                >
                  {{ rule.rule_type === 'L1_REWARD' ? t('commission_rules.l1_reward') : t('commission_rules.l2_commission') }}
                </span>
              </td>
              <td class="px-6 py-4">
                <span
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="tierBadgeClass(rule.tier)"
                >
                  {{ tierLabel(rule.tier) }}
                </span>
              </td>
              <td class="px-6 py-4">
                <code class="text-sm font-mono text-indigo-300 bg-indigo-500/10 px-2 py-0.5 rounded">{{ rule.region_code }}</code>
              </td>
              <td class="px-6 py-4">
                <template v-if="rule.is_campaign">
                  <div class="text-xs text-slate-300">
                    <span class="text-amber-400 font-medium">{{ t('commission_rules.campaign') }}</span>
                  </div>
                  <div class="text-xs text-slate-500 mt-0.5">
                    {{ rule.start_date || '—' }} → {{ rule.end_date || '—' }}
                  </div>
                </template>
                <span v-else class="text-xs text-slate-500">{{ t('commission_rules.permanent') }}</span>
              </td>
              <td class="px-6 py-4">
                <span
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                  :class="rule.is_active ? 'bg-emerald-500/10 text-emerald-400' : 'bg-slate-500/10 text-slate-400'"
                >
                  {{ rule.is_active ? t('commission_rules.active') : t('commission_rules.inactive') }}
                </span>
              </td>
              <td class="px-6 py-4 text-right">
                <div class="flex items-center justify-end gap-2">
                  <button @click="openEditModal(rule)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition" :title="t('commission_rules.edit')">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                  </button>
                  <button @click="confirmDeactivate(rule)" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-400 hover:bg-rose-500/10 transition" :title="t('commission_rules.deactivate')">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr v-if="rules.length === 0">
              <td colspan="8" class="px-6 py-12 text-center text-sm text-slate-500">
                {{ t('commission_rules.no_items') }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div v-if="totalPages > 1" class="mt-6 flex items-center justify-between">
        <div class="text-sm text-slate-400">
          {{ t('commission_rules.showing') }} {{ (currentPage - 1) * pageSize + 1 }}–{{ Math.min(currentPage * pageSize, total) }} / {{ total }}
        </div>
        <div class="flex items-center gap-2">
          <button
            :disabled="currentPage <= 1"
            class="px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-30 disabled:cursor-not-allowed"
            :class="currentPage > 1 ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white' : 'bg-slate-800 text-slate-600'"
            @click="goToPage(currentPage - 1)"
          >
            {{ t('commission_rules.prev') }}
          </button>
          <span class="text-sm text-slate-400 px-2">{{ currentPage }} / {{ totalPages }}</span>
          <button
            :disabled="currentPage >= totalPages"
            class="px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-30 disabled:cursor-not-allowed"
            :class="currentPage < totalPages ? 'bg-slate-700 text-slate-300 hover:bg-slate-600 hover:text-white' : 'bg-slate-800 text-slate-600'"
            @click="goToPage(currentPage + 1)"
          >
            {{ t('commission_rules.next') }}
          </button>
        </div>
      </div>
    </template>

    <!-- Create/Edit Modal -->
    <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm overflow-y-auto py-8" @click.self="closeModal">
      <div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-2xl mx-4 shadow-2xl my-auto">
        <h2 class="text-lg font-semibold text-white mb-6">
          {{ editingRule ? t('commission_rules.edit_title') : t('commission_rules.create_title') }}
        </h2>

        <form @submit.prevent="saveRule" class="space-y-5">
          <!-- Row: Name + Rule Type -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Name -->
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.name') }} <span class="text-rose-400">*</span></label>
              <input
                v-model="form.name"
                type="text"
                required
                maxlength="255"
                :placeholder="t('commission_rules.name_placeholder')"
                class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
              />
            </div>

            <!-- Rule Type -->
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.type') }} <span class="text-rose-400">*</span></label>
              <select
                v-model="form.rule_type"
                required
                class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
              >
                <option value="L1_REWARD">{{ t('commission_rules.l1_reward') }}</option>
                <option value="L2_COMMISSION">{{ t('commission_rules.l2_commission') }}</option>
              </select>
            </div>
          </div>

          <!-- Row: Tier + Region -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Tier -->
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.tier') }}</label>
              <select
                v-model="form.tier"
                class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
              >
                <option value="STANDARD">{{ t('commission_rules.tier_standard') }}</option>
                <option value="VIP">{{ t('commission_rules.tier_vip') }}</option>
                <option value="PLATINUM">{{ t('commission_rules.tier_platinum') }}</option>
                <option value="ENTERPRISE">{{ t('commission_rules.tier_enterprise') }}</option>
                <option value="CONTRACTED">{{ t('commission_rules.tier_contracted') }}</option>
              </select>
            </div>

            <!-- Region Code -->
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.region_code_label') }}</label>
              <select
                v-model="form.region_code"
                class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
              >
                <option value="GLOBAL">{{ t('commission_rules.region_global') }}</option>
                <option value="HU">{{ t('commission_rules.region_hu') }}</option>
                <option value="DE">{{ t('commission_rules.region_de') }}</option>
                <option value="AT">{{ t('commission_rules.region_at') }}</option>
                <option value="RO">{{ t('commission_rules.region_ro') }}</option>
                <option value="SK">{{ t('commission_rules.region_sk') }}</option>
              </select>
            </div>
          </div>

          <!-- Description -->
          <div>
            <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.description') }}</label>
            <textarea
              v-model="form.description"
              rows="2"
              :placeholder="t('commission_rules.desc_placeholder')"
              class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm resize-none"
            ></textarea>
          </div>

          <!-- Campaign Section -->
          <div class="bg-slate-700/30 rounded-lg p-4 space-y-4">
            <div class="flex items-center gap-3">
              <input
                v-model="form.is_campaign"
                type="checkbox"
                id="is_campaign"
                class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
              />
              <label for="is_campaign" class="text-sm text-slate-300 font-medium">{{ t('commission_rules.is_campaign') }}</label>
            </div>

            <div v-if="form.is_campaign" class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- Start Date -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.start_date') }}</label>
                <input
                  v-model="form.start_date"
                  type="date"
                  class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
                />
              </div>
              <!-- End Date -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.end_date') }}</label>
                <input
                  v-model="form.end_date"
                  type="date"
                  class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
                />
              </div>
            </div>
          </div>

          <!-- Rewards Section (L1) -->
          <div
            class="bg-slate-700/30 rounded-lg p-4 space-y-4 transition-opacity duration-200"
            :class="form.rule_type === 'L2_COMMISSION' ? 'opacity-40 pointer-events-none' : ''"
          >
            <div class="text-sm font-medium text-slate-300 mb-2">{{ t('commission_rules.rewards_section') }}</div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- XP Reward -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.xp_reward') }}</label>
                <input
                  v-model.number="form.xp_reward"
                  type="number"
                  min="0"
                  placeholder="0"
                  :disabled="form.rule_type === 'L2_COMMISSION'"
                  class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
                />
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.xp_reward_helper') }}</p>
              </div>
              <!-- Credit Reward -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.credit_reward') }}</label>
                <input
                  v-model.number="form.credit_reward"
                  type="number"
                  min="0"
                  placeholder="0"
                  :disabled="form.rule_type === 'L2_COMMISSION'"
                  class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
                />
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.credit_reward_helper') }}</p>
              </div>
            </div>
          </div>

          <!-- Commission Section (L2) -->
          <div
            class="bg-slate-700/30 rounded-lg p-4 space-y-4 transition-opacity duration-200"
            :class="form.rule_type === 'L1_REWARD' ? 'opacity-40 pointer-events-none' : ''"
          >
            <div class="text-sm font-medium text-slate-300 mb-2">{{ t('commission_rules.commission_section') }}</div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <!-- Commission Percent (Gen1) -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.commission_percent') }}</label>
                <div class="relative">
                  <input
                    v-model.number="form.commission_percent"
                    type="number"
                    min="0"
                    max="100"
                    step="0.01"
                    placeholder="0.00"
                    :disabled="form.rule_type === 'L1_REWARD'"
                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
                  />
                  <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
                </div>
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.commission_percent_helper') }}</p>
              </div>
              <!-- Upline Commission Percent (Gen2) -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.upline_commission_percent') }}</label>
                <div class="relative">
                  <input
                    v-model.number="form.upline_commission_percent"
                    type="number"
                    min="0"
                    max="100"
                    step="0.01"
                    placeholder="0.00"
                    :disabled="form.rule_type === 'L1_REWARD'"
                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
                  />
                  <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
                </div>
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.upline_commission_percent_helper') }}</p>
              </div>
              <!-- Renewal Commission Percent -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.renewal_commission_percent') }}</label>
                <div class="relative">
                  <input
                    v-model.number="form.renewal_commission_percent"
                    type="number"
                    min="0"
                    max="100"
                    step="0.01"
                    placeholder="0.00"
                    :disabled="form.rule_type === 'L1_REWARD'"
                    class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm pr-8 disabled:cursor-not-allowed"
                  />
                  <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">%</span>
                </div>
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.renewal_commission_percent_helper') }}</p>
              </div>
              <!-- Commission Max Amount -->
              <div>
                <label class="block text-sm font-medium text-slate-300 mb-1">{{ t('commission_rules.commission_max_amount') }}</label>
                <input
                  v-model.number="form.commission_max_amount"
                  type="number"
                  min="0"
                  step="0.01"
                  placeholder="0.00"
                  :disabled="form.rule_type === 'L1_REWARD'"
                  class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm disabled:cursor-not-allowed"
                />
                <p class="mt-1 text-xs text-slate-400">{{ t('commission_rules.commission_max_amount_helper') }}</p>
              </div>
            </div>
          </div>

          <!-- Is Active -->
          <div class="flex items-center gap-3">
            <input
              v-model="form.is_active"
              type="checkbox"
              id="form_is_active"
              class="w-4 h-4 rounded bg-slate-700 border-slate-600 text-indigo-500 focus:ring-indigo-500/50"
            />
            <label for="form_is_active" class="text-sm text-slate-300">{{ t('commission_rules.active') }}</label>
          </div>

          <!-- Error Message -->
          <div v-if="formError" class="bg-rose-500/10 border border-rose-500/30 rounded-lg p-3">
            <p class="text-sm text-rose-400">{{ formError }}</p>
          </div>

          <!-- Actions -->
          <div class="flex justify-end gap-3 pt-2 border-t border-slate-700">
            <button type="button" @click="closeModal" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">{{ t('commission_rules.cancel') }}</button>
            <button type="submit" :disabled="saving" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
              <svg v-if="saving" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              {{ saving ? t('commission_rules.saving') : t('commission_rules.save') }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Deactivate Confirmation Modal -->
    <div v-if="showDeactivateModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showDeactivateModal = false">
      <div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-md mx-4 shadow-2xl">
        <h2 class="text-lg font-semibold text-white mb-2">{{ t('commission_rules.delete_title') }}</h2>
        <p class="text-sm text-slate-400 mb-6">
          {{ t('commission_rules.deactivate_confirm', { name: deactivatingRule?.name }) }}
        </p>
        <div class="flex justify-end gap-3">
          <button @click="showDeactivateModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">{{ t('commission_rules.cancel') }}</button>
          <button @click="deactivateRule" :disabled="saving" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 text-white rounded-lg text-sm font-medium transition">
            {{ saving ? t('commission_rules.saving') : t('commission_rules.deactivate') }}
          </button>
        </div>
      </div>
    </div>

    <!-- Success Toast -->
    <div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
      <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      {{ toast }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

definePageMeta({
  middleware: 'auth',
})

const { t } = useI18n()

interface CommissionRule {
  id: number
  rule_type: 'L1_REWARD' | 'L2_COMMISSION'
  tier: 'STANDARD' | 'VIP' | 'PLATINUM' | 'ENTERPRISE' | 'CONTRACTED'
  region_code: string
  xp_reward: number | null
  credit_reward: number | null
  commission_percent: number | null
  upline_commission_percent: number | null
  renewal_commission_percent: number | null
  commission_max_amount: number | null
  is_campaign: boolean
  start_date: string | null
  end_date: string | null
  name: string
  description: string | null
  is_active: boolean
  created_by: number | null
  created_at: string
  updated_at: string
}

interface PaginatedResponse {
  items: CommissionRule[]
  total: number
  page: number
  page_size: number
}

const loading = ref(true)
const error = ref(false)
const rules = ref<CommissionRule[]>([])
const showModal = ref(false)
const showDeactivateModal = ref(false)
const editingRule = ref<CommissionRule | null>(null)
const deactivatingRule = ref<CommissionRule | null>(null)
const saving = ref(false)
const formError = ref('')
const toast = ref('')

// Pagination
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))

// Filters
const filterType = ref('')
const filterTier = ref('')
const filterRegion = ref('')
const filterActive = ref(false)
const filterCampaign = ref(false)

let debounceTimer: ReturnType<typeof setTimeout> | null = null

function debouncedFetch() {
  if (debounceTimer) clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => {
    currentPage.value = 1
    fetchRules()
  }, 400)
}

const form = reactive({
  name: '',
  description: '',
  rule_type: 'L1_REWARD' as 'L1_REWARD' | 'L2_COMMISSION',
  tier: 'STANDARD' as 'STANDARD' | 'VIP' | 'PLATINUM' | 'ENTERPRISE' | 'CONTRACTED',
  region_code: 'GLOBAL',
  is_campaign: false,
  start_date: '',
  end_date: '',
  xp_reward: null as number | null,
  credit_reward: null as number | null,
  commission_percent: null as number | null,
  upline_commission_percent: null as number | null,
  renewal_commission_percent: null as number | null,
  commission_max_amount: null as number | null,
  is_active: true,
})

function getHeaders(): Record<string, string> {
  const tokenCookie = useCookie('access_token')
  const token = tokenCookie.value
  return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
}

function showToast(msg: string) {
  toast.value = msg
  setTimeout(() => { toast.value = '' }, 3000)
}

function resetForm() {
  form.name = ''
  form.description = ''
  form.rule_type = 'L1_REWARD'
  form.tier = 'STANDARD'
  form.region_code = 'GLOBAL'
  form.is_campaign = false
  form.start_date = ''
  form.end_date = ''
  form.xp_reward = null
  form.credit_reward = null
  form.commission_percent = null
  form.upline_commission_percent = null
  form.renewal_commission_percent = null
  form.commission_max_amount = null
  form.is_active = true
  formError.value = ''
}

function openCreateModal() {
  editingRule.value = null
  resetForm()
  showModal.value = true
}

function openEditModal(rule: CommissionRule) {
  editingRule.value = rule
  form.name = rule.name
  form.description = rule.description || ''
  form.rule_type = rule.rule_type
  form.tier = rule.tier
  form.region_code = rule.region_code
  form.is_campaign = rule.is_campaign
  form.start_date = rule.start_date || ''
  form.end_date = rule.end_date || ''
  form.xp_reward = rule.xp_reward
  form.credit_reward = rule.credit_reward
  form.commission_percent = rule.commission_percent
  form.upline_commission_percent = rule.upline_commission_percent
  form.renewal_commission_percent = rule.renewal_commission_percent
  form.commission_max_amount = rule.commission_max_amount
  form.is_active = rule.is_active
  formError.value = ''
  showModal.value = true
}

function closeModal() {
  showModal.value = false
  editingRule.value = null
  resetForm()
}

function confirmDeactivate(rule: CommissionRule) {
  deactivatingRule.value = rule
  showDeactivateModal.value = true
}

function tierLabel(tier: string): string {
  const key = `commission_rules.tier_${tier.toLowerCase()}`
  const label = t(key)
  return label !== key ? label : tier
}

function tierBadgeClass(tier: string): string {
  switch (tier) {
    case 'STANDARD': return 'bg-slate-500/10 text-slate-400'
    case 'VIP': return 'bg-purple-500/10 text-purple-400'
    case 'PLATINUM': return 'bg-cyan-500/10 text-cyan-400'
    case 'ENTERPRISE': return 'bg-amber-500/10 text-amber-400'
    case 'CONTRACTED': return 'bg-indigo-500/10 text-indigo-400'
    default: return 'bg-slate-500/10 text-slate-400'
  }
}

function goToPage(page: number) {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
  fetchRules()
}

async function fetchRules() {
  loading.value = true
  error.value = false
  try {
    const params = new URLSearchParams()
    params.set('page', String(currentPage.value))
    params.set('page_size', String(pageSize.value))
    if (filterType.value) params.set('rule_type', filterType.value)
    if (filterTier.value) params.set('tier', filterTier.value)
    if (filterRegion.value) params.set('region_code', filterRegion.value)
    if (filterActive.value) params.set('is_active', 'true')
    if (filterCampaign.value) params.set('is_campaign', 'true')

    const data = await $fetch<PaginatedResponse>(`/api/v1/admin/commission-rules?${params.toString()}`, {
      headers: getHeaders(),
    })
    rules.value = data.items
    total.value = data.total
  } catch (e) {
    console.error('Failed to fetch commission rules:', e)
    error.value = true
  } finally {
    loading.value = false
  }
}

async function saveRule() {
  saving.value = true
  formError.value = ''
  try {
    const payload: Record<string, any> = {
      name: form.name,
      description: form.description || null,
      rule_type: form.rule_type,
      tier: form.tier,
      region_code: form.region_code,
      is_campaign: form.is_campaign,
      is_active: form.is_active,
    }

    // Only include campaign dates if is_campaign is true
    if (form.is_campaign) {
      payload.start_date = form.start_date || null
      payload.end_date = form.end_date || null
    } else {
      payload.start_date = null
      payload.end_date = null
    }

    // Type-specific fields
    payload.xp_reward = form.xp_reward
    payload.credit_reward = form.credit_reward
    payload.commission_percent = form.commission_percent
    payload.upline_commission_percent = form.upline_commission_percent
    payload.renewal_commission_percent = form.renewal_commission_percent
    payload.commission_max_amount = form.commission_max_amount

    if (editingRule.value) {
      await $fetch(`/api/v1/admin/commission-rules/${editingRule.value.id}`, {
        method: 'PUT',
        headers: getHeaders(),
        body: payload,
      })
      showToast(t('commission_rules.updated'))
    } else {
      await $fetch('/api/v1/admin/commission-rules', {
        method: 'POST',
        headers: getHeaders(),
        body: payload,
      })
      showToast(t('commission_rules.created'))
    }
    closeModal()
    await fetchRules()
  } catch (e: any) {
    console.error('Failed to save commission rule:', e)
    formError.value = e?.data?.detail || t('commission_rules.save_error')
  } finally {
    saving.value = false
  }
}

async function deactivateRule() {
  if (!deactivatingRule.value) return
  saving.value = true
  try {
    await $fetch(`/api/v1/admin/commission-rules/${deactivatingRule.value.id}`, {
      method: 'DELETE',
      headers: getHeaders(),
    })
    showToast(t('commission_rules.deactivated'))
    showDeactivateModal.value = false
    deactivatingRule.value = null
    await fetchRules()
  } catch (e) {
    console.error('Failed to deactivate commission rule:', e)
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  fetchRules()
})
</script>

<style scoped>
.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
