<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useApi } from '@/composables/useApi'
import { Server, Wifi, CheckCircle, ArrowRight, Loader2 } from 'lucide-vue-next'

const router = useRouter()
const auth = useAuthStore()
const api = useApi()

const step = ref(1)
const isLoading = ref(false)
const error = ref('')

const serverForm = ref({
  server_name: '',
  connection_type: 'bare_metal' as 'amp' | 'pterodactyl' | 'bare_metal',
  server_ip: '',
  server_port: 28016,
  game_port: 28015,
})

const connectionTypes = [
  { value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
  { value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
  { value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
]

async function submitServerConfig() {
  if (!serverForm.value.server_name.trim()) {
    error.value = 'Server name is required.'
    return
  }

  error.value = ''
  isLoading.value = true

  try {
    await api.post('/setup/server', serverForm.value)
    step.value = 2
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : 'Setup failed. Please try again.'
  } finally {
    isLoading.value = false
  }
}

async function completeSetup() {
  isLoading.value = true
  try {
    await api.post('/setup/complete')
    router.push('/')
  } catch {
    router.push('/')
  }
}
</script>

<template>
  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
    <div class="w-full max-w-lg">
      <!-- Progress -->
      <div class="flex items-center justify-center gap-3 mb-8">
        <div
          class="flex items-center gap-2 text-sm"
          :class="step >= 1 ? 'text-oxide-400' : 'text-neutral-600'"
        >
          <Server class="w-4 h-4" />
          Server
        </div>
        <div class="w-8 h-px" :class="step >= 2 ? 'bg-oxide-500' : 'bg-neutral-700'" />
        <div
          class="flex items-center gap-2 text-sm"
          :class="step >= 2 ? 'text-oxide-400' : 'text-neutral-600'"
        >
          <Wifi class="w-4 h-4" />
          Connect
        </div>
        <div class="w-8 h-px" :class="step >= 3 ? 'bg-oxide-500' : 'bg-neutral-700'" />
        <div
          class="flex items-center gap-2 text-sm"
          :class="step >= 3 ? 'text-oxide-400' : 'text-neutral-600'"
        >
          <CheckCircle class="w-4 h-4" />
          Done
        </div>
      </div>

      <!-- Step 1: Server Config -->
      <div v-if="step === 1" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
        <div class="text-center mb-6">
          <img src="/logo.png" alt="Corrosion" class="h-12 w-12 mx-auto mb-3" />
          <h1 class="text-xl font-bold text-neutral-100">Configure Your Server</h1>
          <p class="text-sm text-neutral-500 mt-1">Let's get your Rust server connected to Corrosion.</p>
        </div>

        <div v-if="error" class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
          {{ error }}
        </div>

        <form @submit.prevent="submitServerConfig" class="space-y-4">
          <div>
            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
            <input
              v-model="serverForm.server_name"
              type="text"
              required
              placeholder="My Rust Server"
              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm 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-2">Connection Type</label>
            <div class="space-y-2">
              <label
                v-for="ct in connectionTypes"
                :key="ct.value"
                class="flex items-start gap-3 p-3 bg-neutral-800 border rounded-lg cursor-pointer transition-colors"
                :class="serverForm.connection_type === ct.value
                  ? 'border-oxide-500/50 bg-oxide-500/5'
                  : 'border-neutral-700 hover:border-neutral-600'"
              >
                <input
                  v-model="serverForm.connection_type"
                  :value="ct.value"
                  type="radio"
                  name="connection_type"
                  class="mt-0.5 accent-oxide-500"
                />
                <div>
                  <p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
                  <p class="text-xs text-neutral-500">{{ ct.desc }}</p>
                </div>
              </label>
            </div>
          </div>

          <div class="grid grid-cols-3 gap-3">
            <div class="col-span-1">
              <label class="block text-xs text-neutral-500 mb-1">Server IP</label>
              <input
                v-model="serverForm.server_ip"
                type="text"
                placeholder="0.0.0.0"
                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm font-mono 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="serverForm.server_port"
                type="number"
                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono 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">Game Port</label>
              <input
                v-model.number="serverForm.game_port"
                type="number"
                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
              />
            </div>
          </div>

          <button
            type="submit"
            :disabled="isLoading"
            class="w-full flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
          >
            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
            <template v-else>
              Continue
              <ArrowRight class="w-4 h-4" />
            </template>
          </button>
        </form>
      </div>

      <!-- Step 2: Connection Instructions -->
      <div v-if="step === 2" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
        <div class="text-center mb-6">
          <Wifi class="w-10 h-10 text-oxide-500 mx-auto mb-3" />
          <h1 class="text-xl font-bold text-neutral-100">Install the Companion Agent</h1>
          <p class="text-sm text-neutral-500 mt-1">
            The Companion Agent runs on your server and connects to Corrosion securely — no inbound ports required.
          </p>
        </div>

        <div class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 mb-6">
          <p class="text-neutral-500 mb-2"># Download and install the Companion Agent</p>
          <p class="text-oxide-400">curl -sSL https://get.corrosionmgmt.com | sh</p>
          <p class="text-neutral-500 mt-3 mb-2"># Start the agent with your license key</p>
          <p class="text-oxide-400">corrosion-agent start --key {{ auth.license?.license_key || 'YOUR-LICENSE-KEY' }}</p>
        </div>

        <p class="text-xs text-neutral-500 text-center mb-6">
          The agent will automatically register with your panel. You can also use the uMod plugin for lightweight integration.
        </p>

        <div class="flex gap-3">
          <button
            @click="step = 3"
            class="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium rounded-lg text-sm transition-colors text-center"
          >
            Skip for Now
          </button>
          <button
            @click="step = 3"
            class="flex-1 flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg text-sm transition-colors"
          >
            I've Installed It
            <ArrowRight class="w-4 h-4" />
          </button>
        </div>
      </div>

      <!-- Step 3: Complete -->
      <div v-if="step === 3" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 text-center">
        <CheckCircle class="w-12 h-12 text-green-400 mx-auto mb-4" />
        <h1 class="text-xl font-bold text-neutral-100 mb-2">You're All Set</h1>
        <p class="text-sm text-neutral-500 mb-6">
          Your server is configured. Head to the dashboard to start managing your Rust server.
        </p>
        <button
          @click="completeSetup"
          :disabled="isLoading"
          class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
        >
          Go to Dashboard
        </button>
      </div>
    </div>
  </div>
</template>
