<script setup lang="ts">
import { ref } from 'vue'
import { useWebSocket } from '@/composables/useWebSocket'

const WS_URL = 'ws://127.0.0.1:8080/api/ws'
const { isConnected, messages, error, connect, disconnect, sendMessage } = useWebSocket(WS_URL)

const messageInput = ref('')

const handleSendMessage = () => {
  if (messageInput.value.trim()) {
    sendMessage(messageInput.value)
    messageInput.value = ''
  }
}

const handleConnect = () => {
  connect()
}

const handleDisconnect = () => {
  disconnect()
}
</script>

<template>
  <div class="websocket-demo">
    <h2>WebSocket Demo</h2>

    <div class="connection-status">
      <span :class="{ connected: isConnected, disconnected: !isConnected }">
        {{ isConnected ? '● Connected' : '○ Disconnected' }}
      </span>
      <span class="url">{{ WS_URL }}</span>
    </div>

    <div v-if="error" class="error">
      Error: {{ error }}
    </div>

    <div class="controls">
      <button @click="handleConnect" :disabled="isConnected">Connect</button>
      <button @click="handleDisconnect" :disabled="!isConnected">Disconnect</button>
    </div>

    <div class="message-input">
      <input
        v-model="messageInput"
        type="text"
        placeholder="Enter message..."
        @keyup.enter="handleSendMessage"
        :disabled="!isConnected"
      />
      <button @click="handleSendMessage" :disabled="!isConnected">Send</button>
    </div>

    <div class="messages">
      <h3>Messages ({{ messages.length }})</h3>
      <div class="message-list">
        <div v-for="(msg, index) in messages" :key="index" class="message">
          {{ msg }}
        </div>
        <div v-if="messages.length === 0" class="no-messages">
          No messages received yet
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.websocket-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.connected {
  color: #4caf50;
  font-weight: bold;
}

.disconnected {
  color: #f44336;
  font-weight: bold;
}

.url {
  color: #666;
  font-family: monospace;
  font-size: 14px;
}

.error {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ffebee;
  color: #c62828;
  border-radius: 4px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 8px 16px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover:not(:disabled) {
  background-color: #1976d2;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.message-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.message-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.message-input input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.messages {
  margin-top: 20px;
}

.messages h3 {
  margin-bottom: 10px;
}

.message-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
}

.message {
  padding: 8px;
  margin-bottom: 8px;
  background-color: white;
  border-radius: 4px;
  border-left: 3px solid #2196f3;
  word-break: break-word;
  color: #2196f3;
}

.no-messages {
  color: #999;
  text-align: center;
  padding: 20px;
}
</style>
