{{ template "page/head_start" .}}
{{ template "page/head_end" .}}

{{ template "page/body_start" .}}
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
  <transition name="list" appear>
    <a-layout-content class="under min-h-0">
      <div class="waves-header">
        <div class="waves-inner-header"></div>
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
          </g>
        </svg>
      </div>
      <a-row type="flex" justify="center" align="middle" class="h-100 overflow-y-auto overflow-x-hidden">
        <a-col :xs="22" :sm="16" :md="12" :lg="10" :xl="8" :xxl="6" class="my-3rem">
          <template v-if="loading">
            <div class="text-center">
              <a-spin size="large" />
            </div>
          </template>
          <template v-else>
            <!-- User Info Card -->
            <a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
              <div class="setting-section">
                <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
                  placement="bottomRight" trigger="click">
                  <template slot="content">
                    <a-space direction="vertical" :size="10">
                      <a-theme-switch-login></a-theme-switch-login>
                      <span>{{ i18n "pages.settings.language" }}</span>
                      <a-select ref="selectLang" class="w-100" v-model="lang" @change="LanguageManager.setLanguage(lang)"
                        :dropdown-class-name="themeSwitcher.currentTheme">
                        <a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
                          <span role="img" aria-label="l.name" v-text="l.icon"></span>
                          &nbsp;&nbsp;<span v-text="l.name"></span>
                        </a-select-option>
                      </a-select>
                    </a-space>
                  </template>
                  <a-button shape="circle" icon="setting"></a-button>
                </a-popover>
              </div>
              <div class="text-center mb-16">
                <a-icon type="user" style="font-size: 48px; color: #008771;" />
                <h2 class="mt-8 mb-0">[[ username ]]</h2>
              </div>
              <a-divider style="margin: 12px 0;" />
              <a-descriptions :column="1" bordered size="small">
                <a-descriptions-item label='{{ i18n "pages.user.upload" }}'>
                  [[ traffic ? SizeFormatter.sizeFormat(traffic.up) : '-' ]]
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.download" }}'>
                  [[ traffic ? SizeFormatter.sizeFormat(traffic.down) : '-' ]]
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.totalTraffic" }}'>
                  <template v-if="traffic">
                    <template v-if="traffic.total > 0">
                      [[ SizeFormatter.sizeFormat(traffic.up + traffic.down) ]] / [[ SizeFormatter.sizeFormat(traffic.total) ]]
                      <a-progress :percent="traffic.total > 0 ? NumberFormatter.toFixed((traffic.up + traffic.down) / traffic.total * 100, 1) : 0" size="small" :status="((traffic.up + traffic.down) / traffic.total * 100) >= 90 ? 'exception' : 'normal'" />
                    </template>
                    <template v-else>
                      {{ i18n "unlimited" }}
                    </template>
                  </template>
                  <template v-else>-</template>
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.remained" }}'>
                  <template v-if="traffic && traffic.total > 0">
                    <span :class="{ 'text-red': (traffic.total - traffic.up - traffic.down) <= 0 }">
                      [[ SizeFormatter.sizeFormat(Math.max(traffic.total - traffic.up - traffic.down, 0)) ]]
                    </span>
                  </template>
                  <template v-else-if="traffic">{{ i18n "unlimited" }}</template>
                  <template v-else>-</template>
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.expiryTime" }}'>
                  <template v-if="traffic">
                    <template v-if="traffic.expiryTime > 0">
                      <span :class="{ 'text-red': traffic.expiryTime < Date.now() }">
                        [[ formatExpiryTime(traffic.expiryTime) ]]
                      </span>
                    </template>
                    <template v-else>
                      {{ i18n "unlimited" }}
                    </template>
                  </template>
                  <template v-else>-</template>
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.lastOnline" }}'>
                  <template v-if="traffic && traffic.lastOnline > 0">
                    [[ new Date(traffic.lastOnline * 1000).toLocaleString() ]]
                  </template>
                  <template v-else>-</template>
                </a-descriptions-item>
                <a-descriptions-item label='{{ i18n "pages.user.status" }}'>
                  <a-badge v-if="traffic" :status="traffic.enable ? 'processing' : 'default'" :text='traffic.enable ? "{{ i18n "enabled" }}" : "{{ i18n "disabled" }}"' />
                  <template v-else>-</template>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>

            <!-- Clash Link Card -->
            <a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
              <template #title>
                <a-icon type="link" style="margin-right: 8px;" />{{ i18n "pages.user.clashUrl" }}
              </template>
              <template v-if="subClashEnable && subClashUrl">
                <div class="clash-link-box" @click="copy(subClashUrl)">
                  <code>[[ subClashUrl ]]</code>
                </div>
                <div class="mt-12 text-center">
                  <a-button type="primary" icon="copy" size="small" @click="copy(subClashUrl)">
                    {{ i18n "copy" }}
                  </a-button>
                </div>
              </template>
              <template v-else>
                <a-empty :description='{{ i18n "pages.user.noSubscription" }}' />
              </template>
            </a-card>

            <!-- Quick Import Actions -->
            <a-card :class="themeSwitcher.currentTheme" class="user-card mb-16">
              <div class="quick-import-section">
                <div class="quick-import-title">{{ i18n "pages.user.quickImport" }}</div>
                <a-space direction="vertical" size="small" class="quick-import-actions">
                  <a-button type="primary" block @click="quickImportAndroid">
                    {{ i18n "pages.user.android" }}
                  </a-button>
                  <a-button type="primary" block @click="quickImportIOS">
                    {{ i18n "pages.user.ios" }}
                  </a-button>
                  <a-button type="primary" block @click="quickImportDesktop">
                    {{ i18n "pages.user.desktop" }}
                  </a-button>
                </a-space>
              </div>
            </a-card>

            <!-- Logout -->
            <div class="text-center mt-16">
              <a-button type="danger" icon="logout" @click="logout">
                {{ i18n "menu.logout" }}
              </a-button>
            </div>
          </template>
        </a-col>
      </a-row>
    </a-layout-content>
  </transition>
</a-layout>
{{template "page/body_scripts" .}}
{{template "component/aThemeSwitch" .}}
<script>
  const app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',
    data: {
      themeSwitcher,
      loading: true,
      username: '',
      traffic: null,
      lang: '',
      subEnable: false,
      subUrl: '',
      subClashEnable: false,
      subClashUrl: '',
    },
    async mounted() {
      this.lang = LanguageManager.getLanguage();
      await Promise.all([this.loadUserInfo(), this.loadSubscriptions()]);
      this.loading = false;
    },
    methods: {
      async loadUserInfo() {
        try {
          const msg = await HttpUtil.get('/panel/api/inbounds/userInfo');
          if (msg.success) {
            this.username = msg.obj?.email || '';
            this.traffic = msg.obj;
          }
        } catch (e) {
          console.error("Failed to get user info:", e);
        }
      },
      async loadSubscriptions() {
        try {
          const msg = await HttpUtil.get('/panel/api/inbounds/userSubscriptions');
          if (msg.success && msg.obj) {
            this.subEnable = msg.obj.subEnable || false;
            this.subUrl = msg.obj.subUrl || '';
            this.subClashEnable = msg.obj.subClashEnable || false;
            this.subClashUrl = msg.obj.subClashUrl || '';
          }
        } catch (e) {
          console.error("Failed to get subscriptions:", e);
        }
      },
      copy(text) {
        ClipboardManager.copyText(text).then(ok => {
          const messageType = ok ? 'success' : 'error';
          this.$message[messageType](ok ? '{{ i18n "pages.user.copied" }}' : 'Copy failed');
        });
      },
      quickImportAndroid() {
        const url = this.subClashUrl || this.subUrl;
        if (!url) {
          this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
          return;
        }
        window.location.href = 'clash://install-config?url=' + encodeURIComponent(url);
      },
      quickImportIOS() {
        const url = this.subUrl || this.subClashUrl;
        if (!url) {
          this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
          return;
        }
        const base64Url = btoa(url);
        const remark = encodeURIComponent(this.username || 'Subscription');
        window.location.href = 'shadowrocket://add/sub/' + base64Url + '?remark=' + remark;
      },
      quickImportDesktop() {
        const url = this.subClashUrl || this.subUrl;
        if (!url) {
          this.$message.warning('{{ i18n "pages.user.noSubscription" }}');
          return;
        }
        window.location.href = 'clash-verge://install-config?name=' + encodeURIComponent(this.username || 'Subscription') + '&url=' + encodeURIComponent(url);
      },
      formatExpiryTime(timestamp) {
        if (timestamp <= 0) return '{{ i18n "unlimited" }}';
        const date = new Date(timestamp);
        const now = Date.now();
        if (timestamp < now) {
          return date.toLocaleString() + ' ({{ i18n "depleted" }})';
        }
        const diffDays = Math.ceil((timestamp - now) / (1000 * 60 * 60 * 24));
        return date.toLocaleString() + ' (' + diffDays + ' {{ i18n "day" }})';
      },
      logout() {
        location.href = basePath + 'logout/';
      },
    },
  });
</script>
<style>
  .clash-link-box {
    cursor: pointer;
    border-radius: 8px;
    padding: 12px 16px;
    word-break: break-all;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    transition: all 0.3s;
  }
  .dark .clash-link-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .dark .clash-link-box:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .light .clash-link-box {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.85);
  }
  .light .clash-link-box:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.14);
  }
  .user-card .ant-card-head {
    min-height: auto;
    padding: 0 16px;
  }
  .user-card .ant-card-head-title {
    padding: 12px 0;
    font-size: 14px;
  }
  .user-card .ant-card-body {
    padding: 16px;
  }
  .quick-import-section {
    text-align: left;
  }
  .quick-import-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
  }
  .quick-import-actions {
    display: flex;
    width: 100%;
  }
  .quick-import-actions .ant-space-item {
    width: 100%;
  }
</style>
{{ template "page/body_end" .}}