<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { Component } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '../stores/user'
import { useStorybookStore } from '../stores/storybook'
import { api } from '../api/client'
import BaseButton from './ui/BaseButton.vue'
import BaseInput from './ui/BaseInput.vue'
import BaseSelect from './ui/BaseSelect.vue'
import BaseTextarea from './ui/BaseTextarea.vue'
import AnalysisAnimation from './ui/AnalysisAnimation.vue'
import {
  SparklesIcon,
  PencilSquareIcon,
  BookOpenIcon,
  PhotoIcon,
  XMarkIcon,
  ExclamationCircleIcon,
  ShieldCheckIcon,
  UserGroupIcon,
  ShareIcon,
  CheckBadgeIcon,
  ArrowPathIcon,
  HeartIcon
} from '@heroicons/vue/24/outline'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const storybookStore = useStorybookStore()

// State
const inputType = ref<'keywords' | 'full_story'>('keywords')
const outputMode = ref<'full_story' | 'storybook'>('full_story')
const inputData = ref('')
const educationTheme = ref('')
const loading = ref(false)
const error = ref('')

// Data
interface ChildProfile {
  id: string
  name: string
}
interface StoryUniverse {
  id: string
  name: string
}
const profiles = ref<ChildProfile[]>([])
const universes = ref<StoryUniverse[]>([])
const selectedProfileId = ref('')
const selectedUniverseId = ref('')
const profileError = ref('')

// Themes
type ThemeOption = { icon: Component; label: string; value: string }
const themes: ThemeOption[] = [
  { icon: ShieldCheckIcon, label: t('home.themeCourage'), value: '勇气' },
  { icon: UserGroupIcon, label: t('home.themeFriendship'), value: '友谊' },
  { icon: ShareIcon, label: t('home.themeSharing'), value: '分享' },
  { icon: CheckBadgeIcon, label: t('home.themeHonesty'), value: '诚实' },
  { icon: ArrowPathIcon, label: t('home.themePersistence'), value: '坚持' },
  { icon: HeartIcon, label: t('home.themeTolerance'), value: '包容' },
]

const profileOptions = computed(() =>
  profiles.value.map(profile => ({ value: profile.id, label: profile.name })),
)
const universeOptions = computed(() =>
  universes.value.map(universe => ({ value: universe.id, label: universe.name })),
)

// Methods
function close() {
  emit('update:modelValue', false)
  error.value = ''
}

async function fetchProfiles() {
  if (!userStore.user) return
  profileError.value = ''
  try {
    const data = await api.get<{ profiles: ChildProfile[] }>('/api/profiles')
    profiles.value = data.profiles
    if (!selectedProfileId.value && profiles.value.length > 0) {
      selectedProfileId.value = profiles.value[0].id
    }
  } catch (e) {
    profileError.value = e instanceof Error ? e.message : '档案加载失败'
  }
}

async function fetchUniverses(profileId: string) {
  selectedUniverseId.value = ''
  if (!profileId) {
    universes.value = []
    return
  }
  try {
    const data = await api.get<{ universes: StoryUniverse[] }>(`/api/profiles/${profileId}/universes`)
    universes.value = data.universes
    if (universes.value.length > 0) {
      selectedUniverseId.value = universes.value[0].id
    }
  } catch (e) {
    profileError.value = e instanceof Error ? e.message : '宇宙加载失败'
  }
}

watch(selectedProfileId, (newId) => {
  if (newId) fetchUniverses(newId)
})

watch(() => props.modelValue, (isOpen) => {
  if (isOpen) {
    fetchProfiles()
  }
})

async function generateStory() {
  if (!inputData.value.trim()) {
    error.value = t('home.errorEmpty')
    return
  }
  
  loading.value = true
  error.value = ''

  try {
    const payload: Record<string, unknown> = {
      type: inputType.value,
      data: inputData.value,
      education_theme: educationTheme.value || undefined,
    }
    if (selectedProfileId.value) payload.child_profile_id = selectedProfileId.value
    if (selectedUniverseId.value) payload.universe_id = selectedUniverseId.value

    if (outputMode.value === 'storybook') {
      const response = await api.post<any>('/api/storybook/generate', {
        keywords: inputData.value,
        education_theme: educationTheme.value || undefined,
        generate_images: true,
        page_count: 6,
        child_profile_id: selectedProfileId.value || undefined,
        universe_id: selectedUniverseId.value || undefined
      })
      
      storybookStore.setStorybook(response)
      close()
      const storybookPath = response.id ? `/storybook/view/${response.id}` : '/storybook/view'
      router.push(storybookPath)
    } else {
      const result = await api.post<any>('/api/stories/generate/full', payload)
      close()
      router.push(`/story/${result.id}`)
    }
  } catch (e) {
    error.value = e instanceof Error ? e.message : '生成失败'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <Teleport to="body">
    <Transition
      enter-active-class="transition-opacity duration-300"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition-opacity duration-300"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="modelValue"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
      >
        <!-- 遮罩层 -->
        <div
          class="absolute inset-0 bg-black/60 backdrop-blur-sm"
          @click="!loading && close()"
        ></div>

        <!-- 全屏加载动画 -->
        <AnalysisAnimation v-if="loading" />

        <!-- 模态框内容 -->
        <div v-else class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1C2035] border border-gray-700/50 rounded-3xl shadow-2xl p-6 md:p-8">
            <!-- 关闭按钮 -->
            <button
              @click="close"
              class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--bg-elevated)] transition-colors z-10"
            >
              <XMarkIcon class="h-6 w-6 text-gray-400" />
            </button>

            <!-- 标题 -->
            <h2 class="text-2xl font-bold text-gray-100 mb-6">
              {{ t('home.createModalTitle') }}
            </h2>

            <!-- 输入类型切换 -->
            <div class="flex space-x-3 mb-6">
              <button
                @click="inputType = 'keywords'"
                :class="[
                  'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
                  inputType === 'keywords'
                    ? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
                    : 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
                ]"
              >
                <SparklesIcon class="h-5 w-5" />
                <span>{{ t('home.inputTypeKeywords') }}</span>
              </button>
              <button
                @click="inputType = 'full_story'"
                :class="[
                  'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
                  inputType === 'full_story'
                    ? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
                    : 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
                ]"
              >
                <PencilSquareIcon class="h-5 w-5" />
                <span>{{ t('home.inputTypeStory') }}</span>
              </button>
            </div>

            <!-- 呈现形式选择 (仅在关键词模式下可用) -->
            <div class="flex space-x-3 mb-6" v-if="inputType === 'keywords'">
              <button
                @click="outputMode = 'full_story'"
                :class="[
                  'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
                  outputMode === 'full_story'
                    ? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg'
                    : 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
                ]"
              >
                <BookOpenIcon class="h-5 w-5" />
                <span>普通故事</span>
              </button>
              <button
                @click="outputMode = 'storybook'"
                :class="[
                  'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
                  outputMode === 'storybook'
                    ? 'bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg'
                    : 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
                ]"
              >
                <PhotoIcon class="h-5 w-5" />
                <span>绘本模式</span>
              </button>
            </div>

            <!-- 孩子档案选择 -->
            <div class="mb-6">
              <label class="block text-gray-300 font-semibold mb-2">
                {{ t('home.selectProfile') }}
                <span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.selectProfileOptional') }}</span>
              </label>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <BaseSelect
                  v-model="selectedProfileId"
                  :options="[{ value: '', label: t('home.noProfile') }, ...profileOptions]"
                />
                <BaseSelect
                  v-model="selectedUniverseId"
                  :options="[{ value: '', label: t('home.noUniverse') }, ...universeOptions]"
                  :disabled="!selectedProfileId || universes.length === 0"
                />
              </div>
              <div v-if="profileError" class="text-sm text-red-500 mt-2">{{ profileError }}</div>
              <div v-if="selectedProfileId && universes.length === 0" class="text-sm text-gray-500 mt-2">
                {{ t('home.noUniverseHint') }}
              </div>
            </div>

            <!-- 输入区域 -->
            <div class="mb-6">
              <label class="block text-gray-300 font-semibold mb-2">
                {{ inputType === 'keywords' ? t('home.inputLabel') : t('home.inputLabelStory') }}
              </label>
              <BaseTextarea
                v-model="inputData"
                :placeholder="inputType === 'keywords' ? t('home.inputPlaceholder') : t('home.inputPlaceholderStory')"
                :rows="5"
                :maxLength="5000"
              />
            </div>

            <!-- 教育主题选择 -->
            <div class="mb-6">
              <label class="block text-gray-300 font-semibold mb-2">
                {{ t('home.themeLabel') }}
                <span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.themeOptional') }}</span>
              </label>
              <div class="flex flex-wrap gap-2">
                <button
                  v-for="theme in themes"
                  :key="theme.value"
                  @click="educationTheme = educationTheme === theme.value ? '' : theme.value"
                  :class="[
                    'px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center space-x-1.5 text-sm',
                    educationTheme === theme.value
                      ? 'bg-gradient-to-r from-[#FFD369] to-[#FF9F43] text-[#0D0F1A] shadow-md'
                      : 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
                  ]"
                >
                  <component :is="theme.icon" class="h-4 w-4" />
                  <span>{{ theme.label }}</span>
                </button>
                <BaseInput
                  v-model="educationTheme"
                  :placeholder="t('home.themeCustom')"
                  class="w-28"
                />
              </div>
            </div>

            <!-- 错误提示 -->
            <Transition
              enter-active-class="transition-all duration-300"
              enter-from-class="opacity-0 -translate-y-2"
              enter-to-class="opacity-100 translate-y-0"
              leave-active-class="transition-all duration-300"
              leave-from-class="opacity-100 translate-y-0"
              leave-to-class="opacity-0 -translate-y-2"
            >
              <div v-if="error" class="mb-4 p-3 bg-red-900/20 border border-red-800 text-red-400 rounded-xl flex items-center space-x-2">
                <ExclamationCircleIcon class="h-5 w-5 flex-shrink-0" />
                <span>{{ error }}</span>
              </div>
            </Transition>

            <!-- 提交按钮 -->
            <BaseButton
              class="w-full"
              size="lg"
              :loading="loading"
              :disabled="loading"
              @click="generateStory"
            >
              <template v-if="loading">
                {{ t('home.generating') }}
              </template>
              <template v-else>
                <SparklesIcon class="h-5 w-5 mr-2" />
                {{ t('home.startCreate') }}
              </template>
            </BaseButton>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
/* 临时添加一些 btn-magic 样式确保兼容 */
.btn-magic {
  background: linear-gradient(135deg, #FFD369 0%, #FF9F43 100%);
  color: #0D0F1A;
}
</style>
