<template>
  <div class="snippet-form-container">
    <h1 class="page-title">{{ isEditing ? '编辑代码片段' : '新建代码片段' }}</h1>

    <div class="form-container">
      <form @submit.prevent="handleSubmit" class="snippet-form">
        <!-- Title Field -->
        <div class="form-group">
          <label for="title">标题</label>
          <input
              type="text"
              id="title"
              v-model="form.title"
              placeholder="请输入代码片段标题"
              required
          />
          <div class="error-message" v-if="errors.title">
            {{ errors.title }}
          </div>
        </div>

        <!-- Type Field -->
        <div class="form-group">
          <label for="type">类型</label>
          <input
              type="text"
              id="type"
              v-model="form.type"
              placeholder="请输入代码类型（如：js、css、html等）"
              required
          />
          <div class="error-message" v-if="errors.type">
            {{ errors.type }}
          </div>
        </div>

        <!-- Code Field - Updated to MdEditor for better editing experience -->
        <div class="form-group">
          <label>代码内容</label>
          <div class="editor-wrapper">
            <MdEditor
                v-model="form.code"
                theme="dark"
                :preview="false"
                placeholder="请输入代码..."
                class="custom-md-editor"
            />
          </div>
          <div class="error-message" v-if="errors.code">
            {{ errors.code }}
          </div>
        </div>

        <!-- Description Field -->
        <div class="form-group">
          <label for="description">描述</label>
          <textarea
              id="description"
              v-model="form.description"
              placeholder="请输入代码片段描述"
              rows="3"
          ></textarea>
          <div class="error-message" v-if="errors.description">
            {{ errors.description }}
          </div>
        </div>

        <!-- Submit Buttons -->
        <div class="form-actions">
          <button type="button" class="cancel-btn" @click="handleCancel">
            取消
          </button>
          <button type="submit" class="submit-btn" :disabled="isSubmitting">
            {{ isSubmitting ? '提交中...' : (isEditing ? '更新代码片段' : '创建代码片段') }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// Import MdEditor
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

import { useToast } from '../../composables/useToast'
import { createSnippet, updateSnippet, fetchSnippet } from '../../services/api'

const router = useRouter()
const route = useRoute()
const toast = useToast()

// Form state
const isSubmitting = ref(false)
const isEditing = computed(() => !!route.params.id)
const errors = reactive<Record<string, string>>({})

// Form data
const form = reactive({
  title: '',
  code: '',
  type: 'js',
  description: ''
})

// Validation function
const validateForm = (): boolean => {
  // Reset errors
  Object.keys(errors).forEach(key => delete errors[key])

  let isValid = true

  // Validate title
  if (!form.title.trim()) {
    errors.title = '代码片段标题不能为空'
    isValid = false
  }

  // Validate type
  if (!form.type.trim()) {
    errors.type = '代码类型不能为空'
    isValid = false
  }

  // Validate code
  if (!form.code.trim()) {
    errors.code = '代码内容不能为空'
    isValid = false
  }

  return isValid
}

// Submit handler
const handleSubmit = async () => {
  if (!validateForm()) {
    return
  }

  isSubmitting.value = true

  try {
    if (isEditing.value) {
      // Update existing snippet
      await updateSnippet(route.params.id as string, form)
      toast.success('代码片段更新成功')
    } else {
      // Create new snippet
      await createSnippet(form)
      toast.success('代码片段创建成功')
    }

    // Redirect to snippets list
    router.push('/admin/snippets')
  } catch (error: any) {
    console.error('Error submitting form:', error)
    toast.error(error.message || (isEditing.value ? '更新代码片段失败' : '创建代码片段失败'))
  } finally {
    isSubmitting.value = false
  }
}

// Cancel handler
const handleCancel = () => {
  router.push('/admin/snippets')
}

// Lifecycle
onMounted(async () => {
  if (isEditing.value) {
    try {
      const snippetId = route.params.id as string
      const snippet = await fetchSnippet(snippetId)
      // Populate form with snippet data
      form.title = snippet.title
      form.code = snippet.code
      form.type = snippet.type
      form.description = snippet.description || ''
    } catch (error: any) {
      console.error('Failed to fetch snippet data:', error)
      toast.error('加载代码片段数据失败: ' + (error.message || '未知错误'))
    }
  }
})
</script>

<style scoped>
.snippet-form-container {
  width: 100%;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #d4b383;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.form-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.snippet-form {
  max-width: 800px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-family: 'Inter', sans-serif;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.form-group select::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #d4b383;
  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}

.error-message {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  font-family: 'Inter', sans-serif;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', sans-serif;
}

.cancel-btn:hover {
  background: rgba(212, 179, 131, 0.1);
  border-color: #d4b383;
  color: #d4b383;
}

.submit-btn {
  padding: 0.75rem 1.5rem;
  background-color: #d4b383;
  color: #050505;
  border: 1px solid #d4b383;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Inter', sans-serif;
}

.submit-btn:hover:not(:disabled) {
  background-color: transparent;
  color: #d4b383;
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* MdEditor Customization (Consistent with PostForm) */
.editor-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.editor-wrapper:focus-within {
  border-color: #d4b383;
  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}

:deep(.custom-md-editor) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  --md-bk-color: transparent !important;
  --md-color: white !important;
  --md-border-color: transparent !important;
  height: 500px;
}

:deep(.md-editor-toolbar-wrapper) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.md-editor-content) {
  background-color: transparent !important;
}

:deep(.md-editor-footer) {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-container {
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}
</style>