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

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

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

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

function 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>

<template>
  <div class="image-page-container h-full flex flex-col ">
    <el-tabs v-model="activeTab" class="max-h-[90vh] 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"
          :is-active="activeTab === 'generate'"
          @task-created="handleTaskCreated"
        />
      </el-tab-pane>
      <el-tab-pane label="我的图库" name="my-images" class="h-full">
        <MyImages
          v-if="activeTab === 'my-images'"
          ref="myImagesRef"
          @use-prompt="handleUsePrompt"
          @use-reference="handleUseReference"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.image-page-container {
  height: 100%;
  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>
