import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:ainoval/utils/web_theme.dart';

import '../../../models/novel_structure.dart';
import '../../../models/user_ai_model_config_model.dart';

/// 现代化剧情大纲生成配置卡片 - 全局通用组件
/// 
/// 此组件负责剧情推演的参数配置功能：
/// 1. 章节范围选择 - 确定推演的上下文范围
/// 2. AI模型配置 - 选择和管理生成模型
/// 3. 生成参数设置 - 选项数量、作者引导等
/// 4. 配置验证和错误提示
/// 
/// 设计特点：
/// - 采用纯黑白配色方案，符合现代简洁审美
/// - 响应式布局，适配宽屏和窄屏设备
/// - 统一的视觉层次和组件间距
/// - 清晰的信息架构和用户引导
class ModernConfigCard extends StatefulWidget {
  /// 章节列表 - 用于范围选择
  final List<Chapter> chapters;

  /// AI模型配置列表 - 可用的生成模型
  final List<UserAIModelConfigModel> aiModelConfigs;

  /// 当前选中的上下文开始章节ID
  final String? startChapterId;

  /// 当前选中的上下文结束章节ID
  final String? endChapterId;

  /// 生成选项数量 - 控制生成的剧情选项个数
  final int numOptions;

  /// 作者引导 - 用户对剧情发展的指导意见
  final String? authorGuidance;

  /// 是否正在生成 - 控制界面状态
  final bool isGenerating;

  /// 开始章节变更回调
  final Function(String?) onStartChapterChanged;

  /// 结束章节变更回调
  final Function(String?) onEndChapterChanged;

  /// 选项数量变更回调
  final Function(int) onNumOptionsChanged;

  /// 作者引导变更回调
  final Function(String?) onAuthorGuidanceChanged;

  /// 生成回调 - 触发剧情生成
  final Function(int numOptions, String? authorGuidance, List<String>? selectedConfigIds) onGenerate;

  /// 跳转到添加模型页面的回调
  final VoidCallback? onNavigateToAddModel;

  /// 跳转到配置特定模型页面的回调
  final Function(String configId)? onConfigureModel;

  const ModernConfigCard({
    Key? key,
    required this.chapters,
    required this.aiModelConfigs,
    this.startChapterId,
    this.endChapterId,
    this.numOptions = 3,
    this.authorGuidance,
    this.isGenerating = false,
    required this.onStartChapterChanged,
    required this.onEndChapterChanged,
    required this.onNumOptionsChanged,
    required this.onAuthorGuidanceChanged,
    required this.onGenerate,
    this.onNavigateToAddModel,
    this.onConfigureModel,
  }) : super(key: key);

  @override
  State<ModernConfigCard> createState() => _ModernConfigCardState();
}

/// 配置卡片状态管理
/// 
/// 负责：
/// 1. 本地状态管理（表单数据、验证状态等）
/// 2. 用户交互处理
/// 3. 数据验证和错误提示
/// 4. 响应式布局计算
class _ModernConfigCardState extends State<ModernConfigCard> {
  late int _numOptions;
  late TextEditingController _authorGuidanceController;
  List<String> _selectedConfigIds = [];
  String? _chapterRangeError;

  @override
  void initState() {
    super.initState();
    _numOptions = widget.numOptions;
    _authorGuidanceController = TextEditingController(text: widget.authorGuidance);

    // 默认选择第一个已验证的模型配置
    final validatedConfigs = widget.aiModelConfigs.where((config) => config.isValidated).toList();
    if (validatedConfigs.isNotEmpty) {
      _selectedConfigIds = [validatedConfigs.first.id];
    }
    
    // 初始化时验证章节范围
    _validateChapterRange(widget.startChapterId, widget.endChapterId);
  }

  @override
  void didUpdateWidget(ModernConfigCard oldWidget) {
    super.didUpdateWidget(oldWidget);

    // 同步外部状态变化
    if (oldWidget.authorGuidance != widget.authorGuidance) {
      _authorGuidanceController.text = widget.authorGuidance ?? '';
    }

    if (oldWidget.numOptions != widget.numOptions) {
      _numOptions = widget.numOptions;
    }
    
    // 当起止章节ID变化时验证范围
    if (oldWidget.startChapterId != widget.startChapterId || 
        oldWidget.endChapterId != widget.endChapterId) {
      _validateChapterRange(widget.startChapterId, widget.endChapterId);
    }
  }

  @override
  void dispose() {
    _authorGuidanceController.dispose();
    super.dispose();
  }

  /// 验证章节范围的合理性
  /// 确保选择的章节范围符合逻辑要求
  void _validateChapterRange(String? startChapterId, String? endChapterId) {
    setState(() {
      _chapterRangeError = null;
    });

    if (startChapterId == null || endChapterId == null) {
      setState(() {
        _chapterRangeError = '请选择完整的章节范围';
      });
      return;
    }

    // 查找章节在列表中的位置
    final startIndex = widget.chapters.indexWhere((c) => c.id == startChapterId);
    final endIndex = widget.chapters.indexWhere((c) => c.id == endChapterId);

    if (startIndex == -1 || endIndex == -1) {
      setState(() {
        _chapterRangeError = '选择的章节不存在';
      });
      return;
    }

    if (startIndex > endIndex) {
      setState(() {
        _chapterRangeError = '开始章节不能晚于结束章节';
      });
      return;
    }

    // 检查章节范围是否过大（可选的业务逻辑）
    final rangeSize = endIndex - startIndex + 1;
    if (rangeSize > 10) {
      setState(() {
        _chapterRangeError = '章节范围过大，建议选择不超过10个章节';
      });
      return;
    }
  }

  /// 根据模型名称获取对应的图标
  /// 提供视觉区分不同类型的AI模型
  IconData _getIconForModel(String modelName) {
    final lowerName = modelName.toLowerCase();
    if (lowerName.contains('gpt') || lowerName.contains('openai')) {
      return LucideIcons.gem;
    } else if (lowerName.contains('claude')) {
      return LucideIcons.search_code;
    } else if (lowerName.contains('gemini') || lowerName.contains('bard')) {
      return LucideIcons.brain_circuit;
    } else if (lowerName.contains('llama') || lowerName.contains('meta')) {
      return LucideIcons.flask_conical;
    } else if (lowerName.contains('mistral') || lowerName.contains('mixtral')) {
      return LucideIcons.zap;
    }
    return LucideIcons.cpu; // 默认图标
  }

  @override
  Widget build(BuildContext context) {
    // 检查生成按钮是否应该禁用
    final bool isGenerateButtonDisabled = widget.isGenerating || 
                                          _chapterRangeError != null;

    return Container(
      padding: const EdgeInsets.all(32), // 统一的内边距
      child: LayoutBuilder(
        builder: (context, constraints) {
          // 响应式布局判断
          final isWideScreen = constraints.maxWidth >= 960;
          
          return isWideScreen 
            ? _buildWideLayout(context, isGenerateButtonDisabled) 
            : _buildNarrowLayout(context, isGenerateButtonDisabled);
        },
      ),
    );
  }
  
  /// 宽屏布局（AI模型配置显示在右侧）
  /// 充分利用宽屏空间，提供更好的信息组织
  Widget _buildWideLayout(BuildContext context, bool isGenerateButtonDisabled) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 左侧：主要配置区域
        Expanded(
          flex: 3,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 标题区域
              _buildSectionHeader(
                context,
                '生成配置',
                '设置剧情推演的基本参数',
                LucideIcons.settings,
              ),
              
              const SizedBox(height: 24),
        
              // 章节配置字段
              _buildChapterConfigFields(),
              
              // 章节范围验证错误提示
              if (_chapterRangeError != null)
                _buildErrorMessage(_chapterRangeError!),
        
              const SizedBox(height: 24),
        
              // 作者引导输入区域
              _buildAuthorGuidanceField(),
        
              const SizedBox(height: 32),
        
              // 生成按钮
              Align(
                alignment: Alignment.centerRight,
                child: _buildGenerateButton(isGenerateButtonDisabled),
              ),
            ],
          ),
        ),
        
        const SizedBox(width: 40), // 左右区域间距
        
        // 右侧区域已移到左侧栏独立显示
      ],
    );
  }
  
  /// 窄屏布局（AI模型配置显示在下方）
  /// 适配移动设备和小屏幕的垂直布局
  Widget _buildNarrowLayout(BuildContext context, bool isGenerateButtonDisabled) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题区域
        _buildSectionHeader(
          context,
          '生成配置',
          '设置剧情推演的基本参数',
          LucideIcons.settings,
        ),
        
        const SizedBox(height: 24),

        // 章节配置字段
        _buildChapterConfigFields(),
        
        // 章节范围验证错误提示
        if (_chapterRangeError != null)
          _buildErrorMessage(_chapterRangeError!),

        const SizedBox(height: 24),

        // 作者引导输入区域
        _buildAuthorGuidanceField(),

        const SizedBox(height: 24),

        // AI模型选择区域已移到左侧栏独立显示

        const SizedBox(height: 32),

        // 生成按钮
        Align(
          alignment: Alignment.centerRight,
          child: _buildGenerateButton(isGenerateButtonDisabled),
        ),
      ],
    );
  }

  /// 构建区域标题组件
  /// 提供统一的标题样式和视觉层次
  Widget _buildSectionHeader(BuildContext context, String title, String subtitle, IconData icon) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(
              icon,
              size: 24,
              color: WebTheme.getTextColor(context),
            ),
            const SizedBox(width: 12),
            Text(
              title,
              style: Theme.of(context).textTheme.titleLarge?.copyWith(
                color: WebTheme.getTextColor(context),
                fontWeight: FontWeight.w600,
                height: 1.2,
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        Padding(
          padding: const EdgeInsets.only(left: 36),
          child: Text(
            subtitle,
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
              color: WebTheme.getSecondaryTextColor(context),
              height: 1.4,
            ),
          ),
        ),
      ],
    );
  }

  /// 构建错误提示组件
  /// 统一的错误信息展示样式
  Widget _buildErrorMessage(String message) {
    return Container(
      margin: const EdgeInsets.only(top: 16),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: WebTheme.error.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: WebTheme.error.withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Icon(
            LucideIcons.circle_alert,
            size: 18,
            color: WebTheme.error,
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Text(
              message,
              style: TextStyle(
                color: WebTheme.error,
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建章节配置区域
  /// 包含起始章节、结束章节和生成数量的选择
  Widget _buildChapterConfigFields() {
    return LayoutBuilder(
      builder: (context, constraints) {
        final totalWidth = constraints.maxWidth;
        
        return Wrap(
          spacing: 20,
          runSpacing: 20,
          children: [
            // 起始章节选择
            SizedBox(
              width: totalWidth < 600 ? totalWidth : (totalWidth - 40) / 3,
              child: _buildStartChapterDropdown(),
            ),

            // 结束章节选择
            SizedBox(
              width: totalWidth < 600 ? totalWidth : (totalWidth - 40) / 3,
              child: _buildEndChapterDropdown(),
            ),

            // 生成数量选择
            SizedBox(
              width: totalWidth < 600 ? totalWidth : (totalWidth - 40) / 3,
              child: _buildNumOptionsDropdown(),
            ),
          ],
        );
      },
    );
  }

  /// 构建起始章节下拉框
  Widget _buildStartChapterDropdown() {
    return _buildDropdownField<String>(
      label: '起始章节',
      icon: LucideIcons.book_copy,
      value: widget.startChapterId,
      items: widget.chapters.map((chapter) {
        return DropdownMenuItem<String>(
          value: chapter.id,
          child: Text(
            chapter.title,
            style: const TextStyle(fontSize: 14),
            overflow: TextOverflow.ellipsis,
          ),
        );
      }).toList(),
      onChanged: widget.isGenerating ? null : widget.onStartChapterChanged,
      hint: '选择起始章节',
    );
  }

  /// 构建结束章节下拉框
  Widget _buildEndChapterDropdown() {
    return _buildDropdownField<String>(
      label: '结束章节',
      icon: LucideIcons.book_marked,
      value: widget.endChapterId,
      items: widget.chapters.map((chapter) {
        return DropdownMenuItem<String>(
          value: chapter.id,
          child: Text(
            chapter.title,
            style: const TextStyle(fontSize: 14),
            overflow: TextOverflow.ellipsis,
          ),
        );
      }).toList(),
      onChanged: widget.isGenerating ? null : widget.onEndChapterChanged,
      hint: '选择结束章节',
    );
  }

  /// 构建生成数量下拉框
  Widget _buildNumOptionsDropdown() {
    return _buildDropdownField<int>(
      label: '生成数量',
      icon: LucideIcons.list_ordered,
      value: _numOptions,
      items: [2, 3, 4, 5].map((number) {
        return DropdownMenuItem<int>(
          value: number,
          child: Text('$number 个选项'),
        );
      }).toList(),
      onChanged: widget.isGenerating
          ? null
          : (value) {
              if (value != null) {
                setState(() {
                  _numOptions = value;
                });
                widget.onNumOptionsChanged(value);
              }
            },
      hint: '选择数量',
    );
  }

  /// 通用下拉框组件
  /// 提供统一的下拉框样式和交互
  Widget _buildDropdownField<T>({
    required String label,
    required IconData icon,
    required T? value,
    required List<DropdownMenuItem<T>> items,
    required Function(T?)? onChanged,
    required String hint,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标签
        Row(
          children: [
            Icon(
              icon,
              size: 18,
              color: WebTheme.getTextColor(context),
            ),
            const SizedBox(width: 8),
            Text(
              label,
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: WebTheme.getTextColor(context),
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        
        // 下拉框
        Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: WebTheme.getBorderColor(context),
              width: 1,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          child: DropdownButtonFormField<T>(
            value: value,
            decoration: WebTheme.getBorderlessInputDecoration(
              context: context,
              contentPadding: const EdgeInsets.symmetric(
                horizontal: 16,
                vertical: 12,
              ),
            ),
            items: items,
            onChanged: onChanged,
            isExpanded: true,
            icon: Icon(
              LucideIcons.chevron_down,
              size: 18,
              color: WebTheme.getSecondaryTextColor(context),
            ),
            hint: Text(
              hint,
              style: TextStyle(
                color: WebTheme.getSecondaryTextColor(context),
                fontSize: 14,
              ),
            ),
            dropdownColor: WebTheme.getCardColor(context),
            style: TextStyle(
              color: WebTheme.getTextColor(context),
              fontSize: 14,
            ),
          ),
        ),
      ],
    );
  }

  /// 构建作者引导文本框
  /// 用户输入对剧情发展的指导意见
  Widget _buildAuthorGuidanceField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标签
        Row(
          children: [
            Icon(
              LucideIcons.lightbulb,
              size: 18,
              color: WebTheme.getTextColor(context),
            ),
            const SizedBox(width: 8),
            Text(
              '作者引导（可选）',
              style: TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: WebTheme.getTextColor(context),
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        
        // 输入框
        Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: WebTheme.getBorderColor(context),
              width: 1,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          child: TextField(
            controller: _authorGuidanceController,
            enabled: !widget.isGenerating,
            decoration: WebTheme.getBorderlessInputDecoration(
              hintText: '例如：希望侧重角色成长；引入新的冲突；避免某些情节元素...',
              context: context,
              contentPadding: const EdgeInsets.all(16),
            ),
            style: TextStyle(
              color: WebTheme.getTextColor(context),
              fontSize: 14,
              height: 1.5,
            ),
            maxLines: 3,
            onChanged: widget.onAuthorGuidanceChanged,
          ),
        ),
        
        const SizedBox(height: 8),
        
        // 提示信息
        Row(
          children: [
            Icon(
              LucideIcons.info,
              size: 14,
              color: WebTheme.getSecondaryTextColor(context),
            ),
            const SizedBox(width: 6),
            Expanded(
              child: Text(
                '告诉AI您对下一段剧情的期望、偏好或需要避免的元素',
                style: TextStyle(
                  fontSize: 12,
                  color: WebTheme.getSecondaryTextColor(context),
                  height: 1.3,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }

  /// 构建生成按钮
  /// 统一的主要操作按钮样式
  Widget _buildGenerateButton(bool isDisabled) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: isDisabled ? null : [
          BoxShadow(
            color: WebTheme.getShadowColor(context, opacity: 0.3),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: ElevatedButton.icon(
        onPressed: isDisabled
            ? null
            : () {
                widget.onGenerate(
                  _numOptions,
                  _authorGuidanceController.text.isEmpty ? null : _authorGuidanceController.text,
                  _selectedConfigIds.isEmpty ? null : _selectedConfigIds,
                );
              },
        icon: widget.isGenerating
            ? SizedBox(
                width: 20,
                height: 20,
                child: CircularProgressIndicator(
                  color: WebTheme.getCardColor(context),
                  strokeWidth: 2,
                ),
              )
            : Icon(
                LucideIcons.brain_circuit,
                size: 20,
                color: WebTheme.getCardColor(context),
              ),
        label: Text(
          widget.isGenerating ? '生成中...' : '生成剧情大纲',
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
            color: WebTheme.getCardColor(context),
          ),
        ),
        style: WebTheme.getPrimaryButtonStyle(context).copyWith(
          padding: MaterialStateProperty.all(
            const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
          ),
          minimumSize: MaterialStateProperty.all(const Size(160, 48)),
        ),
      ),
    );
  }

  /// 构建AI模型选择器
  /// 支持多选和模型状态显示
  Widget _buildAIModelSelection() {
    final allConfigs = widget.aiModelConfigs;

    // 模型列表为空的情况
    if (allConfigs.isEmpty) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionHeader(
            context,
            'AI 模型',
            '选择用于生成的AI模型',
            LucideIcons.list_checks,
          ),
          
          const SizedBox(height: 16),
          
          _buildEmptyModelState(),
        ],
      );
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题和添加按钮
        Row(
          children: [
            Expanded(
              child: _buildSectionHeader(
                context,
                'AI 模型',
                '选择用于生成的AI模型',
                LucideIcons.list_checks,
              ),
            ),
            if (widget.onNavigateToAddModel != null)
              TextButton.icon(
                icon: Icon(
                  LucideIcons.plus,
                  size: 16,
                  color: WebTheme.getTextColor(context),
                ),
                label: Text(
                  '添加',
                  style: TextStyle(
                    fontSize: 12,
                    color: WebTheme.getTextColor(context),
                  ),
                ),
                onPressed: widget.onNavigateToAddModel,
                style: WebTheme.getSecondaryButtonStyle(context).copyWith(
                  padding: MaterialStateProperty.all(
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  ),
                  minimumSize: MaterialStateProperty.all(Size.zero),
                ),
              ),
          ],
        ),
        
        const SizedBox(height: 16),

        // 模型列表
        _buildModelList(allConfigs),

        // 选择提示信息
        const SizedBox(height: 16),
        _buildModelSelectionHints(),
      ],
    );
  }

  /// 构建空模型状态
  Widget _buildEmptyModelState() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: WebTheme.getEmptyStateColor(context),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: WebTheme.getBorderColor(context),
          width: 1,
        ),
      ),
      child: Column(
        children: [
          Icon(
            LucideIcons.info,
            size: 32,
            color: WebTheme.getSecondaryTextColor(context),
          ),
          const SizedBox(height: 12),
          Text(
            '暂无可用模型',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: WebTheme.getTextColor(context),
            ),
          ),
          const SizedBox(height: 8),
          Text(
            '请前往设置页面添加和配置AI模型服务',
            style: TextStyle(
              fontSize: 14,
              color: WebTheme.getSecondaryTextColor(context),
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  /// 构建模型列表
  Widget _buildModelList(List<UserAIModelConfigModel> configs) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: WebTheme.getBorderColor(context),
          width: 1,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: configs.asMap().entries.map((entry) {
          final index = entry.key;
          final config = entry.value;
          final isSelected = _selectedConfigIds.contains(config.id);
          final isValidated = config.isValidated;
          final isLast = index == configs.length - 1;

          return Container(
            decoration: BoxDecoration(
              border: isLast ? null : Border(
                bottom: BorderSide(
                  color: WebTheme.getBorderColor(context),
                  width: 1,
                ),
              ),
            ),
            child: isValidated 
              ? _buildValidatedModelItem(config, isSelected)
              : _buildUnvalidatedModelItem(config),
          );
        }).toList(),
      ),
    );
  }

  /// 构建已验证的模型项
  Widget _buildValidatedModelItem(UserAIModelConfigModel config, bool isSelected) {
    return CheckboxListTile(
      title: Text(
        config.name,
        style: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w500,
          color: WebTheme.getTextColor(context),
        ),
      ),
      subtitle: Text(
        '已验证可用',
        style: TextStyle(
          fontSize: 12,
          color: WebTheme.success,
        ),
      ),
      value: isSelected,
      onChanged: widget.isGenerating
          ? null
          : (selected) {
              setState(() {
                if (selected == true) {
                  _selectedConfigIds.add(config.id);
                } else {
                  _selectedConfigIds.remove(config.id);
                }
              });
            },
      secondary: Icon(
        _getIconForModel(config.name),
        color: isSelected 
          ? WebTheme.getTextColor(context)
          : WebTheme.getSecondaryTextColor(context),
        size: 20,
      ),
      controlAffinity: ListTileControlAffinity.leading,
      activeColor: WebTheme.getTextColor(context),
      checkColor: WebTheme.getCardColor(context),
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
    );
  }

  /// 构建未验证的模型项
  Widget _buildUnvalidatedModelItem(UserAIModelConfigModel config) {
    return ListTile(
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      leading: Icon(
        _getIconForModel(config.name),
        color: WebTheme.getSecondaryTextColor(context),
        size: 20,
      ),
      title: Text(
        config.name,
        style: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w500,
          color: WebTheme.getSecondaryTextColor(context),
          fontStyle: FontStyle.italic,
        ),
      ),
      subtitle: Text(
        '需要配置验证',
        style: TextStyle(
          fontSize: 12,
          color: WebTheme.warning,
        ),
      ),
      trailing: OutlinedButton(
        onPressed: () {
          if (widget.onConfigureModel != null) {
            widget.onConfigureModel!(config.id);
          }
        },
        style: WebTheme.getSecondaryButtonStyle(context).copyWith(
          padding: MaterialStateProperty.all(
            const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
          ),
          minimumSize: MaterialStateProperty.all(Size.zero),
        ),
        child: Text(
          '配置',
          style: TextStyle(
            fontSize: 12,
            color: WebTheme.getTextColor(context),
          ),
        ),
      ),
      enabled: false,
    );
  }

  /// 构建模型选择提示信息
  Widget _buildModelSelectionHints() {
    if (_selectedConfigIds.isEmpty) {
      return _buildHintBox(
        '请至少选择一个AI模型',
        LucideIcons.circle_alert,
        WebTheme.error,
      );
    } else if (_selectedConfigIds.length < _numOptions) {
      return _buildHintBox(
        '注意：选择的模型数量少于生成数量，部分模型将被重复使用',
        LucideIcons.info,
        WebTheme.warning,
      );
    }
    
    return const SizedBox.shrink();
  }

  /// 构建提示框组件
  Widget _buildHintBox(String message, IconData icon, Color color) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(6),
        border: Border.all(
          color: color.withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Row(
        children: [
          Icon(
            icon,
            size: 16,
            color: color,
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              message,
              style: TextStyle(
                fontSize: 12,
                color: color,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    );
  }
}