<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { type Session } from '@/stores/hermes/chat'
import { useAppStore } from '@/stores/hermes/app'
import { useProfilesStore } from '@/stores/hermes/profiles'
import { useSessionBrowserPrefsStore } from '@/stores/hermes/session-browser-prefs'
import { NButton, NDropdown, NPopconfirm, NTooltip, useMessage, type DropdownOption } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { getSourceLabel } from '@/shared/session-display'
import { copyToClipboard } from '@/utils/clipboard'
import HistoryMessageList from '@/components/hermes/chat/HistoryMessageList.vue'
import SessionListItem from '@/components/hermes/chat/SessionListItem.vue'
import OutlinePanel from '@/components/hermes/chat/OutlinePanel.vue'
import { batchDeleteSessions, deleteSession, fetchHermesSessions, fetchHermesSession, fetchSessionMessagesPage, importHermesSession, type HermesMessage, type SessionSummary } from '@/api/hermes/sessions'

const appStore = useAppStore()
const profilesStore = useProfilesStore()
const sessionBrowserPrefsStore = useSessionBrowserPrefsStore()
const message = useMessage()
const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const routeSessionId = computed(() => {
  const value = route.params.sessionId
  return typeof value === 'string' && value.trim() ? value : null
})

const routeProfile = computed(() => {
  const value = route.query.profile
  return typeof value === 'string' && value.trim() ? value : null
})

const effectiveHistoryProfile = computed(() => profilesStore.activeProfileName || routeProfile.value || null)

// Hermes history sessions (exclude api_server)
const hermesSessions = ref<SessionSummary[]>([])
const hermesSessionsLoading = ref(false)
const hermesSessionsLoaded = ref(false)
// History page's own selected session (independent from chatStore)
const historySessionId = ref<string | null>(null)
const historySession = ref<Session | null>(null)
const showOutline = ref(false)
const historyMessageListRef = ref<InstanceType<typeof HistoryMessageList> | null>(null)
const isBatchMode = ref(false)
const isBatchDeleting = ref(false)
const showBatchDeleteConfirm = ref(false)
const selectedSessionKeys = ref<Set<string>>(new Set())
const contextSessionId = ref<string | null>(null)
const showContextMenu = ref(false)
const contextMenuX = ref(0)
const contextMenuY = ref(0)
let hermesSessionsRequestId = 0

const HISTORY_PAGE_SIZE = 300

function handleOutlineNavigate(target: { messageId: string; anchorId: string }) {
  historyMessageListRef.value?.scrollToAnchor(target.messageId, target.anchorId)
}

async function loadHermesSessions() {
  const requestId = ++hermesSessionsRequestId
  hermesSessionsLoading.value = true
  try {
    const sessions = await fetchHermesSessions(undefined, undefined, effectiveHistoryProfile.value)
    if (requestId !== hermesSessionsRequestId) return
    hermesSessions.value = sessions
    hermesSessionsLoaded.value = true
  } catch (err) {
    console.error('Failed to load Hermes sessions:', err)
  } finally {
    if (requestId === hermesSessionsRequestId) {
      hermesSessionsLoading.value = false
    }
  }
}

// Initialize synchronously from the media query so first paint is correct.
const showSessions = ref(
  typeof window === 'undefined' || !window.matchMedia('(max-width: 768px)').matches,
)
let mobileQuery: MediaQueryList | null = null
const isMobile = ref(false)

function findHistorySession(sessionId: string): SessionSummary | undefined {
  return hermesSessions.value.find(session => session.id === sessionId)
}

const contextSessionSummary = computed(() =>
  contextSessionId.value ? findHistorySession(contextSessionId.value) || null : null,
)

const contextSessionPinned = computed(() =>
  contextSessionId.value ? sessionBrowserPrefsStore.isPinned(contextSessionId.value) : false,
)

const contextMenuOptions = computed<DropdownOption[]>(() => {
  const options: DropdownOption[] = [
    {
      label: t('chat.importToWebUi'),
      key: 'import-webui',
      disabled: Boolean(contextSessionSummary.value?.webui_imported),
    },
    { label: t(contextSessionPinned.value ? 'chat.unpin' : 'chat.pin'), key: 'pin' },
    { label: t('chat.copySessionLink'), key: 'copy-link' },
    { label: t('chat.copySessionId'), key: 'copy-id' },
  ]
  return options
})

function mapHistoryMessages(messages: HermesMessage[]): Session['messages'] {
  return messages.map(m => {
    const msg: Session['messages'][number] = {
      id: String(m.id),
      role: m.role,
      content: m.content || '',
      timestamp: m.timestamp * 1000,
      reasoning: m.reasoning || undefined,
      systemType: m.role === 'command' ? 'command' : undefined,
    }

    if (m.role === 'tool') {
      msg.toolName = m.tool_name || undefined
      msg.toolCallId = m.tool_call_id || undefined
      msg.toolArgs = m.tool_calls?.[0]?.function?.arguments
        ? JSON.stringify(m.tool_calls[0].function.arguments)
        : undefined
      msg.toolStatus = 'done'
      msg.toolResult = m.content || undefined
      msg.content = ''
    }

    return msg
  })
}

function sessionFromSummary(summary: SessionSummary, messages: Session['messages'] = []): Session {
  return {
    id: summary.id,
    profile: summary.profile || undefined,
    title: summary.title || '',
    source: summary.source,
    createdAt: summary.started_at * 1000,
    updatedAt: (summary.last_active || summary.ended_at || summary.started_at) * 1000,
    model: summary.model,
    provider: summary.provider,
    messageCount: summary.message_count,
    messageTotal: summary.message_count,
    loadedMessageCount: messages.length,
    hasMoreBefore: false,
    inputTokens: summary.input_tokens,
    outputTokens: summary.output_tokens,
    endedAt: summary.ended_at ? summary.ended_at * 1000 : undefined,
    lastActiveAt: summary.last_active ? summary.last_active * 1000 : undefined,
    workspace: summary.workspace || undefined,
    messages,
  }
}

async function loadHistorySession(sessionId: string, profile?: string | null) {
  const summary = findHistorySession(sessionId)
  const sessionProfile = profile || summary?.profile || null
  const page = await fetchSessionMessagesPage(sessionId, 0, HISTORY_PAGE_SIZE, sessionProfile)
  let sessionData: Session | null = null

  if (page) {
    const base = summary || page.session
    sessionData = sessionFromSummary(base, mapHistoryMessages(page.messages))
    sessionData.profile = summary?.profile || sessionProfile || undefined
    sessionData.messageCount = page.total
    sessionData.messageTotal = page.total
    sessionData.loadedMessageCount = page.messages.length
    sessionData.hasMoreBefore = page.hasMore
  } else {
    // Some imported/legacy Hermes sessions may only exist in Hermes state.db.
    // Keep the old full-detail path as a compatibility fallback.
    const sessionDetail = await fetchHermesSession(sessionId, sessionProfile)
    if (!sessionDetail) {
      message.error(t('chat.sessionNotFound'))
      return
    }

    sessionData = {
      id: sessionDetail.id,
      profile: sessionDetail.profile || sessionProfile || undefined,
      title: sessionDetail.title || '',
      source: sessionDetail.source,
      createdAt: sessionDetail.started_at * 1000,
      updatedAt: (sessionDetail.last_active || sessionDetail.started_at) * 1000,
      model: sessionDetail.model,
      provider: sessionDetail.provider,
      messageCount: sessionDetail.message_count,
      messageTotal: sessionDetail.message_count,
      loadedMessageCount: sessionDetail.messages.length,
      hasMoreBefore: false,
      inputTokens: sessionDetail.input_tokens,
      outputTokens: sessionDetail.output_tokens,
      endedAt: sessionDetail.ended_at ? sessionDetail.ended_at * 1000 : undefined,
      lastActiveAt: sessionDetail.last_active ? sessionDetail.last_active * 1000 : undefined,
      workspace: sessionDetail.workspace || undefined,
      messages: mapHistoryMessages(sessionDetail.messages),
    }
  }

  // Set history page's own session state (independent from chatStore)
  historySessionId.value = sessionData.id
  historySession.value = sessionData

  if (mobileQuery?.matches) showSessions.value = false
}

async function loadOlderHistoryMessages(sessionId: string): Promise<boolean> {
  const target = historySession.value
  if (!target || target.id !== sessionId || target.isLoadingOlderMessages || !target.hasMoreBefore) return false
  const offset = target.loadedMessageCount || 0
  target.isLoadingOlderMessages = true
  try {
    const page = await fetchSessionMessagesPage(sessionId, offset, HISTORY_PAGE_SIZE, target.profile)
    if (!page || page.messages.length === 0) {
      target.hasMoreBefore = false
      return false
    }

    const existingIds = new Set(target.messages.map(message => message.id))
    const olderMessages = mapHistoryMessages(page.messages).filter(message => !existingIds.has(message.id))
    target.messages = [...olderMessages, ...target.messages]
    target.loadedMessageCount = offset + page.messages.length
    target.messageTotal = page.total
    target.messageCount = page.total
    target.hasMoreBefore = page.hasMore
    return olderMessages.length > 0
  } catch (err) {
    console.error('Failed to load older history messages:', err)
    return false
  } finally {
    target.isLoadingOlderMessages = false
  }
}

async function handleSessionClick(sessionId: string, profile?: string | null) {
  await router.push({
    name: 'hermes.historySession',
    params: { sessionId },
    query: profile ? { profile } : undefined,
  })
}

async function openDefaultHistorySession(replace = false) {
  const firstCliSession = hermesSessions.value.find(s => s.source === 'cli')
  const firstSession = firstCliSession || hermesSessions.value[0]
  if (!firstSession) {
    historySessionId.value = null
    historySession.value = null
    if (routeSessionId.value) await router.replace({ name: 'hermes.history' })
    return
  }

  if (collapsedGroups.value.has(firstSession.source)) {
    collapsedGroups.value = new Set([...collapsedGroups.value].filter(source => source !== firstSession.source))
  }

  const location = {
    name: 'hermes.historySession',
    params: { sessionId: firstSession.id },
    query: firstSession.profile ? { profile: firstSession.profile } : undefined,
  }
  if (replace) await router.replace(location)
  else await router.push(location)
}

async function syncRouteSession() {
  const sessionId = routeSessionId.value
  if (!sessionId) return

  if (!hermesSessions.value.some(s => s.id === sessionId)) {
    historySessionId.value = null
    historySession.value = null
    await router.replace({ name: 'hermes.history' })
    return
  }

  const sessionProfile = routeProfile.value || findHistorySession(sessionId)?.profile || null
  const currentProfile = historySession.value?.profile || null
  if (historySessionId.value !== sessionId || currentProfile !== sessionProfile) {
    historySessionId.value = sessionId
    historySession.value = null
    await loadHistorySession(sessionId, sessionProfile)
  }
}

function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
  isMobile.value = e.matches
  if (e.matches && showSessions.value) {
    showSessions.value = false
  }
}

onMounted(async () => {
  appStore.loadModels()
  await profilesStore.fetchProfiles()
  await loadHermesSessions()
  await syncRouteSession()

  mobileQuery = window.matchMedia('(max-width: 768px)')
  handleMobileChange(mobileQuery)
  mobileQuery.addEventListener('change', handleMobileChange)
})

onUnmounted(() => {
  mobileQuery?.removeEventListener('change', handleMobileChange)
})

watch([routeSessionId, routeProfile], async ([sessionId]) => {
  if (!sessionId) {
    historySessionId.value = null
    historySession.value = null
    return
  }
  if (!hermesSessionsLoaded.value) return
  if (routeProfile.value && !hermesSessions.value.some(s => s.profile === routeProfile.value)) {
    await loadHermesSessions()
  }
  await syncRouteSession()
})

watch(() => profilesStore.activeProfileName, async () => {
  if (!hermesSessionsLoaded.value) return
  if (profilesStore.switching) return
  historySessionId.value = null
  historySession.value = null
  await loadHermesSessions()
  await openDefaultHistorySession(true)
})

const collapsedGroups = ref<Set<string>>(new Set(JSON.parse(localStorage.getItem('hermes_collapsed_groups') || '[]')))

// Convert SessionSummary to Session format
function sessionSummaryToSession(summary: SessionSummary): Session {
  return {
    id: summary.id,
    profile: summary.profile || undefined,
    title: summary.title || '',
    source: summary.source,
    createdAt: summary.started_at * 1000,
    updatedAt: (summary.last_active || summary.started_at) * 1000,
    model: summary.model,
    provider: summary.provider,
    messageCount: summary.message_count,
    inputTokens: summary.input_tokens,
    outputTokens: summary.output_tokens,
    endedAt: summary.ended_at ? summary.ended_at * 1000 : undefined,
    lastActiveAt: summary.last_active ? summary.last_active * 1000 : undefined,
    workspace: summary.workspace || undefined,
    messages: [],
  }
}

// Computed sessions from Hermes API
const historySessions = computed<Session[]>(() =>
  hermesSessions.value.map(sessionSummaryToSession)
)

function sessionSelectionKey(session: Pick<Session, 'id' | 'profile'>): string {
  return `${session.profile || 'default'}\u0000${session.id}`
}

function toggleBatchMode() {
  if (isBatchDeleting.value) return
  isBatchMode.value = !isBatchMode.value
  if (!isBatchMode.value) {
    selectedSessionKeys.value.clear()
    showBatchDeleteConfirm.value = false
  }
}

function toggleSessionSelection(session: Session) {
  if (isBatchDeleting.value) return
  const key = sessionSelectionKey(session)
  if (selectedSessionKeys.value.has(key)) {
    selectedSessionKeys.value.delete(key)
  } else {
    selectedSessionKeys.value.add(key)
  }
  selectedSessionKeys.value = new Set(selectedSessionKeys.value)
  if (selectedSessionKeys.value.size === 0) {
    showBatchDeleteConfirm.value = false
  }
}

function isSessionSelected(session: Session): boolean {
  return selectedSessionKeys.value.has(sessionSelectionKey(session))
}

function toggleSelectAllSessions() {
  if (isBatchDeleting.value) return
  if (allSessionsSelected.value) {
    selectedSessionKeys.value.clear()
    selectedSessionKeys.value = new Set(selectedSessionKeys.value)
    showBatchDeleteConfirm.value = false
    return
  }
  selectedSessionKeys.value.clear()
  for (const session of historySessions.value) {
    selectedSessionKeys.value.add(sessionSelectionKey(session))
  }
  selectedSessionKeys.value = new Set(selectedSessionKeys.value)
}

const selectedCount = computed(() => selectedSessionKeys.value.size)
const canSelectAll = computed(() => historySessions.value.length > 0)
const allSessionsSelected = computed(() =>
  historySessions.value.length > 0 && selectedSessionKeys.value.size === historySessions.value.length
)

// Source sort order: api_server first, cron last, others alphabetical
function sourceSortKey(source: string): number {
  if (source === 'api_server') return -1
  if (source === 'cron') return 999
  return 0
}

function sortSessionsWithActiveFirst(items: Session[]): Session[] {
  return [...items].sort((a, b) => {
    return (b.updatedAt || 0) - (a.updatedAt || 0)
  })
}

// Group sessions by source, with sort order
interface SessionGroup {
  source: string
  label: string
  sessions: Session[]
}

const pinnedSessions = computed(() =>
  sortSessionsWithActiveFirst(historySessions.value.filter(session => sessionBrowserPrefsStore.isPinned(session.id))),
)

const groupedSessions = computed<SessionGroup[]>(() => {
  const map = new Map<string, Session[]>()
  for (const s of historySessions.value) {
    if (sessionBrowserPrefsStore.isPinned(s.id)) continue
    const key = s.source || ''
    if (!map.has(key)) map.set(key, [])
    map.get(key)!.push(s)
  }

  const keys = [...map.keys()].sort((a, b) => {
    const ka = sourceSortKey(a)
    const kb = sourceSortKey(b)
    if (ka !== kb) return ka - kb
    return a.localeCompare(b)
  })

  return keys.map(key => ({
    source: key,
    label: key ? getSourceLabel(key) : t('chat.other'),
    sessions: sortSessionsWithActiveFirst(map.get(key)!),
  }))
})

function toggleGroup(source: string) {
  const isExpanded = !collapsedGroups.value.has(source)
  if (isExpanded) {
    collapsedGroups.value = new Set([...collapsedGroups.value, source])
  } else {
    collapsedGroups.value = new Set(
      groupedSessions.value.map(g => g.source).filter(s => s !== source),
    )
    const group = groupedSessions.value.find(g => g.source === source)
    if (group?.sessions.length) {
      // Auto-select and load first session when expanding group
      void handleSessionClick(group.sessions[0].id, group.sessions[0].profile)
    }
  }
  localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
}

watch(groupedSessions, groups => {
  if (localStorage.getItem('hermes_collapsed_groups') !== null) {
    const activeSource = historySession.value?.source
    if (activeSource && collapsedGroups.value.has(activeSource)) {
      collapsedGroups.value = new Set([...collapsedGroups.value].filter(source => source !== activeSource))
      localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
    }
    return
  }
  // Default: collapse all groups except the first one
  if (groups.length > 0) {
    collapsedGroups.value = new Set(groups.slice(1).map(group => group.source))
    localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
  }
}, { once: true })

// Auto-load the first CLI session when Hermes sessions are loaded.
watch(hermesSessionsLoaded, (loaded) => {
  if (loaded && hermesSessions.value.length > 0 && !routeSessionId.value) {
    void openDefaultHistorySession(false)
  }
}, { once: true })

const activeSessionTitle = computed(() =>
  historySession.value?.title || t('chat.newChat'),
)

const activeSessionSource = computed(() =>
  historySession.value?.source || '',
)

async function copySessionId(id?: string) {
  const sessionId = id || historySessionId.value
  if (sessionId) {
    const ok = await copyToClipboard(sessionId)
    if (ok) message.success(t('common.copied'))
    else message.error(t('common.copied') + ' ✗')
  }
}

function historySessionProfile(sessionId: string): string | null {
  return historySession.value?.id === sessionId
    ? historySession.value.profile || null
    : findHistorySession(sessionId)?.profile || null
}

function buildHistorySessionUrl(sessionId: string, profile?: string | null) {
  const href = router.resolve({
    name: 'hermes.historySession',
    params: { sessionId },
    query: profile ? { profile } : undefined,
  }).href
  return `${window.location.origin}${window.location.pathname}${href}`
}

async function copySessionLink(id?: string) {
  const sessionId = id || historySessionId.value
  if (sessionId) {
    const ok = await copyToClipboard(buildHistorySessionUrl(sessionId, historySessionProfile(sessionId)))
    if (ok) message.success(t('common.copied'))
    else message.error(t('common.copied') + ' ✗')
  }
}

function handleContextMenu(e: MouseEvent, sessionId: string) {
  e.preventDefault()
  contextSessionId.value = sessionId
  showContextMenu.value = true
  contextMenuX.value = e.clientX
  contextMenuY.value = e.clientY
}

function handleClickOutside() {
  showContextMenu.value = false
}

async function handleImportToWebUi(sessionId: string) {
  const summary = findHistorySession(sessionId)
  try {
    const result = await importHermesSession(sessionId, summary?.profile || null)
    if (result.ok) {
      message.success(t(result.imported ? 'chat.importSessionSuccess' : 'chat.importSessionAlreadyExists'))
      await loadHermesSessions()
      return
    }
  } catch {
    // Fall through to the shared failure message.
  }
  message.error(t('chat.importSessionFailed'))
}

async function handleContextMenuSelect(key: string) {
  showContextMenu.value = false
  if (!contextSessionId.value) return
  if (key === 'pin') {
    sessionBrowserPrefsStore.togglePinned(contextSessionId.value)
  } else if (key === 'copy-link') {
    await copySessionLink(contextSessionId.value)
  } else if (key === 'copy-id') {
    await copySessionId(contextSessionId.value)
  } else if (key === 'import-webui') {
    await handleImportToWebUi(contextSessionId.value)
  }
}

async function handleDeleteSession(id: string, profile?: string | null) {
  const summary = findHistorySession(id)
  const sessionProfile = profile || summary?.profile || null
  const ok = await deleteSession(id, sessionProfile)
  if (!ok) {
    message.error(t('common.deleteFailed'))
    return
  }

  sessionBrowserPrefsStore.removePinned(id)
  hermesSessions.value = hermesSessions.value.filter(s => s.id !== id)

  if (historySessionId.value === id) {
    historySessionId.value = null
    historySession.value = null
    const next = historySessions.value[0]
    if (next) await handleSessionClick(next.id, next.profile)
    else await router.replace({ name: 'hermes.history' })
  }

  message.success(t('chat.sessionDeleted'))
}

async function handleBatchDelete() {
  if (selectedSessionKeys.value.size === 0 || isBatchDeleting.value) return

  const sessionsByKey = new Map(historySessions.value.map(session => [sessionSelectionKey(session), session]))
  const targets = Array.from(selectedSessionKeys.value)
    .map(key => sessionsByKey.get(key))
    .filter((session): session is Session => Boolean(session))
    .map(session => ({ id: session.id, profile: session.profile || null }))
  if (targets.length === 0) return

  const activeWasSelected = historySession.value
    ? selectedSessionKeys.value.has(sessionSelectionKey(historySession.value))
    : false

  isBatchDeleting.value = true
  try {
    const result = await batchDeleteSessions(targets)
    if (result.deleted > 0) {
      for (const target of targets) {
        sessionBrowserPrefsStore.removePinned(target.id)
      }

      await loadHermesSessions()

      if (activeWasSelected || (historySessionId.value && !findHistorySession(historySessionId.value))) {
        historySessionId.value = null
        historySession.value = null
        await openDefaultHistorySession(true)
      }

      message.success(t('chat.batchDeleteSuccess', { count: result.deleted }))
      if (result.failed > 0) {
        message.warning(t('chat.batchDeletePartial', { failed: result.failed }))
      }
    } else {
      message.error(t('chat.batchDeleteFailed'))
    }
  } catch {
    message.error(t('chat.batchDeleteFailed'))
  } finally {
    isBatchDeleting.value = false
    showBatchDeleteConfirm.value = false
    isBatchMode.value = false
    selectedSessionKeys.value.clear()
  }
}

function handleBatchDeleteConfirm() {
  void handleBatchDelete()
  return false
}

</script>

<template>
  <div class="history-panel">
    <div class="session-backdrop" :class="{ active: showSessions }" @click="showSessions = false" />
    <aside class="session-list" :class="{ collapsed: !showSessions }">
      <div class="session-list-header">
        <span v-if="showSessions" class="session-list-title">{{ t('chat.hermesHistory') }}</span>
        <div class="session-list-actions">
          <button class="session-close-btn" @click="showSessions = false">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
          <NButton
            v-if="!isBatchMode"
            quaternary
            size="tiny"
            :disabled="hermesSessions.length === 0"
            :title="t('chat.toggleBatchMode')"
            @click="toggleBatchMode"
          >
            <template #icon>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 11l3 3L22 4" />
                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
              </svg>
            </template>
          </NButton>
          <NButton
            v-if="isBatchMode"
            quaternary
            size="tiny"
            :disabled="!canSelectAll || isBatchDeleting"
            :title="allSessionsSelected ? t('common.cancel') : t('chat.selectAll')"
            @click="toggleSelectAllSessions"
          >
            <template #icon>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M9 11l3 3L22 4" />
                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
              </svg>
            </template>
          </NButton>
          <NPopconfirm
            v-if="isBatchMode && selectedCount > 0"
            v-model:show="showBatchDeleteConfirm"
            :positive-button-props="{ loading: isBatchDeleting, disabled: isBatchDeleting }"
            :negative-button-props="{ disabled: isBatchDeleting }"
            @positive-click="handleBatchDeleteConfirm"
          >
            <template #trigger>
              <NButton quaternary size="tiny" type="error" :loading="isBatchDeleting" :disabled="isBatchDeleting">
                <template #icon>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="3 6 5 6 21 6" />
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                  </svg>
                </template>
              </NButton>
            </template>
            {{ t('chat.confirmBatchDelete', { count: selectedCount }) }}
          </NPopconfirm>
          <NButton
            v-if="isBatchMode"
            quaternary
            size="tiny"
            :disabled="isBatchDeleting"
            @click="toggleBatchMode"
          >
            <template #icon>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </template>
          </NButton>
        </div>
      </div>
      <div v-if="showSessions" class="session-scope-note">
        {{ t('chat.historyScopeHint') }}
      </div>
      <div v-if="showSessions" class="session-items">
        <div v-if="hermesSessionsLoading && hermesSessions.length === 0" class="session-loading">{{ t('common.loading') }}</div>
        <div v-else-if="hermesSessions.length === 0" class="session-empty">{{ t('chat.noSessions') }}</div>

        <template v-if="pinnedSessions.length > 0">
          <div class="session-group-header session-group-header--static">
            <span class="session-group-label">{{ t('chat.pinned') }}</span>
            <span class="session-group-count">{{ pinnedSessions.length }}</span>
          </div>
          <SessionListItem
            v-for="s in pinnedSessions"
            :key="`pinned-${s.id}`"
            :session="s"
            :active="s.id === historySessionId"
            :pinned="true"
            :can-delete="true"
            :streaming="false"
            :selectable="isBatchMode"
            :selected="isSessionSelected(s)"
            :show-profile="false"
            @select="isBatchMode ? toggleSessionSelection(s) : handleSessionClick(s.id, s.profile)"
            @contextmenu="handleContextMenu($event, s.id)"
            @delete="handleDeleteSession(s.id, s.profile)"
            @toggle-select="toggleSessionSelection(s)"
          />
        </template>

        <template v-for="group in groupedSessions" :key="group.source">
          <div class="session-group-header" @click="toggleGroup(group.source)">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-chevron" :class="{ collapsed: collapsedGroups.has(group.source) }"><polyline points="9 18 15 12 9 6"/></svg>
            <span class="session-group-label">{{ group.label }}</span>
            <span class="session-group-count">{{ group.sessions.length }}</span>
          </div>
          <template v-if="!collapsedGroups.has(group.source)">
            <SessionListItem
              v-for="s in group.sessions"
              :key="s.id"
              :session="s"
              :active="s.id === historySessionId"
              :pinned="false"
              :can-delete="true"
              :streaming="false"
              :selectable="isBatchMode"
              :selected="isSessionSelected(s)"
              :show-profile="false"
              @select="isBatchMode ? toggleSessionSelection(s) : handleSessionClick(s.id, s.profile)"
              @contextmenu="handleContextMenu($event, s.id)"
              @delete="handleDeleteSession(s.id, s.profile)"
              @toggle-select="toggleSessionSelection(s)"
            />
          </template>
        </template>
      </div>
    </aside>

    <NDropdown
      placement="bottom-start"
      trigger="manual"
      :x="contextMenuX"
      :y="contextMenuY"
      :options="contextMenuOptions"
      :show="showContextMenu"
      @select="handleContextMenuSelect"
      @clickoutside="handleClickOutside"
    />

    <div class="chat-main">
      <header class="chat-header">
        <div class="header-left">
          <NButton quaternary size="small" @click="showSessions = !showSessions" circle>
            <template #icon>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            </template>
          </NButton>
          <span class="header-session-title">{{ activeSessionTitle }}</span>
          <span v-if="activeSessionSource" class="source-badge">{{ getSourceLabel(activeSessionSource) }}</span>
          <span v-if="historySession?.workspace" class="workspace-badge" :title="historySession.workspace">📁 {{ historySession.workspace.split('/').pop() || historySession.workspace }}</span>
        </div>
        <div class="header-actions">
          <NTooltip trigger="hover">
            <template #trigger>
              <NButton quaternary size="small" @click="showOutline = !showOutline" circle>
                <template #icon>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
                </template>
              </NButton>
            </template>
            {{ t('chat.outlineTitle') }}
          </NTooltip>
          <NTooltip trigger="hover">
            <template #trigger>
              <NButton quaternary size="small" @click="copySessionId()" circle>
                <template #icon>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                </template>
              </NButton>
            </template>
            {{ t('chat.copySessionId') }}
          </NTooltip>
        </div>
      </header>

      <div class="history-content-wrapper">
        <div class="history-main-content">
          <HistoryMessageList
            ref="historyMessageListRef"
            :session="historySession"
            :load-older="loadOlderHistoryMessages"
          />
        </div>
        <OutlinePanel
          v-if="showOutline && historySession"
          :messages="historySession.messages || []"
          @navigate="handleOutlineNavigate"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/styles/variables' as *;

.history-panel {
  display: flex;
  height: 100%;
  position: relative;
}

.history-content-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.history-main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.session-list {
  width: 220px;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width $transition-normal, opacity $transition-normal;
  overflow: hidden;

  &.collapsed {
    width: 0;
    border-right: none;
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: $breakpoint-mobile) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 120;
    background: $bg-card;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    width: 280px;

    &.collapsed {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
}

@media (max-width: $breakpoint-mobile) {
  .session-close-btn {
    display: flex;
  }

  .session-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity $transition-fast;

    &.active {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.session-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  flex-shrink: 0;
}

.session-list-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.session-close-btn {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  color: $text-secondary;
  padding: 4px;
  border-radius: $radius-sm;

  &:hover {
    background: rgba($accent-primary, 0.06);
  }
}

.session-list-title {
  font-size: 12px;
  font-weight: 600;
  color: $text-muted;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-scope-note {
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid rgba($accent-primary, 0.16);
  border-radius: $radius-sm;
  background: rgba($accent-primary, 0.06);
  color: $text-secondary;
  font-size: 11px;
  line-height: 1.45;
}

.session-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 4px;
  cursor: pointer;
  user-select: none;
}

.session-group-header--static {
  cursor: default;
}

.group-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
  transform: rotate(90deg);

  &.collapsed {
    transform: rotate(0deg);
  }
}

.session-group-label {
  font-size: 10px;
  font-weight: 600;
  color: $text-muted;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-group-count {
  font-size: 10px;
  color: $text-muted;
  font-weight: 400;
}

.session-items {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 12px;
}

.session-loading,
.session-empty {
  padding: 16px 10px;
  font-size: 12px;
  color: $text-muted;
  text-align: center;
}

:deep(.session-item) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: $radius-sm;
  cursor: pointer;
  text-align: left;
  color: $text-secondary;
  transition: all $transition-fast;
  margin-bottom: 2px;

  &:hover {
    background: rgba($accent-primary, 0.06);
    color: $text-primary;

    .session-item-delete {
      opacity: 1;
    }
  }

  &.active {
    background: rgba(var(--accent-primary-rgb), 0.12);
    color: $text-primary;
    font-weight: 500;
  }

  &.active .session-item-title {
    color: $accent-primary;
  }
}

:deep(.session-item-content) {
  flex: 1;
  overflow: hidden;
}

:deep(.session-item-title-row) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

:deep(.session-item-title) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:deep(.session-item-streaming) {
  display: inline-block;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
  animation: spin 1.2s linear infinite;
  color: $accent-primary;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

:deep(.session-item-pin) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: $accent-primary;
}

:deep(.session-item-time) {
  font-size: 11px;
  color: $text-muted;
}

:deep(.session-item-meta) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

:deep(.session-item-model) {
  font-size: 10px;
  color: $accent-primary;
  background: rgba($accent-primary, 0.08);
  padding: 0 5px;
  border-radius: 3px;
  line-height: 16px;
  flex-shrink: 0;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.session-item-delete) {
  flex-shrink: 0;
  opacity: 0.5;
  padding: 2px;
  border: none;
  background: none;
  color: $text-muted;
  cursor: pointer;
  border-radius: 3px;
  transition: all $transition-fast;

  &:hover {
    color: $error;
    background: rgba($error, 0.1);
  }
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 20px;
  border-bottom: 1px solid $border-color;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.header-session-title {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-badge {
  font-size: 10px;
  color: $text-muted;
  background: rgba($text-muted, 0.12);
  padding: 1px 7px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

@media (max-width: $breakpoint-mobile) {
  .chat-header {
    padding: 16px 12px 16px 52px;
  }
}

.workspace-badge {
  font-size: 11px;
  color: $text-muted;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
</style>
