<template>
  <div
    v-if="isAITranscriberEnabled"
    :class="[
      isPC ? 'ai-subtitle-pc' : 'ai-subtitle-h5',
      customClass,
      { 
        'ai-subtitle-pc--expanded': showSettingsModal && isPC,
        'ai-subtitle-h5--expanded': showSettingsModal && !isPC
      }
    ]"
    :style="[customStyle]"
  >
    <!-- Subtitle Content Component -->
    <SubtitleContent
      v-show="!showSettingsModal"
      @open-settings="openSettingsModal"
      :class="isPC ? 'ai-subtitle-pc__content' : 'ai-subtitle-h5__content'"
    />
    
    <!-- Settings Modal Component (Same Level) -->
    <SubtitleSettingsPC 
      v-if="isPC"
      :visible="showSettingsModal"
      @update:visible="showSettingsModal = $event"
      @confirm="handleSettingsConfirm"
      class="ai-subtitle-pc__settings"
    />

    <!-- Settings Modal Component (H5) -->
    <SubtitleSettingsH5
      v-else 
      :visible="showSettingsModal"
      @update:visible="showSettingsModal = $event"
      @confirm="handleSettingsConfirm"
      class="ai-subtitle-h5__settings"
    />
  </div>
</template>

<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from '../../../../adapter-vue';
import SubtitleContent from './components/SubtitleContent.vue';
import SubtitleSettingsPC from './components/SubtitleSettingsPC.vue';
import SubtitleSettingsH5 from './components/SubtitleSettingsH5.vue';
import { TUIGlobal } from '../../../../TUICallService/index';
import { useAIAssistant } from '../../../hooks/useAIAssistant';

const isPC = TUIGlobal.isPC;

// Use AI Assistant hook (now includes both status and data)
const { isAITranscriberEnabled } = useAIAssistant();

defineProps({
  customClass: {
    type: String,
  },
  customStyle: {
    type: Object,
  },
})

const showSettingsModal = ref(false);

const openSettingsModal = () => {
  showSettingsModal.value = true;
};

const handleSettingsConfirm = (settings: any) => {
  // Handle settings save logic here
  showSettingsModal.value = false;
};
</script>

<style lang="scss" scoped>
// PC端样式
.ai-subtitle-pc {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  bottom: 110px;
  
  // PC端展开状态
  &--expanded {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;
    transform: none !important;
    z-index: 1000;
  }

  &__content {
    // PC端内容定位
    .ai-subtitle-pc:not(.ai-subtitle-pc--expanded) & {
      position: relative;
      width: auto;
      height: auto;
    }
    
    // PC端展开时隐藏内容
    .ai-subtitle-pc--expanded & {
      display: none;
    }
  }

  &__settings {
    // PC端设置面板定位
    .ai-subtitle-pc--expanded & {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1001;
    }
    
    // PC端未展开时隐藏设置
    .ai-subtitle-pc:not(.ai-subtitle-pc--expanded) & {
      display: none;
    }
  }
}

// H5端样式
.ai-subtitle-h5 {
  position: absolute;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  bottom: 26%;
  
  // H5端展开状态
  &--expanded {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;
    transform: none !important;
    z-index: 1000;
  }

  &__content {
    // H5端内容定位
    .ai-subtitle-h5:not(.ai-subtitle-h5--expanded) & {
      position: relative;
      width: auto;
      height: auto;
    }
    
    // H5端展开时隐藏内容
    .ai-subtitle-h5--expanded & {
      display: none;
    }
  }

  &__settings {
    // H5端设置面板定位
    .ai-subtitle-h5--expanded & {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1001;
    }
    
    // H5端未展开时隐藏设置
    .ai-subtitle-h5:not(.ai-subtitle-h5--expanded) & {
      display: none;
    }
  }
}
</style>
