<template>
  <div data-theme="acid" class="min-h-screen bg-mesh text-base-content">
    <NuxtRouteAnnouncer />
    <aside
      class="glass-card fixed left-4 top-4 z-20 flex h-[calc(100vh-2rem)] w-[360px] flex-col rounded-3xl p-5"
    >
          <div class="card glass-pane mb-3 rounded-2xl">
            <div class="card-body py-4">
              <div class="flex items-center gap-3">
                <div class="avatar">
                  <div class="w-12 rounded-full bg-gradient-to-br from-fuchsia-400 via-violet-400 to-cyan-400 p-[2px]">
                    <div class="flex h-full w-full items-center justify-center rounded-full bg-base-100">
                      <span class="text-lg">🤖</span>
                    </div>
                  </div>
                </div>
                <span class="text-sm font-semibold text-left">Хантик</span>
              </div>
            </div>
          </div>

          <div class="flex-1 space-y-4 overflow-auto pr-1">
            <div
              v-for="message in chatHistory"
              :key="message.id"
              class="chat"
              :class="message.from === 'ai' ? 'chat-start' : 'chat-end'"
            >
              <div v-if="message.from === 'ai'" class="chat-image avatar">
                <div class="w-8 rounded-full bg-gradient-to-br from-fuchsia-400 via-violet-400 to-cyan-400 p-[1px]">
                  <div class="flex h-full w-full items-center justify-center rounded-full bg-base-100">
                    <span class="text-xs">🤖</span>
                  </div>
                </div>
              </div>
              <div
                class="chat-bubble text-sm"
                :class="message.from === 'ai' ? 'glass-pane' : 'bg-sky-500/20'"
                @click="message.step !== undefined && goToStep(message.step)"
              >
                {{ message.text }}
              </div>
            </div>
          </div>

        <div class="mt-5">
          <div class="card glass-pane rounded-2xl">
            <div class="card-body p-3">
              <div class="join w-full">
                <input class="input input-bordered input-lg join-item w-full" placeholder="Напишите сообщение" />
                <button
                  class="btn btn-primary btn-lg join-item"
                  type="button"
                  aria-label="Отправить"
                >
                  <svg viewBox="0 0 24 24" class="h-5 w-5" fill="currentColor" aria-hidden="true">
                    <path d="M3.4 20.6 22 12 3.4 3.4l1.9 6.4L16 12 5.3 14.2z" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
        </aside>

    <main
      class="min-h-screen w-full px-4 py-6 md:px-8 lg:pl-[400px]"
    >
      <section class="glass-card flex min-h-[calc(100vh-3rem)] flex-col gap-6 rounded-3xl p-6">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
              <h1 class="section-title">{{ steps[currentStep].title }}</h1>
            </div>
          </div>
          <div class="w-full">
            <div class="steps steps-horizontal w-full">
              <button
                v-for="(step, index) in steps"
                :key="step.id"
                class="step cursor-pointer"
                :class="index <= currentStep ? 'step-primary' : ''"
                type="button"
                @click="goToStep(index)"
              >
                <span class="sr-only">{{ step.title }}</span>
              </button>
            </div>
          </div>
          <div v-if="currentStep === 0" class="grid gap-4 lg:grid-cols-[3fr_1fr]">
            <div class="space-y-6 text-[18px] leading-relaxed text-slate-900">
                <input class="input input-bordered input-lg w-full text-base text-slate-900" value="Head of Growth" />
                <div>
                  <p class="text-lg font-semibold text-slate-900">Общее описание</p>
                      <p class="mt-3 text-slate-900">
                        Мы ищем Head of Growth, который построит и масштабирует систему роста продукта: от активации и
                        первого успеха пользователя до удержания и расширения выручки. В роли нужно соединять продукт,
                        маркетинг, аналитику и продажи в единую growth‑машину, которая стабильно генерирует результат.
                      </p>
                      <p class="mt-3 text-slate-900">
                        Это позиция для человека, который умеет превращать хаотичные идеи в управляемый pipeline
                        экспериментов, и не боится ответственности за цифры: активацию, конверсию, NRR и LTV.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">Ключевые зоны ответственности</p>
                      <p class="mt-3 text-slate-900">
                        Построить backlog гипотез и систему их приоритизации, запустить регулярные спринты
                        growth‑экспериментов и довести их до измеримого эффекта. Настроить единый аналитический контур
                        (события, воронки, когорты, атрибуция) и дать команде прозрачный обзор того, где теряются
                        пользователи и деньги.
                      </p>
                      <p class="mt-3 text-slate-900">
                        Объединить product‑маркетинг, performance и product‑аналитику вокруг одного North Star и
                        превратить его в рабочий инструмент для всех команд. Отвечать за рост ключевых метрик на уровне
                        квартала и года.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">Основные цели на 90 дней</p>
                      <p class="mt-3 text-slate-900">
                        Развернуть growth‑плейбук: определить метрики, собрать список гипотез, настроить процесс
                        экспериментов и выдать первые устойчивые инкременты в активации и удержании. Сформировать
                        отчётность и ритм, который позволит команде видеть эффект каждую неделю.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">Взаимодействие с командами</p>
                      <p class="mt-3 text-slate-900">
                        Эта роль работает на пересечении продукта, маркетинга, продаж и CX. Вам нужно держать единый
                        контекст по воронке, предлагать решения, которые одинаково хорошо живут и в продукте, и в
                        каналах привлечения.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">Пример рабочего дня</p>
                      <p class="mt-3 text-slate-900">
                        Утро — разбор когорт и планирование новых экспериментов с продактом. Днём — синки с маркетингом и
                        аналитикой, согласование приоритетов и ресурса. Вечером — фиксация результатов спринта,
                        подготовка гипотез на следующую итерацию и обновление roadmap.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">Каким мы видим кандидата</p>
                      <p class="mt-3 text-slate-900">
                        Опыт в продуктовой или growth‑роли с измеримым вкладом в метрики, сильные навыки работы с
                        данными, умение строить эксперименты и убеждать кросс‑функциональные команды работать на один
                        результат.
                      </p>
                    </div>

                    <div>
                      <p class="text-lg font-semibold text-slate-900">О компании и продукте</p>
                      <p class="mt-3 text-slate-900">
                        Мы — B2B SaaS с международной аудиторией, продуктом пользуются тысячи команд в Европе и США.
                        Сейчас фокус на масштабировании выручки и усилении ретеншна. Роль — ключевая, напрямую влияет на
                        стратегию роста компании.
                      </p>
                    </div>
            </div>

            <div class="space-y-4">
              <div class="glass-card relative cursor-pointer rounded-2xl p-5">
                <button class="btn btn-ghost btn-circle btn-sm absolute right-4 top-4">▶</button>
                <div class="voice-wave">
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                  <span class="voice-bar"></span>
                </div>
                <p class="mt-4 text-sm text-slate-300">
                  Пройдите голосовое интервью — мы заполним всё за вас.
                </p>
              </div>
              <div class="glass-card rounded-2xl p-5">
                <h3 class="font-display text-base font-semibold sr-only">Целевой профиль кандидата</h3>
                <div class="mt-4">
                  <ClientOnly>
                    <div ref="vacancyChartEl" class="h-64 w-full"></div>
                  </ClientOnly>
                </div>
              </div>
            </div>
          </div>

          <div v-else-if="currentStep === 1" class="grid gap-4">
              <div class="mt-2 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
                  <div class="flex h-full flex-col items-center justify-center gap-4">
                    <div class="avatar">
                      <div class="w-16 rounded-full">
                        <img
                          alt="Аня"
                          src="https://i.pravatar.cc/160?img=12"
                          class="h-full w-full rounded-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <p class="text-sm font-semibold">Аня · Product</p>
                  </div>
                </div>
                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
                  <div class="flex h-full flex-col items-center justify-center gap-4">
                    <div class="avatar">
                      <div class="w-16 rounded-full">
                        <img
                          alt="Сергей"
                          src="https://i.pravatar.cc/160?img=32"
                          class="h-full w-full rounded-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <p class="text-sm font-semibold">Сергей · Growth</p>
                  </div>
                </div>
                <div class="glass-card rounded-2xl p-6 min-h-[180px]">
                  <div class="flex h-full flex-col items-center justify-center gap-4">
                    <div class="avatar">
                      <div class="w-16 rounded-full">
                        <img
                          alt="Кира"
                          src="https://i.pravatar.cc/160?img=47"
                          class="h-full w-full rounded-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <p class="text-sm font-semibold">Кира · Ops</p>
                  </div>
                </div>
                <div class="glass-card rounded-2xl border border-dashed border-white/20 p-4">
                  <div class="flex h-full flex-col justify-between">
                    <div class="flex flex-1 items-center justify-center">
                      <button class="btn btn-ghost btn-sm">Добавить видео</button>
                    </div>
                    <div class="mt-4 flex w-full items-center justify-between gap-3">
                      <input class="input input-bordered input-sm flex-1" value="https://hr.example/team-video" />
                      <button class="btn btn-ghost btn-sm">Поделиться</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>

          <div v-else-if="currentStep === 2" class="grid gap-4">
            <div class="glass-card rounded-2xl p-5">
              <div class="flex items-center justify-between">
                <h3 class="font-display text-lg font-semibold">Анализ видео</h3>
              </div>
              <div class="mt-4 flex flex-wrap items-center gap-4">
                <span class="loading loading-spinner loading-lg text-info"></span>
                <progress class="progress progress-info w-48" value="72" max="100"></progress>
              </div>
            </div>
            <div class="glass-card rounded-2xl p-8">
              <div class="flex flex-wrap items-center justify-between gap-3">
                <h3 class="font-display text-lg font-semibold sr-only">Требования на основе команды</h3>
              </div>
              <div class="mt-6">
                <ClientOnly>
                  <div ref="teamChartEl" class="h-80 w-full"></div>
                </ClientOnly>
              </div>
            </div>
          </div>

          <div v-else-if="currentStep === 3" class="space-y-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h3 class="font-display text-lg font-semibold">Критерии совпадений</h3>
              </div>
              <div class="join rounded-full border border-white/10 p-1">
                <button
                  v-for="method in methodologies"
                  :key="method.id"
                  class="btn btn-sm join-item"
                  :class="currentMethodology === method.id ? 'btn-primary' : 'btn-ghost'"
                  @click="currentMethodology = method.id"
                >
                  {{ method.label }}
                </button>
              </div>
            </div>

            <transition-group name="reorder" tag="div" class="grid gap-4 md:grid-cols-2">
              <div
                v-for="candidate in sortedCandidates"
                :key="candidate.id"
                class="glass-card min-h-[320px] rounded-2xl p-4"
              >
                <div class="flex items-start justify-between">
                  <div>
                    <div class="flex items-center gap-3">
                      <div class="avatar">
                        <div class="w-10 rounded-full">
                          <img
                            :alt="candidate.name"
                            :src="candidate.avatar"
                            class="h-full w-full rounded-full object-cover"
                            loading="lazy"
                          />
                        </div>
                      </div>
                      <div>
                        <h4 class="font-display text-lg font-semibold">{{ candidate.name }}</h4>
                      </div>
                    </div>
                  </div>
                  <div class="text-sm font-semibold text-fuchsia-600">
                    {{ candidate.match }}%
                  </div>
                </div>
                <div class="mt-4">
                  <ClientOnly>
                    <div
                      class="h-56 w-full"
                      :ref="setCandidateChartRef(candidate.id)"
                    ></div>
                  </ClientOnly>
                </div>
              </div>
            </transition-group>

          </div>

          <div v-else class="space-y-4">
              <div class="space-y-3">
                <div class="glass-card rounded-2xl p-4">
                  <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                      <div class="avatar">
                        <div class="w-10 rounded-full bg-slate-800">
                          <span class="flex h-full items-center justify-center text-xs">ИС</span>
                        </div>
                      </div>
                      <div>
                        <p class="text-sm font-semibold">Ирина Соколова · Head of Growth</p>
                      </div>
                    </div>
                  </div>
                  <div class="mt-3 flex flex-wrap items-center gap-3">
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-1" class="radio radio-sm" />
                      Сегодня 16:00
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-1" class="radio radio-sm" />
                      Завтра 11:30
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-1" class="radio radio-sm" />
                      Ср 15:00
                    </label>
                  </div>
                </div>
                <div class="glass-card rounded-2xl p-4">
                  <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                      <div class="avatar">
                        <div class="w-10 rounded-full bg-slate-800">
                          <span class="flex h-full items-center justify-center text-xs">КД</span>
                        </div>
                      </div>
                      <div>
                        <p class="text-sm font-semibold">Кира Дуброва · Product Growth</p>
                      </div>
                    </div>
                  </div>
                  <div class="mt-3 flex flex-wrap items-center gap-3">
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-2" class="radio radio-sm" />
                      Сегодня 18:00
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-2" class="radio radio-sm" />
                      Чт 12:00
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-2" class="radio radio-sm" />
                      Пт 10:30
                    </label>
                  </div>
                </div>
                <div class="glass-card rounded-2xl p-4">
                  <div class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                      <div class="avatar">
                        <div class="w-10 rounded-full bg-slate-800">
                          <span class="flex h-full items-center justify-center text-xs">АМ</span>
                        </div>
                      </div>
                      <div>
                        <p class="text-sm font-semibold">Алексей Марков · Growth Manager</p>
                      </div>
                    </div>
                  </div>
                  <div class="mt-3 flex flex-wrap items-center gap-3">
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-3" class="radio radio-sm" />
                      Ср 14:30
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-3" class="radio radio-sm" />
                      Чт 16:00
                    </label>
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                      <input type="radio" name="meet-3" class="radio radio-sm" />
                      Пт 09:30
                    </label>
                  </div>
                </div>
                <div class="flex justify-center">
                  <button class="btn btn-primary btn-lg">Запланировать встречу</button>
                </div>
              </div>
          </div>
        <div class="mt-auto flex justify-end" v-if="currentStep !== steps.length - 1">
          <button class="btn btn-primary btn-lg" @click="nextStep">
            Далее
          </button>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, nextTick, ref, watch } from 'vue'

const steps = [
  {
    id: 'requirements',
    title: 'Сформируйте требования к вакансии',
  },
  {
    id: 'video',
    title: 'Загрузите информацию о команде',
  },
  {
    id: 'fingerprint',
    title: 'Требования на основе команды',
  },
  {
    id: 'recommendations',
    title: 'Ознакомьтесь с кандидатами',
  },
  {
    id: 'matches',
    title: 'Запланируйте встречу',
  }
]

const route = typeof useRoute === 'function' ? useRoute() : null
const router = typeof useRouter === 'function' ? useRouter() : null
const currentStep = ref(0)
const chatHistory = computed(() => chatByStep.slice(0, currentStep.value + 1).flat())
const goToStep = (index: number) => {
  currentStep.value = Math.min(Math.max(index, 0), steps.length - 1)
}

const nextStep = () => {
  goToStep(currentStep.value + 1)
}

const methodologies = [
  { id: 'structured', label: 'Структурированный разбор' },
  { id: 'situational', label: 'Ситуационный мэтч' },
  { id: 'role', label: 'Ролевой профиль' }
]

const axisLabelsByMethodology = {
  structured: [
    'Коммуникация/ясность',
    'Решение проблем',
    'Взаимодействие',
    'Ownership/ответственность',
    'Профессиональный опыт'
  ],
  situational: [
    'Конфликт-менеджмент',
    'Переговоры',
    'Командная работа',
    'Межличностные навыки',
    'Решение проблем в контексте роли'
  ],
  role: ['Знания', 'Навыки', 'Умения', 'Рабочие активности', 'Контекст/условия роли']
} as const

const vacancyProfile = {
  labels: [
    'Коммуникация/ясность',
    'Решение проблем',
    'Ownership/ответственность',
    'Взаимодействие',
    'Темп/инициатива'
  ],
  values: [80, 78, 82, 74, 76]
}
const teamProfile = {
  labels: [
    'Командная работа',
    'Конфликт-менеджмент',
    'Межличностные навыки',
    'Взаимодействие',
    'Контекст/условия роли'
  ],
  values: [81, 73, 77, 75, 74]
}

const candidateProfiles = [
  {
    id: 1,
    name: 'Ирина Соколова',
    role: 'Growth Lead · B2B SaaS',
    location: 'Берлин / Remote',
    avatar: 'https://i.pravatar.cc/120?img=5',
    tags: ['Experimentation', 'B2B', 'Lifecycle'],
    highlight: 'темп запуска',
    matchByMethodology: { structured: 91, situational: 84, role: 83 },
    valuesByMethodology: {
      structured: [88, 62, 79, 71, 66],
      situational: [70, 86, 60, 75, 78],
      role: [84, 64, 78, 76, 71]
    }
  },
  {
    id: 2,
    name: 'Максим Орлов',
    role: 'Head of Growth',
    location: 'Лондон / Remote',
    avatar: 'https://i.pravatar.cc/120?img=15',
    tags: ['SQL', 'Funnels', 'Team Lead'],
    highlight: 'структура',
    matchByMethodology: { structured: 87, situational: 91, role: 90 },
    valuesByMethodology: {
      structured: [76, 58, 82, 68, 73],
      situational: [64, 82, 58, 72, 83],
      role: [80, 62, 74, 72, 69]
    }
  },
  {
    id: 3,
    name: 'Лия Вернер',
    role: 'Revenue Strategist',
    location: 'Амстердам',
    avatar: 'https://i.pravatar.cc/120?img=36',
    tags: ['PLG', 'Retention', 'Ops'],
    highlight: 'удержание',
    matchByMethodology: { structured: 85, situational: 79, role: 77 },
    valuesByMethodology: {
      structured: [72, 74, 65, 70, 81],
      situational: [62, 80, 61, 69, 79],
      role: [78, 66, 69, 74, 70]
    }
  },
  {
    id: 4,
    name: 'Алексей Нестеров',
    role: 'Growth Manager',
    location: 'Барселона',
    avatar: 'https://i.pravatar.cc/120?img=51',
    tags: ['Paid', 'Analytics', 'B2B'],
    highlight: 'скорость экспериментов',
    matchByMethodology: { structured: 83, situational: 88, role: 88 },
    valuesByMethodology: {
      structured: [70, 60, 78, 64, 69],
      situational: [66, 78, 63, 67, 74],
      role: [74, 60, 71, 68, 73]
    }
  },
  {
    id: 5,
    name: 'Анна Прайс',
    role: 'Lifecycle Director',
    location: 'Прага',
    avatar: 'https://i.pravatar.cc/120?img=64',
    tags: ['CRM', 'Email', 'Segmentation'],
    highlight: 'процессы',
    matchByMethodology: { structured: 81, situational: 82, role: 92 },
    valuesByMethodology: {
      structured: [68, 72, 59, 66, 84],
      situational: [60, 76, 57, 70, 77],
      role: [70, 58, 75, 66, 68]
    }
  },
  {
    id: 6,
    name: 'Давид Клайн',
    role: 'Growth Partner',
    location: 'Цюрих',
    avatar: 'https://i.pravatar.cc/120?img=68',
    tags: ['Strategy', 'OKR', 'B2B'],
    highlight: 'стратегия',
    matchByMethodology: { structured: 79, situational: 86, role: 81 },
    valuesByMethodology: {
      structured: [66, 64, 73, 62, 70],
      situational: [62, 74, 56, 68, 72],
      role: [68, 56, 73, 64, 66]
    }
  }
] as const

const currentMethodology = ref<'structured' | 'situational' | 'role'>('structured')
const currentCandidates = computed(() =>
  candidateProfiles.map((candidate) => ({
    ...candidate,
    match: candidate.matchByMethodology[currentMethodology.value],
    values: candidate.valuesByMethodology[currentMethodology.value]
  }))
)
const sortedCandidates = computed(() =>
  [...currentCandidates.value].sort((a, b) => b.match - a.match)
)

const currentCandidateAxisLabels = computed(
  () => axisLabelsByMethodology[currentMethodology.value]
)

const vacancyChartEl = ref<HTMLDivElement | null>(null)
const teamChartEl = ref<HTMLDivElement | null>(null)
const candidateChartEls = new Map<number, HTMLDivElement>()
const candidateCharts = new Map<number, any>()
let vacancyChart: any = null
let teamChart: any = null
let echarts: any = null

const setCandidateChartRef = (id: number) => (el: HTMLDivElement | null) => {
  if (el) {
    candidateChartEls.set(id, el)
    return
  }
  candidateChartEls.delete(id)
}

const buildRadarOption = (labels: string[], values: number[]) => ({
  tooltip: {
    trigger: 'item',
    formatter: (params: { value: number[] }) =>
      labels.map((label, index) => `${label}: ${params.value[index]}%`).join('<br/>')
  },
  radar: {
    indicator: labels.map((label) => ({ name: label, max: 100 })),
    splitNumber: 4,
    axisName: { color: '#0f172a', fontSize: 10, fontWeight: 600 },
    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.3)' } },
    splitLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.2)' } },
    splitArea: {
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.6)']
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: values,
          areaStyle: { color: 'rgba(56, 189, 248, 0.35)' },
          lineStyle: { color: 'rgba(56, 189, 248, 0.9)', width: 2 },
          symbol: 'circle',
          symbolSize: 4
        }
      ]
    }
  ]
})

const ensureEcharts = async () => {
  if (echarts) return
  const mod = await import('echarts')
  echarts = mod.default ?? mod
}

const renderVacancyChart = () => {
  if (!echarts || !vacancyChartEl.value) return
  if (!vacancyChart) {
    vacancyChart = echarts.init(vacancyChartEl.value)
  }
  vacancyChart.setOption(buildRadarOption(vacancyProfile.labels, vacancyProfile.values))
}

const renderTeamChart = () => {
  if (!echarts || !teamChartEl.value) return
  if (!teamChart) {
    teamChart = echarts.init(teamChartEl.value)
  }
  teamChart.setOption(buildRadarOption(teamProfile.labels, teamProfile.values))
}

const renderCandidateCharts = () => {
  if (!echarts) return
  const labels = currentCandidateAxisLabels.value
  const candidateIds = new Set(sortedCandidates.value.map((candidate) => candidate.id))

  for (const [id, chart] of candidateCharts) {
    if (!candidateIds.has(id)) {
      chart.dispose()
      candidateCharts.delete(id)
    }
  }

  sortedCandidates.value.forEach((candidate) => {
    const el = candidateChartEls.get(candidate.id)
    if (!el) return
    const existing = candidateCharts.get(candidate.id)
    if (existing) {
      existing.setOption(buildRadarOption(labels, candidate.values))
      return
    }
    const chart = echarts.init(el)
    chart.setOption(buildRadarOption(labels, candidate.values))
    candidateCharts.set(candidate.id, chart)
  })
}

const syncStepFromRoute = () => {
  if (!route) return
  const raw = Array.isArray(route.query.step) ? route.query.step[0] : route.query.step
  const parsed = Number(raw)
  if (!Number.isNaN(parsed)) {
    goToStep(parsed - 1)
  }
}

const handleResize = () => {
  vacancyChart?.resize()
  teamChart?.resize()
  candidateCharts.forEach((chart) => chart.resize())
}

onMounted(async () => {
  syncStepFromRoute()
  await ensureEcharts()
  renderVacancyChart()
  renderTeamChart()
  renderCandidateCharts()
  window.addEventListener('resize', handleResize)
})

watch(
  [currentMethodology, currentStep, sortedCandidates],
  async () => {
    await nextTick()
    renderVacancyChart()
    renderTeamChart()
    renderCandidateCharts()
  },
  { flush: 'post' }
)

watch(
  () => route?.query?.step,
  () => {
    syncStepFromRoute()
  }
)

watch(
  () => currentStep.value,
  (value) => {
    if (!route || !router) return
    const step = String(value + 1)
    if (route.query.step !== step) {
      router.replace({ query: { ...route.query, step } })
    }
  },
  { immediate: true }
)

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  vacancyChart?.dispose()
  teamChart?.dispose()
  candidateCharts.forEach((chart) => chart.dispose())
  candidateCharts.clear()
})

const chatByStep = [
  [
    { id: 'r1', from: 'ai', text: 'Опиши требования к вакансии. Заполни форму.', step: 0 },
    { id: 'r2', from: 'user', text: 'Ок, заполняю.' }
  ],
  [
    { id: 'v1', from: 'ai', text: 'Запиши видео по сценарию и загрузи.', step: 1 },
    { id: 'v2', from: 'user', text: 'Ок, записываю.' }
  ],
  [
    { id: 'f1', from: 'ai', text: 'AI сформировал отпечаток коллектива по видео.', step: 2 },
    { id: 'f2', from: 'user', text: 'Смотрю профиль.' }
  ],
  [
    { id: 'p1', from: 'ai', text: 'Рекомендации готовы. Откликов нет.', step: 3 },
    { id: 'p2', from: 'user', text: 'Покажи топ.' }
  ],
  [
    { id: 'm1', from: 'ai', text: 'Созданы мэтчи. Можно открыть чат или интро.', step: 4 },
    { id: 'm2', from: 'user', text: 'Открываю чат.' }
  ]
]
</script>
