<template>
  <div class="widget-demo">
    <div class="demo-header">
      <h2>📝 Widget 演示</h2>
      <p>在左侧编辑 JSON 配置，右侧实时查看 Widget 渲染效果</p>
    </div>

    <div class="demo-content">
      <!-- 左侧：JSON 编辑器 -->
      <div class="editor-panel">
        <div class="panel-header">
          <h3>⚙️ 配置编辑器</h3>
        </div>
        <JsonEditor :value="config" @change="handleConfigChange" />
      </div>

      <!-- 右侧：Widget 预览和事件日志 -->
      <div class="preview-panel">
        <!-- Widget 预览 -->
        <div class="widget-preview">
          <div class="panel-header">
            <h3>👁️ Widget 预览</h3>
            <div class="header-actions">
              <select v-model="currentLocale" class="locale-select">
                <option value="zh-CN">🌐 中文</option>
                <option value="en-US">🌐 English</option>
              </select>
              <button @click="toggleDisable" class="disable-btn" :class="{ active: isDisabled }">
                {{ isDisabled ? '🔓 启用表单' : '🔒 禁用表单' }}
              </button>
            </div>
          </div>
          <div class="widget-container">
            <adp-widget ref="widgetRef" :widget-json="JSON.stringify(config)" :disable="isDisabled"
              :locale="currentLocale" @widget-action="handleAction" @widget-rendered="handleRendered" />
          </div>
        </div>

        <!-- 事件日志 -->
        <div class="event-logs">
          <div class="panel-header">
            <h3>📡 事件日志</h3>
            <button @click="clearLogs" class="clear-btn">清空</button>
          </div>
          <div class="logs-container">
            <div v-if="actionLogs.length === 0" class="empty-logs">
              暂无事件。点击 Widget 中的按钮触发事件。
            </div>
            <div v-for="(log, index) in actionLogs" :key="index" class="log-item">
              <div class="log-time">{{ log.timestamp }}</div>
              <div class="log-content">
                <pre>{{ JSON.stringify(log.action, null, 2) }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonEditor from './JsonEditor.vue'

interface ActionLog {
  timestamp: string
  action: any
}

const config = ref({
  type: 'Form',
  children: [
    {
      type: 'Title',
      value: '用户信息表单',
      size: 'lg'
    },
    {
      type: 'Input',
      name: 'username',
      placeholder: '请输入用户名',
      required: true
    },
    {
      type: 'Text',
      value: '编辑个人简介',
      editable: {
        name: 'bio',
        placeholder: '请输入个人简介...'
      }
    },
    {
      type: 'Checkbox',
      name: 'agree',
      label: '我同意服务条款'
    },
    {
      type: 'Button',
      text: '提交',
      variant: 'primary'
    }
  ]
})
const actionLogs = ref<ActionLog[]>([])
const widgetRef = ref<HTMLElement>()
const isDisabled = ref(false)
const currentLocale = ref<'zh-CN' | 'en-US'>('zh-CN')

const handleAction = (e: Event) => {
  const customEvent = e as CustomEvent
  const action = customEvent.detail.action

  // 添加到日志
  const log: ActionLog = {
    timestamp: new Date().toLocaleTimeString(),
    action
  }
  actionLogs.value = [log, ...actionLogs.value].slice(0, 10) // 只保留最近10条
}

// 监听 widget-rendered 事件
const handleRendered = (e: Event) => {
  const customEvent = e as CustomEvent
  const { success, config, error, timestamp } = customEvent.detail
  console.log('[widget-rendered]', { success, config, error, timestamp })
}

const handleConfigChange = (newConfig: any) => {
  config.value = newConfig
}

const clearLogs = () => {
  actionLogs.value = []
}

const toggleDisable = () => {
  isDisabled.value = !isDisabled.value
}
</script>

<style scoped>
.widget-demo {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.demo-header {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.demo-header h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.demo-header p {
  color: #666;
  font-size: 0.875rem;
}

.demo-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  min-height: 400px;
  /* 降低最小高度 */
}

.editor-panel,
.preview-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.panel-header h3 {
  font-size: 1rem;
  color: #333;
  margin: 0;
}

.widget-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.widget-container {
  flex: 1;
  padding: 1.5rem;
  background: #fafafa;
  overflow: auto;
  min-height: 200px;
}

/* 确保 adp-widget 正确显示 */
.widget-container adp-widget {
  display: block;
  width: 100%;
  min-height: 100px;
  max-height: 400px;
  overflow: auto;
}

.event-logs {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 300px;
}

.clear-btn {
  padding: 0.25rem 0.75rem;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.clear-btn:hover {
  background: #f5f5f5;
  border-color: #0052d9;
  color: #0052d9;
}

.disable-btn {
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
  font-weight: 500;
}

.disable-btn:hover {
  background: #f5f5f5;
  border-color: #0052d9;
}

.disable-btn.active {
  background: #0052d9;
  color: white;
  border-color: #0052d9;
}

.disable-btn.active:hover {
  background: #0046b8;
  border-color: #0046b8;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.locale-select {
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
  outline: none;
  height: 41px;
  box-sizing: border-box;
}

.locale-select:hover {
  border-color: #0052d9;
}

.locale-select:focus {
  border-color: #0052d9;
  box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);
}

.logs-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: #fafafa;
}

.empty-logs {
  text-align: center;
  color: #999;
  padding: 2rem;
  font-size: 0.875rem;
}

.log-item {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.log-item:last-child {
  margin-bottom: 0;
}

.log-time {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.log-content pre {
  margin: 0;
  font-size: 0.875rem;
  color: #333;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 1024px) {
  .demo-content {
    grid-template-columns: 1fr;
  }

  .event-logs {
    max-height: 200px;
  }
}
</style>
