<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useServerConfig } from '@/stores/server-config'

const serverConfig = useServerConfig()

const urlInput = ref('')
const testing = ref(false)
const testResult = ref<'idle' | 'success' | 'error'>('idle')

async function handleTest() {
  if (!urlInput.value.trim()) return
  testing.value = true
  testResult.value = 'idle'

  const ok = await serverConfig.testConnection(urlInput.value.trim())
  testResult.value = ok ? 'success' : 'error'
  testing.value = false
}

async function handleConnect() {
  if (!urlInput.value.trim()) return
  const ok = await serverConfig.setServer(urlInput.value.trim())
  if (ok) {
    testResult.value = 'success'
  }
}

function selectRecent(url: string) {
  urlInput.value = url
  testResult.value = 'idle'
}

onMounted(() => {
  if (serverConfig.serverUrl) {
    urlInput.value = serverConfig.serverUrl
  }
})
</script>

<template>
  <div class="server-config-overlay">
    <div class="server-config-dialog">
      <div class="dialog-header">
        <h2>Connect to Server</h2>
        <p class="dialog-subtitle">Enter the URL of your Agent UI backend</p>
      </div>

      <div class="dialog-body">
        <div class="input-group">
          <label for="server-url">Server URL</label>
          <div class="input-row">
            <input
              id="server-url"
              v-model="urlInput"
              type="url"
              placeholder="https://your-server.com or http://192.168.1.100:4101"
              @keydown.enter="handleConnect"
              :disabled="serverConfig.loading"
            />
            <button
              class="btn btn-test"
              @click="handleTest"
              :disabled="!urlInput.trim() || testing"
            >
              {{ testing ? 'Testing...' : 'Test' }}
            </button>
          </div>

          <div v-if="testResult === 'success'" class="status-msg success">
            Connected successfully
          </div>
          <div v-if="testResult === 'error'" class="status-msg error">
            Could not connect to server
          </div>
          <div v-if="serverConfig.error" class="status-msg error">
            {{ serverConfig.error }}
          </div>
        </div>

        <div v-if="serverConfig.recentUrls.length > 0" class="recent-urls">
          <label>Recent</label>
          <div class="recent-list">
            <button
              v-for="url in serverConfig.recentUrls"
              :key="url"
              class="recent-item"
              @click="selectRecent(url)"
            >
              {{ url }}
            </button>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <button
          class="btn btn-primary"
          @click="handleConnect"
          :disabled="!urlInput.trim() || serverConfig.loading"
        >
          {{ serverConfig.loading ? 'Connecting...' : 'Connect' }}
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.server-config-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 99999;
}

.server-config-dialog {
  background: var(--bg-primary, #0f0f14);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.dialog-header {
  padding: 1.5rem 1.5rem 0;
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #e4e4e7);
}

.dialog-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #a1a1aa);
}

.dialog-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-row {
  display: flex;
  gap: 0.5rem;
}

.input-row input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  background: var(--bg-secondary, #1a1a24);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  color: var(--text-primary, #e4e4e7);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.input-row input:focus {
  border-color: var(--accent, #6366f1);
}

.input-row input::placeholder {
  color: var(--text-muted, #52525b);
}

.btn {
  padding: 0.6rem 1rem;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  background: var(--bg-secondary, #1a1a24);
  color: var(--text-primary, #e4e4e7);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--bg-hover, #252530);
  border-color: var(--accent, #6366f1);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: white;
  font-weight: 500;
  width: 100%;
}

.btn-primary:hover:not(:disabled) {
  background: #4f46e5;
  border-color: #4f46e5;
}

.status-msg {
  font-size: 0.8rem;
  padding: 0.4rem 0;
}

.status-msg.success {
  color: #10b981;
}

.status-msg.error {
  color: #ef4444;
}

.recent-urls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.recent-urls label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #a1a1aa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recent-item {
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
  border-radius: 6px;
  color: var(--text-secondary, #a1a1aa);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.recent-item:hover {
  background: var(--bg-hover, #252530);
  color: var(--text-primary, #e4e4e7);
  border-color: var(--accent, #6366f1);
}

.dialog-footer {
  padding: 0 1.5rem 1.5rem;
}
</style>
