<template>
    <a-modal
        v-model:open="visible"
        :title="null"
        :width="1000"
        :footer="null"
        :closable="false"
        :maskClosable="false"
        class="ai-wizard-modal"
        @cancel="handleClose"
        :bodyStyle="{ padding: '0px' }"
    >
        <!-- Modal Header -->
        <div class="wizard-header">
            <div class="wizard-header-content">
                <div class="wizard-icon">
                    <RobotOutlined />
                </div>
                <div class="wizard-title-section">
                    <h2 class="wizard-title">
                        {{ $t("ai_settings.ai_website_wizard") }}
                    </h2>
                    <p class="wizard-subtitle">{{ $t("ai_settings.wizard_subtitle") }}</p>
                </div>
            </div>
            <a-button type="text" @click="handleClose" class="close-btn">
                <CloseOutlined />
            </a-button>
        </div>

        <!-- AI Not Configured Warning -->
        <div v-if="!aiConfigured" class="ai-not-configured">
            <a-result
                status="warning"
                :title="$t('ai_settings.not_configured')"
                :sub-title="$t('ai_settings.configure_ai_first')"
            >
                <template #extra>
                    <a-button type="primary" @click="handleClose">
                        {{ $t("common.close") }}
                    </a-button>
                </template>
            </a-result>
        </div>

        <div v-else>
            <!-- Progress Steps -->
            <div class="wizard-progress">
                <div class="progress-track">
                    <div class="progress-fill" :style="{ width: progressWidth }" />
                </div>
                <div class="step-indicators">
                    <div
                        v-for="(step, index) in steps"
                        :key="index"
                        class="step-indicator"
                        :class="{
                            active: currentPhase === index + 1,
                            completed:
                                currentPhase > index + 1 ||
                                (currentPhase === index + 1 &&
                                    isPhaseCompleted(index + 1)),
                        }"
                    >
                        <div class="step-circle">
                            <CheckOutlined
                                v-if="
                                    currentPhase > index + 1 ||
                                    (currentPhase === index + 1 &&
                                        isPhaseCompleted(index + 1))
                                "
                            />
                            <span v-else>{{ index + 1 }}</span>
                        </div>
                        <div class="step-info">
                            <span class="step-label">{{ step.label }}</span>
                            <span class="step-description">{{ step.description }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 1: Website Creation -->
            <div v-if="currentPhase === 1" class="wizard-content">
                <!-- Step 1.1: Description Input -->
                <AiDescriptionInput
                    v-if="currentStep === 1"
                    v-model="description"
                    :categories="categories"
                    :show-footer="false"
                    @extracted="handleDataExtracted"
                    ref="descriptionInputRef"
                />

                <!-- Step 1.2: Review Extracted Data -->
                <AiExtractedDataReview
                    v-if="currentStep === 2"
                    v-model="extractedData"
                    :categories="categories"
                    :mode="mode"
                    :show-footer="false"
                    @apply="handleApply"
                    @created="handleWebsiteCreated"
                    @back="goBackInPhase1"
                    ref="extractedDataReviewRef"
                />
            </div>

            <!-- Phase 2: Page Generation -->
            <div v-if="currentPhase === 2" class="wizard-content">
                <AiPageGeneration
                    :website-xid="createdWebsiteXid"
                    :category="extractedData.category"
                    :description="description"
                    :languages="extractedData.languages"
                    :show-success-header="currentStep === 1"
                    :show-footer="false"
                    @generated="handlePagesGenerated"
                    @saved="handlePagesSaved"
                    @skip="skipPageGeneration"
                    @back="handlePageGenerationBack"
                    ref="pageGenerationRef"
                />
            </div>

            <!-- Phase 3: Legal Pages Generation -->
            <div v-if="currentPhase === 3" class="wizard-content">
                <AiLegalPageGeneration
                    :website-xid="createdWebsiteXid"
                    :website-name="extractedData.name"
                    :category="extractedData.category"
                    :description="description"
                    :languages="extractedData.languages"
                    :show-success-header="currentStep === 1"
                    :show-footer="false"
                    @generated="handleLegalPagesGenerated"
                    @saved="handleLegalPagesSaved"
                    @skip="skipLegalPageGeneration"
                    @back="handleLegalPageGenerationBack"
                    ref="legalPageGenerationRef"
                />
            </div>

            <!-- Phase 4: Website Sections Generation -->
            <div v-if="currentPhase === 4" class="wizard-content">
                <AiSectionGeneration
                    :website-xid="createdWebsiteXid"
                    :category="extractedData.category"
                    :description="description"
                    :languages="extractedData.languages"
                    :website-pages="createdPages"
                    :show-success-header="sectionGenerationStep === 1"
                    :show-footer="false"
                    @generated="handleSectionsGenerated"
                    @saved="handleSectionsSaved"
                    @skip="skipSectionGeneration"
                    @back="handleSectionGenerationBack"
                    ref="sectionGenerationRef"
                />
            </div>

            <!-- Footer Actions -->
            <div class="wizard-footer">
                <div class="footer-left">
                    <a-button v-if="canGoBack" @click="goBack">
                        <ArrowLeftOutlined />
                        {{ $t("common.back") }}
                    </a-button>
                </div>
                <div class="footer-right">
                    <a-button @click="handleClose" style="margin-right: 12px">
                        {{ $t("common.cancel") }}
                    </a-button>

                    <!-- Phase 1 Actions -->
                    <template v-if="currentPhase === 1">
                        <a-button
                            v-if="currentStep === 1"
                            type="primary"
                            @click="extractData"
                            :loading="extracting"
                            :disabled="!description"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                extracting
                                    ? $t("ai_settings.analyzing")
                                    : $t("ai_settings.analyze_and_extract")
                            }}
                        </a-button>
                        <a-button
                            v-if="currentStep === 2 && mode === 'apply'"
                            type="primary"
                            @click="applyData"
                        >
                            <template #icon><CheckOutlined /></template>
                            {{ $t("ai_settings.apply_to_form") }}
                        </a-button>
                        <a-button
                            v-if="currentStep === 2 && mode === 'create'"
                            type="primary"
                            @click="createWebsite"
                            :loading="creating"
                        >
                            <template #icon><RocketOutlined /></template>
                            {{
                                creating
                                    ? $t("common.creating")
                                    : $t("ai_settings.create_website")
                            }}
                        </a-button>
                    </template>

                    <!-- Phase 2 Actions -->
                    <template v-if="currentPhase === 2">
                        <a-button
                            v-if="pageGenerationStep === 1"
                            type="primary"
                            @click="generatePages"
                            :loading="generatingPages"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                generatingPages
                                    ? $t("ai_settings.generating_pages")
                                    : $t("ai_settings.generate_pages")
                            }}
                        </a-button>
                        <a-button
                            v-if="pageGenerationStep === 1"
                            @click="skipPageGeneration"
                            style="margin-left: 8px"
                        >
                            {{ $t("ai_settings.skip_page_generation") }}
                        </a-button>
                        <a-button
                            v-if="pageGenerationStep === 2"
                            type="primary"
                            @click="savePages"
                            :loading="savingPages"
                        >
                            <template #icon><ArrowRightOutlined /></template>
                            {{
                                savingPages
                                    ? $t("common.saving")
                                    : $t("ai_settings.save_and_continue")
                            }}
                        </a-button>
                    </template>

                    <!-- Phase 3 Actions -->
                    <template v-if="currentPhase === 3">
                        <!-- Step 1: Generate Suggestions -->
                        <a-button
                            v-if="legalPageGenerationStep === 1"
                            type="primary"
                            @click="generateLegalPageSuggestions"
                            :loading="generatingLegalSuggestions"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                generatingLegalSuggestions
                                    ? $t("ai_settings.generating_suggestions")
                                    : $t("ai_settings.generate_suggestions")
                            }}
                        </a-button>
                        <a-button
                            v-if="
                                legalPageGenerationStep === 1 &&
                                !generatingLegalSuggestions
                            "
                            @click="skipLegalPageGeneration"
                            style="margin-left: 8px"
                        >
                            {{ $t("ai_settings.skip_legal_pages") }}
                        </a-button>
                        <!-- Step 2: Generate Content for Selected Pages -->
                        <a-button
                            v-if="legalPageGenerationStep === 2"
                            type="primary"
                            @click="generateLegalPages"
                            :loading="generatingLegalPages"
                            :disabled="!hasSelectedLegalPages"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                generatingLegalPages
                                    ? currentGeneratingPage
                                        ? $t("ai_settings.generating_page", [
                                              currentGeneratingPage,
                                          ])
                                        : $t("ai_settings.generating_legal_pages")
                                    : $t("ai_settings.generate_legal_pages")
                            }}
                        </a-button>
                        <!-- Step 3: Save -->
                        <a-button
                            v-if="legalPageGenerationStep === 3"
                            type="primary"
                            @click="saveLegalPages"
                            :loading="savingLegalPages"
                        >
                            <template #icon><SaveOutlined /></template>
                            {{
                                savingLegalPages
                                    ? $t("common.saving")
                                    : $t("ai_settings.save_and_continue")
                            }}
                        </a-button>
                    </template>

                    <!-- Phase 4 Actions -->
                    <template v-if="currentPhase === 4">
                        <!-- Step 1: Generate Suggestions -->
                        <a-button
                            v-if="sectionGenerationStep === 1"
                            type="primary"
                            @click="generateSectionSuggestions"
                            :loading="generatingSectionSuggestions"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                generatingSectionSuggestions
                                    ? $t("ai_settings.generating_suggestions")
                                    : $t("ai_settings.generate_suggestions")
                            }}
                        </a-button>
                        <a-button
                            v-if="
                                sectionGenerationStep === 1 &&
                                !generatingSectionSuggestions
                            "
                            @click="skipSectionGeneration"
                            style="margin-left: 8px"
                        >
                            {{ $t("ai_settings.skip_and_finish") }}
                        </a-button>
                        <!-- Step 2: Generate Content -->
                        <a-button
                            v-if="sectionGenerationStep === 2"
                            type="primary"
                            @click="generateSectionContent"
                            :loading="generatingSectionContent"
                        >
                            <template #icon><ThunderboltOutlined /></template>
                            {{
                                generatingSectionContent
                                    ? $t("ai_settings.generating")
                                    : $t("ai_settings.generate_content")
                            }}
                        </a-button>
                        <!-- Step 3: Save -->
                        <a-button
                            v-if="sectionGenerationStep === 3"
                            type="primary"
                            @click="saveSections"
                            :loading="savingSections"
                        >
                            <template #icon><SaveOutlined /></template>
                            {{
                                savingSections
                                    ? $t("common.saving")
                                    : $t("ai_settings.save_and_finish")
                            }}
                        </a-button>
                    </template>
                </div>
            </div>
        </div>
    </a-modal>
</template>

<script setup>
import { ref, watch, computed, onMounted } from "vue";
import {
    RobotOutlined,
    CloseOutlined,
    CheckOutlined,
    SaveOutlined,
    ArrowLeftOutlined,
    ArrowRightOutlined,
    ThunderboltOutlined,
    RocketOutlined,
} from "@ant-design/icons-vue";
import { notification } from "ant-design-vue";
import { useI18n } from "vue-i18n";

// Import reusable components
import AiDescriptionInput from "@/common/core/ui/ai/AiDescriptionInput.vue";
import AiExtractedDataReview from "@/common/core/ui/ai/AiExtractedDataReview.vue";
import AiPageGeneration from "@/common/core/ui/ai/AiPageGeneration.vue";
import AiLegalPageGeneration from "@/common/core/ui/ai/AiLegalPageGeneration.vue";
import AiSectionGeneration from "@/common/core/ui/ai/AiSectionGeneration.vue";

const props = defineProps({
    open: {
        type: Boolean,
        default: false,
    },
    categories: {
        type: Array,
        default: () => [],
    },
    mode: {
        type: String,
        default: "apply",
        validator: (value) => ["apply", "create"].includes(value),
    },
});

const emit = defineEmits(["update:open", "apply", "created", "closed"]);

const { t } = useI18n();

// Component refs
const descriptionInputRef = ref(null);
const extractedDataReviewRef = ref(null);
const pageGenerationRef = ref(null);
const legalPageGenerationRef = ref(null);
const sectionGenerationRef = ref(null);

// State
const visible = ref(false);
const aiConfigured = ref(false);
const currentPhase = ref(1);
const currentStep = ref(1);
const description = ref("");
const extracting = ref(false);
const creating = ref(false);
const createdWebsiteXid = ref(null);

// Page generation state (tracked from component)
const pageGenerationStep = ref(1);
const generatingPages = ref(false);
const savingPages = ref(false);

// Legal page generation state (tracked from component)
const legalPageGenerationStep = ref(1);
const generatingLegalSuggestions = ref(false);
const generatingLegalPages = ref(false);
const savingLegalPages = ref(false);
const currentGeneratingPage = ref("");
const hasSelectedLegalPages = ref(true);

// Section generation state (Phase 4)
const sectionGenerationStep = ref(1);
const generatingSectionSuggestions = ref(false);
const generatingSectionContent = ref(false);
const savingSections = ref(false);
const createdPages = ref([]);

const extractedData = ref({
    name: "",
    slug: "",
    category: null,
    theme_primary_color: "#3B82F6",
    theme_secondary_color: null,
    theme_mode: "light",
    languages: [],
    website_settings: {},
});

// Steps definition
const steps = computed(() => [
    {
        label: t("ai_settings.phase_website"),
        description: t("ai_settings.phase_website_desc"),
    },
    {
        label: t("ai_settings.phase_pages"),
        description: t("ai_settings.phase_pages_desc"),
    },
    {
        label: t("ai_settings.phase_legal_pages"),
        description: t("ai_settings.phase_legal_pages_desc"),
    },
    {
        label: t("ai_settings.phase_sections"),
        description: t("ai_settings.phase_sections_desc"),
    },
]);

// Progress width calculation
const progressWidth = computed(() => {
    if (currentPhase.value === 1) {
        return currentStep.value === 1 ? "0%" : "12%";
    } else if (currentPhase.value === 2) {
        return pageGenerationStep.value === 1 ? "25%" : "37%";
    } else if (currentPhase.value === 3) {
        // Phase 3 has 3 steps
        if (legalPageGenerationStep.value === 1) return "50%";
        if (legalPageGenerationStep.value === 2) return "56%";
        return "62%";
    } else {
        // Phase 4 - Sections
        if (sectionGenerationStep.value === 1) return "75%";
        if (sectionGenerationStep.value === 2) return "85%";
        return "100%";
    }
});

// Check if phase is completed
const isPhaseCompleted = (phase) => {
    if (phase === 1) {
        return currentPhase.value > 1;
    }
    if (phase === 2) {
        return currentPhase.value > 2;
    }
    if (phase === 3) {
        return currentPhase.value > 3;
    }
    if (phase === 4) {
        return sectionGenerationStep.value === 3;
    }
    return false;
};

// Can go back
const canGoBack = computed(() => {
    return (
        (currentPhase.value === 1 && currentStep.value === 2) ||
        (currentPhase.value === 2 && pageGenerationStep.value === 2) ||
        (currentPhase.value === 3 && legalPageGenerationStep.value > 1) ||
        (currentPhase.value === 4 && sectionGenerationStep.value > 1)
    );
});

// Watchers
watch(
    () => props.open,
    (val) => {
        visible.value = val;
        if (val) {
            checkAiConfig();
            resetWizard();
        }
    }
);

watch(visible, (val) => {
    emit("update:open", val);
});

onMounted(() => {
    checkAiConfig();
});

// Reset wizard to initial state
const resetWizard = () => {
    currentPhase.value = 1;
    currentStep.value = 1;
    description.value = "";
    createdWebsiteXid.value = null;
    pageGenerationStep.value = 1;
    legalPageGenerationStep.value = 1;
    sectionGenerationStep.value = 1;
    generatingPages.value = false;
    savingPages.value = false;
    generatingLegalPages.value = false;
    savingLegalPages.value = false;
    generatingSectionSuggestions.value = false;
    generatingSectionContent.value = false;
    savingSections.value = false;
    currentGeneratingPage.value = "";
    hasSelectedLegalPages.value = true;
    createdPages.value = [];
    extractedData.value = {
        name: "",
        slug: "",
        category: null,
        theme_primary_color: "#3B82F6",
        theme_secondary_color: null,
        theme_mode: "light",
        languages: [],
        website_settings: {},
    };
};

const checkAiConfig = async () => {
    try {
        const response = await axiosAdmin.get("ai/config");
        aiConfigured.value = response.data.configured;
    } catch (error) {
        aiConfigured.value = false;
    }
};

// Navigation
const goBack = () => {
    if (currentPhase.value === 4 && sectionGenerationStep.value > 1) {
        sectionGenerationRef.value?.goBack();
        sectionGenerationStep.value--;
    } else if (currentPhase.value === 3 && legalPageGenerationStep.value === 2) {
        legalPageGenerationRef.value?.goBack();
        legalPageGenerationStep.value = 1;
    } else if (currentPhase.value === 2 && pageGenerationStep.value === 2) {
        pageGenerationRef.value?.goBack();
        pageGenerationStep.value = 1;
    } else if (currentPhase.value === 1 && currentStep.value === 2) {
        currentStep.value = 1;
    }
};

const goBackInPhase1 = () => {
    currentStep.value = 1;
};

// Phase 1: Description Input handlers
const extractData = async () => {
    extracting.value = true;
    try {
        await descriptionInputRef.value?.extractData();
    } finally {
        extracting.value = false;
    }
};

const handleDataExtracted = (data) => {
    extractedData.value = data;
    currentStep.value = 2;
    extracting.value = false;
};

// Phase 1: Extracted Data Review handlers
const applyData = () => {
    extractedDataReviewRef.value?.applyData();
};

const handleApply = (data) => {
    emit("apply", data);
    handleClose();
};

const createWebsite = async () => {
    creating.value = true;
    try {
        await extractedDataReviewRef.value?.createWebsite();
    } finally {
        creating.value = false;
    }
};

const handleWebsiteCreated = (result) => {
    createdWebsiteXid.value = result.xid;
    creating.value = false;
    // Move to Phase 2
    currentPhase.value = 2;
    currentStep.value = 1;
    pageGenerationStep.value = 1;
};

// Phase 2: Page Generation handlers
const generatePages = async () => {
    generatingPages.value = true;
    try {
        await pageGenerationRef.value?.generatePages();
    } finally {
        generatingPages.value = false;
    }
};

const handlePagesGenerated = (pages) => {
    pageGenerationStep.value = 2;
    generatingPages.value = false;
};

const handlePageGenerationBack = () => {
    pageGenerationStep.value = 1;
};

const savePages = async () => {
    savingPages.value = true;
    try {
        await pageGenerationRef.value?.savePages();
    } finally {
        savingPages.value = false;
    }
};

const handlePagesSaved = (result) => {
    savingPages.value = false;
    // Store created pages for section generation
    if (result.pages) {
        createdPages.value = result.pages;
    }
    notification.success({
        message: t("common.success"),
        description: t("ai_settings.pages_saved_success"),
        placement: "bottomRight",
    });
    // Move to Phase 3: Legal Pages
    currentPhase.value = 3;
    currentStep.value = 1;
    legalPageGenerationStep.value = 1;
};

const skipPageGeneration = () => {
    // Move to Phase 3
    currentPhase.value = 3;
    currentStep.value = 1;
    legalPageGenerationStep.value = 1;
};

// Phase 3: Legal Page Generation handlers
// Step 1: Generate suggestions
const generateLegalPageSuggestions = async () => {
    generatingLegalSuggestions.value = true;
    try {
        await legalPageGenerationRef.value?.generateSuggestions();
    } finally {
        generatingLegalSuggestions.value = false;
    }
};

// Called when suggestions are generated (step 1 -> step 2)
const handleLegalSuggestionsGenerated = () => {
    legalPageGenerationStep.value = 2;
    generatingLegalSuggestions.value = false;
    // Update hasSelectedLegalPages based on suggested pages
    const suggestedPages = legalPageGenerationRef.value?.getSuggestedPages?.();
    if (suggestedPages) {
        hasSelectedLegalPages.value = suggestedPages.some((p) => p.selected);
    }
};

// Step 2: Generate content for selected pages
const generateLegalPages = async () => {
    generatingLegalPages.value = true;
    try {
        await legalPageGenerationRef.value?.generateLegalPages();
    } finally {
        generatingLegalPages.value = false;
    }
};

// Called when legal pages content is generated (step 2 -> step 3)
const handleLegalPagesGenerated = (pages) => {
    legalPageGenerationStep.value = 3;
    generatingLegalPages.value = false;
};

const handleLegalPageGenerationBack = () => {
    if (legalPageGenerationStep.value > 1) {
        legalPageGenerationStep.value--;
    }
};

// Step 3: Save legal pages
const saveLegalPages = async () => {
    savingLegalPages.value = true;
    try {
        await legalPageGenerationRef.value?.saveLegalPages();
    } finally {
        savingLegalPages.value = false;
    }
};

const handleLegalPagesSaved = (result) => {
    savingLegalPages.value = false;
    notification.success({
        message: t("common.success"),
        description: t("ai_settings.legal_pages_saved_success"),
        placement: "bottomRight",
    });
    // Move to Phase 4: Sections
    currentPhase.value = 4;
    currentStep.value = 1;
    sectionGenerationStep.value = 1;
};

const skipLegalPageGeneration = () => {
    // Move to Phase 4: Sections
    currentPhase.value = 4;
    currentStep.value = 1;
    sectionGenerationStep.value = 1;
};

// Phase 4: Section Generation handlers
const generateSectionSuggestions = async () => {
    generatingSectionSuggestions.value = true;
    try {
        await sectionGenerationRef.value?.generateSuggestions();
    } finally {
        generatingSectionSuggestions.value = false;
    }
};

const handleSectionsGenerated = (sections) => {
    sectionGenerationStep.value = 2;
    generatingSectionSuggestions.value = false;
};

const generateSectionContent = async () => {
    generatingSectionContent.value = true;
    try {
        await sectionGenerationRef.value?.generateSectionContent();
    } finally {
        generatingSectionContent.value = false;
    }
};

const saveSections = async () => {
    savingSections.value = true;
    try {
        await sectionGenerationRef.value?.saveSections();
    } finally {
        savingSections.value = false;
    }
};

const handleSectionsSaved = (result) => {
    savingSections.value = false;
    notification.success({
        message: t("common.success"),
        description: t("ai_settings.sections_saved_success"),
        placement: "bottomRight",
    });
    emit("created", {
        xid: createdWebsiteXid.value,
        name: extractedData.value.name,
    });
    handleClose();
};

const handleSectionGenerationBack = () => {
    if (sectionGenerationStep.value > 1) {
        sectionGenerationStep.value--;
    }
};

const skipSectionGeneration = () => {
    emit("created", {
        xid: createdWebsiteXid.value,
        name: extractedData.value.name,
    });
    handleClose();
};

// Watch legal page component for step changes and selected pages
watch(
    () => legalPageGenerationRef.value?.getCurrentStep?.(),
    (newStep) => {
        if (newStep) {
            legalPageGenerationStep.value = newStep;
            // Update hasSelectedLegalPages when on step 2
            if (newStep === 2) {
                const suggestedPages = legalPageGenerationRef.value?.getSuggestedPages?.();
                if (suggestedPages) {
                    hasSelectedLegalPages.value = suggestedPages.some((p) => p.selected);
                }
            }
        }
    },
    { deep: true }
);

// Watch section generation component for step changes
watch(
    () => sectionGenerationRef.value?.getCurrentStep?.(),
    (newStep) => {
        if (newStep) {
            sectionGenerationStep.value = newStep;
        }
    },
    { deep: true }
);

const handleClose = () => {
    // Emit closed event with website info if a website was created during this session
    // This allows parent components to refresh their data even if user cancelled mid-way
    if (createdWebsiteXid.value) {
        emit("closed", {
            websiteCreated: true,
            xid: createdWebsiteXid.value,
            name: extractedData.value.name,
        });
    } else {
        emit("closed", { websiteCreated: false });
    }
    visible.value = false;
};
</script>

<style scoped>
.ai-wizard-modal :deep(.ant-modal-content) {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.ai-wizard-modal :deep(.ant-modal-body) {
    padding: 0;
}

/* Header */
.wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.wizard-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.wizard-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.wizard-subtitle {
    margin: 0;
    font-size: 14px;
    opacity: 0.85;
}

.close-btn {
    color: white;
    font-size: 18px;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* AI Not Configured */
.ai-not-configured {
    padding: 40px;
}

/* Progress Steps */
.wizard-progress {
    padding: 24px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.progress-track {
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.step-indicators {
    display: flex;
    justify-content: space-between;
}

.step-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8e8e8;
    color: #8c8c8c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.step-indicator.active .step-circle {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.step-indicator.completed .step-circle {
    background: #52c41a;
    color: white;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    color: #262626;
    font-size: 14px;
}

.step-description {
    font-size: 12px;
    color: #8c8c8c;
}

/* Wizard Content */
.wizard-content {
    padding: 24px;
    max-height: 55vh;
    overflow-y: auto;
}

/* Footer */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .wizard-header {
        padding: 16px;
    }

    .wizard-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .wizard-title {
        font-size: 18px;
    }

    .step-indicators {
        flex-direction: column;
        gap: 12px;
    }

    .wizard-content {
        padding: 16px;
        max-height: 50vh;
    }

    .wizard-footer {
        flex-direction: column;
        gap: 12px;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        justify-content: center;
    }
}
</style>
