<template>
  <div class="flex h-screen w-full bg-[#0a0a0a] text-white overflow-hidden font-sans elegant-theme">
    <!-- Mobile Header (Visible only on small screens) -->
    <div class="md:hidden fixed top-0 left-0 right-0 h-14 bg-[#141414] border-b border-white/10 flex items-center justify-between px-4 z-50">
      <div class="font-bold text-lg bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">SOUND:AI</div>
      <button @click="showMobileMenu = !showMobileMenu" class="text-white">
        <icon-menu />
      </button>
    </div>

    <!-- Left Sidebar: Parameters & Tools -->
    <div 
      :class="[
        'fixed inset-y-0 left-0 z-40 w-80 bg-[#141414] border-r border-white/10 transform transition-transform duration-300 md:relative md:translate-x-0 flex flex-col',
        showMobileMenu ? 'translate-x-0' : '-translate-x-full'
      ]"
    >
      <!-- Logo Area -->
      <div class="h-16 flex items-center px-6 border-b border-white/10 flex-shrink-0">
        <span class="text-xl font-bold tracking-wider">SOUND<span class="text-purple-500">:AI</span></span>
      </div>

      <!-- Mode Selector (Tabs in Sidebar) -->
      <div class="px-6 pt-6 pb-2">
        <div class="flex bg-[#1a1a1a] p-1 rounded-lg">
          <button 
            @click="activeMode = 'synthesis'"
            :class="[
              'flex-1 py-2 text-xs font-semibold rounded-md transition-all flex items-center justify-center gap-2',
              activeMode === 'synthesis' ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg' : 'text-gray-400 hover:text-white'
            ]"
          >
            <i class="iconfont icon-sound-generate"></i>
            {{ t('声音合成') }}
          </button>
          <button 
            @click="activeMode = 'asr'"
            :class="[
              'flex-1 py-2 text-xs font-semibold rounded-md transition-all flex items-center justify-center gap-2',
              activeMode === 'asr' ? 'bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-lg' : 'text-gray-400 hover:text-white'
            ]"
          >
            <i class="iconfont icon-asr"></i>
            {{ t('语音识别') }}
          </button>
        </div>
      </div>

      <!-- 音色管理按钮 -->
      <div class="px-6 pt-2 pb-2">
        <button 
          @click="soundPromptDialog?.show()"
          class="w-full py-2.5 text-sm font-bold rounded-lg transition-all flex items-center justify-center gap-2 border border-purple-500/40 text-purple-300 hover:text-white hover:border-purple-400 hover:bg-purple-600/20"
        >
          <i class="iconfont icon-sound-prompt text-base"></i>
          {{ t('音色管理') }}
        </button>
      </div>

      <!-- Scrollable Settings -->
      <div class="flex-1 overflow-y-auto custom-scrollbar px-6 py-4 space-y-6">
        
        <!-- Synthesis Form -->
        <div v-if="activeMode === 'synthesis'" class="space-y-6">
          <SoundGenerateCreate 
            ref="synthesisCreateRef" 
            :simpleMode="true" 
            @submitted="onSynthesisSubmitted" 
          />
        </div>

        <!-- ASR Form -->
        <div v-else class="space-y-6">
          <SoundAsrCreate 
            ref="asrCreateRef"
            :simpleMode="true"
            @submitted="onAsrSubmitted"
          />
        </div>

      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col h-full relative z-0 bg-[#0a0a0a]">
      
      <!-- Top Bar (Desktop) -->
      <div class="hidden md:flex h-16 items-center justify-between px-8 border-b border-white/10 bg-[#0a0a0a] flex-shrink-0">
        <div class="flex items-center gap-6">
          <button 
            @click="activeTab = 'history'" 
            :class="['text-sm font-medium transition-colors border-b-2 pb-5 -mb-5', activeTab === 'history' ? 'text-white border-purple-500' : 'text-gray-400 border-transparent hover:text-white']"
          >
            {{ t('历史任务') }}
          </button>
          <button 
            @click="activeTab = 'workspace'"
            :class="['text-sm font-medium transition-colors border-b-2 pb-5 -mb-5', activeTab === 'workspace' ? 'text-white border-purple-500' : 'text-gray-400 border-transparent hover:text-white']"
          >
            {{ t('工作台') }}
          </button>
        </div>
        <div class="flex items-center gap-4">
           <!-- Clear Tasks Button -->
           <a-tooltip :content="t('清空当前列表')" position="bottom" mini>
                <a-button type="text" size="small" @click="handleClearTasks" class="text-gray-400 hover:text-red-400">
                    <template #icon><icon-delete /></template>
                </a-button>
           </a-tooltip>
           <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 border border-white/20 flex items-center justify-center">
              <i class="iconfont icon-user text-xs text-white/50"></i>
           </div>
        </div>
      </div>

      <!-- Workspace Area -->
      <div class="flex-1 overflow-hidden relative p-4 md:p-6 custom-scrollbar overflow-y-auto">
         <!-- Synthesis List -->
         <SoundGenerateList 
            v-if="activeMode === 'synthesis'" 
            ref="synthesisListRef" 
            class="h-full"
         />

         <!-- ASR List -->
         <SoundAsrList 
            v-else 
            ref="asrListRef"
            class="h-full"
         />
      </div>

    </div>

    <!-- Overlay for mobile menu -->
    <div 
        v-if="showMobileMenu" 
        @click="showMobileMenu = false"
        class="fixed inset-0 bg-black/80 backdrop-blur-sm z-30 md:hidden"
    ></div>

    <SoundPromptDialog ref="soundPromptDialog" />

  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { IconMenu, IconDelete } from '@arco-design/web-vue/es/icon';
import { t } from '../../lang';
import SoundGenerateCreate from './components/SoundGenerateCreate.vue';
import SoundGenerateList from './components/SoundGenerateList.vue';
import SoundAsrCreate from './components/SoundAsrCreate.vue';
import SoundAsrList from './components/SoundAsrList.vue';
import SoundPromptDialog from './components/SoundPromptDialog.vue';
import { useTaskStore } from '../../store/modules/task';
import { Message } from '@arco-design/web-vue';

const showMobileMenu = ref(false);
const activeMode = ref<'synthesis' | 'asr'>('synthesis');
const activeTab = ref('history');
const soundPromptDialog = ref<InstanceType<typeof SoundPromptDialog>>();

const synthesisCreateRef = ref();
const synthesisListRef = ref();
const asrCreateRef = ref();
const asrListRef = ref();

const taskStore = useTaskStore();

const onSynthesisSubmitted = () => {
    if (synthesisListRef.value) {
        synthesisListRef.value.doRefresh();
    }
};

const onAsrSubmitted = () => {
    if (asrListRef.value) {
        asrListRef.value.doRefresh();
    }
};

const handleClearTasks = async () => {
    // Logic delegated to the list components or implemented here?
    // Since list logic is in List components, we should call a method on them or reproduce logic.
    // For simplicity, let's reimplement basic clear logic common to both
    const biz = activeMode.value === 'synthesis' ? 'SoundGenerate' : 'SoundAsr';
    
    try {
        await taskStore.clearTasksByBiz(biz);
        Message.success(t('已清空所有任务'));
        if (activeMode.value === 'synthesis' && synthesisListRef.value) synthesisListRef.value.doRefresh();
        if (activeMode.value === 'asr' && asrListRef.value) asrListRef.value.doRefresh();
    } catch (e: any) {
        Message.error(t('清空失败') + ': ' + e.message);
    }
};

</script>

<style scoped>
@import "../../assets/styles/elegant-theme.css";

/* Scrollbar styling specifically for this dark theme */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure Arco Design components blend into the sidebar */
:deep(.arco-textarea),
:deep(.arco-input),
:deep(.arco-select-view) {
    background-color: #1a1a1a !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: white !important;
}

:deep(.arco-btn-primary) {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%) !important;
    border: none !important;
}

:deep(.arco-radio-group-button) {
    background-color: transparent !important;
    border: none !important;
}
</style>
