<template>
  <div class="s2">
    <div class="s2__messages">
      <MessageShell role="user" name="用户" meta="10:30">
        <UserBubble content="帮我写一个 Python 函数，把 JSON 转换成 CSV。" />
      </MessageShell>

      <MessageShell role="assistant" name="AI Agent" meta="10:31">
        <AssistantText :message="assistantMessage" />
      </MessageShell>
    </div>

    <div class="s2__input">
      <span class="s2__input-placeholder">继续输入...</span>
      <button class="s2__input-send">
        <SendOutlined />
      </button>
    </div>
    <p class="s2__input-hint">Enter 发送，Shift + Enter 换行</p>
  </div>
</template>

<script setup lang="ts">
import { SendOutlined } from '@ant-design/icons-vue'
import { MessageShell, UserBubble, AssistantText } from '@/components/chat/messages'
import type { IChatMessage } from '@/api/types'

const assistantMessage: IChatMessage = {
  id: 's2-reply',
  role: 'assistant',
  content: '好的，这里提供一个使用标准库 `json` 和 `csv` 的实现：\n\n```python\nimport json\nimport csv\n\ndef json_to_csv(json_path: str, csv_path: str) -> None:\n    with open(json_path, encoding="utf-8") as f:\n        data = json.load(f)\n\n    if not isinstance(data, list) or len(data) == 0:\n        raise ValueError("JSON 数据应为非空对象数组")\n\n    headers = data[0].keys()\n\n    with open(csv_path, "w", newline="", encoding="utf-8") as f:\n        writer = csv.DictWriter(f, fieldnames=headers)\n        writer.writeheader()\n        writer.writerows(data)\n```\n\n如果 JSON 嵌套层级较深，可以先把它拍平成对象列表，再调用此函数。',
  timestamp: new Date().toISOString(),
  status: 'completed',
}
</script>

<style scoped>
.s2 {
  max-width: var(--max-chat-width);
  margin: 0 auto;
  padding: 48px var(--space-4) 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s2__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.s2__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  margin-top: 32px;
}

.s2__input-placeholder {
  flex: 1;
  font-size: 14px;
  color: var(--text-placeholder);
}

.s2__input-send {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--text-inverse);
  border: 1px solid var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.s2__input-hint {
  font-size: 11px;
  color: var(--text-placeholder);
  margin-top: 4px;
  text-align: center;
}
</style>
