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

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

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

interface ConnectionInfo {
  isConnected: boolean
  channel: string | null
  server: string | null
  status: string
  tools: string[]
  prompts: string[]
  resources: string[]
}

export const useCanvasStore = defineStore('canvas', () => {
  // Connection state
  const isConnected = ref(false)
  const isReconnecting = ref(false)
  const connectionStatus = ref<string>('disconnected')
  const connectionError = ref<string | null>(null)
  const connectionInfo = ref<ConnectionInfo | null>(null)

  const history = ref<HistoryEntry[]>([])
  const notifications = ref<Notification[]>([])
  const showHistoryPanel = ref(false)
  const isAnonymousCanvas = ref(false)

  let notificationId = 0

  // Computed
  const statusColor = computed(() => {
    if (isReconnecting.value) return 'warning'
    if (isConnected.value) return 'success'
    if (connectionError.value) return 'error'
    return 'muted'
  })

  function setConnected(connected: boolean) {
    isConnected.value = connected
    if (connected) {
      isReconnecting.value = false
      connectionError.value = null
    }
  }

  function setReconnecting(reconnecting: boolean) {
    isReconnecting.value = reconnecting
  }

  function setConnectionStatus(status: string) {
    connectionStatus.value = status
  }

  function setConnectionError(error: string | null) {
    connectionError.value = error
  }

  function setConnectionInfo(info: ConnectionInfo | null) {
    connectionInfo.value = info
  }

  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 {
    // Connection state
    isConnected,
    isReconnecting,
    connectionStatus,
    connectionError,
    connectionInfo,
    statusColor,
    // Canvas mode
    isAnonymousCanvas,
    // History & UI
    history,
    notifications,
    showHistoryPanel,
    // Actions
    setConnected,
    setReconnecting,
    setConnectionStatus,
    setConnectionError,
    setConnectionInfo,
    addToHistory,
    clearHistory,
    showNotification,
    removeNotification,
    toggleHistoryPanel
  }
})