import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:it0_app/l10n/app_localizations.dart';
import 'package:package_info_plus/package_info_plus.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/updater/update_service.dart';
import '../../../auth/data/providers/auth_provider.dart';
import '../../../agent_call/presentation/pages/voice_test_page.dart';
import '../providers/settings_providers.dart';

class SettingsPage extends ConsumerStatefulWidget {
  const SettingsPage({super.key});

  @override
  ConsumerState<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends ConsumerState<SettingsPage> {
  String _appVersion = '';

  @override
  void initState() {
    super.initState();
    Future.microtask(() {
      ref.read(accountProfileProvider.notifier).loadProfile();
    });
    _loadVersion();
  }

  Future<void> _loadVersion() async {
    final info = await PackageInfo.fromPlatform();
    if (mounted) {
      setState(() => _appVersion = 'v${info.version}+${info.buildNumber}');
    }
  }

  @override
  Widget build(BuildContext context) {
    final settings = ref.watch(settingsProvider);
    final profile = ref.watch(accountProfileProvider);
    final theme = Theme.of(context);
    final isDark = theme.brightness == Brightness.dark;
    final cardColor = isDark ? AppColors.surface : Colors.white;
    final subtitleColor = isDark ? AppColors.textSecondary : Colors.grey[600];

    return Scaffold(
      appBar: AppBar(title: Text(AppLocalizations.of(context).settingsPageTitle)),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        children: [
          // ===== Profile Card (large, like WeChat/Feishu) =====
          _buildProfileCard(profile, theme, cardColor, subtitleColor),
          const SizedBox(height: 24),

          // ===== General Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.palette_outlined,
                iconBg: const Color(0xFF6366F1),
                title: AppLocalizations.of(context).appearanceThemeLabel,
                trailing: _ThemeLabel(mode: settings.themeMode),
                onTap: () => _showThemePicker(settings.themeMode),
              ),
              _SettingsRow(
                icon: Icons.language,
                iconBg: const Color(0xFF3B82F6),
                title: AppLocalizations.of(context).languageLabel,
                trailing: Text(
                  _languageDisplayLabel(settings.language),
                  style: TextStyle(color: subtitleColor, fontSize: 14),
                ),
                onTap: () => _showLanguagePicker(settings.language),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== Notifications Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsToggleRow(
                icon: Icons.notifications_outlined,
                iconBg: const Color(0xFFEF4444),
                title: AppLocalizations.of(context).pushNotificationsLabel,
                value: settings.notificationsEnabled,
                onChanged: (v) =>
                    ref.read(settingsProvider.notifier).setNotificationsEnabled(v),
              ),
              _SettingsToggleRow(
                icon: Icons.volume_up_outlined,
                iconBg: const Color(0xFFF59E0B),
                title: AppLocalizations.of(context).soundLabel,
                value: settings.soundEnabled,
                onChanged: settings.notificationsEnabled
                    ? (v) =>
                        ref.read(settingsProvider.notifier).setSoundEnabled(v)
                    : null,
              ),
              _SettingsToggleRow(
                icon: Icons.vibration,
                iconBg: const Color(0xFF22C55E),
                title: AppLocalizations.of(context).hapticFeedbackLabel,
                value: settings.hapticFeedback,
                onChanged: settings.notificationsEnabled
                    ? (v) =>
                        ref.read(settingsProvider.notifier).setHapticFeedback(v)
                    : null,
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== Voice Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.psychology,
                iconBg: const Color(0xFF7C3AED),
                title: AppLocalizations.of(context).conversationEngineLabel,
                trailing: Text(
                  settings.engineType == 'claude_agent_sdk' ? 'Agent SDK' : 'Claude API',
                  style: TextStyle(color: subtitleColor, fontSize: 14),
                ),
                onTap: () => _showEngineTypePicker(settings.engineType),
              ),
              _SettingsRow(
                icon: Icons.record_voice_over,
                iconBg: const Color(0xFF0EA5E9),
                title: AppLocalizations.of(context).ttsVoiceLabel,
                trailing: Text(
                  _voiceDisplayLabel(settings.ttsVoice),
                  style: TextStyle(color: subtitleColor, fontSize: 14),
                ),
                onTap: () => _showVoicePicker(settings.ttsVoice),
              ),
              _SettingsRow(
                icon: Icons.tune,
                iconBg: const Color(0xFFF97316),
                title: AppLocalizations.of(context).ttsStyleLabel,
                trailing: Text(
                  _styleDisplayName(settings.ttsStyle),
                  style: TextStyle(color: subtitleColor, fontSize: 14),
                ),
                onTap: () => _showStylePicker(settings.ttsStyle),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== Billing Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.credit_card_outlined,
                iconBg: const Color(0xFF10B981),
                title: AppLocalizations.of(context).subscriptionLabel,
                onTap: () => context.push('/settings/billing'),
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== Security Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.lock_outline,
                iconBg: const Color(0xFF8B5CF6),
                title: AppLocalizations.of(context).changePasswordLabel,
                onTap: _showChangePasswordSheet,
              ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== About Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.info_outline,
                iconBg: const Color(0xFF64748B),
                title: AppLocalizations.of(context).versionLabel,
                trailing: Text(
                    _appVersion.isNotEmpty ? _appVersion : 'v1.0.0',
                    style: TextStyle(color: subtitleColor, fontSize: 14)),
              ),
              _SettingsRow(
                icon: Icons.system_update_outlined,
                iconBg: const Color(0xFF22C55E),
                title: AppLocalizations.of(context).checkUpdateLabel,
                onTap: () => UpdateService().manualCheckUpdate(context),
              ),
              if (settings.selectedTenantName != null)
                _SettingsRow(
                  icon: Icons.business_outlined,
                  iconBg: const Color(0xFF0EA5E9),
                  title: AppLocalizations.of(context).tenantLabel,
                  trailing: Text(settings.selectedTenantName!,
                      style: TextStyle(color: subtitleColor, fontSize: 14)),
                ),
            ],
          ),
          const SizedBox(height: 24),

          // ===== Dev / Debug Group =====
          _SettingsGroup(
            cardColor: cardColor,
            children: [
              _SettingsRow(
                icon: Icons.record_voice_over,
                iconBg: const Color(0xFF10B981),
                title: '语音 I/O 测试',
                trailing: Text('TTS / STT',
                    style: TextStyle(color: subtitleColor, fontSize: 14)),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const VoiceTestPage()),
                ),
              ),
            ],
          ),
          const SizedBox(height: 32),

          // ===== Logout =====
          SizedBox(
            width: double.infinity,
            child: OutlinedButton(
              onPressed: _confirmLogout,
              style: OutlinedButton.styleFrom(
                foregroundColor: AppColors.error,
                side: const BorderSide(color: AppColors.error, width: 1),
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
              child: Text(AppLocalizations.of(context).logoutButton, style: const TextStyle(fontSize: 16)),
            ),
          ),
          const SizedBox(height: 48),
        ],
      ),
    );
  }

  // ---- Profile Card (top) ---------------------------------------------------

  Widget _buildProfileCard(
      AccountProfile profile, ThemeData theme, Color cardColor, Color? subtitleColor) {
    final initial = profile.displayName.isNotEmpty
        ? profile.displayName[0].toUpperCase()
        : '?';

    return Card(
      color: cardColor,
      elevation: 0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: InkWell(
        borderRadius: BorderRadius.circular(16),
        onTap: () => _showEditNameDialog(profile.displayName),
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Row(
            children: [
              // Avatar
              Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Color(0xFF6366F1), Color(0xFF818CF8)],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Center(
                  child: Text(
                    initial,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 16),
              // Name & email
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      profile.displayName.isNotEmpty
                          ? profile.displayName
                          : '加载中...',
                      style: theme.textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w600,
                        fontSize: 18,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      profile.email.isNotEmpty ? profile.email : ' ',
                      style: TextStyle(color: subtitleColor, fontSize: 14),
                    ),
                  ],
                ),
              ),
              Icon(Icons.chevron_right, color: subtitleColor),
            ],
          ),
        ),
      ),
    );
  }

  // ---- Language Picker ------------------------------------------------------

  String _languageDisplayLabel(String lang) => switch (lang) {
        'zh_TW' => '繁體中文',
        'en'    => 'English',
        _       => '简体中文',
      };

  void _showLanguagePicker(String current) {
    const options = [
      ('zh',    '简体中文'),
      ('zh_TW', '繁體中文'),
      ('en',    'English'),
    ];
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) => SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 36,
              height: 4,
              margin: const EdgeInsets.symmetric(vertical: 12),
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.4),
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
              child: Text('选择语言 / 語言 / Language',
                  style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15)),
            ),
            const Divider(height: 1),
            ...options.map((o) => ListTile(
                  title: Text(o.$2),
                  trailing: o.$1 == current
                      ? const Icon(Icons.check, color: Colors.blue)
                      : null,
                  onTap: () {
                    Navigator.pop(ctx);
                    ref.read(settingsProvider.notifier).setLanguage(o.$1);
                  },
                )),
            const SizedBox(height: 8),
          ],
        ),
      ),
    );
  }

  // ---- Theme Picker ---------------------------------------------------------

  void _showThemePicker(ThemeMode current) {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) {
        return SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const SizedBox(height: 12),
              Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[400],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(height: 16),
              Text(AppLocalizations.of(context).selectThemeTitle,
                  style: Theme.of(ctx).textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w600,
                      )),
              const SizedBox(height: 8),
              _ThemeOption(
                icon: Icons.dark_mode,
                label: AppLocalizations.of(context).darkModeLabel,
                selected: current == ThemeMode.dark,
                onTap: () {
                  ref.read(settingsProvider.notifier).setThemeMode(ThemeMode.dark);
                  Navigator.pop(ctx);
                },
              ),
              _ThemeOption(
                icon: Icons.light_mode,
                label: AppLocalizations.of(context).lightModeLabel,
                selected: current == ThemeMode.light,
                onTap: () {
                  ref.read(settingsProvider.notifier).setThemeMode(ThemeMode.light);
                  Navigator.pop(ctx);
                },
              ),
              _ThemeOption(
                icon: Icons.settings_brightness,
                label: AppLocalizations.of(context).followSystemLabel,
                selected: current == ThemeMode.system,
                onTap: () {
                  ref.read(settingsProvider.notifier).setThemeMode(ThemeMode.system);
                  Navigator.pop(ctx);
                },
              ),
              const SizedBox(height: 16),
            ],
          ),
        );
      },
    );
  }

  // ---- Voice Picker ----------------------------------------------------------

  List<(String, String, String)> _voices(BuildContext context) {
    final l = AppLocalizations.of(context);
    return [
      ('coral', 'Coral', l.voiceCoralDesc),
      ('nova', 'Nova', l.voiceNovaDesc),
      ('sage', 'Sage', l.voiceSageDesc),
      ('shimmer', 'Shimmer', l.voiceShimmerDesc),
      ('marin', 'Marin', l.voiceMarinDesc),
      ('ash', 'Ash', l.voiceAshDesc),
      ('echo', 'Echo', l.voiceEchoDesc),
      ('onyx', 'Onyx', l.voiceOnyxDesc),
      ('verse', 'Verse', l.voiceVerseDesc),
      ('ballad', 'Ballad', l.voiceBalladDesc),
      ('cedar', 'Cedar', l.voiceCedarDesc),
      ('alloy', 'Alloy', l.voiceAlloyDesc),
      ('fable', 'Fable', l.voiceFableDesc),
    ];
  }

  void _showEngineTypePicker(String current) {
    final l = AppLocalizations.of(context);
    final engines = [
      ('claude_agent_sdk', 'Agent SDK', l.agentSdkDesc),
      ('claude_api', 'Claude API', l.claudeApiDesc),
    ];
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 36,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.grey[400],
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            const SizedBox(height: 16),
            Text(AppLocalizations.of(context).selectEngineTitle,
                style: Theme.of(ctx).textTheme.titleMedium?.copyWith(
                      fontWeight: FontWeight.w600,
                    )),
            const SizedBox(height: 12),
            ...engines.map((e) => ListTile(
                  leading: Icon(
                    e.$1 == 'claude_agent_sdk' ? Icons.psychology : Icons.api,
                    color: e.$1 == current ? AppColors.primary : null,
                  ),
                  title: Text(e.$2,
                      style: TextStyle(
                        fontWeight: e.$1 == current ? FontWeight.bold : FontWeight.normal,
                        color: e.$1 == current ? AppColors.primary : null,
                      )),
                  subtitle: Text(e.$3, style: const TextStyle(fontSize: 12)),
                  trailing: e.$1 == current
                      ? const Icon(Icons.check_circle, color: AppColors.primary)
                      : null,
                  onTap: () {
                    ref.read(settingsProvider.notifier).setEngineType(e.$1);
                    Navigator.pop(ctx);
                  },
                )),
          ],
        ),
      ),
    );
  }

  void _showVoicePicker(String current) {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) {
        return SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const SizedBox(height: 12),
              Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[400],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(height: 16),
              Text(AppLocalizations.of(context).selectVoiceTitle,
                  style: Theme.of(ctx).textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w600,
                      )),
              const SizedBox(height: 8),
              Flexible(
                child: ListView(
                  shrinkWrap: true,
                  children: _voices(context)
                      .map((v) => ListTile(
                            leading: Icon(
                              Icons.record_voice_over,
                              color: current == v.$1
                                  ? Theme.of(ctx).colorScheme.primary
                                  : null,
                            ),
                            title: Text(
                              v.$2,
                              style: TextStyle(
                                fontWeight: current == v.$1
                                    ? FontWeight.w600
                                    : FontWeight.normal,
                                color: current == v.$1
                                    ? Theme.of(ctx).colorScheme.primary
                                    : null,
                              ),
                            ),
                            subtitle: Text(v.$3,
                                style: TextStyle(
                                    fontSize: 12,
                                    color: Theme.of(ctx).hintColor)),
                            trailing: current == v.$1
                                ? Icon(Icons.check_circle,
                                    color:
                                        Theme.of(ctx).colorScheme.primary)
                                : null,
                            onTap: () {
                              ref
                                  .read(settingsProvider.notifier)
                                  .setTtsVoice(v.$1);
                              Navigator.pop(ctx);
                            },
                          ))
                      .toList(),
                ),
              ),
              const SizedBox(height: 16),
            ],
          ),
        );
      },
    );
  }

  // ---- Style Picker ---------------------------------------------------------

  String _voiceDisplayLabel(String voice) {
    for (final v in _voices(context)) {
      if (v.$1 == voice) return '${v.$2} · ${v.$3}';
    }
    return voice[0].toUpperCase() + voice.substring(1);
  }

  List<(String, String)> _stylePresets(BuildContext context) {
    final l = AppLocalizations.of(context);
    return [
      (l.styleProfessionalName, '用专业、简洁、干练的语气说话，不拖泥带水。'),
      (l.styleGentleName, '用温柔、耐心的语气说话，像一个贴心的朋友。'),
      (l.styleRelaxedName, '用轻松、活泼的语气说话，带一点幽默感。'),
      (l.styleFormalName, '用严肃、正式的语气说话，像在正式会议中发言。'),
      (l.styleScifiName, '用科幻电影中AI的语气说话，冷静、理性、略带未来感。'),
    ];
  }

  String _styleDisplayName(String style) {
    if (style.isEmpty) return AppLocalizations.of(context).defaultStyleLabel;
    for (final p in _stylePresets(context)) {
      if (p.$2 == style) return p.$1;
    }
    return style.length > 6 ? '${style.substring(0, 6)}...' : style;
  }

  void _showStylePicker(String current) {
    final controller = TextEditingController(
      text: _stylePresets(context).any((p) => p.$2 == current) ? '' : current,
    );

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) {
        return Padding(
          padding: EdgeInsets.fromLTRB(
              24, 24, 24, MediaQuery.of(ctx).viewInsets.bottom + 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[400],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(height: 16),
              Text(AppLocalizations.of(context).selectStyleTitle,
                  style: Theme.of(ctx).textTheme.titleMedium?.copyWith(
                        fontWeight: FontWeight.w600,
                      )),
              const SizedBox(height: 16),
              Wrap(
                spacing: 8,
                runSpacing: 8,
                children: _stylePresets(context)
                    .map((p) => ChoiceChip(
                          label: Text(p.$1),
                          selected: current == p.$2,
                          onSelected: (_) {
                            ref
                                .read(settingsProvider.notifier)
                                .setTtsStyle(p.$2);
                            Navigator.pop(ctx);
                          },
                        ))
                    .toList(),
              ),
              const SizedBox(height: 16),
              TextField(
                controller: controller,
                decoration: InputDecoration(
                  labelText: AppLocalizations.of(context).customStyleLabel,
                  hintText: AppLocalizations.of(context).customStyleHint,
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12)),
                ),
                maxLines: 2,
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  Expanded(
                    child: TextButton(
                      onPressed: () {
                        ref.read(settingsProvider.notifier).setTtsStyle('');
                        Navigator.pop(ctx);
                      },
                      child: Text(AppLocalizations.of(context).resetToDefaultButton),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: FilledButton(
                      onPressed: () {
                        final text = controller.text.trim();
                        if (text.isNotEmpty) {
                          ref
                              .read(settingsProvider.notifier)
                              .setTtsStyle(text);
                        }
                        Navigator.pop(ctx);
                      },
                      child: Text(AppLocalizations.of(context).confirmButton),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }

  // ---- Edit Name Dialog -----------------------------------------------------

  void _showEditNameDialog(String currentName) {
    final controller = TextEditingController(text: currentName);
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        title: Text(AppLocalizations.of(context).editNameDialogTitle),
        content: TextField(
          controller: controller,
          autofocus: true,
          decoration: InputDecoration(
            labelText: AppLocalizations.of(context).displayNameLabel,
            hintText: AppLocalizations.of(context).displayNameHint,
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(ctx).pop(),
            child: Text(AppLocalizations.of(context).cancelButton),
          ),
          FilledButton(
            onPressed: () async {
              final name = controller.text.trim();
              if (name.isEmpty) return;
              Navigator.of(ctx).pop();
              final success = await ref
                  .read(accountProfileProvider.notifier)
                  .updateDisplayName(name);
              if (mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(success ? AppLocalizations.of(context).nameUpdatedMessage : AppLocalizations.of(context).updateFailedMessage)),
                );
              }
            },
            child: Text(AppLocalizations.of(context).saveButton),
          ),
        ],
      ),
    );
  }

  // ---- Change Password Sheet ------------------------------------------------

  void _showChangePasswordSheet() {
    final currentCtrl = TextEditingController();
    final newCtrl = TextEditingController();
    final confirmCtrl = TextEditingController();

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (ctx) => Padding(
        padding: EdgeInsets.fromLTRB(
            24, 24, 24, MediaQuery.of(ctx).viewInsets.bottom + 24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Center(
              child: Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[400],
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
            ),
            const SizedBox(height: 16),
            Text(AppLocalizations.of(context).changePasswordTitle,
                style: Theme.of(ctx)
                    .textTheme
                    .titleLarge
                    ?.copyWith(fontWeight: FontWeight.w600)),
            const SizedBox(height: 20),
            TextField(
              controller: currentCtrl,
              obscureText: true,
              decoration: InputDecoration(
                labelText: AppLocalizations.of(context).currentPasswordLabel,
                prefixIcon: const Icon(Icons.lock_outline),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
            ),
            const SizedBox(height: 14),
            TextField(
              controller: newCtrl,
              obscureText: true,
              decoration: InputDecoration(
                labelText: AppLocalizations.of(context).newPasswordLabel,
                prefixIcon: const Icon(Icons.lock_reset),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
            ),
            const SizedBox(height: 14),
            TextField(
              controller: confirmCtrl,
              obscureText: true,
              decoration: InputDecoration(
                labelText: AppLocalizations.of(context).confirmPasswordLabel,
                prefixIcon: const Icon(Icons.lock_reset),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
            ),
            const SizedBox(height: 24),
            FilledButton(
              style: FilledButton.styleFrom(
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
              onPressed: () async {
                if (newCtrl.text != confirmCtrl.text) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('两次输入的密码不一致')),
                  );
                  return;
                }
                if (newCtrl.text.length < 6) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('新密码至少6个字符')),
                  );
                  return;
                }
                Navigator.of(ctx).pop();
                final result = await ref
                    .read(accountProfileProvider.notifier)
                    .changePassword(
                      currentPassword: currentCtrl.text,
                      newPassword: newCtrl.text,
                    );
                if (mounted) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(result.success
                          ? AppLocalizations.of(context).passwordChangedMessage
                          : result.message ?? AppLocalizations.of(context).changeFailedMessage),
                    ),
                  );
                }
              },
              child: Text(AppLocalizations.of(context).confirmChangeButton, style: const TextStyle(fontSize: 16)),
            ),
          ],
        ),
      ),
    );
  }

  // ---- Confirm Logout -------------------------------------------------------

  void _confirmLogout() async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (ctx) => AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        title: Text(AppLocalizations.of(context).logoutDialogTitle),
        content: Text(AppLocalizations.of(context).logoutConfirmMessage),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(ctx).pop(false),
            child: Text(AppLocalizations.of(context).cancelButton),
          ),
          FilledButton(
            style: FilledButton.styleFrom(backgroundColor: AppColors.error),
            onPressed: () => Navigator.of(ctx).pop(true),
            child: Text(AppLocalizations.of(context).logoutConfirmButton),
          ),
        ],
      ),
    );
    if (confirmed == true) {
      await ref.read(authStateProvider.notifier).logout();
      if (mounted) context.go('/login');
    }
  }
}

// =============================================================================
// Reusable settings widgets
// =============================================================================

/// A group of settings rows wrapped in a rounded card.
class _SettingsGroup extends StatelessWidget {
  final Color cardColor;
  final List<Widget> children;

  const _SettingsGroup({required this.cardColor, required this.children});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: cardColor,
      elevation: 0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: [
          for (int i = 0; i < children.length; i++) ...[
            children[i],
            if (i < children.length - 1)
              Divider(
                height: 1,
                indent: 56,
                color: Theme.of(context).dividerColor.withAlpha(80),
              ),
          ],
        ],
      ),
    );
  }
}

/// A single settings row with icon, title, optional trailing, and tap action.
class _SettingsRow extends StatelessWidget {
  final IconData icon;
  final Color iconBg;
  final String title;
  final Widget? trailing;
  final VoidCallback? onTap;

  const _SettingsRow({
    required this.icon,
    required this.iconBg,
    required this.title,
    this.trailing,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Container(
        width: 32,
        height: 32,
        decoration: BoxDecoration(
          color: iconBg,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Icon(icon, color: Colors.white, size: 18),
      ),
      title: Text(title),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (trailing != null) trailing!,
          if (onTap != null) ...[
            const SizedBox(width: 4),
            Icon(Icons.chevron_right,
                size: 20, color: Theme.of(context).hintColor),
          ],
        ],
      ),
      onTap: onTap,
    );
  }
}

/// A settings row with a switch toggle.
class _SettingsToggleRow extends StatelessWidget {
  final IconData icon;
  final Color iconBg;
  final String title;
  final bool value;
  final ValueChanged<bool>? onChanged;

  const _SettingsToggleRow({
    required this.icon,
    required this.iconBg,
    required this.title,
    required this.value,
    this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return SwitchListTile(
      secondary: Container(
        width: 32,
        height: 32,
        decoration: BoxDecoration(
          color: iconBg,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Icon(icon, color: Colors.white, size: 18),
      ),
      title: Text(title),
      value: value,
      onChanged: onChanged,
    );
  }
}

/// Label showing the current theme mode.
class _ThemeLabel extends StatelessWidget {
  final ThemeMode mode;
  const _ThemeLabel({required this.mode});

  @override
  Widget build(BuildContext context) {
    final label = switch (mode) {
      ThemeMode.dark => '深色',
      ThemeMode.light => '浅色',
      ThemeMode.system => '跟随系统',
    };
    return Text(label,
        style: TextStyle(color: Theme.of(context).hintColor, fontSize: 14));
  }
}

/// Theme option in the bottom sheet picker.
class _ThemeOption extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool selected;
  final VoidCallback onTap;

  const _ThemeOption({
    required this.icon,
    required this.label,
    required this.selected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon,
          color: selected ? Theme.of(context).colorScheme.primary : null),
      title: Text(label,
          style: TextStyle(
            fontWeight: selected ? FontWeight.w600 : FontWeight.normal,
            color: selected ? Theme.of(context).colorScheme.primary : null,
          )),
      trailing: selected
          ? Icon(Icons.check_circle,
              color: Theme.of(context).colorScheme.primary)
          : null,
      onTap: onTap,
    );
  }
}