<template>
    <div class="ai-legal-page-generation">
        <!-- Step 1: Input & Generate Suggestions -->
        <div v-if="currentStep === 1" class="step-content">
            <div v-if="showSuccessHeader" class="success-section">
                <div class="success-icon">
                    <CheckCircleFilled />
                </div>
                <h3>{{ successTitle || $t('ai_settings.pages_created_success') }}</h3>
                <p>{{ successDescription || $t('ai_settings.now_generate_legal_pages') }}</p>
            </div>

            <div class="legal-page-generation-section">
                <div class="step-header">
                    <FileTextOutlined class="step-icon" />
                    <div>
                        <h3>{{ $t('ai_settings.generate_legal_pages_title') }}</h3>
                        <p>{{ $t('ai_settings.generate_legal_pages_description') }}</p>
                    </div>
                </div>

                <div class="legal-hints-section">
                    <a-form layout="vertical" class="wizard-form">
                        <a-form-item :label="$t('ai_settings.legal_page_requirements_label')">
                            <a-textarea
                                v-model:value="legalPageRequirements"
                                :placeholder="$t('ai_settings.legal_page_requirements_placeholder')"
                                :auto-size="{ minRows: 3, maxRows: 6 }"
                                class="legal-requirements-input"
                            />
                            <div class="optional-hint">
                                <InfoCircleOutlined />
                                {{ $t('ai_settings.legal_page_requirements_hint') }}
                            </div>
                        </a-form-item>
                    </a-form>
                </div>

                <div class="context-info">
                    <div class="context-card">
                        <span class="context-label">{{ $t('website.name') }}:</span>
                        <span class="context-value">{{ websiteName || $t('common.not_set') }}</span>
                    </div>
                    <div class="context-card">
                        <span class="context-label">{{ $t('menu.website_languages') }}:</span>
                        <span class="context-value">
                            <span v-for="lang in languages" :key="lang.key" class="lang-badge">
                                {{ getFlagEmoji(lang.flag_code) }} {{ lang.name }}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2: Select Legal Pages -->
        <div v-if="currentStep === 2 && !generating" class="step-content">
            <div class="step-header">
                <FileTextOutlined class="step-icon" />
                <div>
                    <h3>{{ $t('ai_settings.select_legal_pages_title') }}</h3>
                    <p>{{ $t('ai_settings.select_legal_pages_description') }}</p>
                </div>
            </div>

            <!-- Switch instruction hint -->
            <div class="pages-instruction-hint">
                <InfoCircleOutlined />
                <span>{{ $t('ai_settings.legal_page_select_instruction') }}</span>
            </div>

            <div class="legal-page-selection">
                <div
                    v-for="(page, index) in suggestedLegalPages"
                    :key="page.slug"
                    class="legal-selection-card"
                    :class="{ 'selected': page.selected }"
                    @click="page.selected = !page.selected"
                >
                    <div class="selection-checkbox">
                        <a-checkbox v-model:checked="page.selected" @click.stop />
                    </div>
                    <div class="selection-content">
                        <h4>{{ getPageTitle(page) }}</h4>
                        <p>{{ getPageDescription(page) }}</p>
                        <div class="selection-tags">
                            <a-tag v-if="page.recommended" color="green" size="small">{{ $t('common.recommended') }}</a-tag>
                            <a-tag v-if="isSlugExisting(page.slug)" color="orange" size="small">
                                <ExclamationCircleOutlined /> {{ $t('ai_settings.page_exists_will_update') }}
                            </a-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2.5: Generation Progress -->
        <div v-if="currentStep === 2 && generating" class="step-content">
            <div class="step-header">
                <ThunderboltOutlined class="step-icon generating" />
                <div>
                    <h3>{{ $t('ai_settings.generating_legal_pages') }}</h3>
                    <p>{{ $t('ai_settings.generating_legal_pages_progress_description') }}</p>
                </div>
            </div>

            <!-- Generation Progress -->
            <div class="generation-progress-container">
                <div class="progress-summary">
                    <div class="progress-stats">
                        <span class="completed-count">{{ generationProgress.completed }}</span>
                        <span class="progress-divider">/</span>
                        <span class="total-count">{{ generationProgress.total }}</span>
                        <span class="progress-label">{{ $t('ai_settings.pages_generated') }}</span>
                    </div>
                    <a-progress
                        :percent="generationProgress.percent"
                        :stroke-color="{ '0%': '#667eea', '100%': '#764ba2' }"
                        :show-info="false"
                        class="generation-progress-bar"
                    />
                </div>

                <div class="generation-steps-list">
                    <div
                        v-for="(step, index) in generationSteps"
                        :key="index"
                        class="generation-step-item"
                        :class="{
                            'completed': step.status === 'completed',
                            'in-progress': step.status === 'in-progress',
                            'pending': step.status === 'pending'
                        }"
                    >
                        <div class="step-status-icon">
                            <CheckCircleFilled v-if="step.status === 'completed'" class="status-completed" />
                            <LoadingOutlined v-else-if="step.status === 'in-progress'" class="status-loading" spin />
                            <ClockCircleOutlined v-else class="status-pending" />
                        </div>
                        <div class="step-info">
                            <span class="step-page-title">{{ step.pageTitle }}</span>
                            <span class="step-language">
                                {{ getFlagEmoji(step.flagCode) }} {{ step.langName }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3: Review Generated Legal Pages -->
        <div v-if="currentStep === 3" class="step-content">
            <div class="step-header">
                <FileTextOutlined class="step-icon" />
                <div>
                    <h3>{{ $t('ai_settings.generated_legal_pages_title') }}</h3>
                    <p>{{ $t('ai_settings.generated_legal_pages_description') }}</p>
                </div>
            </div>

            <!-- Switch instruction hint -->
            <div class="pages-instruction-hint">
                <InfoCircleOutlined />
                <span>{{ $t('ai_settings.legal_page_switch_instruction') }}</span>
            </div>

            <div class="legal-pages-editor">
                <!-- Legal Pages List -->
                <div class="legal-pages-sidebar">
                    <div
                        v-for="(page, index) in generatedLegalPages"
                        :key="index"
                        class="legal-page-item"
                        :class="{
                            'active': activeLegalPageIndex === index,
                            'disabled': !page.enabled
                        }"
                        @click="selectLegalPage(index)"
                    >
                        <div class="legal-page-item-content">
                            <span class="legal-page-title">{{ page.title }}</span>
                            <span class="legal-page-lang">{{ getFlagEmoji(getLangFlagCode(page.lang_key)) }}</span>
                        </div>
                        <a-switch
                            v-model:checked="page.enabled"
                            size="small"
                            @click.stop
                        />
                    </div>
                </div>

                <!-- Legal Page Content Editor -->
                <div class="legal-page-content-editor" v-if="generatedLegalPages[activeLegalPageIndex]">
                    <div class="editor-header">
                        <a-form layout="vertical" class="wizard-form">
                            <a-row :gutter="16">
                                <a-col :span="12">
                                    <a-form-item :label="$t('website_legal_page.title')">
                                        <a-input
                                            v-model:value="generatedLegalPages[activeLegalPageIndex].title"
                                            :disabled="!generatedLegalPages[activeLegalPageIndex].enabled"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="$t('website_legal_page.slug')">
                                        <a-input
                                            v-model:value="generatedLegalPages[activeLegalPageIndex].slug"
                                            :disabled="!generatedLegalPages[activeLegalPageIndex].enabled"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                    <div class="editor-content">
                        <a-form-item :label="$t('website_legal_page.content')">
                            <RichTextEditor
                                :key="'legal-editor-' + activeLegalPageIndex"
                                v-model="generatedLegalPages[activeLegalPageIndex].content"
                                :placeholder="$t('common.placeholder_default_text', [$t('website_legal_page.content')])"
                                minHeight="300px"
                            />
                        </a-form-item>
                    </div>
                    <div class="editor-seo">
                        <a-collapse>
                            <a-collapse-panel key="seo" :header="$t('website_legal_page.seo')">
                                <a-form layout="vertical" class="wizard-form">
                                    <a-form-item :label="$t('website_legal_page.meta_title')">
                                        <a-input
                                            v-model:value="generatedLegalPages[activeLegalPageIndex].meta_title"
                                            :disabled="!generatedLegalPages[activeLegalPageIndex].enabled"
                                        />
                                    </a-form-item>
                                    <a-form-item :label="$t('website_legal_page.meta_description')">
                                        <a-textarea
                                            v-model:value="generatedLegalPages[activeLegalPageIndex].meta_description"
                                            :auto-size="{ minRows: 2, maxRows: 4 }"
                                            :disabled="!generatedLegalPages[activeLegalPageIndex].enabled"
                                        />
                                    </a-form-item>
                                    <a-form-item :label="$t('website_legal_page.meta_keywords')">
                                        <a-input
                                            v-model:value="generatedLegalPages[activeLegalPageIndex].meta_keywords"
                                            :disabled="!generatedLegalPages[activeLegalPageIndex].enabled"
                                        />
                                    </a-form-item>
                                </a-form>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer Actions -->
        <div v-if="showFooter" class="generation-footer">
            <div class="footer-left">
                <a-button v-if="currentStep > 1" @click="goBack">
                    <ArrowLeftOutlined />
                    {{ $t('common.back') }}
                </a-button>
            </div>
            <div class="footer-right">
                <a-button v-if="showSkipButton && currentStep === 1 && !generating" @click="handleSkip" style="margin-right: 12px">
                    {{ $t('ai_settings.skip_and_finish') }}
                </a-button>
                <!-- Step 1: Generate Suggestions -->
                <a-button
                    v-if="currentStep === 1"
                    type="primary"
                    @click="generateSuggestions"
                    :loading="generatingSuggestions"
                >
                    <template #icon><ThunderboltOutlined /></template>
                    {{ generatingSuggestions ? $t('ai_settings.generating_suggestions') : $t('ai_settings.generate_suggestions') }}
                </a-button>
                <!-- Step 2: Generate Content for Selected Pages -->
                <a-button
                    v-if="currentStep === 2"
                    type="primary"
                    @click="generateLegalPages"
                    :loading="generating"
                    :disabled="!suggestedLegalPages.some(p => p.selected)"
                >
                    <template #icon><ThunderboltOutlined /></template>
                    {{ generating ? (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="currentStep === 3"
                    type="primary"
                    @click="saveLegalPages"
                    :loading="saving"
                >
                    <template #icon><SaveOutlined /></template>
                    {{ saving ? $t('common.saving') : $t('ai_settings.save_and_finish') }}
                </a-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import {
    CheckCircleFilled,
    FileTextOutlined,
    InfoCircleOutlined,
    ThunderboltOutlined,
    ArrowLeftOutlined,
    SaveOutlined,
    LoadingOutlined,
    ClockCircleOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { getFlagEmoji } from '@/common/scripts/countryCodes';
import RichTextEditor from '@/common/components/RichTextEditor.vue';

const props = defineProps({
    websiteXid: {
        type: String,
        required: true
    },
    websiteName: {
        type: String,
        default: ''
    },
    category: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    },
    languages: {
        type: Array,
        required: true
    },
    showSuccessHeader: {
        type: Boolean,
        default: true
    },
    successTitle: {
        type: String,
        default: ''
    },
    successDescription: {
        type: String,
        default: ''
    },
    showFooter: {
        type: Boolean,
        default: true
    },
    showSkipButton: {
        type: Boolean,
        default: true
    },
    existingSlugs: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['generated', 'saved', 'skip', 'back']);

const { t } = useI18n();

// State
const currentStep = ref(1);
const legalPageRequirements = ref('');
const suggestedLegalPages = ref([]);
const generatedLegalPages = ref([]);
const generatingSuggestions = ref(false);
const generating = ref(false);
const saving = ref(false);
const activeLegalPageIndex = ref(0);
const currentGeneratingPage = ref('');
const generationSteps = ref([]);
const currentGenerationIndex = ref(0);

// Generation progress computed
const generationProgress = computed(() => {
    if (generationSteps.value.length === 0) {
        return { completed: 0, total: 0, percent: 0 };
    }
    const completed = generationSteps.value.filter(s => s.status === 'completed').length;
    const total = generationSteps.value.length;
    const percent = Math.round((completed / total) * 100);
    return { completed, total, percent };
});

// Get the default language key
const defaultLangKey = computed(() => {
    const defaultLang = props.languages.find(l => l.is_default);
    return defaultLang?.key || props.languages[0]?.key || 'en';
});

// Check if a slug already exists
const isSlugExisting = (slug) => {
    return props.existingSlugs.includes(slug);
};

// Methods
const getLangFlagCode = (langKey) => {
    const lang = props.languages.find(l => l.key === langKey);
    return lang?.flag_code || 'US';
};

const getPageTitle = (page) => {
    // Get title from translations using default language
    return page.translations?.[defaultLangKey.value]?.title || page.slug;
};

const getPageDescription = (page) => {
    // Get description from translations using default language
    return page.translations?.[defaultLangKey.value]?.description || '';
};

const goBack = () => {
    if (currentStep.value > 1) {
        currentStep.value--;
        if (currentStep.value === 1) {
            emit('back');
        }
    }
};

const selectLegalPage = (index) => {
    activeLegalPageIndex.value = index;
};

const generateSuggestions = async () => {
    generatingSuggestions.value = true;

    try {
        const response = await axiosAdmin.post('ai/generate-legal-page-suggestions', {
            website_name: props.websiteName,
            category: props.category,
            description: props.description,
            requirements: legalPageRequirements.value,
            languages: props.languages
        });

        suggestedLegalPages.value = response.data.legal_pages.map(page => ({
            ...page,
            selected: page.recommended ?? true
        }));

        currentStep.value = 2;
    } catch (error) {
        message.error(error.response?.data?.message || t('ai_settings.legal_page_suggestions_failed'));
    } finally {
        generatingSuggestions.value = false;
    }
};

const generateLegalPages = async () => {
    const selectedPages = suggestedLegalPages.value.filter(p => p.selected);

    if (selectedPages.length === 0) {
        message.warning(t('ai_settings.select_at_least_one_legal_page'));
        return;
    }

    generating.value = true;
    generatedLegalPages.value = [];

    // Initialize generation steps for progress tracking
    generationSteps.value = [];
    currentGenerationIndex.value = 0;

    for (const pageOption of selectedPages) {
        for (const lang of props.languages) {
            const pageTitle = pageOption.translations?.[lang.key]?.title || pageOption.translations?.[defaultLangKey.value]?.title || pageOption.slug;
            generationSteps.value.push({
                pageSlug: pageOption.slug,
                pageTitle: pageTitle,
                langKey: lang.key,
                langName: lang.name,
                flagCode: lang.flag_code || 'US',
                status: 'pending'
            });
        }
    }

    try {
        // Generate content for each selected page and language
        for (let i = 0; i < generationSteps.value.length; i++) {
            const step = generationSteps.value[i];
            currentGenerationIndex.value = i;

            // Mark current step as in-progress
            step.status = 'in-progress';
            currentGeneratingPage.value = `${step.pageTitle} (${step.langName})`;

            const lang = props.languages.find(l => l.key === step.langKey);

            const response = await axiosAdmin.post('ai/generate-legal-page-content', {
                website_xid: props.websiteXid,
                website_name: props.websiteName,
                category: props.category,
                description: props.description,
                requirements: legalPageRequirements.value,
                page_type: step.pageSlug,
                page_title: step.pageTitle,
                language: lang
            });

            generatedLegalPages.value.push({
                ...response.data.legal_page,
                enabled: true
            });

            // Mark step as completed
            step.status = 'completed';
        }

        activeLegalPageIndex.value = 0;
        currentGeneratingPage.value = '';
        currentStep.value = 3;
        emit('generated', generatedLegalPages.value);
    } catch (error) {
        // Mark current step as failed (keep it in-progress state for visual)
        message.error(error.response?.data?.message || t('ai_settings.legal_page_generation_failed'));
    } finally {
        generating.value = false;
        currentGeneratingPage.value = '';
    }
};

const saveLegalPages = async () => {
    const enabledPages = generatedLegalPages.value.filter(p => p.enabled);

    if (enabledPages.length === 0) {
        message.warning(t('ai_settings.select_at_least_one_legal_page'));
        return;
    }

    saving.value = true;

    try {
        const response = await axiosAdmin.post('ai/save-generated-legal-pages', {
            website_xid: props.websiteXid,
            legal_pages: enabledPages
        });

        emit('saved', {
            created: response.data.created,
            updated: response.data.updated,
            pages: enabledPages
        });
    } catch (error) {
        message.error(error.response?.data?.message || t('common.something_went_wrong'));
    } finally {
        saving.value = false;
    }
};

const handleSkip = () => {
    emit('skip');
};

// Reset when websiteXid changes
watch(() => props.websiteXid, () => {
    currentStep.value = 1;
    legalPageRequirements.value = '';
    suggestedLegalPages.value = [];
    generatedLegalPages.value = [];
    activeLegalPageIndex.value = 0;
    currentGeneratingPage.value = '';
    generationSteps.value = [];
    currentGenerationIndex.value = 0;
});

// Expose methods for parent component
defineExpose({
    generateSuggestions,
    generateLegalPages,
    saveLegalPages,
    goBack,
    reset: () => {
        currentStep.value = 1;
        legalPageRequirements.value = '';
        suggestedLegalPages.value = [];
        generatedLegalPages.value = [];
        activeLegalPageIndex.value = 0;
        currentGeneratingPage.value = '';
        generationSteps.value = [];
        currentGenerationIndex.value = 0;
    },
    getCurrentStep: () => currentStep.value,
    getSuggestedPages: () => suggestedLegalPages.value,
    getGeneratedPages: () => generatedLegalPages.value,
    isGeneratingSuggestions: () => generatingSuggestions.value,
    isGenerating: () => generating.value,
    isSaving: () => saving.value,
    hasSelectedPages: () => suggestedLegalPages.value.some(p => p.selected)
});
</script>

<style scoped>
.ai-legal-page-generation {
    width: 100%;
}

.step-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success Section */
.success-section {
    text-align: center;
    padding: 32px 0;
    margin-bottom: 24px;
}

.success-icon {
    font-size: 64px;
    color: #52c41a;
    margin-bottom: 16px;
}

.success-section h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
}

.success-section p {
    margin: 0;
    color: #8c8c8c;
}

/* Step Header */
.step-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f6f8fa;
    border-radius: 12px;
}

.step-icon {
    font-size: 24px;
    color: #667eea;
    margin-top: 2px;
}

.step-header h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.step-header p {
    margin: 0;
    font-size: 14px;
    color: #8c8c8c;
}

/* Legal Page Generation Section */
.legal-page-generation-section {
    background: #fff;
}

/* Legal Page Selection Cards */
.legal-page-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.legal-selection-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.legal-selection-card:hover {
    border-color: #bfbfbf;
    background: #fafafa;
}

.legal-selection-card.selected {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.selection-checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

.selection-content {
    flex: 1;
}

.selection-content h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #262626;
}

.selection-content p {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.4;
}

.selection-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.legal-hints-section {
    margin-bottom: 20px;
}

.legal-requirements-input {
    font-size: 14px;
}

.optional-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #8c8c8c;
}

.optional-hint .anticon {
    color: #1890ff;
}

/* Context Info */
.context-info {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.context-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f6f8fa;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
}

.context-label {
    font-weight: 500;
    color: #595959;
}

.context-value {
    color: #262626;
}

.lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

/* Pages Instruction Hint */
.pages-instruction-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #0958d9;
}

.pages-instruction-hint .anticon {
    font-size: 16px;
}

/* Generation Progress */
.step-icon.generating {
    animation: pulse 1.5s ease-in-out infinite;
    color: #667eea;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.generation-progress-container {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 24px;
}

.progress-summary {
    margin-bottom: 24px;
}

.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.completed-count {
    font-size: 32px;
    font-weight: 700;
    color: #667eea;
}

.progress-divider {
    font-size: 24px;
    color: #bfbfbf;
}

.total-count {
    font-size: 24px;
    font-weight: 500;
    color: #8c8c8c;
}

.progress-label {
    margin-left: 8px;
    font-size: 14px;
    color: #8c8c8c;
}

.generation-progress-bar {
    margin-bottom: 0;
}

.generation-progress-bar :deep(.ant-progress-inner) {
    height: 8px !important;
    border-radius: 4px;
}

.generation-steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

.generation-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.generation-step-item.completed {
    background: #f6ffed;
    border-color: #b7eb8f;
}

.generation-step-item.in-progress {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.generation-step-item.pending {
    opacity: 0.6;
}

.step-status-icon {
    flex-shrink: 0;
    font-size: 18px;
}

.status-completed {
    color: #52c41a;
}

.status-loading {
    color: #667eea;
}

.status-pending {
    color: #bfbfbf;
}

.step-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.step-page-title {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-language {
    font-size: 12px;
    color: #8c8c8c;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Legal Pages Editor */
.legal-pages-editor {
    display: flex;
    gap: 16px;
    min-height: 400px;
}

.legal-pages-sidebar {
    width: 220px;
    flex-shrink: 0;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
}

.legal-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.legal-page-item:last-child {
    border-bottom: none;
}

.legal-page-item:hover {
    background: #f6f8fa;
}

.legal-page-item.active {
    background: #e6f7ff;
    border-left: 3px solid #1890ff;
}

.legal-page-item.disabled {
    opacity: 0.5;
}

.legal-page-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.legal-page-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legal-page-lang {
    font-size: 14px;
    flex-shrink: 0;
}

.legal-page-content-editor {
    flex: 1;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
}

.editor-header {
    padding: 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.editor-header .wizard-form {
    margin-bottom: 0;
}

.editor-header .ant-form-item {
    margin-bottom: 0;
}

.editor-content {
    padding: 16px;
}

.editor-seo {
    padding: 0 16px 16px;
}

.editor-seo :deep(.ant-collapse) {
    background: transparent;
    border: 1px solid #e8e8e8;
}

.editor-seo :deep(.ant-collapse-header) {
    font-weight: 500;
}

/* Wizard Form */
.wizard-form :deep(.ant-form-item) {
    margin-bottom: 16px;
}

.wizard-form :deep(.ant-form-item-label > label) {
    font-weight: 500;
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .legal-page-selection {
        grid-template-columns: 1fr;
    }

    .context-info {
        flex-direction: column;
    }

    .legal-pages-editor {
        flex-direction: column;
    }

    .legal-pages-sidebar {
        width: 100%;
        max-height: 200px;
    }

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

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