<script setup lang="ts">
defineOptions({ name: 'AdminDepositManage' });

import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
import DepositOrders from './DepositOrders.vue';
import PaymentMethods from './PaymentMethods.vue';

const { t } = useAdminLocale();
const route = useRoute();
const router = useRouter();

const tabs = [
  { key: 'orders', label: () => t('deposit.deposit_orders_title') },
  { key: 'methods', label: () => t('deposit.payment_methods_title') },
] as const;

function getTabFromQuery(): string {
  return route.query.tab === 'methods' ? 'methods' : 'orders';
}

const activeTab = ref(getTabFromQuery());

watch(() => route.query.tab, (val) => {
  activeTab.value = val === 'methods' ? 'methods' : 'orders';
});

function switchTab(key: string) {
  activeTab.value = key;
  router.replace({ query: { ...route.query, tab: key } });
}
</script>

<template>
  <div class="page-deposit-manage">
    <div class="tab-bar">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        class="tab-btn"
        :class="{ active: activeTab === tab.key }"
        @click="switchTab(tab.key)"
      >
        {{ tab.label() }}
      </button>
    </div>

    <DepositOrders v-show="activeTab === 'orders'" />
    <PaymentMethods v-show="activeTab === 'methods'" />
  </div>
</template>

<style scoped>
.page-deposit-manage {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.tab-btn {
  position: relative;
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s;
  letter-spacing: 0.02em;
}

.tab-btn:hover {
  background: var(--accent-hover);
  color: var(--text);
}

.tab-btn.active {
  background: var(--primary);
  color: #ffffff;
}

.tab-btn.active::after {
  display: none;
}

.page-deposit-manage :deep(.page-deposit-orders),
.page-deposit-manage :deep(.page-payment-methods) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.page-deposit-manage :deep(.page-deposit-orders .toolbar h2),
.page-deposit-manage :deep(.page-payment-methods .toolbar h2) {
  display: none;
}

@media (max-width: 700px) {
  .tab-bar {
    overflow-x: auto;
  }

  .tab-btn {
    flex: 0 0 auto;
  }
}
</style>
