<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { AppExample, EstimatorPlan } from '@/stores/estimator'

interface Props {
  modelValue: boolean
  appExamples: AppExample[]
  allPlans: EstimatorPlan[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'pick-plan': [planSlug: string, reason: string]
}>()

const step = ref<1 | 2>(1)
const traffic = ref<'low' | 'medium' | 'high' | null>(null)
const priority = ref<'cheapest' | 'reliability' | 'speed' | 'storage' | null>(null)

watch(
  () => props.modelValue,
  open => {
    if (open) {
      step.value = 1
      traffic.value = null
      priority.value = null
    }
  },
)

function close(): void {
  emit('update:modelValue', false)
}

function pickApp(app: AppExample): void {
  if (app.key === 'other') {
    step.value = 2
    return
  }
  if (app.plan) {
    emit('pick-plan', app.plan, `Closest match: ${app.label.toLowerCase()}`)
    close()
  }
}

function recommendFromQuiz(): void {
  if (!traffic.value || !priority.value) return

  let slug = 'vps-2'
  let reason = ''

  if (priority.value === 'storage') {
    slug = traffic.value === 'high' ? 'stor-1tb' : 'stor-500'
    reason = 'Storage-heavy workload — picking a storage-tier plan'
  } else if (priority.value === 'cheapest') {
    slug = traffic.value === 'high' ? 'vps-2' : 'vps-1'
    reason = 'Optimizing for cost'
  } else if (priority.value === 'reliability') {
    slug = traffic.value === 'high' ? 'vps-8' : traffic.value === 'medium' ? 'vps-4' : 'vps-2'
    reason = 'Reliability priority — picking comfortable headroom'
  } else if (priority.value === 'speed') {
    slug = traffic.value === 'high' ? 'vps-16' : traffic.value === 'medium' ? 'vps-8' : 'vps-4'
    reason = 'Speed priority — extra cores and RAM'
  }

  const plan = props.allPlans.find(p => p.slug === slug)
  if (plan) {
    emit('pick-plan', slug, reason)
    close()
  }
}

function planNameFor(slug: string | null): string {
  if (!slug) return ''
  return props.allPlans.find(p => p.slug === slug)?.name ?? slug
}
</script>

<template>
  <VDialog
    :model-value="modelValue"
    max-width="720"
    :scrim="true"
    @update:model-value="(v: boolean) => emit('update:modelValue', v)"
  >
    <VCard>
      <VCardTitle class="d-flex align-center pa-5">
        <VIcon icon="tabler-bulb" class="me-2 text-primary" />
        <span>{{ step === 1 ? 'Closest match to what you\'re hosting?' : 'A couple of quick questions' }}</span>
        <VSpacer />
        <VBtn icon="tabler-x" size="small" variant="text" @click="close" />
      </VCardTitle>

      <VCardText class="pa-5">
        <!-- Step 1: 12 apps -->
        <div v-if="step === 1">
          <div class="quiz-grid">
            <button
              v-for="app in appExamples"
              :key="app.key"
              type="button"
              class="quiz-grid__item"
              :class="{ 'quiz-grid__item--other': app.key === 'other' }"
              @click="pickApp(app)"
            >
              <VIcon :icon="app.icon" size="28" class="mb-2" />
              <div class="text-body-2 font-weight-medium">{{ app.label }}</div>
              <div v-if="app.plan" class="text-caption text-medium-emphasis mt-1">
                → {{ planNameFor(app.plan) }}
              </div>
              <div v-else class="text-caption text-medium-emphasis mt-1">
                Answer 2 questions →
              </div>
            </button>
          </div>
        </div>

        <!-- Step 2: traffic + priority -->
        <div v-else>
          <div class="mb-5">
            <div class="text-subtitle-2 font-weight-bold mb-2">Expected traffic?</div>
            <div class="d-flex flex-wrap ga-2">
              <VChip
                v-for="opt in [
                  { value: 'low', label: 'Low (~100/day)' },
                  { value: 'medium', label: 'Medium (~10k/day)' },
                  { value: 'high', label: 'High (~100k/day)' },
                ]"
                :key="opt.value"
                :color="traffic === opt.value ? 'primary' : undefined"
                :variant="traffic === opt.value ? 'flat' : 'tonal'"
                @click="traffic = opt.value as 'low' | 'medium' | 'high'"
              >
                {{ opt.label }}
              </VChip>
            </div>
          </div>

          <div class="mb-5">
            <div class="text-subtitle-2 font-weight-bold mb-2">Most important?</div>
            <div class="d-flex flex-wrap ga-2">
              <VChip
                v-for="opt in [
                  { value: 'cheapest', label: 'Cheapest' },
                  { value: 'reliability', label: 'Reliability' },
                  { value: 'speed', label: 'Speed' },
                  { value: 'storage', label: 'Storage-heavy' },
                ]"
                :key="opt.value"
                :color="priority === opt.value ? 'primary' : undefined"
                :variant="priority === opt.value ? 'flat' : 'tonal'"
                @click="priority = opt.value as 'cheapest' | 'reliability' | 'speed' | 'storage'"
              >
                {{ opt.label }}
              </VChip>
            </div>
          </div>

          <VBtn
            color="primary"
            block
            size="large"
            :disabled="!traffic || !priority"
            @click="recommendFromQuiz"
          >
            Show recommendation
            <VIcon icon="tabler-arrow-right" end />
          </VBtn>
        </div>
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style lang="scss" scoped>
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  @media (max-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quiz-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  background: rgba(var(--v-theme-on-surface), 0.03);
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    border-color: rgba(var(--v-theme-primary), 0.45);
    background: rgba(var(--v-theme-primary), 0.06);
  }
}

.quiz-grid__item--other {
  border-style: dashed;
  border-color: rgba(var(--v-theme-on-surface), 0.18);

  &:hover {
    border-style: solid;
  }
}
</style>
