import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import '../widgets/glass_dialog.dart';
import '../widgets/animated_gradient_background.dart';
import '../widgets/ios_toast.dart';
import '../features/device/presentation/controllers/device_controller.dart';

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

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

class _SettingsPageState extends ConsumerState<SettingsPage> {
  // Local state — initialized from device detail
  String _deviceName = '';
  String _userName = '';
  double _volume = 50;
  double _brightness = 50;
  bool _allowInterrupt = true;
  bool _privacyMode = false;
  int? _userDeviceId;
  bool _initialized = false;

  @override
  Widget build(BuildContext context) {
    // Load current device's detail to populate settings
    final devicesAsync = ref.watch(deviceControllerProvider);
    final devices = devicesAsync.value ?? [];
    if (devices.isNotEmpty) {
      _userDeviceId = devices.first.id;
      final detailAsync = ref.watch(
        deviceDetailControllerProvider(_userDeviceId!),
      );
      final detail = detailAsync.value;
      if (detail != null && !_initialized) {
        _initialized = true;
        final s = detail.settings;
        if (s != null) {
          _deviceName = s.nickname ?? detail.name;
          _userName = s.userName ?? '';
          _volume = s.volume.toDouble();
          _brightness = s.brightness.toDouble();
          _allowInterrupt = s.allowInterrupt;
          _privacyMode = s.privacyMode;
        } else {
          _deviceName = detail.name;
        }
      }
    }

    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        children: [
          const AnimatedGradientBackground(),
          SafeArea(
          child: Column(
            children: [
              // Header
              Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 20,
                  vertical: 12,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () => Navigator.of(context).pop(),
                      child: Container(
                        width: 44,
                        height: 44,
                        decoration: BoxDecoration(
                          // HTML icon-btn style: rgba(255, 255, 255, 0.25) but settings-header says transparent!
                          // CSS .settings-header says: background: transparent !important;
                          // And the button inside? HTML lines 885: <button class="icon-btn" ...>
                          // .icon-btn has border/bg.
                          // But usually header buttons in Airhub are styled.
                          // I'll stick to simple icon or matching box.
                          // HTML: <button class="icon-btn">...
                          // CSS: .icon-btn { background: rgba(255, 255, 255, 0.25); ... width: 44px... }
                          // So yes, it has a box.
                          color: Colors.white.withOpacity(0.25),
                          borderRadius: BorderRadius.circular(22),
                          border: Border.all(
                            color: Colors.white.withOpacity(0.4),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: const Icon(
                          Icons.arrow_back_ios_new,
                          size: 20,
                          color: Color(0xFF1F2937),
                        ),
                      ),
                    ),
                    Text(
                      '设置',
                      style: GoogleFonts.outfit(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: const Color(0xFF1F2937),
                      ),
                    ),
                    const SizedBox(width: 44), // Spacer to center title
                  ],
                ),
              ),

              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 40),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildGroupTitle('基础设置'),
                      _buildSettingsGroup([
                        _buildListTile(
                          '设备昵称',
                          _deviceName,
                          onTap: () => _showEditDialog(
                            '修改设备昵称',
                            _deviceName,
                            (val) => setState(() => _deviceName = val),
                            settingsKey: 'nickname',
                          ),
                        ),
                        _buildDivider(),
                        _buildListTile(
                          '你的称呼',
                          _userName,
                          onTap: () => _showEditDialog(
                            '修改你的称呼',
                            _userName,
                            (val) => setState(() => _userName = val),
                            settingsKey: 'user_name',
                          ),
                        ),
                      ]),

                      _buildGroupTitle('音量与亮度'),
                      _buildSettingsGroup([
                        _buildSliderItem(
                          '音量',
                          _volume,
                          '🔈',
                          '🔊',
                          (val) {
                            setState(() => _volume = val);
                          },
                          onChangeEnd: (val) => _saveSettings({'volume': val.toInt()}),
                        ),
                        _buildDivider(),
                        _buildSliderItem(
                          '亮度',
                          _brightness,
                          '☀',
                          '☼',
                          (val) {
                            setState(() => _brightness = val);
                          },
                          onChangeEnd: (val) => _saveSettings({'brightness': val.toInt()}),
                        ),
                      ]),

                      _buildGroupTitle('网络与连接'),
                      _buildSettingsGroup([
                        _buildListTile(
                          '配置网络',
                          '',
                          subtitle: '为该设备添加更多 Wi-Fi',
                          onTap: _showNetworkDialog,
                        ),
                        _buildDivider(),
                        _buildListTile(
                          '解绑设备',
                          '',
                          subtitle: '解绑后的角色记忆将保存至云端',
                          textColor: const Color(0xFFEF4444),
                          onTap: _showUnbindDialog,
                        ),
                      ]),

                      _buildGroupTitle('交互体验'),
                      _buildSettingsGroup([
                        _buildToggleItem(
                          '允许打断',
                          _allowInterrupt,
                          (val) {
                            setState(() => _allowInterrupt = val);
                            _saveSettings({'allow_interrupt': val});
                          },
                        ),
                        _buildDivider(),
                        _buildToggleItem(
                          '隐私模式',
                          _privacyMode,
                          (val) {
                            setState(() => _privacyMode = val);
                            _saveSettings({'privacy_mode': val});
                          },
                        ),
                      ]),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        ],
      ),
    );
  }

  // ... (Helper widgets same as before) ...
  // To avoid extremely long tool call, I will include them.

  Widget _buildGroupTitle(String title) {
    return Padding(
      // HTML: margin-top: 24px, margin-bottom: 8px
      padding: const EdgeInsets.only(top: 24, bottom: 8, left: 16),
      child: Text(
        title,
        style: const TextStyle(

          fontSize: 12, // HTML: 12px
          fontWeight: FontWeight.w500, // HTML: 500
          color: Color(0xFF8B5E3C), // HTML: warm brown
        ),
      ),
    );
  }

  Widget _buildSettingsGroup(List<Widget> children) {
    return Container(
      decoration: BoxDecoration(
        // HTML: rgba(255, 255, 255, 0.8), border-radius 20px
        color: Colors.white.withOpacity(0.8),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF8B5E3C).withOpacity(0.04),
            blurRadius: 16,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(children: children),
    );
  }

  Widget _buildListTile(
    String label,
    String value, {
    String? subtitle,
    Color? textColor,
    VoidCallback? onTap,
  }) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    label,
                    style: TextStyle(
            
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: textColor ?? const Color(0xFF1F2937),
                    ),
                  ),
                  if (subtitle != null) ...[
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: TextStyle(
              
                        fontSize: 12,
                        color: const Color(0xFF9CA3AF),
                      ),
                    ),
                  ],
                ],
              ),
            ),
            if (value.isNotEmpty)
              Text(
                value,
                style: TextStyle(
        
                  fontSize: 14,
                  color: const Color(0xFF4B5563),
                ),
              ),
            const SizedBox(width: 8),
            const Icon(
              Icons.arrow_forward_ios_rounded,
              size: 14,
              color: Color(0xFFD1D5DB),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildToggleItem(
    String label,
    bool value,
    ValueChanged<bool> onChanged,
  ) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            label,
            style: const TextStyle(
    
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Color(0xFF1F2937),
            ),
          ),
          Switch(
            value: value,
            onChanged: onChanged,
            activeColor: Colors.white,
            activeTrackColor: const Color(0xFFFFB088), // HTML: warm orange
          ),
        ],
      ),
    );
  }

  Widget _buildSliderItem(
    String label,
    double value,
    String iconL,
    String iconR,
    ValueChanged<double> onChanged, {
    ValueChanged<double>? onChangeEnd,
  }) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                label,
                style: const TextStyle(
        
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFF1F2937),
                ),
              ),
              Text(
                '${value.toInt()}%',
                style: const TextStyle(
        
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFF6B7280),
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            children: [
              Text(
                iconL,
                style: const TextStyle(fontSize: 16, color: Color(0xFF9CA3AF)),
              ),
              Expanded(
                child: SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    activeTrackColor: const Color(0xFFFFB088),
                    inactiveTrackColor: const Color(0xFFE5E7EB),
                    thumbColor: Colors.white,
                    trackHeight: 4,
                  ),
                  child: Slider(
                    value: value,
                    min: 0,
                    max: 100,
                    onChanged: onChanged,
                    onChangeEnd: onChangeEnd,
                  ),
                ),
              ),
              Text(
                iconR,
                style: const TextStyle(fontSize: 18, color: Color(0xFF9CA3AF)),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildDivider() {
    return const Divider(
      height: 1,
      color: Color(0xFFF3F4F6),
      indent: 16,
      endIndent: 16,
    );
  }

  Future<void> _saveSettings(Map<String, dynamic> settings) async {
    if (_userDeviceId == null) return;
    final controller = ref.read(
      deviceDetailControllerProvider(_userDeviceId!).notifier,
    );
    final success = await controller.updateSettings(settings);
    if (mounted && !success) {
      AppToast.show(context, '保存失败', isError: true);
    }
  }

  void _showEditDialog(
    String title,
    String initialValue,
    ValueSetter<String> onSaved, {
    String? settingsKey,
  }) {
    final controller = TextEditingController(text: initialValue);
    showGlassDialog(
      context: context,
      title: title,
      content: TextField(
        controller: controller,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        ),
      ),
      onConfirm: () {
        onSaved(controller.text);
        if (settingsKey != null) {
          _saveSettings({settingsKey: controller.text});
        }
        Navigator.pop(context);
      },
    );
  }

  void _showNetworkDialog() {
    showGlassDialog(
      context: context,
      title: '添加备用网络',
      description: '需要重新连接设备蓝牙来配置新的 Wi-Fi 网络。请确保设备在附近且已开机，手机蓝牙已打开。',
      confirmText: '开始配置',
      onConfirm: () {
        Navigator.pop(context); // 关闭对话框
        Navigator.pop(context); // 关闭设置页
        context.go('/bluetooth'); // 回到蓝牙配网流程
      },
    );
  }

  void _showUnbindDialog() {
    showGlassDialog(
      context: context,
      title: '确认解绑设备?',
      description: '解绑后，设备将无法使用。您的交互数据已形成角色记忆，可注入其他设备。',
      confirmText: '解绑',
      isDanger: true,
      onConfirm: () async {
        Navigator.pop(context); // close dialog
        if (_userDeviceId != null) {
          final success = await ref
              .read(deviceControllerProvider.notifier)
              .unbindDevice(_userDeviceId!);
          if (mounted) {
            if (success) {
              context.go('/product-selection');
            } else {
              AppToast.show(context, '解绑失败', isError: true);
            }
          }
        }
      },
    );
  }
}