<template>
   <div class="min-h-screen flex flex-col bg-slate-50">
      <TopNavbar />
      <main class="flex-grow pt-16">
         <div class="mx-auto flex gap-8 h-full" :class="isFullWidth ? 'max-w-none px-0 py-0' : 'max-w-screen-xl'">
            <!-- Creator Sidebar (Dark Theme) -->
            <aside class="w-[280px] flex-shrink-0 hidden lg:block" v-if="!isFullWidth">
               <div
                  class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col">
                  <!-- Header -->
                  <div class="p-6 border-b border-slate-800">
                     <div class="flex items-center gap-3">
                        <div
                           class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg">
                           <i class="pi pi-palette"></i>
                        </div>
                        <div>
                           <div class="font-bold text-white leading-tight">创作者中心</div>
                           <div class="text-xs text-slate-500 mt-1">Creator Studio</div>
                        </div>
                     </div>
                  </div>

                  <!-- Menus -->
                  <nav class="p-4 space-y-1 flex-1">
                     <router-link to="/creator"
                        exact-active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
                        class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
                        <i class="pi pi-th-large text-lg group-hover:scale-110 transition-transform"></i>
                        <span class="font-medium">管理概览</span>
                     </router-link>

                     <div class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4">内容与交易</div>

                     <router-link to="/creator/contents"
                        active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
                        class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
                        <i class="pi pi-file-edit text-lg group-hover:scale-110 transition-transform"></i>
                        <span class="font-medium">内容管理</span>
                     </router-link>
                     <router-link to="/creator/orders"
                        active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
                        class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
                        <i class="pi pi-shopping-cart text-lg group-hover:scale-110 transition-transform"></i>
                        <span class="font-medium">订单管理</span>
                     </router-link>

                     <div class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4">配置</div>

                     <router-link to="/creator/settings"
                        active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
                        class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
                        <i class="pi pi-cog text-lg group-hover:scale-110 transition-transform"></i>
                        <span class="font-medium">频道设置</span>
                     </router-link>
                  </nav>

                  <!-- Footer Link -->
                  <div class="p-4 border-t border-slate-800">
                     <router-link to="/t/1"
                        class="flex items-center gap-2 px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">
                        <i class="pi pi-external-link"></i> 预览我的主页
                     </router-link>
                  </div>
               </div>
            </aside>

            <!-- Main Content -->
            <div class="flex-grow min-w-0">
               <router-view />
            </div>
         </div>
      </main>
      <AppFooter />
   </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import AppFooter from '../components/AppFooter.vue';
import TopNavbar from '../components/TopNavbar.vue';

const route = useRoute();
const isFullWidth = computed(() => {
   return ['creator-content-new', 'creator-content-edit'].includes(route.name);
});
</script>
