<template>
  <div class="conversations">
    <div class="header">
      <h1>会话管理</h1>
      <button @click="showModal = true" class="btn-primary">+ 新建会话</button>
    </div>

    <div v-if="loading" class="loading"><div class="spinner"></div>加载中...</div>
    <div v-else-if="error" class="error-msg">{{ error }} <button @click="fetchData">重试</button></div>
    <div v-else-if="!list.length" class="empty">暂无会话</div>
    
    <div v-else class="list">
      <div v-for="c in list" :key="c.id" class="card" @click="$router.push(`/conversations/${c.id}`)">
        <div class="card-info">
          <h3>{{ c.title || '未命名会话' }}</h3>
          <p>{{ formatDate(c.created_at) }} • {{ c.model || '默认模型' }}</p>
        </div>
        <button @click.stop="deleteConv(c)" class="btn-delete">删除</button>
      </div>
    </div>

    <div v-if="totalPages > 1" class="pagination">
      <button @click="page--; fetchData()" :disabled="page === 1">← 上一页</button>
      <span>{{ page }} / {{ totalPages }}</span>
      <button @click="page++; fetchData()" :disabled="page >= totalPages">下一页 →</button>
    </div>

    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
      <div class="modal">
        <h2>新建会话</h2>
        <div class="form-group"><label>标题</label><input v-model="form.title" placeholder="会话标题（可选）" /></div>
        <div class="form-group">
          <label>Provider</label>
          <select v-model="form.provider_id" @change="onProviderChange">
            <option :value="null" disabled>选择 Provider</option>
            <option v-for="p in providers" :key="p.id" :value="p.id">
              {{ p.name }} ({{ p.provider_type }})
            </option>
          </select>
        </div>
        <div class="form-group">
          <label>模型</label>
          <input v-model="form.model" placeholder="如: gpt-4, deepseek-chat" />
        </div>
        <div class="modal-actions">
          <button @click="showModal = false" class="btn-secondary">取消</button>
          <button @click="createConv" :disabled="creating || !form.provider_id" class="btn-primary">{{ creating ? '创建中...' : '创建' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { conversationsAPI, providersAPI } from '../utils/api.js'

const router = useRouter()
const list = ref([])
const providers = ref([])
const page = ref(1)
const pageSize = 20
const total = ref(0)
const loading = ref(true)
const error = ref('')
const showModal = ref(false)
const creating = ref(false)
const form = ref({ title: '', provider_id: null, model: '' })

const totalPages = computed(() => Math.ceil(total.value / pageSize))

const fetchData = async () => {
  loading.value = true
  error.value = ''
  try {
    const [convRes, provRes] = await Promise.allSettled([
      conversationsAPI.list({ page: page.value, page_size: pageSize }),
      providersAPI.list()
    ])
    
    if (convRes.status === 'fulfilled' && convRes.value.success) {
      list.value = convRes.value.data.items || []
      total.value = convRes.value.data.total || 0
    }
    
    if (provRes.status === 'fulfilled' && provRes.value.success) {
      providers.value = provRes.value.data.providers || []
      // Set default provider
      const defaultProvider = providers.value.find(p => p.is_default)
      if (defaultProvider) {
        form.value.provider_id = defaultProvider.id
        form.value.model = defaultProvider.default_model
      }
    }
  } catch (e) {
    error.value = e.message || '加载失败'
  } finally {
    loading.value = false
  }
}

const createConv = async () => {
  creating.value = true
  try {
    const res = await conversationsAPI.create(form.value)
    if (res.success && res.data?.id) {
      showModal.value = false
      form.value = { title: '', provider_id: null, model: '' }
      router.push(`/conversations/${res.data.id}`)
    }
  } catch (e) { alert(e.message) }
  finally { creating.value = false }
}

const deleteConv = async (c) => {
  if (!confirm(`删除「${c.title || '未命名会话'}」？`)) return
  await conversationsAPI.delete(c.id)
  fetchData()
}

const onProviderChange = () => {
  const provider = providers.value.find(p => p.id === form.value.provider_id)
  if (provider) {
    form.value.model = provider.default_model
  }
}

const formatDate = (d) => {
  if (!d) return ''
  const diff = Date.now() - new Date(d)
  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
  return new Date(d).toLocaleDateString('zh-CN')
}

onMounted(fetchData)
</script>

<style scoped>
.conversations { padding: 0; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.header h1 { font-size: 2rem; margin: 0; color: var(--text-h); }
.btn-primary { padding: 0.75rem 1.5rem; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; }
.btn-secondary { padding: 0.75rem 1.5rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.loading, .empty, .error-msg { text-align: center; padding: 4rem; color: var(--text); }
.error-msg { background: #fef2f2; border-radius: 12px; }
.list { display: flex; flex-direction: column; gap: 1rem; }
.card { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.5rem; color: var(--text-h); }
.card p { margin: 0; color: var(--text); font-size: 0.875rem; }
.btn-delete { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-border); font-size: 0.875rem; cursor: pointer; padding: 0.25rem 0.75rem; border-radius: 6px; transition: all 0.2s; }
.btn-delete:hover { background: var(--accent); color: white; }
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.pagination button { padding: 0.5rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--bg); border-radius: 16px; padding: 2rem; width: 100%; max-width: 500px; }
.modal h2 { margin: 0 0 1.5rem; color: var(--text-h); }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
.form-group input, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--bg); box-sizing: border-box; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; }
.spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
