<template>
  <MainLayout>
    <div class="min-h-screen bg-gray-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
          <div class="px-4 sm:px-6 lg:px-8 py-6">
            <!-- 标题区域 -->
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Create New Post</h2>
              <button 
                type="button" 
                @click="previewMode = !previewMode"
                class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
              >
                <EyeIcon v-if="!previewMode" class="h-5 w-5 mr-2" />
                <PencilIcon v-else class="h-5 w-5 mr-2" />
                {{ previewMode ? 'Back to Edit' : 'Preview' }}
              </button>
            </div>

            <!-- 编辑表单 -->
            <form v-if="!previewMode" @submit.prevent="submitPost" class="space-y-6">
              <!-- 标题输入 -->
              <div>
                <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                <div class="mt-1">
                  <input
                    id="title"
                    v-model="title"
                    type="text"
                    required
                    class="shadow-sm focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md"
                    placeholder="Enter post title"
                  />
                </div>
              </div>

              <!-- 内容编辑器 -->
              <div>
                <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Content</label>
                <div class="mt-1">
                  <RichTextEditor
                    v-model="content"
                    @blur="() => {}"
                  />
                </div>
              </div>

              <!-- 标签选择 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
                <div class="mt-1">
                  <div class="flex flex-wrap gap-2">
                    <template v-for="tag in availableTags" :key="tag">
                      <button
                        type="button"
                        @click="toggleTag(tag)"
                        :class="[
                          selectedTags.includes(tag)
                            ? 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100'
                            : 'bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-gray-200',
                          'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium hover:bg-opacity-90'
                        ]"
                      >
                        {{ tag }}
                      </button>
                    </template>
                  </div>
                  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                    You can select up to 5 tags
                  </p>
                </div>
              </div>

              <!-- 图片上传 -->
              <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Add Images</label>
                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-md">
                  <div class="space-y-1 text-center">
                    <PhotoIcon class="mx-auto h-12 w-12 text-gray-400" />
                    <div class="flex text-sm text-gray-600 dark:text-gray-400">
                      <label
                        for="file-upload"
                        class="relative cursor-pointer bg-white dark:bg-gray-700 rounded-md font-medium text-green-600 hover:text-green-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-green-500"
                      >
                        <span>Upload Images</span>
                        <input id="file-upload" name="file-upload" type="file" class="sr-only" accept="image/*" multiple @change="handleImageUpload" />
                      </label>
                      <p class="pl-1">or drag and drop here</p>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                      PNG, JPG, GIF format, max 5MB per image
                    </p>
                  </div>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="flex justify-end gap-4">
                <button
                  type="button"
                  @click="resetForm"
                  class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                >
                  <PaperAirplaneIcon class="h-5 w-5 mr-2" />
                  Publish
                </button>
              </div>
            </form>

            <!-- 预览模式 -->
            <div v-else class="prose dark:prose-invert max-w-none">
              <h1>{{ title || 'No title yet' }}</h1>
              <div class="flex flex-wrap gap-2 my-4">
                <span
                  v-for="tag in selectedTags"
                  :key="tag"
                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100"
                >
                  {{ tag }}
                </span>
              </div>
              <div class="mt-4" v-html="renderedContent"></div>
              <div v-if="!content" class="text-gray-500">No content yet</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import MainLayout from '../components/MainLayout.vue'
import { EyeIcon, PencilIcon, PhotoIcon, PaperAirplaneIcon } from '@heroicons/vue/24/outline'
import RichTextEditor from '../components/RichTextEditor.vue'

const router = useRouter()
const title = ref('')
const content = ref('')
const selectedTags = ref([])
const previewMode = ref(false)

// 可用标签列表
const availableTags = ref([
  'Travel', 'Food', 'Photography', 'Hiking', 'Self-Driving Tour',
  'Camping', 'City Exploration', 'Cultural Experience', 'Island Vacation',
  'Outdoor Sports', 'Historical Buildings', 'Folk Culture', 'Natural Scenery'
])

// 切换标签选择
const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index === -1) {
    if (selectedTags.value.length < 5) {
      selectedTags.value.push(tag)
    }
  } else {
    selectedTags.value.splice(index, 1)
  }
}

// 渲染 Markdown 内容
const renderedContent = computed(() => {
  return content.value ? marked(content.value) : 'No content yet'
})

// 处理图片上传
const handleImageUpload = (event) => {
  const files = event.target.files
  // Add image upload logic here
  console.log('Uploaded images:', files)
}

// 重置表单
const resetForm = () => {
  if (confirm('Are you sure you want to reset all content?')) {
    title.value = ''
    content.value = ''
    selectedTags.value = []
    router.push('/')
  }
}

// 提交帖子
const submitPost = async () => {
  try {
    // Add actual submission logic here
    console.log('Submitted content:', {
      title: title.value,
      content: content.value,
      tags: selectedTags.value
    })
    
    // Redirect to homepage after submission
    router.push('/home')
  } catch (error) {
    console.error('Failed to publish:', error)
  }
}
</script>

<style>
.prose {
  max-width: none;
}
.prose img {
  margin: 0 auto;
}
</style>
