import 'package:flutter/material.dart';
import 'product_selection_page.dart';
import '../widgets/glass_dialog.dart';

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

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

class _SettingsPageState extends State<SettingsPage> {
  // State for mock data
  String _deviceName = '小毛球';
  String _userName = '土豆';
  double _volume = 60;
  double _brightness = 85;
  bool _allowInterrupt = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          // CSS: linear-gradient(135deg, #FEF5EC 0%, #FDF2F8 100%);
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFFFEF5EC), Color(0xFFFDF2F8)],
          ),
        ),
        child: 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),
                        ),
                      ),
                    ),
                    const Text(
                      '设置',
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: 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),
                          ),
                        ),
                        _buildDivider(),
                        _buildListTile(
                          '你的称呼',
                          _userName,
                          onTap: () => _showEditDialog(
                            '修改你的称呼',
                            _userName,
                            (val) => setState(() => _userName = val),
                          ),
                        ),
                      ]),

                      _buildGroupTitle('音量与亮度'),
                      _buildSettingsGroup([
                        _buildSliderItem(
                          '音量',
                          _volume,
                          '🔈',
                          '🔊',
                          (val) => setState(() => _volume = val),
                        ),
                        _buildDivider(),
                        _buildSliderItem(
                          '亮度',
                          _brightness,
                          '☀',
                          '☼',
                          (val) => setState(() => _brightness = val),
                        ),
                      ]),

                      _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),
                        ),
                        _buildDivider(),
                        _buildListTile('隐私模式', '已开启'),
                      ]),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // ... (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(
          fontFamily: 'Inter',
          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(
                      fontFamily: 'Inter',
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: textColor ?? const Color(0xFF1F2937),
                    ),
                  ),
                  if (subtitle != null) ...[
                    const SizedBox(height: 4),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 12,
                        color: const Color(0xFF9CA3AF),
                      ),
                    ),
                  ],
                ],
              ),
            ),
            if (value.isNotEmpty)
              Text(
                value,
                style: TextStyle(
                  fontFamily: 'Inter',
                  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(
              fontFamily: 'Inter',
              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,
  ) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                label,
                style: const TextStyle(
                  fontFamily: 'Inter',
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: Color(0xFF1F2937),
                ),
              ),
              Text(
                '${value.toInt()}%',
                style: const TextStyle(
                  fontFamily: 'Inter',
                  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(0xFF8B5CF6),
                    inactiveTrackColor: const Color(0xFFE5E7EB),
                    thumbColor: Colors.white,
                    trackHeight: 4,
                  ),
                  child: Slider(
                    value: value,
                    min: 0,
                    max: 100,
                    onChanged: onChanged,
                  ),
                ),
              ),
              Text(
                iconR,
                style: const TextStyle(fontSize: 18, color: Color(0xFF9CA3AF)),
              ),
            ],
          ),
        ],
      ),
    );
  }

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

  void _showEditDialog(
    String title,
    String initialValue,
    ValueSetter<String> onSaved,
  ) {
    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);
        Navigator.pop(context);
      },
    );
  }

  void _showNetworkDialog() {
    showGlassDialog(
      context: context,
      title: '添加备用网络',
      description: '需要重新连接设备蓝牙来配置新的 Wi-Fi 网络。请确保设备在附近且已开机，手机蓝牙已打开。',
      confirmText: '开始配置',
      onConfirm: () {
        Navigator.pop(context);
        Navigator.pop(context);
        Navigator.of(context).pushNamedAndRemoveUntil('/', (route) => false);
      },
    );
  }

  void _showUnbindDialog() {
    showGlassDialog(
      context: context,
      title: '确认解绑设备?',
      description: '解绑后，设备 Airhub_5G 将无法使用。您与 小毛球 的交互数据已形成角色记忆，可注入其他设备。',
      confirmText: '解绑',
      isDanger: true,
      onConfirm: () {
        Navigator.pop(context);
        Navigator.pop(context);
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => const ProductSelectionPage()),
        );
      },
    );
  }
}