<script setup lang="ts">
import { ref } from "vue";

import type { ChatSession } from "../types/api";

defineProps<{
  open: boolean;
  sessions: ChatSession[];
  activeSessionId: number | null;
}>();

const emit = defineEmits<{
  close: [];
  select: [sessionId: number];
  create: [];
  rename: [sessionId: number, title: string];
  delete: [sessionId: number];
}>();

const editingId = ref<number | null>(null);
const editingTitle = ref("");

function startEdit(session: ChatSession) {
  editingId.value = session.id;
  editingTitle.value = session.title;
}

function submitEdit(sessionId: number) {
  const title = editingTitle.value.trim();
  if (title) emit("rename", sessionId, title);
  editingId.value = null;
  editingTitle.value = "";
}

function confirmDelete(session: ChatSession) {
  const ok = window.confirm(`确定删除会话「${session.title}」吗？`);
  if (ok) emit("delete", session.id);
}
</script>

<template>
  <div class="drawer-mask" :class="{ show: open }" @click="emit('close')"></div>
  <aside class="session-drawer" :class="{ open }">
    <div class="drawer-head">
      <strong>历史会话</strong>
      <button type="button" class="icon-btn" @click="emit('close')">×</button>
    </div>
    <button type="button" class="new-session-btn" @click="emit('create')">＋ 新聊天</button>
    <div class="session-list">
      <div
        v-for="session in sessions"
        :key="session.id"
        class="session-item"
        :class="{ active: session.id === activeSessionId }"
      >
        <form v-if="editingId === session.id" class="session-edit" @submit.prevent="submitEdit(session.id)">
          <input v-model="editingTitle" maxlength="100" @keydown.escape="editingId = null" />
          <button type="submit">保存</button>
        </form>
        <template v-else>
          <button type="button" class="session-main" @click="emit('select', session.id)">
            <span>{{ session.title }}</span>
            <small>{{ session.messageCount }} 条消息</small>
          </button>
          <div class="session-actions">
            <button type="button" @click="startEdit(session)">改名</button>
            <button type="button" @click="confirmDelete(session)">删除</button>
          </div>
        </template>
      </div>
    </div>
  </aside>
</template>
