import { defineStore } from 'pinia'
import { ref } from 'vue'
import * as api from '@/api/index.js'

export const useSessionsStore = defineStore('sessions', () => {
  const sessions = ref([])
  const loading = ref(false)

  async function fetchSessions() {
    loading.value = true
    try {
      sessions.value = await api.getSessions()
    } finally {
      loading.value = false
    }
  }

  async function createSession(profileId) {
    const session = await api.createSession(profileId)
    // Add a complete placeholder so SessionItem renders correctly immediately
    sessions.value.unshift({
      session_id: session.session_id,
      profile_id: session.profile_id,
      created_at: session.created_at,
      last_active: session.created_at,
      message_count: 0,
      preview: '',
      pinned: false
    })
    return session
  }

  async function deleteSession(id) {
    await api.deleteSession(id)
    // Replace array reference — RecycleScroller reacts to reference changes
    sessions.value = sessions.value.filter(s => s.session_id !== id)
  }

  async function pinSession(id, pinned) {
    await api.pinSession(id, pinned)
    // Replace array: update item + re-sort pinned to top
    const updated = sessions.value.map(s =>
      s.session_id === id ? { ...s, pinned } : s
    )
    updated.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0))
    sessions.value = updated
  }

  function updatePreview(id, text) {
    const session = sessions.value.find(s => s.session_id === id)
    if (session) session.preview = text
  }

  return { sessions, loading, fetchSessions, createSession, deleteSession, pinSession, updatePreview }
})