<script setup>
import MarketingV3Service from '@/service/MarketingV3Service';
import {
    AverageCheckLabels,
    AverageChecks,
    BusinessConstraintLabels,
    BusinessConstraints,
    BusinessStageLabels,
    BusinessStages,
    ClientTargetLabels,
    ClientTargets,
    CustomerBehaviorLabels,
    CustomerBehaviors,
    DecisionPriorities,
    DecisionPriorityLabels,
    DiscoveryMethodLabels,
    DiscoveryMethods,
    GeoScopeLabels,
    GeoScopes,
    LeadVolumeLabels,
    LeadVolumes,
    OfferTypeLabels,
    OfferTypes,
    PriceFeedbackLabels,
    PriceFeedbacks,
    PurchaseFrequencies,
    PurchaseFrequencyLabels,
    ResponseHandlerLabels,
    ResponseHandlers,
    SmmStatuses,
    SmmStatusLabels,
    VisualFactorLabels,
    VisualFactors
} from '@/types/marketing-v3';
import { useToast } from 'primevue/usetoast';
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const toast = useToast();

const STEPS = ['Базовая информация', 'География и чек', 'Продукт и поведение', 'Текущая ситуация', 'Ссылки и настройки'];

const currentStep = ref(0);
const submitting = ref(false);
const errors = ref({});

// Form Data
const formData = ref({
    businessNiche: '',
    productName: '',
    goal: '',
    businessStage: 'JUST_STARTING',
    clientTarget: 'MIXED',
    offerType: 'SERVICES',
    averageCheck: 'MEDIUM',
    customerBehaviors: [],
    geoScope: 'SINGLE_CITY',
    mainCity: '',
    presenceCities: [],
    promotionCities: [],
    productDescription: '',
    purchaseFrequency: 'ONCE',
    visualFactor: 'VISUALS_IMPORTANT',
    decisionPriorities: [],
    discoveryMethods: [],
    priceFeedback: 'AS_EXPECTED',
    smmStatus: 'NONE',
    leadVolume: 'NONE',
    responseHandler: 'MYSELF',
    constraints: [],
    userSocialLinks: [],
    knownCompetitorLinks: [],
    detailLevel: 'СТАНДАРТНО',
    analysisType: []
});

// Options для Radio Groups
const businessStageOptions = computed(() =>
    BusinessStages.map((value) => ({
        value,
        label: BusinessStageLabels[value]
    }))
);

const clientTargetOptions = computed(() =>
    ClientTargets.map((value) => ({
        value,
        label: ClientTargetLabels[value]
    }))
);

const offerTypeOptions = computed(() =>
    OfferTypes.map((value) => ({
        value,
        label: OfferTypeLabels[value]
    }))
);

const geoScopeOptions = computed(() =>
    GeoScopes.map((value) => ({
        value,
        label: GeoScopeLabels[value]
    }))
);

const averageCheckOptions = computed(() =>
    AverageChecks.map((value) => ({
        value,
        label: AverageCheckLabels[value]
    }))
);

const purchaseFrequencyOptions = computed(() =>
    PurchaseFrequencies.map((value) => ({
        value,
        label: PurchaseFrequencyLabels[value]
    }))
);

const visualFactorOptions = computed(() =>
    VisualFactors.map((value) => ({
        value,
        label: VisualFactorLabels[value]
    }))
);

const customerBehaviorOptions = computed(() =>
    CustomerBehaviors.map((value) => ({
        value,
        label: CustomerBehaviorLabels[value]
    }))
);

const decisionPriorityOptions = computed(() =>
    DecisionPriorities.map((value) => ({
        value,
        label: DecisionPriorityLabels[value]
    }))
);

const discoveryMethodOptions = computed(() =>
    DiscoveryMethods.map((value) => ({
        value,
        label: DiscoveryMethodLabels[value]
    }))
);

const priceFeedbackOptions = computed(() =>
    PriceFeedbacks.map((value) => ({
        value,
        label: PriceFeedbackLabels[value]
    }))
);

const smmStatusOptions = computed(() =>
    SmmStatuses.map((value) => ({
        value,
        label: SmmStatusLabels[value]
    }))
);

const leadVolumeOptions = computed(() =>
    LeadVolumes.map((value) => ({
        value,
        label: LeadVolumeLabels[value]
    }))
);

const responseHandlerOptions = computed(() =>
    ResponseHandlers.map((value) => ({
        value,
        label: ResponseHandlerLabels[value]
    }))
);

const businessConstraintOptions = computed(() =>
    BusinessConstraints.map((value) => ({
        value,
        label: BusinessConstraintLabels[value]
    }))
);

const detailLevelOptions = [
    { value: 'КРАТКО', label: 'Кратко — только главное' },
    { value: 'СТАНДАРТНО', label: 'Стандартно — баланс деталей и скорости' },
    { value: 'ПОДРОБНО', label: 'Максимально подробно — глубокий разбор' }
];

const analysisTypeOptions = [
    { value: 'РЫНОК', label: 'Рынок и спрос' },
    { value: 'КОНКУРЕНТЫ', label: 'Конкуренты и позиционирование' },
    { value: 'ЦА', label: 'Целевая аудитория' },
    { value: 'КАНАЛЫ', label: 'Каналы продвижения' }
];

// Валидация конкретного шага (запускается перед переходом)
const validateStep = (stepIndex) => {
    let isValid = true;

    if (stepIndex === 0) {
        if (!formData.value.businessNiche?.trim() || formData.value.businessNiche.trim().length < 2) {
            errors.value.businessNiche = 'Введите не менее 2 символов';
            isValid = false;
        } else delete errors.value.businessNiche;

        if (!formData.value.productName?.trim() || formData.value.productName.trim().length < 2) {
            errors.value.productName = 'Введите не менее 2 символов';
            isValid = false;
        } else delete errors.value.productName;

        if (!formData.value.goal?.trim() || formData.value.goal.trim().length < 5) {
            errors.value.goal = 'Введите не менее 5 символов';
            isValid = false;
        } else delete errors.value.goal;
    }

    if (stepIndex === 1) {
        if (formData.value.geoScope === 'SINGLE_CITY') {
            if (!formData.value.mainCity?.trim()) {
                errors.value.mainCity = 'Укажите основной город';
                isValid = false;
            } else {
                delete errors.value.mainCity;
            }
        }

        if (formData.value.geoScope === 'MULTI_CITY') {
            if (!formData.value.presenceCities?.length) {
                errors.value.presenceCities = 'Укажите хотя бы один город присутствия';
                isValid = false;
            } else {
                delete errors.value.presenceCities;
            }
        }

        if (!formData.value.promotionCities?.length) {
            errors.value.promotionCities = 'Укажите хотя бы один город для продвижения';
            isValid = false;
        } else {
            delete errors.value.promotionCities;
        }
    }

    if (stepIndex === 2) {
        if (!formData.value.productDescription?.trim() || formData.value.productDescription.trim().length < 10) {
            errors.value.productDescription = 'Введите подробное описание (не менее 10 символов)';
            isValid = false;
        } else delete errors.value.productDescription;

        if (!formData.value.customerBehaviors?.length) {
            errors.value.customerBehaviors = 'Выберите хотя бы один вариант';
            isValid = false;
        } else if (formData.value.customerBehaviors.length > 2) {
            errors.value.customerBehaviors = 'Не более двух вариантов';
            isValid = false;
        } else delete errors.value.customerBehaviors;

        if (!formData.value.decisionPriorities?.length) {
            errors.value.decisionPriorities = 'Выберите хотя бы один приоритет';
            isValid = false;
        } else if (formData.value.decisionPriorities.length > 2) {
            errors.value.decisionPriorities = 'Не более двух приоритетов';
            isValid = false;
        } else delete errors.value.decisionPriorities;

        if (!formData.value.discoveryMethods?.length) {
            errors.value.discoveryMethods = 'Выберите хотя бы один вариант';
            isValid = false;
        } else if (formData.value.discoveryMethods.length > 2) {
            errors.value.discoveryMethods = 'Не более двух вариантов';
            isValid = false;
        } else delete errors.value.discoveryMethods;
    }

    if (stepIndex === 4) {
        if (!formData.value.analysisType?.length) {
            errors.value.analysisType = 'Выберите хотя бы один тип анализа';
            isValid = false;
        } else delete errors.value.analysisType;
    }

    return isValid;
};

// Navigation
const goNext = () => {
    // ИСПРАВЛЕНИЕ: Блокируем переход, если шаг не заполнен
    if (validateStep(currentStep.value)) {
        if (currentStep.value < STEPS.length - 1) {
            currentStep.value++;
        }
    } else {
        toast.add({
            severity: 'warn',
            summary: 'Заполните поля',
            detail: 'Пожалуйста, заполните все обязательные поля на этом шаге',
            life: 3000
        });
    }
};

const goBack = () => {
    if (currentStep.value > 0) {
        currentStep.value--;
    }
};

// Submit
const handleSubmit = async () => {
    // Финальная проверка всех шагов перед отправкой на всякий случай
    let isAllValid = true;
    for (let i = 0; i < STEPS.length; i++) {
        if (!validateStep(i)) {
            currentStep.value = i; // Возвращаем пользователя на шаг с ошибкой
            isAllValid = false;
            toast.add({
                severity: 'error',
                summary: 'Ошибка валидации',
                detail: `Пожалуйста, проверьте заполнение полей на шаге "${STEPS[i]}"`,
                life: 5000
            });
            break;
        }
    }

    if (!isAllValid) return;

    submitting.value = true;
    try {
        const payload = {
            ...formData.value,
            discoveryMethods: formData.value.discoveryMethods || []
        };

        const result = await MarketingV3Service.startAnalysisV3(payload);
        const analysisId = result.analysisId || result.id;

        if (analysisId) {
            toast.add({
                severity: 'success',
                summary: 'Анализ запущен',
                detail: 'Маркетинговый анализ успешно запущен',
                life: 3000
            });

            router.push(`/marketing-analysis/v3/${analysisId}`);
        } else {
            throw new Error('Не получен ID анализа');
        }
    } catch (error) {
        // ИСПРАВЛЕНИЕ: Теперь мы вытягиваем конкретную ошибку от бекенда (Axios)
        const errorMessage = error.response?.data?.message || error.response?.data?.detail || error.message || 'Не удалось запустить анализ';

        toast.add({
            severity: 'error',
            summary: 'Ошибка при отправке',
            detail: errorMessage,
            life: 6000
        });
    } finally {
        submitting.value = false;
    }
};

// Watch geoScope для очистки зависимых полей
watch(
    () => formData.value.geoScope,
    (newVal) => {
        if (newVal === 'FULL_COUNTRY') {
            formData.value.promotionCities = ['Алматы', 'Астана', 'Шымкент', 'Караганда', 'Актобе'];
        } else if (newVal === 'ONLINE') {
            formData.value.promotionCities = ['Remote'];
        }

        if (newVal !== 'SINGLE_CITY') {
            formData.value.mainCity = '';
        }
        if (newVal !== 'MULTI_CITY') {
            formData.value.presenceCities = [];
        }
    }
);
</script>

<script>
import CheckboxCardsField from './wizard/CheckboxCardsField.vue';
import CheckboxCardsLimitedField from './wizard/CheckboxCardsLimitedField.vue';
import DynamicLinksField from './wizard/DynamicLinksField.vue';
import RadioGroupField from './wizard/RadioGroupField.vue';
import StepSection from './wizard/StepSection.vue';
import TagArrayField from './wizard/TagArrayField.vue';

export default {
    components: {
        StepSection,
        RadioGroupField,
        CheckboxCardsLimitedField,
        CheckboxCardsField,
        TagArrayField,
        DynamicLinksField
    }
};
</script>

<template>
    <div class="marketing-brief-wizard-v3 bg-surface-50 dark:bg-surface-900 min-h-screen p-6">
        <Toast />
        <div class="max-w-4xl mx-auto">
            <div class="card">
                <div class="card-header mb-6">
                    <div class="flex items-center justify-between gap-4 mb-4">
                        <div>
                            <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-0">Бриф для маркетингового анализа v4.0</h1>
                            <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">{{ STEPS[currentStep] }} · шаг {{ currentStep + 1 }} из {{ STEPS.length }}</p>
                        </div>
                        <div class="hidden sm:block text-right text-xs text-surface-500 dark:text-surface-400">
                            <p>Можно пройти за 5–7 минут.</p>
                            <p>Данные нужны, чтобы ИИ дал максимально точные выводы.</p>
                        </div>
                    </div>

                    <div class="relative h-2 overflow-hidden rounded-full bg-surface-200 dark:bg-surface-800 mb-4">
                        <div class="absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500 transition-all duration-300" :style="{ width: `${((currentStep + 1) / STEPS.length) * 100}%` }" />
                    </div>

                    <div class="flex flex-wrap gap-2 text-xs text-surface-500 dark:text-surface-400">
                        <div
                            v-for="(label, index) in STEPS"
                            :key="label"
                            class="flex items-center gap-1 rounded-full px-2 py-1"
                            :class="{
                                'bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-200': index === currentStep,
                                'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200': index < currentStep,
                                'bg-surface-100 dark:bg-surface-800': index > currentStep
                            }"
                        >
                            <i v-if="index < currentStep" class="pi pi-check-circle text-xs" />
                            <span v-else class="h-3 w-3 rounded-full bg-surface-300 dark:bg-surface-600" />
                            <span class="hidden sm:inline">{{ label }}</span>
                            <span class="sm:hidden">{{ index + 1 }}</span>
                        </div>
                    </div>
                </div>

                <div class="card-content min-h-[400px]">
                    <Transition name="slide-fade" mode="out-in">
                        <div v-if="currentStep === 0" key="step-0" class="space-y-5">
                            <StepSection title="Базовая информация">
                                <div class="field md:col-span-2">
                                    <label for="businessNiche" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Ниша бизнеса * </label>
                                    <InputText id="businessNiche" v-model="formData.businessNiche" placeholder="Например: стоматологическая клиника в Алматы" class="w-full" :class="{ 'p-invalid': errors.businessNiche }" />
                                    <small v-if="errors.businessNiche" class="p-error">{{ errors.businessNiche }}</small>
                                </div>

                                <div class="field md:col-span-2">
                                    <label for="productName" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Название продукта или бренда * </label>
                                    <InputText id="productName" v-model="formData.productName" placeholder="Например: DentArt Clinic или ТОО 'Стоматология Плюс'" class="w-full" :class="{ 'p-invalid': errors.productName }" />
                                    <small v-if="errors.productName" class="p-error">{{ errors.productName }}</small>
                                </div>

                                <div class="field md:col-span-2">
                                    <label for="goal" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Главная цель маркетинга сейчас * </label>
                                    <InputText id="goal" v-model="formData.goal" placeholder="Например: увеличить поток заявок из Instagram и 2ГИС" class="w-full" :class="{ 'p-invalid': errors.goal }" />
                                    <small v-if="errors.goal" class="p-error">{{ errors.goal }}</small>
                                </div>
                            </StepSection>

                            <StepSection title="Этап и формат бизнеса">
                                <RadioGroupField v-model="formData.businessStage" label="Этап развития бизнеса" :options="businessStageOptions" :error="errors.businessStage" @update:modelValue="formData.businessStage = $event" />

                                <RadioGroupField v-model="formData.clientTarget" label="Для кого вы работаете в первую очередь?" :options="clientTargetOptions" :error="errors.clientTarget" @update:modelValue="formData.clientTarget = $event" />

                                <RadioGroupField v-model="formData.offerType" label="Что вы продаёте?" :options="offerTypeOptions" :error="errors.offerType" @update:modelValue="formData.offerType = $event" />
                            </StepSection>
                        </div>

                        <div v-else-if="currentStep === 1" key="step-1" class="space-y-5">
                            <StepSection title="География и чек">
                                <RadioGroupField v-model="formData.geoScope" label="Где вы работаете?" :options="geoScopeOptions" :error="errors.geoScope" @update:modelValue="formData.geoScope = $event" />

                                <div v-if="formData.geoScope === 'SINGLE_CITY'" class="field md:col-span-2">
                                    <label for="mainCity" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Основной город * </label>
                                    <InputText id="mainCity" v-model="formData.mainCity" placeholder="Например: Алматы, Астана, Шымкент, Караганда" class="w-full" :class="{ 'p-invalid': errors.mainCity }" />
                                    <small v-if="errors.mainCity" class="p-error">{{ errors.mainCity }}</small>
                                </div>

                                <div v-if="formData.geoScope === 'MULTI_CITY'" class="field md:col-span-2">
                                    <TagArrayField
                                        v-model="formData.presenceCities"
                                        label="Города присутствия *"
                                        placeholder="Например: Алматы, Астана, Актобе"
                                        :max="5"
                                        :error="errors.presenceCities"
                                        @update:modelValue="formData.presenceCities = $event"
                                    />
                                    <small v-if="errors.presenceCities" class="p-error">{{ errors.presenceCities }}</small>
                                </div>

                                <div class="field md:col-span-2">
                                    <TagArrayField
                                        v-model="formData.promotionCities"
                                        label="Города, где хотите усиливать продвижение *"
                                        placeholder="Например: Алматы, Астана, Шымкент"
                                        :max="5"
                                        :error="errors.promotionCities"
                                        @update:modelValue="formData.promotionCities = $event"
                                    />
                                    <small v-if="errors.promotionCities" class="p-error">{{ errors.promotionCities }}</small>
                                </div>

                                <RadioGroupField v-model="formData.averageCheck" label="Средний чек" :options="averageCheckOptions" :error="errors.averageCheck" @update:modelValue="formData.averageCheck = $event" />
                            </StepSection>
                        </div>

                        <div v-else-if="currentStep === 2" key="step-2" class="space-y-5">
                            <StepSection title="Продукт и поведение клиентов">
                                <div class="field md:col-span-2">
                                    <label for="productDescription" class="block text-sm font-medium mb-2 text-surface-700 dark:text-surface-300"> Опишите продукт или услугу простыми словами * </label>
                                    <Textarea
                                        id="productDescription"
                                        v-model="formData.productDescription"
                                        placeholder="Например: Лечение зубов премиум-класса с использованием немецкого оборудования. Работаем на казахском, русском и английском языках."
                                        rows="4"
                                        class="w-full"
                                        :class="{ 'p-invalid': errors.productDescription }"
                                    />
                                    <small v-if="errors.productDescription" class="p-error">{{ errors.productDescription }}</small>
                                </div>

                                <RadioGroupField
                                    v-model="formData.purchaseFrequency"
                                    label="Как часто клиенты обычно покупают?"
                                    :options="purchaseFrequencyOptions"
                                    :error="errors.purchaseFrequency"
                                    @update:modelValue="formData.purchaseFrequency = $event"
                                />

                                <RadioGroupField v-model="formData.visualFactor" label="Насколько для вашей ниши важен визуал?" :options="visualFactorOptions" :error="errors.visualFactor" @update:modelValue="formData.visualFactor = $event" />

                                <CheckboxCardsLimitedField
                                    v-model="formData.customerBehaviors"
                                    label="Как клиенты обычно принимают решение?"
                                    :options="customerBehaviorOptions"
                                    :max="2"
                                    :error="errors.customerBehaviors"
                                    @update:modelValue="formData.customerBehaviors = $event"
                                />
                                <small v-if="errors.customerBehaviors" class="p-error">{{ errors.customerBehaviors }}</small>

                                <CheckboxCardsLimitedField
                                    v-model="formData.decisionPriorities"
                                    label="Что для клиентов важнее всего при выборе?"
                                    :options="decisionPriorityOptions"
                                    :max="2"
                                    :error="errors.decisionPriorities"
                                    @update:modelValue="formData.decisionPriorities = $event"
                                />
                                <small v-if="errors.decisionPriorities" class="p-error">{{ errors.decisionPriorities }}</small>

                                <CheckboxCardsLimitedField
                                    v-model="formData.discoveryMethods"
                                    label="Как клиенты обычно находят вас?"
                                    :options="discoveryMethodOptions"
                                    :max="2"
                                    :error="errors.discoveryMethods"
                                    @update:modelValue="formData.discoveryMethods = $event"
                                />
                                <small v-if="errors.discoveryMethods" class="p-error">{{ errors.discoveryMethods }}</small>
                            </StepSection>
                        </div>

                        <div v-else-if="currentStep === 3" key="step-3" class="space-y-5">
                            <StepSection title="Текущая ситуация и ресурсы">
                                <RadioGroupField v-model="formData.smmStatus" label="Как сейчас обстоят дела с соцсетями?" :options="smmStatusOptions" :error="errors.smmStatus" @update:modelValue="formData.smmStatus = $event" />

                                <RadioGroupField v-model="formData.leadVolume" label="Приходят ли заявки из онлайн-каналов?" :options="leadVolumeOptions" :error="errors.leadVolume" @update:modelValue="formData.leadVolume = $event" />

                                <RadioGroupField v-model="formData.responseHandler" label="Кто чаще всего отвечает на заявки?" :options="responseHandlerOptions" :error="errors.responseHandler" @update:modelValue="formData.responseHandler = $event" />

                                <RadioGroupField v-model="formData.priceFeedback" label="Как клиенты чаще всего реагируют на цену?" :options="priceFeedbackOptions" :error="errors.priceFeedback" @update:modelValue="formData.priceFeedback = $event" />

                                <CheckboxCardsField
                                    v-model="formData.constraints"
                                    label="Есть ли у бизнеса ограничения, которые нужно учесть?"
                                    :options="businessConstraintOptions"
                                    :error="errors.constraints"
                                    @update:modelValue="formData.constraints = $event"
                                />
                            </StepSection>
                        </div>

                        <div v-else-if="currentStep === 4" key="step-4" class="space-y-5">
                            <StepSection title="Ссылки и настройки отчёта">
                                <DynamicLinksField
                                    v-model="formData.userSocialLinks"
                                    label="Ссылки на ваши соцсети"
                                    placeholder="Например: https://instagram.com/dentart_kz или https://vk.com/clinic_almaty"
                                    :max="5"
                                    :error="errors.userSocialLinks"
                                    @update:modelValue="formData.userSocialLinks = $event"
                                />

                                <DynamicLinksField
                                    v-model="formData.knownCompetitorLinks"
                                    label="Ссылки на конкурентов (если знаете)"
                                    placeholder="Например: https://instagram.com/competitor_clinic или профиль в 2ГИС"
                                    :max="5"
                                    :error="errors.knownCompetitorLinks"
                                    @update:modelValue="formData.knownCompetitorLinks = $event"
                                />

                                <RadioGroupField v-model="formData.detailLevel" label="Насколько детальным должен быть отчёт?" :options="detailLevelOptions" :error="errors.detailLevel" @update:modelValue="formData.detailLevel = $event" />

                                <CheckboxCardsField
                                    v-model="formData.analysisType"
                                    label="Что важно проанализировать в первую очередь?"
                                    :options="analysisTypeOptions"
                                    :error="errors.analysisType"
                                    @update:modelValue="formData.analysisType = $event"
                                />
                                <small v-if="errors.analysisType" class="p-error block mt-1">{{ errors.analysisType }}</small>
                            </StepSection>
                        </div>
                    </Transition>
                </div>

                <div class="card-footer flex items-center justify-between gap-4 pt-6 border-t border-surface-200 dark:border-surface-700">
                    <Button label="Назад" icon="pi pi-arrow-left" severity="secondary" outlined :disabled="currentStep === 0 || submitting" @click="goBack" />

                    <Button v-if="currentStep < STEPS.length - 1" label="Далее" icon="pi pi-arrow-right" icon-pos="right" @click="goNext" />
                    <Button v-else label="Запустить маркетинговый анализ" icon="pi pi-send" icon-pos="right" :loading="submitting" :disabled="submitting" @click="handleSubmit" />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.25s ease;
}

.slide-fade-enter-from {
    opacity: 0;
    transform: translateX(20px);
}

.slide-fade-leave-to {
    opacity: 0;
    transform: translateX(-20px);
}
</style>
