import { defineStore } from 'pinia'
import { ref } from 'vue'

interface HistoryEntry {
  tool: string
  args: any
  timestamp: number
}

interface Notification {
  id: number
  message: string
  type: string
  duration: number
}

export const useCanvasStore = defineStore('canvas', () => {
  const isConnected = ref(false)
  const history = ref<HistoryEntry[]>([])
  const notifications = ref<Notification[]>([])
  const showHistoryPanel = ref(false)

  let notificationId = 0

  function setConnected(connected: boolean) {
    isConnected.value = connected
  }

  function addToHistory(entry: HistoryEntry) {
    history.value.unshift(entry)
    // Mantener solo las últimas 100 entradas
    if (history.value.length > 100) {
      history.value = history.value.slice(0, 100)
    }
  }

  function clearHistory() {
    history.value = []
  }

  function showNotification(message: string, type: string = 'info', duration: number = 3000) {
    const id = ++notificationId
    const notification: Notification = { id, message, type, duration }
    notifications.value.push(notification)

    setTimeout(() => {
      removeNotification(id)
    }, duration)
  }

  function removeNotification(id: number) {
    const index = notifications.value.findIndex(n => n.id === id)
    if (index !== -1) {
      notifications.value.splice(index, 1)
    }
  }

  function toggleHistoryPanel() {
    showHistoryPanel.value = !showHistoryPanel.value
  }

  return {
    isConnected,
    history,
    notifications,
    showHistoryPanel,
    setConnected,
    addToHistory,
    clearHistory,
    showNotification,
    removeNotification,
    toggleHistoryPanel
  }
})