<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useServerStore } from '@/stores/server'
import { useAuthStore } from '@/stores/auth'
import { useToastStore } from '@/stores/toast'
import {
  Server,
  Wifi,
  WifiOff,
  Play,
  Square,
  RotateCcw,
  Save,
  Loader2,
  Download,
  Terminal,
  Monitor,
  Rocket,
  AlertTriangle,
  Check,
} from 'lucide-vue-next'
import type { DeploymentConfig, DeploymentStatus } from '@/types'
import { useWebSocket } from '@/composables/useWebSocket'

const server = useServerStore()
const auth = useAuthStore()
const toast = useToastStore()

const editMode = ref(false)
const saving = ref(false)
const actionLoading = ref<string | null>(null)
const copied = ref(false)
const setupTab = ref<'linux' | 'windows'>('linux')
const windowsCopied = ref(false)
const showDeployForm = ref(false)
const deployLoading = ref(false)

const deployForm = ref<DeploymentConfig>({
  server_name: 'My Rust Server',
  max_players: 100,
  world_size: 4000,
  seed: Math.floor(Math.random() * 2147483647),
  server_port: 28015,
  rcon_port: 28016,
  rcon_password: '',
})

const isAgentConnected = computed(() =>
  server.connection?.connection_type === 'bare_metal' &&
  server.connection?.connection_status === 'connected'
)

const agentLastSeen = computed(() => {
  const ts = server.connection?.companion_last_seen
  if (!ts) return null
  return new Date(ts)
})

const agentLastSeenLabel = computed(() => {
  const d = agentLastSeen.value
  if (!d) return 'Never'
  const diff = Math.floor((Date.now() - d.getTime()) / 1000)
  if (diff < 60) return `${diff}s ago`
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
  return d.toLocaleDateString()
})

const licenseKey = computed(() => auth.license?.license_key || 'YOUR-LICENSE-KEY')

const linuxCommands = computed(() => `# Download the agent
curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64
chmod +x corrosion-companion-linux-amd64

# Start with your license key
export LICENSE_ID="${licenseKey.value}"
export NATS_URL="nats://nats.corrosionmgmt.com:4222"
./corrosion-companion-linux-amd64`)

const windowsCommands = computed(() => `# Requires PowerShell (not Command Prompt)
# Download the agent
Invoke-WebRequest -Uri "https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe" -OutFile "corrosion-companion-windows-amd64.exe"

# Start with your license key
$env:LICENSE_ID="${licenseKey.value}"
$env:NATS_URL="nats://nats.corrosionmgmt.com:4222"
.\\corrosion-companion-windows-amd64.exe`)

async function copySetupCommands() {
  try {
    const text = setupTab.value === 'linux' ? linuxCommands.value : windowsCommands.value
    await navigator.clipboard.writeText(text)
    if (setupTab.value === 'linux') {
      copied.value = true
      setTimeout(() => { copied.value = false }, 2000)
    } else {
      windowsCopied.value = true
      setTimeout(() => { windowsCopied.value = false }, 2000)
    }
  } catch {
    // Clipboard API unavailable
  }
}

async function startDeploy() {
  if (!deployForm.value.rcon_password || deployForm.value.rcon_password.length < 6) return
  deployLoading.value = true
  try {
    await server.deployServer(deployForm.value)
    showDeployForm.value = false
  } catch {
    toast.error('Failed to start deployment')
  } finally {
    deployLoading.value = false
  }
}

const deployStages = [
  { key: 'downloading_steamcmd', label: 'Download SteamCMD' },
  { key: 'installing_steamcmd', label: 'Install SteamCMD' },
  { key: 'downloading_rust', label: 'Download Rust Server' },
  { key: 'configuring', label: 'Configure' },
  { key: 'starting', label: 'Start Server' },
  { key: 'online', label: 'Online' },
] as const

function getStageState(stageKey: string): 'pending' | 'active' | 'complete' | 'failed' {
  const status = server.deploymentStatus
  if (!status) return 'pending'
  if (status.stage === 'failed') {
    const idx = deployStages.findIndex(s => s.key === stageKey)
    const failIdx = deployStages.findIndex(s => s.key === status.stage)
    if (idx < failIdx) return 'complete'
    if (idx === failIdx) return 'failed'
    return 'pending'
  }
  const currentIdx = deployStages.findIndex(s => s.key === status.stage)
  const thisIdx = deployStages.findIndex(s => s.key === stageKey)
  if (thisIdx < currentIdx) return 'complete'
  if (thisIdx === currentIdx) return status.stage === 'online' ? 'complete' : 'active'
  return 'pending'
}

const form = ref({
  server_name: '',
  max_players: 0,
  world_size: 0,
  current_seed: 0,
})

function loadFormFromConfig() {
  if (server.config) {
    form.value = {
      server_name: server.config.server_name || '',
      max_players: server.config.max_players ?? 100,
      world_size: server.config.world_size ?? 4000,
      current_seed: server.config.current_seed ?? 0,
    }
  }
}

async function saveConfig() {
  saving.value = true
  try {
    await server.updateConfig(form.value)
    editMode.value = false
    toast.success('Server configuration saved')
  } catch {
    toast.error('Failed to save server configuration')
  } finally {
    saving.value = false
  }
}

async function serverAction(action: 'start' | 'stop' | 'restart') {
  actionLoading.value = action
  try {
    if (action === 'start') await server.startServer()
    else if (action === 'stop') await server.stopServer()
    else await server.restartServer()
    await server.fetchServer()
    toast.success(`Server ${action} command sent`)
  } catch {
    toast.error(`Failed to ${action} server`)
  } finally {
    actionLoading.value = null
  }
}

async function toggleAutomation(field: 'crash_recovery_enabled' | 'auto_update_on_force_wipe' | 'force_wipe_eligible') {
  if (!server.config) return
  const newValue = !server.config[field]
  try {
    await server.updateConfig({ [field]: newValue })
    toast.success('Automation setting saved')
  } catch {
    toast.error('Failed to save automation setting')
  }
}

onMounted(async () => {
  await server.fetchServer()
  loadFormFromConfig()

  const ws = useWebSocket()
  ws.subscribe((msg) => {
    if (msg.type === 'event' && msg.event === 'deploy_status') {
      server.updateDeploymentStatus(msg.data as DeploymentStatus)
    }
  })
})
</script>

<template>
  <div class="p-6 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-3">
      <Server class="w-5 h-5 text-oxide-500" />
      <h1 class="text-2xl font-bold text-neutral-100">Server Management</h1>
    </div>

    <!-- Connection Status Card -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Connection</h2>
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
        <div>
          <p class="text-xs text-neutral-500 mb-1">Status</p>
          <div class="flex items-center gap-2">
            <component
              :is="server.connection?.connection_status === 'connected' ? Wifi : WifiOff"
              class="w-4 h-4"
              :class="server.connection?.connection_status === 'connected' ? 'text-green-400' : 'text-red-400'"
            />
            <span class="text-sm font-medium text-neutral-100 capitalize">
              {{ server.connection?.connection_status || 'Unknown' }}
            </span>
          </div>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Connection Type</p>
          <p class="text-sm font-medium text-neutral-100 uppercase">
            {{ server.connection?.connection_type || '\u2014' }}
          </p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Server IP</p>
          <p class="text-sm font-mono text-neutral-300">
            {{ server.connection?.server_ip || '\u2014' }}:{{ server.connection?.server_port || '' }}
          </p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Game Port</p>
          <p class="text-sm font-mono text-neutral-300">
            {{ server.connection?.game_port || '\u2014' }}
          </p>
        </div>
      </div>
    </div>

    <!-- Server Controls -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Controls</h2>
      <div class="flex flex-wrap gap-3">
        <button
          @click="serverAction('start')"
          :disabled="server.connection?.connection_status === 'connected' || actionLoading !== null"
          class="flex items-center gap-2 px-4 py-2.5 bg-green-600/20 hover:bg-green-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-green-400 border border-green-600/30 rounded-lg text-sm font-medium transition-colors"
        >
          <Loader2 v-if="actionLoading === 'start'" class="w-4 h-4 animate-spin" />
          <Play v-else class="w-4 h-4" />
          Start Server
        </button>
        <button
          @click="serverAction('stop')"
          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
          class="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-red-400 border border-red-600/30 rounded-lg text-sm font-medium transition-colors"
        >
          <Loader2 v-if="actionLoading === 'stop'" class="w-4 h-4 animate-spin" />
          <Square v-else class="w-4 h-4" />
          Stop Server
        </button>
        <button
          @click="serverAction('restart')"
          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
          class="flex items-center gap-2 px-4 py-2.5 bg-oxide-600/20 hover:bg-oxide-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-oxide-400 border border-oxide-600/30 rounded-lg text-sm font-medium transition-colors"
        >
          <Loader2 v-if="actionLoading === 'restart'" class="w-4 h-4 animate-spin" />
          <RotateCcw v-else class="w-4 h-4" />
          Restart Server
        </button>
      </div>
    </div>

    <!-- Companion Agent -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center gap-2 mb-5">
        <Monitor class="w-4 h-4 text-oxide-400" />
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Companion Agent</h2>
      </div>

      <!-- Agent Status -->
      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <div>
          <p class="text-xs text-neutral-500 mb-1">Agent Status</p>
          <div class="flex items-center gap-2">
            <span
              class="w-2 h-2 rounded-full"
              :class="isAgentConnected ? 'bg-green-400' : 'bg-neutral-600'"
            />
            <span
              class="text-sm font-medium"
              :class="isAgentConnected ? 'text-green-400' : 'text-neutral-400'"
            >
              {{ isAgentConnected ? 'Active' : 'Inactive' }}
            </span>
          </div>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Connection Type</p>
          <p class="text-sm font-medium text-neutral-100 uppercase">
            {{ server.connection?.connection_type || '\u2014' }}
          </p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Last Heartbeat</p>
          <p class="text-sm font-medium" :class="agentLastSeen ? 'text-neutral-200' : 'text-neutral-500'">
            {{ agentLastSeenLabel }}
          </p>
        </div>
      </div>

      <!-- Download Section -->
      <div class="mb-6">
        <div class="flex items-center gap-2 mb-3">
          <Download class="w-3.5 h-3.5 text-neutral-500" />
          <p class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Download Companion Agent</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <a
            href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64"
            download="corrosion-companion-linux-amd64"
            class="flex items-center gap-2 px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 border border-neutral-700 hover:border-neutral-600 rounded-lg text-sm font-medium transition-colors"
          >
            <Download class="w-4 h-4 text-oxide-400" />
            Linux (amd64)
          </a>
          <a
            href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"
            download="corrosion-companion-windows-amd64.exe"
            class="flex items-center gap-2 px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 border border-neutral-700 hover:border-neutral-600 rounded-lg text-sm font-medium transition-colors"
          >
            <Download class="w-4 h-4 text-oxide-400" />
            Windows (amd64)
          </a>
        </div>
      </div>

      <!-- Quick Setup Section — Tabbed -->
      <div>
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-2">
            <Terminal class="w-3.5 h-3.5 text-neutral-500" />
            <p class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Quick Setup</p>
          </div>
          <button
            @click="copySetupCommands"
            class="flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-md transition-colors"
            :class="(setupTab === 'linux' ? copied : windowsCopied)
              ? 'bg-green-600/20 text-green-400 border border-green-600/30'
              : 'bg-neutral-800 hover:bg-neutral-700 text-neutral-400 hover:text-neutral-200 border border-neutral-700'"
          >
            {{ (setupTab === 'linux' ? copied : windowsCopied) ? 'Copied!' : 'Copy' }}
          </button>
        </div>

        <!-- OS Tabs -->
        <div class="flex bg-neutral-800 rounded-md p-0.5 mb-3 w-fit">
          <button
            @click="setupTab = 'linux'"
            class="px-3 py-1 text-xs font-medium rounded transition-colors"
            :class="setupTab === 'linux' ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-500 hover:text-neutral-300'"
          >Linux</button>
          <button
            @click="setupTab = 'windows'"
            class="px-3 py-1 text-xs font-medium rounded transition-colors"
            :class="setupTab === 'windows' ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-500 hover:text-neutral-300'"
          >Windows</button>
        </div>

        <!-- Windows Warning Badge -->
        <div v-if="setupTab === 'windows'" class="flex items-center gap-2 mb-3 px-3 py-2 bg-amber-500/10 border border-amber-500/20 rounded-lg">
          <AlertTriangle class="w-4 h-4 text-amber-400 shrink-0" />
          <p class="text-xs text-amber-300">PowerShell Required — Command Prompt is not supported</p>
        </div>

        <!-- Linux Commands -->
        <div v-if="setupTab === 'linux'" class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 overflow-x-auto">
          <p class="text-neutral-500"># Download the agent</p>
          <p>curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64</p>
          <p>chmod +x corrosion-companion-linux-amd64</p>
          <p class="mt-3 text-neutral-500"># Start with your license key</p>
          <p>export LICENSE_ID=<span class="text-oxide-400">"{{ licenseKey }}"</span></p>
          <p>export NATS_URL=<span class="text-oxide-400">"nats://nats.corrosionmgmt.com:4222"</span></p>
          <p>./corrosion-companion-linux-amd64</p>
        </div>

        <!-- Windows Commands -->
        <div v-if="setupTab === 'windows'" class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 overflow-x-auto">
          <p class="text-neutral-500"># Requires PowerShell (not Command Prompt)</p>
          <p class="text-neutral-500"># Download the agent</p>
          <p>Invoke-WebRequest -Uri <span class="text-oxide-400">"https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"</span> -OutFile <span class="text-oxide-400">"corrosion-companion-windows-amd64.exe"</span></p>
          <p class="mt-3 text-neutral-500"># Start with your license key</p>
          <p>$env:LICENSE_ID=<span class="text-oxide-400">"{{ licenseKey }}"</span></p>
          <p>$env:NATS_URL=<span class="text-oxide-400">"nats://nats.corrosionmgmt.com:4222"</span></p>
          <p>.\corrosion-companion-windows-amd64.exe</p>
        </div>
      </div>
    </div>

    <!-- Deploy Rust Server -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center gap-2 mb-5">
        <Rocket class="w-4 h-4 text-oxide-400" />
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Deploy Rust Server</h2>
      </div>

      <!-- Deployment Progress Tracker -->
      <div v-if="server.deploymentStatus || server.isDeploying" class="mb-6">
        <div class="space-y-3">
          <div
            v-for="stage in deployStages"
            :key="stage.key"
            class="flex items-center gap-3"
          >
            <!-- Stage indicator -->
            <div class="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
              :class="{
                'bg-neutral-800 text-neutral-600': getStageState(stage.key) === 'pending',
                'bg-amber-500/20 text-amber-400': getStageState(stage.key) === 'active',
                'bg-green-500/20 text-green-400': getStageState(stage.key) === 'complete',
                'bg-red-500/20 text-red-400': getStageState(stage.key) === 'failed',
              }"
            >
              <Loader2 v-if="getStageState(stage.key) === 'active'" class="w-3.5 h-3.5 animate-spin" />
              <Check v-else-if="getStageState(stage.key) === 'complete'" class="w-3.5 h-3.5" />
              <AlertTriangle v-else-if="getStageState(stage.key) === 'failed'" class="w-3.5 h-3.5" />
              <span v-else class="w-1.5 h-1.5 rounded-full bg-neutral-600" />
            </div>
            <!-- Stage label -->
            <span
              class="text-sm"
              :class="{
                'text-neutral-600': getStageState(stage.key) === 'pending',
                'text-amber-300 font-medium': getStageState(stage.key) === 'active',
                'text-green-400': getStageState(stage.key) === 'complete',
                'text-red-400': getStageState(stage.key) === 'failed',
              }"
            >{{ stage.label }}</span>
          </div>
        </div>

        <!-- Status message -->
        <div v-if="server.deploymentStatus?.message" class="mt-4 px-3 py-2 bg-neutral-800/50 rounded-lg">
          <p class="text-xs text-neutral-400">{{ server.deploymentStatus.message }}</p>
        </div>

        <!-- Error display -->
        <div v-if="server.deploymentStatus?.error" class="mt-3 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
          <p class="text-xs text-red-400">{{ server.deploymentStatus.error }}</p>
        </div>

        <!-- Retry button on failure -->
        <button
          v-if="server.deploymentStatus?.stage === 'failed'"
          @click="server.clearDeploymentStatus(); showDeployForm = true"
          class="mt-3 flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
        >
          <RotateCcw class="w-4 h-4" />
          Retry Deployment
        </button>
      </div>

      <!-- Deploy Form (shown when not deploying) -->
      <div v-else>
        <div v-if="!showDeployForm" class="text-center py-4">
          <p class="text-sm text-neutral-400 mb-4">Automatically install SteamCMD, download Rust Dedicated Server, configure, and start — all with one click.</p>
          <button
            @click="showDeployForm = true"
            class="inline-flex items-center gap-2 px-5 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
          >
            <Rocket class="w-4 h-4" />
            Deploy Server
          </button>
        </div>

        <form v-else @submit.prevent="startDeploy" class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
              <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
              <input v-model="deployForm.server_name" type="text" required class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div>
              <label class="block text-xs text-neutral-500 mb-1">Max Players</label>
              <input v-model.number="deployForm.max_players" type="number" min="1" max="500" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div>
              <label class="block text-xs text-neutral-500 mb-1">World Size</label>
              <input v-model.number="deployForm.world_size" type="number" min="1000" max="8000" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div>
              <label class="block text-xs text-neutral-500 mb-1">Map Seed</label>
              <input v-model.number="deployForm.seed" type="number" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div>
              <label class="block text-xs text-neutral-500 mb-1">Server Port</label>
              <input v-model.number="deployForm.server_port" type="number" min="1024" max="65535" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div>
              <label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
              <input v-model.number="deployForm.rcon_port" type="number" min="1024" max="65535" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-neutral-500 mb-1">RCON Password <span class="text-red-400">*</span></label>
              <input v-model="deployForm.rcon_password" type="password" required minlength="6" placeholder="Minimum 6 characters" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors placeholder:text-neutral-600" />
            </div>
          </div>
          <div class="flex items-center gap-3 pt-2">
            <button
              type="submit"
              :disabled="deployLoading || !deployForm.rcon_password || deployForm.rcon_password.length < 6"
              class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
            >
              <Loader2 v-if="deployLoading" class="w-4 h-4 animate-spin" />
              <Rocket v-else class="w-4 h-4" />
              {{ deployLoading ? 'Deploying...' : 'Deploy Server' }}
            </button>
            <button
              type="button"
              @click="showDeployForm = false"
              class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
            >Cancel</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Configuration -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Configuration</h2>
        <button
          v-if="!editMode"
          @click="editMode = true; loadFormFromConfig()"
          class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
        >
          Edit
        </button>
      </div>

      <!-- Read mode -->
      <div v-if="!editMode" class="grid grid-cols-2 lg:grid-cols-4 gap-6">
        <div>
          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
          <p class="text-sm text-neutral-200">{{ server.config?.server_name || 'Not configured' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Max Players</p>
          <p class="text-sm text-neutral-200">{{ server.config?.max_players ?? '\u2014' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">World Size</p>
          <p class="text-sm text-neutral-200">{{ server.config?.world_size ?? '\u2014' }}</p>
        </div>
        <div>
          <p class="text-xs text-neutral-500 mb-1">Current Seed</p>
          <p class="text-sm text-neutral-200">{{ server.config?.current_seed ?? '\u2014' }}</p>
        </div>
      </div>

      <!-- Edit mode -->
      <form v-else @submit.prevent="saveConfig" class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="col-span-2">
            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
            <input
              v-model="form.server_name"
              type="text"
              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
          </div>
          <div>
            <label class="block text-xs text-neutral-500 mb-1">Max Players</label>
            <input
              v-model.number="form.max_players"
              type="number"
              min="1"
              max="500"
              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
          </div>
          <div>
            <label class="block text-xs text-neutral-500 mb-1">World Size</label>
            <input
              v-model.number="form.world_size"
              type="number"
              min="1000"
              max="8000"
              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
          </div>
          <div>
            <label class="block text-xs text-neutral-500 mb-1">Current Seed</label>
            <input
              v-model.number="form.current_seed"
              type="number"
              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
          </div>
        </div>
        <div class="flex items-center gap-3 pt-2">
          <button
            type="submit"
            :disabled="saving"
            class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
          >
            <Save class="w-4 h-4" />
            {{ saving ? 'Saving...' : 'Save Changes' }}
          </button>
          <button
            type="button"
            @click="editMode = false"
            class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>

    <!-- Advanced Settings -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Automation</h2>
      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-neutral-200">Auto-Restart</p>
            <p class="text-xs text-neutral-500">Restart on crash detection</p>
          </div>
          <button
            @click="toggleAutomation('crash_recovery_enabled')"
            :disabled="!server.config"
            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
            :class="server.config?.crash_recovery_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
          >
            <div
              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
              :class="server.config?.crash_recovery_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
            />
          </button>
        </div>
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-neutral-200">Auto-Update on Force Wipe</p>
            <p class="text-xs text-neutral-500">Update when Facepunch pushes</p>
          </div>
          <button
            @click="toggleAutomation('auto_update_on_force_wipe')"
            :disabled="!server.config"
            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
            :class="server.config?.auto_update_on_force_wipe ? 'bg-oxide-500' : 'bg-neutral-700'"
          >
            <div
              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
              :class="server.config?.auto_update_on_force_wipe ? 'translate-x-4.5' : 'translate-x-0.5'"
            />
          </button>
        </div>
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-neutral-200">Force Wipe Eligible</p>
            <p class="text-xs text-neutral-500">Server participates in force wipes</p>
          </div>
          <button
            @click="toggleAutomation('force_wipe_eligible')"
            :disabled="!server.config"
            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
            :class="server.config?.force_wipe_eligible ? 'bg-oxide-500' : 'bg-neutral-700'"
          >
            <div
              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
              :class="server.config?.force_wipe_eligible ? 'translate-x-4.5' : 'translate-x-0.5'"
            />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
