<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import AppFooter from "../components/AppFooter.vue";
import TopNavbar from "../components/TopNavbar.vue";
import { tenantPath } from "../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);

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

<template>
  <div
    class="flex flex-col bg-slate-50"
    :class="isFullWidth ? 'h-screen overflow-hidden' : 'min-h-screen'"
  >
    <TopNavbar v-if="!isFullWidth" />
    <main
      class="flex-grow flex flex-col min-h-0"
      :class="!isFullWidth ? 'pt-16' : ''"
    >
      <div
        class="mx-auto flex gap-8 w-full min-h-0 flex-grow"
        :class="isFullWidth ? 'max-w-none px-0' : 'max-w-screen-xl py-8'"
      >
        <!-- 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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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>
              <router-link
                :to="tenantRoute('/creator/coupons')"
                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-ticket 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="tenantRoute('/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="tenantRoute('/')"
                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 h-full">
          <router-view />
        </div>
      </div>
    </main>
    <AppFooter v-if="!isFullWidth" />
  </div>
</template>
