<template>
  <div>
    <h2>Configuration</h2>
    <form @submit.prevent="saveConfig">
      <div>
        <label for="serverName">Server Name:</label>
        <input type="text" id="serverName" v-model="config.serverName" required>
      </div>
      <div>
        <label for="port">Port:</label>
        <input type="number" id="port" v-model="config.port" required>
      </div>
      <div>
        <label for="host">Host:</label>
        <input type="text" id="host" v-model="config.host" required>
      </div>
      <button type="submit">Save</button>
    </form>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        serverName: '',
        port: 8080,
        host: 'localhost'
      },
      message: ''
    }
  },
  methods: {
    async saveConfig() {
      try {
        const response = await fetch('/api/config', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.config)
        })
        if (response.ok) {
          this.message = 'Configuration saved successfully'
        } else {
          this.message = 'Failed to save configuration'
        }
      } catch (err) {
        this.message = 'Failed to save configuration'
      }
    }
  }
}
</script>