<script setup lang="ts">
import type { WelcomeData } from '@/api/types'

defineProps<{
  data: WelcomeData
  org: string
}>()
</script>

<template>
  <div class="max-w-2xl mx-auto">
    <div class="text-center mb-10">
      <h1 class="text-3xl font-bold font-display text-slate-800 dark:text-slate-100 mb-2">
        Welcome{{ data.user_name ? `, ${data.user_name}` : '' }}!
      </h1>
      <p class="text-slate-500 dark:text-slate-400">Let's get Specwright set up for your organization.</p>
    </div>

    <div class="space-y-4">
      <!-- Step 1: Sign in -->
      <div class="flex items-start gap-4 p-5 border border-border-light dark:border-slate-700 rounded-lg">
        <div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
          <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </div>
        <div>
          <h3 class="font-medium text-slate-800 dark:text-slate-200">Sign in to Specwright</h3>
          <p class="text-sm text-slate-500 mt-1">You're signed in. Nice work!</p>
        </div>
      </div>

      <!-- Step 2: Install GitHub App -->
      <div class="flex items-start gap-4 p-5 border border-border-light dark:border-slate-700 rounded-lg">
        <div
          class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center"
          :class="data.app_installed ? 'bg-emerald-100 dark:bg-emerald-900/50' : 'bg-surface-light-elevated dark:bg-slate-800'"
        >
          <svg v-if="data.app_installed" class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
          <span v-else class="text-sm font-medium text-slate-400">2</span>
        </div>
        <div>
          <h3 class="font-medium text-slate-800 dark:text-slate-200">Install the GitHub App</h3>
          <p class="text-sm text-slate-500 mt-1">
            <template v-if="data.app_installed">The Specwright GitHub App is installed.</template>
            <template v-else>Install the app to enable spec syncing and PR analysis.</template>
          </p>
          <a
            v-if="!data.app_installed"
            :href="data.install_url"
            target="_blank"
            rel="noopener"
            class="inline-block mt-3 px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-accent-500 to-cyan-500 rounded-md hover:from-accent-600 hover:to-cyan-600 transition-colors"
          >Install on GitHub</a>
        </div>
      </div>

      <!-- Step 3: Create first spec -->
      <div class="flex items-start gap-4 p-5 border border-border-light dark:border-slate-700 rounded-lg">
        <div
          class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center"
          :class="data.has_specs ? 'bg-emerald-100 dark:bg-emerald-900/50' : 'bg-surface-light-elevated dark:bg-slate-800'"
        >
          <svg v-if="data.has_specs" class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
          <span v-else class="text-sm font-medium text-slate-400">3</span>
        </div>
        <div>
          <h3 class="font-medium text-slate-800 dark:text-slate-200">Create your first spec</h3>
          <p class="text-sm text-slate-500 mt-1">
            <template v-if="data.has_specs">You've got specs! Head to the dashboard to explore.</template>
            <template v-else>Add a markdown file in <code class="px-1 py-0.5 bg-surface-light-elevated dark:bg-slate-800 rounded text-xs">docs/specs/</code> in any repo.</template>
          </p>
        </div>
      </div>
    </div>

    <div class="text-center mt-8">
      <router-link
        :to="`/app/${org}/`"
        class="text-sm text-slate-500 hover:text-accent-500 transition-colors"
      >
        Skip to Dashboard
      </router-link>
    </div>
  </div>
</template>
