<template>
  <UIKitProvider
    :theme="currentTheme"
    :languageResources="[]"
  >
    <div :class="appClass">
      <header class="header">
        <div class="header-content">
          <h1 class="header-title">
            {{ IS_PC ? 'UIKit Base Components Vue3 Playground' : 'UIKit Playground' }}
          </h1>
          <div class="theme-toggle">
            <button
              class="theme-toggle-btn"
              :title="currentTheme === 'light' ? '切换到深色主题' : '切换到浅色主题'"
              @click="toggleTheme"
            >
              <span v-if="currentTheme === 'light'">🌙</span>
              <span v-else>☀️</span>
            </button>
          </div>
        </div>
      </header>

      <nav v-if="!IS_PC" class="mobile-nav">
        <div class="mobile-nav-scroll">
          <router-link
            v-for="route in filteredRoutes"
            :key="route.path"
            :to="route.path"
            class="mobile-nav-item"
            active-class="active"
          >
            {{ route.name }}
          </router-link>
        </div>
      </nav>

      <div class="main-container">
        <aside v-if="IS_PC" class="sidebar">
          <h3 class="sidebar-title">
            组件列表
          </h3>
          <nav class="sidebar-nav">
            <router-link
              v-for="route in filteredRoutes"
              :key="route.path"
              :to="route.path"
              class="sidebar-item"
              active-class="active"
            >
              {{ route.name }}
            </router-link>
          </nav>
        </aside>

        <main class="content">
          <router-view v-slot="{ Component, route }">
            <div v-if="Component">
              <div class="content-header">
                <h2 class="content-title">
                  {{ route.name }}
                </h2>
                <p class="content-subtitle">
                  {{ IS_PC ? '点击上方按钮体验不同的组件功能' : '体验组件功能' }}
                </p>
              </div>
              <div class="content-demo">
                <component :is="Component" />
              </div>
            </div>
            <div
              v-else
              class="content-welcome"
            >
              <div class="welcome-icon">
                🎨
              </div>
              <h3 class="welcome-title">
                欢迎使用 UIKit Playground
              </h3>
              <p class="welcome-subtitle">
                {{ IS_PC ? '请从左侧选择要查看的组件' : '请从上方选择要查看的组件' }}
              </p>
            </div>
          </router-view>
        </main>
      </div>

      <footer class="footer">
        <div class="footer-content">
          <p class="footer-text">
            © 2024 腾讯云 UIKit 基础组件库 Vue3 版本
          </p>
        </div>
      </footer>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getPlatform } from '@tencentcloud/universal-api';
import { UIKitProvider, useUIKit } from './src/index';

const IS_PC = getPlatform() === 'pc';

const router = useRouter();
const currentTheme = ref<'light' | 'dark'>('light');

const { setTheme } = useUIKit();
const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
  setTheme(currentTheme.value);
};

const appClass = computed(() => [
  'app',
  !IS_PC && 'app--mobile',
]);

const filteredRoutes = computed(() =>
  router.getRoutes()
    .filter(route => route.path !== '/' && !route.path.includes(':') && route.name)
    .sort((a, b) => (a.path > b.path ? 1 : -1)),
);
</script>

<style scoped lang="scss">
.app {
  min-height: 100vh;
  background-color: var(--bg-color-default);
  overflow-x: hidden;
  max-width: 100vw;

  &--mobile {
    .header {
      padding: 12px 0;

      &-content {
        padding: 0 12px;
      }

      &-title {
        font-size: 16px;
      }
    }

    .main-container {
      padding: 12px;
      min-height: calc(100vh - 160px);
    }

    .content {
      padding: 16px;
      border-radius: 8px;
      min-height: auto;
      overflow-x: hidden;

      &-header {
        margin-bottom: 16px;
        padding-bottom: 12px;
      }

      &-title {
        font-size: 18px;
      }

      &-subtitle {
        font-size: 12px;
      }

      &-demo {
        padding: 0;
        border: none;
        overflow-x: hidden;
      }
    }

    .footer {
      margin-top: 20px;
      padding: 12px 0;

      &-content {
        font-size: 12px;
      }
    }
  }
}

.mobile-nav {
  background-color: var(--bg-color-operate);
  border-bottom: 1px solid var(--stroke-color-primary);
  overflow: hidden;

  &-scroll {
    display: flex;
    overflow-x: auto;
    padding: 8px 12px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &-item {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--bg-color-default);
    color: var(--text-color-secondary);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;

    &:active {
      background-color: var(--list-color-hover);
    }

    &.active {
      background-color: var(--text-color-link);
      color: #fff;
    }
  }
}

.header {
  background-color: var(--bg-color-topbar);
  border-bottom: 1px solid var(--stroke-color-primary);
  padding: 20px 0;
  box-shadow: 0 2px 4px var(--shadow-color);

  &-content {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-color-primary);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &-subtitle {
    margin: 8px 0 0 0;
    color: var(--text-color-secondary);
    font-size: 14px;
  }
}

.theme-toggle {
  display: flex;
  align-items: center;

  &-btn {
    background: var(--button-color-secondary-default);
    border: 1px solid var(--stroke-color-primary);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    color: var(--text-color-primary);

    &:hover {
      background: var(--button-color-secondary-hover);
      border-color: var(--stroke-color-module);
    }

    &:active {
      background: var(--button-color-secondary-active);
    }
  }
}

.main-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 120px);
  background-color: var(--bg-color-default);
  box-sizing: border-box;
  overflow-x: hidden;
}

.sidebar {
  width: 280px;
  background-color: var(--bg-color-operate);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px var(--shadow-color);
  height: fit-content;
  position: sticky;
  top: 20px;

  &-title {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-primary);
    border-bottom: 1px solid var(--stroke-color-primary);
    padding-bottom: 12px;
  }

  &-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-color-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    border-left: 3px solid transparent;
    text-decoration: none;

    &:hover {
      background-color: var(--list-color-hover);
    }

    &.active {
      background-color: var(--list-color-focused);
      color: var(--text-color-link);
      font-weight: 500;
      border-left-color: var(--text-color-link);
    }
  }

  &-item-icon {
    font-size: 16px;
  }
}

.content {
  flex: 1;
  background-color: var(--bg-color-operate);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 8px var(--shadow-color);
  min-height: 600px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;

  &-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--stroke-color-primary);
  }

  &-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color-primary);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &-icon {
    font-size: 28px;
  }

  &-subtitle {
    margin: 8px 0 0 0;
    color: var(--text-color-secondary);
    font-size: 14px;
    line-height: 1.5;
  }

  &-demo {
    background-color: var(--bg-color-operate);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--stroke-color-primary);
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  &-welcome {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-color-secondary);
  }
}

.welcome {
  &-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  &-title {
    margin: 0 0 8px 0;
    color: var(--text-color-primary);
  }

  &-subtitle {
    margin: 0;
    font-size: 14px;
  }
}

.footer {
  background-color: var(--bg-color-operate);
  border-top: 1px solid var(--stroke-color-primary);
  padding: 20px 0;
  margin-top: 40px;

  &-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    color: var(--text-color-secondary);
    font-size: 14px;
  }

  &-text {
    margin: 0;
  }
}
</style>
