<template>
  <div class="flex h-screen w-screen overflow-hidden bg-white">
    <!-- Left Navigation Sidebar -->
    <div ref="sidebarRef" class="flex flex-col items-center py-4 border-r z-50" style="flex: 0 0 calc(100vw * 2 / 19); min-width: 96px; max-width: 400px; background-color: #F8F9FA;">
      <div class="mb-6" style="border-bottom: 1px solid #A0AEC023; padding: 10%;">
        <!-- Logo or Brand -->
        <div class="" >
          <img :src="yoloIcon" class="yolo-logo" />
        </div>
      </div>

      <div class="flex-1 flex flex-col w-full px-2" style="gap: 2vh;">

        <!-- TK Workbench Tab -->
        <button @click="currentView = 'tk'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'tk' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'tk' ? nav11 : nav1" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">TK 工作台</span>
        </button>

        <!-- Hosts List Tab -->
        <button @click="currentView = 'hosts'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'hosts' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'hosts' ? nav22 : nav2" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">主播列表</span>
        </button>

        <!-- Auto DM Workbench Tab -->
        <button @click="currentView = 'auto_dm'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'auto_dm' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'auto_dm' ? nav33 : nav3" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">自动私信</span>
        </button>

        <!-- Fan Workbench Tab -->
        <button @click="currentView = 'FanWorkbench'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'FanWorkbench' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'FanWorkbench' ? nav44 : nav4" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">大哥工作台</span>
        </button>

        <!-- PK 工作台 Tab -->
        <button @click="currentView = 'pk_mini'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'pk_mini' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'pk_mini' ? nav55 : nav5" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">PK 工作台</span>
        </button>

        <!-- yolo商店 Tab -->
        <button @click="currentView = 'shop'"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 transition-all duration-200"
          style="height: 6vh;"
          :class="currentView === 'shop' ? 'bg-white text-blue-600 shadow shadow-blue-900/20' : 'text-slate-400 hover:bg-[rgba(21,96,250,0.06)]'">
          <img :src="currentView === 'shop' ? nav66 : nav6" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium truncate">TK商店</span>
        </button>
      </div>

      <div class="mt-auto w-full px-2">
        <!-- Logout -->
        <button @click="$emit('logout')"
          class="w-full rounded-xl flex items-center gap-2 px-3 py-2.5 text-slate-400 bg-white shadow shadow-blue-900/20 transition-all">
          <img :src="backIcon" class="w-9 h-9 object-contain flex-shrink-0" />
          <span class="text-base font-medium" style="color: #ED4949;">退出登录</span>
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 h-full relative">
      
      <!-- Tab 1: Auto DM Workbench (Config + Browser) - webAi 权限 -->
      <div v-show="currentView === 'auto_dm'" class="absolute inset-0 z-10 h-full w-full">
        <PermissionMask
          permission-key="webAi"
          title="自动私信工作台未开通"
          description="您当前没有使用自动私信功能的权限"
          :placeholder-image="placeholderWebAi"
          :contacts="serviceContacts"
        >
          <div v-if="autoDmMode === 'config'" class="h-full w-full bg-slate-50 overflow-auto">
              <ConfigPage 
                @go-to-browser="handleGoToBrowser" 
                @logout="$emit('logout')"
              />
          </div>
          <div v-show="autoDmMode === 'browser'" class="h-full w-full">
            <YoloBrowser
                v-bind="$attrs"
                :nav-sidebar-width="navSidebarWidth"
                @go-back="handleBackToConfig"
                @stop-all="handleStopAll"
            />
          </div>
        </PermissionMask>
      </div>

      <!-- Tab 2: TK Workbench - crawl 权限 -->
      <div v-show="currentView === 'tk'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden">
        <PermissionMask
          permission-key="crawl"
          title="TK工作台未开通"
          description="您当前没有使用TK工作台功能的权限"
          :placeholder-image="placeholderTk"
          :contacts="serviceContacts"
        >
          <TkWorkbenches />
        </PermissionMask>
      </div>

      <!-- Tab 3: Hosts List - crawl 权限 -->
      <div v-show="currentView === 'hosts'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
        <PermissionMask
          permission-key="crawl"
          title="主播列表未开通"
          description="您当前没有使用主播列表功能的权限"
          :placeholder-image="placeholderHosts"
          :contacts="serviceContacts"
        >
          <HostsList />
        </PermissionMask>
      </div>

      <!-- Tab 4: Fan Workbench - bigBrother 权限 -->
      <div v-show="currentView === 'FanWorkbench'" class="absolute inset-0 z-20 bg-gray-50 h-full overflow-hidden p-4">
        <PermissionMask
          permission-key="bigBrother"
          title="大哥工作台未开通"
          description="您当前没有使用大哥工作台功能的权限"
          :placeholder-image="placeholderBigBrother"
          :contacts="serviceContacts"
        >
          <FanWorkbench />
        </PermissionMask>
      </div>

      <!-- Tab 5: PK Mini 工作台 - 无需权限控制 -->
      <div v-show="currentView === 'pk_mini'" class="absolute inset-0 z-20 h-full overflow-hidden">
        <PkMiniWorkbench />
      </div>

      <!-- Tab 6: yolo商店 - Electron 用 BrowserView，Web 用 iframe 兜底 -->
      <div v-show="currentView === 'shop'" class="absolute inset-0 z-20 h-full overflow-hidden">
        <div v-if="isElectron()" class="w-full h-full flex items-center justify-center text-base text-slate-500 bg-white">
          正在进入商店...
        </div>
        <iframe
          v-else-if="adminLoaded"
          :src="shopUrl"
          class="w-full h-full border-0"
          allow="clipboard-read; clipboard-write"
          sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, useTemplateRef } from 'vue'
import { isElectron } from '@/utils/electronBridge'
import YoloBrowser from '@/views/YoloBrowser.vue'
import TkWorkbenches from '@/views/tk/Workbenches.vue'
import HostsList from '@/views/tk/HostsList.vue'
import ConfigPage from '@/pages/ConfigPage.vue'
import FanWorkbench from '@/views/tk/FanWorkbench.vue'
import PkMiniWorkbench from '@/views/pk-mini/PkMiniWorkbench.vue'
import PermissionMask from '@/components/PermissionMask.vue'
import { ENV } from '@/config'
import { getCustomServiceInfo } from '@/api/account'

// 导航图标
import yoloIcon from '@/assets/nav/yolo.png'
import nav1 from '@/assets/nav/nav1.png'
import nav11 from '@/assets/nav/nav11.png'
import nav2 from '@/assets/nav/nav2.png'
import nav22 from '@/assets/nav/nav22.png'
import nav3 from '@/assets/nav/nav3.png'
import nav33 from '@/assets/nav/nav33.png'
import nav4 from '@/assets/nav/nav4.png'
import nav44 from '@/assets/nav/nav44.png'
import nav5 from '@/assets/nav/nav5.png'
import nav55 from '@/assets/nav/nav55.png'
import nav6 from '@/assets/nav/nav6.png'
import nav66 from '@/assets/nav/nav66.png'
import backIcon from '@/assets/nav/back.png'

// 占位图片 - 无权限时显示的工作台截图
import placeholderTk from '@/assets/placeholder-tk.png'
import placeholderHosts from '@/assets/placeholder-hosts.png'
import placeholderWebAi from '@/assets/placeholder-webai.png'
import placeholderBigBrother from '@/assets/placeholder-bigbrother.png'

const emit = defineEmits(['logout', 'go-back', 'stop-all'])

const currentView = ref('tk') // Default Tab
const autoDmMode = ref('config')   // Default Sub-state: 'config' or 'browser'
const adminLoaded = ref(false) // Web iframe 懒加载（仅非 Electron）
const shopOpened = ref(false) // Electron 只首开加载一次
const shopUrl = ENV.SHOP_URL
const sidebarRef = useTemplateRef('sidebarRef')
const navSidebarWidth = ref(200) // 左侧导航菜单的实际宽度（px），传给 YoloBrowser/Sidebar 使用

// 客服名片
const serviceContacts = ref([])
const loadServiceContacts = async () => {
    try {
        const res = await getCustomServiceInfo()
        console.log("获取名片",res)
        if (res) {
            serviceContacts.value = res.map(item => ({
                avatar: item.avater,
                name: item.name,
                desc: item.description,
                qrcode: item.concat,
                phone: item.phone
            }))
        }
    } catch (e) {
        console.error('获取客服名片失败:', e)
    }
}

// 监听菜单栏实际宽度，通知后端更新 BrowserView 定位
let resizeObserver = null
const notifySidebarWidth = (width) => {
    navSidebarWidth.value = Math.round(width)
    if (isElectron()) {
        window.electronAPI.setSidebarWidth(Math.round(width)).catch(() => {})
    }
}
onMounted(() => {
    loadServiceContacts()
    if (!isElectron()) return
    resizeObserver = new ResizeObserver((entries) => {
        const width = entries[0]?.contentRect.width
        if (width) notifySidebarWidth(width)
    })
    if (sidebarRef.value) {
        resizeObserver.observe(sidebarRef.value)
        // 立即上报初始宽度
        notifySidebarWidth(sidebarRef.value.getBoundingClientRect().width)
    }
})
onUnmounted(() => {
    resizeObserver?.disconnect()
})

const handleGoToBrowser = async () => {
    autoDmMode.value = 'browser'
    if (isElectron()) {
        await window.electronAPI.showViews()
    }
}

const handleBackToConfig = async () => {
    autoDmMode.value = 'config'
    if (isElectron()) {
        await window.electronAPI.hideViews()
    }
}

const handleStopAll = () => {
    emit('stop-all')
}

// Watch for view changes to manage native Electron BrowserViews
watch(currentView, async (newVal, oldVal) => {
  // 懒加载 Web 端 iframe（仅非 Electron）
  if (newVal === 'shop' && !adminLoaded.value && !isElectron()) {
    adminLoaded.value = true
  }

  if (!isElectron()) return

  if (newVal === 'shop') {
    if (!shopOpened.value) {
      shopOpened.value = true
      try {
        await window.electronAPI.openShop(shopUrl)
      } catch (e) {
        console.error('打开商店失败:', e)
      }
    } else {
      try {
        await window.electronAPI.openShop(shopUrl)
      } catch (e) {
        console.error('打开商店失败:', e)
      }
    }
  } else if (oldVal === 'shop') {
    try {
      await window.electronAPI.hideShop()
    } catch (e) {
      console.error('隐藏商店失败:', e)
    }
  }

  if (newVal === 'auto_dm' && autoDmMode.value === 'browser') {
    // Switching TO Auto DM tab AND we are in browser mode: Show views
    try {
      await window.electronAPI.showViews()
    } catch (e) {
      console.error('Failed to show views:', e)
    }
  } else {
    // Switching AWAY from Auto DM tab OR we are in config mode: Hide views
    try {
      await window.electronAPI.hideViews()
    } catch (e) {
      // console.error('Failed to hide views:', e)
    }
  }
})

// Watch sub-mode changes
watch(autoDmMode, async (newVal) => {
    if (currentView.value !== 'auto_dm') return
    
    if (newVal === 'browser') {
        if (isElectron()) await window.electronAPI.showViews()
    } else {
        if (isElectron()) await window.electronAPI.hideViews()
    }
})
</script>

<style scoped>
/* Material Icons support - simplistic import, ideal to put in index.html or main.js */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

.yolo-logo{
  width: 70%;
}
</style>



