<template>
  <div class="image-page-container h-full flex flex-col">
    <el-tabs v-model="activeTab" class="flex-1 flex flex-col" type="border-card">
      <el-tab-pane label="提示词广场" name="plaza" class="h-full">
        <ImagePlaza 
          v-if="activeTab === 'plaza'" 
          @use-prompt="handleUsePrompt"
          @use-reference="handleUseReference"
        />
      </el-tab-pane>
      <el-tab-pane label="图片生成" name="generate" class="h-full">
        <ImageGenerator 
          ref="imageGeneratorRef"
          @task-created="handleTaskCreated" 
        />
      </el-tab-pane>
      <el-tab-pane label="我的图库" name="my-images" class="h-full">
        <MyImages 
          ref="myImagesRef" 
          v-if="activeTab === 'my-images'" 
          @use-prompt="handleUsePrompt"
          @use-reference="handleUseReference"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import ImagePlaza from './components/ImagePlaza.vue';
import ImageGenerator from './components/ImageGenerator.vue';
import MyImages from './components/MyImages.vue';

const activeTab = ref('plaza');
const myImagesRef = ref();
const imageGeneratorRef = ref();

const handleTaskCreated = () => {
  // Optional: Switch to My Images or just notify
  // For now, we stay on Generator page to see the result.
};

const handleUsePrompt = (prompt: string) => {
  activeTab.value = 'generate';
  nextTick(() => {
    if (imageGeneratorRef.value) {
      imageGeneratorRef.value.setPrompt(prompt);
    }
  });
};

const handleUseReference = (url: string) => {
  activeTab.value = 'generate';
  nextTick(() => {
    if (imageGeneratorRef.value && url) {
      imageGeneratorRef.value.addReferenceImage(url);
    }
  });
};

// Refresh My Images when tab is activated
watch(activeTab, (val) => {
  if (val === 'my-images' && myImagesRef.value) {
    myImagesRef.value.refresh();
  }
});
</script>

<style scoped>
.image-page-container {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
:deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  padding: 0;
  height: calc(100% - 40px);
}
:deep(.el-tab-pane) {
  height: 100%;
}
</style>
