<template>
  <div class="min-h-full flex items-center justify-center p-3 sm:p-4 md:p-6">
    <div class="max-w-[1200px] w-full relative z-10 path-glass-container onb-scroll-container">
      <div class="text-center mb-4 sm:mb-6 flex-shrink-0 px-3 sm:px-4 pt-4 sm:pt-6">
        <div class="logo-gradient-border inline-block mb-4 sm:mb-6">
          <img
            src="/assets/icon/favico-black-v2.svg"
            alt="Archipelago"
            class="w-16 h-16 sm:w-20 sm:h-20"
          />
        </div>
        <h1 class="text-2xl sm:text-4xl font-bold text-white mb-2 sm:mb-4">Choose Your Setup</h1>
        <p class="text-base sm:text-xl text-white/80">How would you like to get started?</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-6 px-3 sm:px-4">
        <!-- Fresh Start -->
        <button
          @click="selectOption('fresh')"
          class="path-option-card text-center"
          :class="{ 'path-option-card--selected': selected === 'fresh' }"
        >
          <div class="mb-3 sm:mb-4">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
              </svg>
            </div>
          </div>
          <h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Fresh Start</h3>
          <p class="text-white/70 text-xs sm:text-sm">
            Set up a new server from scratch
          </p>
        </button>

        <!-- Restore Backup (Coming Soon) -->
        <div class="path-option-card text-center opacity-40 cursor-not-allowed">
          <div class="mb-3 sm:mb-4">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
              </svg>
            </div>
          </div>
          <h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Restore Backup</h3>
          <p class="text-white/70 text-xs sm:text-sm">
            Restore from a previous backup
          </p>
          <span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
        </div>

        <!-- Connect Existing (Coming Soon) -->
        <div class="path-option-card text-center opacity-40 cursor-not-allowed">
          <div class="mb-3 sm:mb-4">
            <div class="w-12 h-12 sm:w-16 sm:h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
              </svg>
            </div>
          </div>
          <h3 class="text-lg sm:text-xl font-semibold text-white mb-1 sm:mb-2">Connect Existing</h3>
          <p class="text-white/70 text-xs sm:text-sm">
            Connect to an existing Archipelago server
          </p>
          <span class="text-xs text-white/50 mt-1 block">(Coming Soon)</span>
        </div>
      </div>

      <div class="flex justify-center flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6 mt-4 sm:mt-8">
        <button
          @click="proceed"
          class="path-action-button path-action-button--continue"
        >
          Continue
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { completeOnboarding } from '@/composables/useOnboarding'
import { playNavSound } from '@/composables/useNavSounds'

const router = useRouter()
const selected = ref<string | null>(null)

onMounted(() => {
  selected.value = 'fresh'
})

function selectOption(option: string) {
  selected.value = option
}

async function proceed() {
  try {
    await completeOnboarding()
  } catch (e) {
    if (import.meta.env.DEV) console.warn('completeOnboarding failed, localStorage fallback ensures onboarding is marked complete', e)
  }
  playNavSound('action')
  router.push('/login').catch(() => {})
}
</script>
