import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:ainoval/widgets/common/top_toast.dart';

import 'package:ainoval/blocs/ai_config/ai_config_bloc.dart';
import 'package:ainoval/models/editor_settings.dart';
import 'package:ainoval/models/user_ai_model_config_model.dart';
import 'package:ainoval/screens/editor/managers/editor_state_manager.dart';
import 'package:ainoval/screens/settings/widgets/ai_config_form.dart';
import 'package:ainoval/screens/settings/widgets/model_service_list_page.dart';
import 'package:ainoval/screens/settings/widgets/editor_settings_panel.dart';
import 'package:ainoval/screens/settings/widgets/membership_panel.dart' as membership;
import 'package:ainoval/screens/settings/widgets/account_management_panel.dart';
// import 'package:ainoval/widgets/common/settings_widgets.dart';
import 'package:ainoval/services/api_service/repositories/impl/novel_repository_impl.dart';
import 'package:ainoval/utils/logger.dart';
import 'package:ainoval/utils/web_theme.dart';

class SettingsPanel extends StatefulWidget {
  const SettingsPanel({
    super.key,
    required this.onClose,
    required this.userId,
    this.editorSettings,
    this.onEditorSettingsChanged,
    required this.stateManager,
    this.initialCategoryIndex = 0,
  });
  final VoidCallback onClose;
  final String userId;
  final EditorSettings? editorSettings;
  final Function(EditorSettings)? onEditorSettingsChanged;
  final EditorStateManager stateManager;
  final int initialCategoryIndex;

  /// 账户管理分类的索引
  static const int accountManagementCategoryIndex = 1;

  @override
  State<SettingsPanel> createState() => _SettingsPanelState();
}

class _SettingsPanelState extends State<SettingsPanel> {
  int _selectedIndex = 0; // Track the selected category index
  UserAIModelConfigModel?
      _configToEdit; // Track config being edited, null for add mode
  bool _showAddEditForm = false; // Flag to show the add/edit form view
  late EditorSettings _editorSettings;
  // 🚀 新增：NovelRepository实例用于调用后端API
  late NovelRepositoryImpl _novelRepository;

  // Define category titles and icons (adjust as needed)
  final List<Map<String, dynamic>> _categories = [
    {'title': '模型服务', 'icon': Icons.cloud_queue},
    {'title': '账户管理', 'icon': Icons.account_circle_outlined},
    {'title': '会员与订阅', 'icon': Icons.workspace_premium},
    // {'title': '默认模型', 'icon': Icons.star_border}, // Example: Can be added later
    // {'title': '网络搜索', 'icon': Icons.search},
    // {'title': 'MCP 服务器', 'icon': Icons.dns},
    {'title': '常规设置', 'icon': Icons.settings_outlined},
    {'title': '显示设置', 'icon': Icons.display_settings},
    {'title': '主题设置', 'icon': Icons.palette_outlined},
    {'title': '编辑器设置', 'icon': Icons.edit_note},
    // {'title': '快捷方式', 'icon': Icons.shortcut},
    // {'title': '快捷助手', 'icon': Icons.assistant_photo},
    // {'title': '数据设置', 'icon': Icons.data_usage},
    // {'title': '关于我们\', 'icon': Icons.info_outline},
  ];

  @override
  void initState() {
    super.initState();
    _editorSettings = widget.editorSettings ?? const EditorSettings();
    // 🚀 初始化NovelRepository
    _novelRepository = NovelRepositoryImpl();
    // 设置初始分类索引
    _selectedIndex = widget.initialCategoryIndex;
  }

  void _showAddForm() {
    // <<< Explicitly trigger provider loading every time we enter add mode >>>
    // Ensure context is available and mounted before reading bloc
    if (mounted) {
      context.read<AiConfigBloc>().add(LoadAvailableProviders());
    }
    setState(() {
      _configToEdit = null; // Clear any previous edit state
      _showAddEditForm = true;
    });
  }

  void _hideAddEditForm() {
    setState(() {
      // Optionally clear BLoC state related to model loading if needed
      // context.read<AiConfigBloc>().add(ClearProviderModels());
      _configToEdit = null;
      _showAddEditForm = false;
    });
  }

  // 新增方法：显示编辑表单
  void _showEditForm(UserAIModelConfigModel config) {
    // 检查Bloc是否已有该Provider的模型，若无则加载
    if (mounted) {
      final bloc = context.read<AiConfigBloc>();
      final cachedGroup = bloc.state.modelGroups[config.provider];
      final hasCache = cachedGroup != null && cachedGroup.allModelsInfo.isNotEmpty;
      if (!hasCache) {
        bloc.add(LoadModelsForProvider(provider: config.provider));
      } else {
        AppLogger.d('SettingsPanel', '编辑模式使用缓存的模型列表，provider=${config.provider}');
      }
    }

    setState(() {
      _configToEdit = config; // 设置要编辑的配置
      _showAddEditForm = true; // 显示表单
      _selectedIndex = 0; // 确保在 '模型服务' 类别下
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;

    return Material(
      elevation: 4.0,
      borderRadius: BorderRadius.circular(16.0),
      color: Colors.transparent, // Make Material transparent
      child: Container(
        width: 1440, // 增加宽度从800到960
        height: 1080, // 增加高度从600到700
        decoration: BoxDecoration(
          color: isDark
              ? theme.colorScheme.surface.withAlpha(217) // 0.85 opacity
              : theme.colorScheme.surface.withAlpha(242), // 0.95 opacity
          borderRadius: BorderRadius.circular(16.0),
          boxShadow: [
            BoxShadow(
              color: isDark
                  ? Colors.black.withAlpha(77) // 0.3 opacity
                  : Colors.black.withAlpha(26), // 0.1 opacity
              blurRadius: 20,
              spreadRadius: 2,
            ),
          ],
          border: Border.all(
            color: isDark
                ? Colors.white.withAlpha(26) // 0.1 opacity
                : Colors.white.withAlpha(153), // 0.6 opacity
            width: 0.5,
          ),
        ),
        // 添加背景模糊效果
        clipBehavior: Clip.antiAlias,
        child: Row(
          children: [
            // Left Navigation Rail
            Container(
              width: 200,
              padding: const EdgeInsets.symmetric(vertical: 16.0),
              decoration: BoxDecoration(
                color: isDark
                    ? theme.colorScheme.surfaceContainerHighest.withAlpha(51) // 0.2 opacity
                    : theme.colorScheme.surfaceContainerLowest.withAlpha(179), // 0.7 opacity
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(16.0),
                  bottomLeft: Radius.circular(16.0),
                ),
                border: Border.all(
                  color: isDark
                      ? Colors.white.withAlpha(13) // 0.05 opacity
                      : Colors.white.withAlpha(77), // 0.3 opacity
                  width: 0.5,
                ),
                boxShadow: [
                  BoxShadow(
                    color: isDark
                        ? Colors.black.withAlpha(51) // 0.2 opacity
                        : Colors.black.withAlpha(13), // 0.05 opacity
                    blurRadius: 10,
                    spreadRadius: 0,
                  ),
                ],
              ),
              child: ListView.builder(
                itemCount: _categories.length,
                itemBuilder: (context, index) {
                  final category = _categories[index];
                  final isSelected = _selectedIndex == index;
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 4.0),
                    child: AnimatedContainer(
                      duration: const Duration(milliseconds: 200),
                      decoration: BoxDecoration(
                        color: isSelected
                            ? (isDark
                                ? theme.colorScheme.primary.withAlpha(38) // 0.15 opacity
                                : theme.colorScheme.primary.withAlpha(26)) // 0.1 opacity
                            : Colors.transparent,
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: isSelected ? [
                          BoxShadow(
                            color: theme.colorScheme.primary.withAlpha(26), // 0.1 opacity
                            blurRadius: 8,
                            spreadRadius: 0,
                            offset: const Offset(0, 2),
                          ),
                        ] : [],
                      ),
                      child: ListTile(
                        leading: Icon(
                          category['icon'] as IconData?,
                          color: isSelected
                              ? theme.colorScheme.primary
                              : theme.colorScheme.onSurfaceVariant,
                          size: 20, // Smaller icon
                        ),
                        title: Text(
                          category['title'] as String,
                          style: TextStyle(
                            fontSize: 13, // Slightly smaller font
                            fontWeight:
                                isSelected ? FontWeight.bold : FontWeight.normal,
                            color: isSelected
                                ? theme.colorScheme.primary
                                : theme.colorScheme.onSurfaceVariant,
                          ),
                        ),
                        onTap: () {
                          setState(() {
                            _selectedIndex = index;
                            _hideAddEditForm(); // Hide form when changing category
                          });
                        },
                        selected: isSelected,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        dense: true,
                        contentPadding: const EdgeInsets.symmetric(
                            horizontal: 12.0, vertical: 4.0),
                        visualDensity: VisualDensity.compact,
                      ),
                    ),
                  );
                },
              ),
            ),

            // Right Content Area
            Expanded(
              child: ClipRRect(
                // Clip content to rounded corners
                borderRadius: const BorderRadius.only(
                  topRight: Radius.circular(16.0),
                  bottomRight: Radius.circular(16.0),
                ),
                child: Container(
                  // Add a background for the content area if needed
                  decoration: BoxDecoration(
                    color: isDark
                        ? theme.cardColor.withAlpha(179) // 0.7 opacity
                        : theme.cardColor.withAlpha(217), // 0.85 opacity
                    boxShadow: [
                      BoxShadow(
                        color: isDark
                            ? Colors.black.withAlpha(51) // 0.2 opacity
                            : Colors.black.withAlpha(13), // 0.05 opacity
                        blurRadius: 10,
                        spreadRadius: 0,
                      ),
                    ],
                  ),
                  child: Stack(
                    children: [
                      // Listener for Feedback Toasts
                      BlocListener<AiConfigBloc, AiConfigState>(
                        listener: (context, state) {
                          if (!mounted) return;

                          if (state.actionStatus == AiConfigActionStatus.error ||
                              state.actionStatus == AiConfigActionStatus.success) {
                            widget.stateManager.setModelOperationInProgress(false);
                          }

                          // Show Toast for errors
                          if (state.actionStatus ==
                                  AiConfigActionStatus.error &&
                              state.actionErrorMessage != null) {
                            TopToast.error(context, '操作失败: ${state.actionErrorMessage!}');
                          }
                          // Show Toast for success
                          else if (state.actionStatus ==
                              AiConfigActionStatus.success) {
                            TopToast.success(context, '操作成功');
                          }
                        },
                        child: Padding(
                          padding:
                              const EdgeInsets.fromLTRB(32.0, 48.0, 32.0, 32.0),
                          child: AnimatedSwitcher(
                            duration: const Duration(milliseconds: 400),
                            switchInCurve: Curves.easeOutQuint,
                            switchOutCurve: Curves.easeInQuint,
                            transitionBuilder:
                                (Widget child, Animation<double> animation) {
                              // Using Key on the child ensures AnimatedSwitcher differentiates them
                              return FadeTransition(
                                  opacity: animation,
                                  child: SlideTransition(
                                    position: Tween<Offset>(
                                      begin: const Offset(0.05, 0),
                                      end: Offset.zero,
                                    ).animate(animation),
                                    child: child,
                                  )
                              );
                            },
                            // Directly determine the child and its key here
                            child: _showAddEditForm &&
                                    _selectedIndex ==
                                        0 // Only show form for '模型服务'
                                ? _buildAiConfigForm(
                                    key: ValueKey(_configToEdit?.id ??
                                        'add')) // Form View
                                : _buildCategoryListContent(
                                    key: ValueKey('list_$_selectedIndex'),
                                    index:
                                        _selectedIndex), // List View or other categories
                          ),
                        ),
                      ),
                      // Close Button - Positioned relative to the Stack
                      Positioned(
                        top: 8,
                        right: 8,
                        child: Container(
                          decoration: BoxDecoration(
                            color: isDark
                                ? Colors.black.withAlpha(51) // 0.2 opacity
                                : Colors.white.withAlpha(128), // 0.5 opacity
                            borderRadius: BorderRadius.circular(20),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withAlpha(26), // 0.1 opacity
                                blurRadius: 4,
                                spreadRadius: 0,
                              ),
                            ],
                          ),
                          child: IconButton(
                            icon: const Icon(Icons.close),
                            tooltip: '关闭设置',
                            onPressed: widget.onClose,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Renamed for clarity and added index parameter
  Widget _buildCategoryListContent({required Key key, required int index}) {
    final categoryTitle = _categories[index]['title'] as String;

    switch (categoryTitle) {
      case '模型服务':
        return ModelServiceListPage(
          key: key,
          userId: widget.userId,
          onAddNew: _showAddForm,
          onEditConfig: _showEditForm, // 传递编辑回调
          editorStateManager: widget.stateManager,
        );
      case '账户管理':
        return AccountManagementPanel(key: key);
      case '会员与订阅':
        return SizedBox(
          key: const ValueKey('membership_panel'),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: SizedBox(
              width: 820,
              child: Card(
                child: Padding(
                  padding: EdgeInsets.all(12.0),
                  child: SingleChildScrollView(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('会员计划', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                        SizedBox(height: 12),
                        membership.MembershipPanel(),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      case '编辑器设置':
        return EditorSettingsPanel(
          key: key,
          settings: _editorSettings,
          onSettingsChanged: (newSettings) {
            setState(() {
              _editorSettings = newSettings;
            });
            widget.onEditorSettingsChanged?.call(newSettings);
          },
          onSave: () async {
            // 🚀 修复：实际调用后端API保存编辑器设置
            try {
              AppLogger.i('SettingsPanel', '开始保存用户编辑器设置: userId=${widget.userId}');
              
              final savedSettings = await _novelRepository.saveUserEditorSettings(
                widget.userId, 
                _editorSettings
              );
              
              AppLogger.i('SettingsPanel', '成功保存用户编辑器设置');
              
              // 更新本地状态
              setState(() {
                _editorSettings = savedSettings;
              });
              
              // 通知父组件
              widget.onEditorSettingsChanged?.call(savedSettings);
              
            } catch (e) {
              AppLogger.e('SettingsPanel', '保存用户编辑器设置失败: $e');
              
              // 显示错误提示
              if (mounted) {
                TopToast.error(context, '保存编辑器设置失败: $e');
              }
              
              // 重新抛出异常，让EditorSettingsPanel的错误处理机制处理
              rethrow;
            }
          },
          onReset: () async {
            // 🚀 修复：实际调用后端API重置编辑器设置
            try {
              AppLogger.i('SettingsPanel', '开始重置用户编辑器设置: userId=${widget.userId}');
              
              final defaultSettings = await _novelRepository.resetUserEditorSettings(widget.userId);
              
              AppLogger.i('SettingsPanel', '成功重置用户编辑器设置');
              
              setState(() {
                _editorSettings = defaultSettings;
              });
              
              widget.onEditorSettingsChanged?.call(defaultSettings);
              
            } catch (e) {
              AppLogger.e('SettingsPanel', '重置用户编辑器设置失败: $e');
              
              // 显示错误提示
              if (mounted) {
                TopToast.error(context, '重置编辑器设置失败: $e');
              }
            }
          },
        );
      case '主题设置':
        return _ThemeSettingsPage(
          key: key,
          currentVariant: _editorSettings.themeVariant,
          onChanged: (variant) {
            // 更新本地 EditorSettings 并立即应用
            setState(() {
              _editorSettings = _editorSettings.copyWith(themeVariant: variant);
            });
            WebTheme.applyVariant(variant);
            // 同步给外层
            widget.onEditorSettingsChanged?.call(_editorSettings);
          },
          onSave: () async {
            try {
              AppLogger.i('SettingsPanel', '保存主题设置: ${_editorSettings.themeVariant}');
              final saved = await _novelRepository.saveUserEditorSettings(
                widget.userId,
                _editorSettings,
              );
              setState(() {
                _editorSettings = saved;
              });
              // 关键：以服务端返回为准重新应用，避免非法/回退
              WebTheme.applyVariant(saved.themeVariant);
              widget.onEditorSettingsChanged?.call(saved);
              TopToast.success(context, '主题设置已保存');
            } catch (e) {
              TopToast.error(context, '保存主题设置失败: $e');
              rethrow;
            }
          },
          onReset: () async {
            try {
              AppLogger.i('SettingsPanel', '重置主题设置');
              final defaults = await _novelRepository.resetUserEditorSettings(widget.userId);
              setState(() {
                _editorSettings = defaults;
              });
              WebTheme.applyVariant(_editorSettings.themeVariant);
              widget.onEditorSettingsChanged?.call(defaults);
            } catch (e) {
              TopToast.error(context, '重置主题设置失败: $e');
            }
          },
        );
      default:
        return Center(
            key: key,
            child: Text('这里将显示 $categoryTitle 设置',
                style: Theme.of(context).textTheme.bodyLarge));
    }
  }

  // Builds the actual form widget, added key parameter
  Widget _buildAiConfigForm({required Key key}) {
    // REMOVE the BlocListener that was here, as it might prematurely hide the form.
    // Success/failure should be handled internally by AiConfigForm or via callbacks if needed.
    return AiConfigForm(
      // The actual form content
      key: key, // Pass the key provided by the parent
      userId: widget.userId,
      configToEdit: _configToEdit, // Pass the current configToEdit state
      onCancel: _hideAddEditForm, // Use the hide function for cancel
    );
  }


}

/// 主题设置页（简洁 UI）
class _ThemeSettingsPage extends StatelessWidget {
  const _ThemeSettingsPage({
    super.key,
    required this.currentVariant,
    required this.onChanged,
    required this.onSave,
    required this.onReset,
  });

  final String currentVariant;
  final ValueChanged<String> onChanged;
  final Future<void> Function() onSave;
  final Future<void> Function() onReset;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final options = const [
      {'key': WebTheme.variantMonochrome, 'label': '黑白（默认）'},
      {'key': WebTheme.variantBlueWhite, 'label': '蓝白'},
      {'key': WebTheme.variantPinkWhite, 'label': '粉白'},
      {'key': WebTheme.variantPaper, 'label': '书页米色'},
    ];

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('主题设置', style: theme.textTheme.titleLarge),
        const SizedBox(height: 12),
        Wrap(
          spacing: 12,
          runSpacing: 12,
          children: [
            for (final opt in options)
              ChoiceChip(
                label: Text(opt['label'] as String),
                selected: currentVariant == (opt['key'] as String),
                onSelected: (_) => onChanged(opt['key'] as String),
              ),
          ],
        ),
        const SizedBox(height: 24),
        Row(
          children: [
            ElevatedButton.icon(
              onPressed: onSave,
              icon: const Icon(Icons.save_outlined),
              label: const Text('保存'),
            ),
            const SizedBox(width: 12),
            OutlinedButton.icon(
              onPressed: onReset,
              icon: const Icon(Icons.refresh_outlined),
              label: const Text('重置为默认'),
            ),
          ],
        ),
      ],
    );
  }
}
