<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { useAdminLocale } from '../composables/useAdminLocale';
import InviteCodePanel from './InviteCodePanel.vue';
import InviteHistoryPanel from './InviteHistoryPanel.vue';

const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits<{
  'update:modelValue': [boolean];
}>();

const { t } = useAdminLocale();
const activeTab = ref<'generate' | 'history'>('history');
const historyRefreshKey = ref(0);
const tabsBootKey = ref(0);

watch(
  () => props.modelValue,
  async (open) => {
    if (!open) return;
    activeTab.value = 'history';
    tabsBootKey.value += 1;
    await nextTick();
    historyRefreshKey.value += 1;
  },
);

function onGenerated() {
  historyRefreshKey.value += 1;
}

function onTabChange(name: string | number) {
  if (name === 'history') {
    historyRefreshKey.value += 1;
  }
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    :title="t('invite.dialog_title')"
    width="1040px"
    align-center
    class="invite-manage-dialog"
    modal-class="invite-manage-overlay"
    destroy-on-close
    @update:model-value="emit('update:modelValue', $event)"
  >
    <el-tabs
      :key="tabsBootKey"
      v-model="activeTab"
      class="invite-manage-tabs"
      @tab-change="onTabChange"
    >
      <el-tab-pane :label="t('invite.tab_history')" name="history">
        <div class="tab-pane-scroll">
          <p class="tab-hint">{{ t('invite.history_hint') }}</p>
          <InviteHistoryPanel embedded :refresh-key="historyRefreshKey" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="t('invite.tab_generate')" name="generate">
        <div class="tab-pane-scroll tab-pane-scroll--generate">
          <div class="generate-tab-inner">
            <p class="tab-hint">{{ t('invite.hint') }}</p>
            <InviteCodePanel require-generate embedded hide-history @generated="onGenerated" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<style scoped>
.tab-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  line-height: 1.5;
}
</style>

<style>
.invite-manage-overlay .el-overlay-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
}

.invite-manage-overlay .invite-manage-dialog.el-dialog {
  width: 1040px !important;
  height: min(640px, 90vh);
  max-width: min(1040px, 96vw);
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invite-manage-dialog .el-dialog__header {
  flex-shrink: 0;
}

.invite-manage-dialog .el-dialog__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
  box-sizing: border-box;
}

.invite-manage-dialog .invite-manage-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invite-manage-dialog .invite-manage-tabs > .el-tabs__header {
  flex-shrink: 0;
  margin-bottom: 12px;
}

.invite-manage-dialog .invite-manage-tabs > .el-tabs__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.invite-manage-dialog .invite-manage-tabs .el-tab-pane {
  height: 100%;
  overflow: hidden;
}

.invite-manage-dialog .tab-pane-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  box-sizing: border-box;
}

.invite-manage-dialog .tab-pane-scroll--generate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.invite-manage-dialog .generate-tab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 560px;
  padding: 12px 8px 24px;
  box-sizing: border-box;
}

.invite-manage-dialog .generate-tab-inner .tab-hint {
  margin: 0 0 20px;
}

.invite-manage-dialog .generate-tab-inner :deep(.invite-actions) {
  justify-content: center;
  margin-bottom: 0;
}

.invite-manage-dialog .generate-tab-inner :deep(.invite-actions .el-button) {
  min-width: 168px;
  height: auto;
  min-height: 36px;
  padding: 8px 22px;
  white-space: nowrap;
  line-height: 1.35;
}

.invite-manage-dialog .generate-tab-inner :deep(.invite-body) {
  width: 100%;
  margin-top: 20px;
  text-align: left;
}

.invite-manage-dialog .generate-tab-inner :deep(.invite-cashback-field) {
  width: 100%;
  margin-bottom: 16px;
  text-align: left;
}
</style>
