import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

/// 帮助中心页面
class HelpCenterPage extends StatelessWidget {
  const HelpCenterPage({super.key});

  static const Color _orange = Color(0xFFFF6B00);
  static const Color _darkText = Color(0xFF1F2937);
  static const Color _grayText = Color(0xFF6B7280);
  static const Color _bgGray = Color(0xFFF3F4F6);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _bgGray,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, color: _darkText, size: 20),
          onPressed: () => context.pop(),
        ),
        title: const Text(
          '帮助中心',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: _darkText,
          ),
        ),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 16),
            // 常见问题分类
            _buildSection('常见问题', [
              _FAQItem(
                question: '如何参与？',
                answer: '在首页点击"去参与"按钮，选择参与数量和支付方式，完成支付后即可参与成功。参与成功后，您将获得对应的贡献值。',
              ),
              _FAQItem(
                question: '贡献值是什么？',
                answer: '贡献值是您在平台参与后获得的一种权益凭证。贡献值越高，您每日可获得的积分股分配越多。贡献值有效期为730天。',
              ),
              _FAQItem(
                question: '如何获得积分股？',
                answer: '系统每日会根据您的贡献值占比，自动分配积分股到您的账户。积分股可用于兑换或交易。',
              ),
              _FAQItem(
                question: '积分值和积分股有什么区别？',
                answer: '积分股是通过贡献值分配获得的，可用于卖出兑换。积分值是一种通用积分，可以转账给其他用户。两者用途不同，请注意区分。',
              ),
            ]),
            const SizedBox(height: 16),
            _buildSection('交易相关', [
              _FAQItem(
                question: '如何卖出积分股？',
                answer: '进入"兑换"页面，输入要卖出的积分股数量，确认后即可完成卖出。卖出时会扣除10%进入积分股池。',
              ),
              _FAQItem(
                question: '卖出积分股为什么要扣除10%？',
                answer: '卖出积分股时，10%会进入积分股池，用于系统生态建设和价值稳定。这是系统规则的一部分。',
              ),
              _FAQItem(
                question: '如何发送积分值给其他用户？',
                answer: '进入"资产"页面，点击"发送"按钮，输入对方手机号和转账金额，确认后即可完成转账。注意：积分值转账不可撤销。',
              ),
            ]),
            const SizedBox(height: 16),
            _buildSection('账户安全', [
              _FAQItem(
                question: '如何修改登录密码？',
                answer: '进入"我的"页面，点击"账户安全"，可以修改登录密码。建议定期更换密码以确保账户安全。',
              ),
              _FAQItem(
                question: '忘记密码怎么办？',
                answer: '在登录页面点击"忘记密码"，通过手机号验证后可以重置密码。',
              ),
            ]),
            const SizedBox(height: 16),
            _buildSection('团队收益', [
              _FAQItem(
                question: '如何邀请好友？',
                answer: '您的手机号就是您的邀请码。好友注册时填写您的手机号作为邀请人，即可建立引荐关系。',
              ),
              _FAQItem(
                question: '团队收益如何计算？',
                answer: '当您引荐的好友参与后，您将获得团队下贡献值奖励。引荐的用户越多、参与数量越多，您的团队收益越高。',
              ),
            ]),
            const SizedBox(height: 16),
            // 联系客服
            _buildContactSection(context),
            const SizedBox(height: 24),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title, List<_FAQItem> items) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Container(
                  width: 4,
                  height: 16,
                  decoration: BoxDecoration(
                    color: _orange,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(width: 8),
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: _darkText,
                  ),
                ),
              ],
            ),
          ),
          ...items.asMap().entries.map((entry) {
            final isLast = entry.key == items.length - 1;
            return _buildFAQTile(entry.value, showDivider: !isLast);
          }),
        ],
      ),
    );
  }

  Widget _buildFAQTile(_FAQItem item, {bool showDivider = true}) {
    return Theme(
      data: ThemeData(
        dividerColor: Colors.transparent,
      ),
      child: Column(
        children: [
          ExpansionTile(
            tilePadding: const EdgeInsets.symmetric(horizontal: 16),
            childrenPadding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
            title: Text(
              item.question,
              style: const TextStyle(
                fontSize: 14,
                color: _darkText,
              ),
            ),
            iconColor: _orange,
            collapsedIconColor: _grayText,
            children: [
              Text(
                item.answer,
                style: TextStyle(
                  fontSize: 13,
                  color: _grayText.withOpacity(0.9),
                  height: 1.5,
                ),
              ),
            ],
          ),
          if (showDivider)
            const Divider(height: 1, indent: 16, endIndent: 16),
        ],
      ),
    );
  }

  Widget _buildContactSection(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                width: 4,
                height: 16,
                decoration: BoxDecoration(
                  color: _orange,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(width: 8),
              const Text(
                '联系我们',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: _darkText,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Text(
            '如果您有其他问题，可以通过以下方式联系我们：',
            style: TextStyle(
              fontSize: 13,
              color: _grayText.withOpacity(0.9),
            ),
          ),
          const SizedBox(height: 16),
          _buildContactItem(
            icon: Icons.email_outlined,
            label: '客服邮箱',
            value: 'support@guhang.com',
          ),
          const SizedBox(height: 12),
          _buildContactItem(
            icon: Icons.access_time,
            label: '服务时间',
            value: '周一至周五 9:00-18:00',
          ),
        ],
      ),
    );
  }

  Widget _buildContactItem({
    required IconData icon,
    required String label,
    required String value,
  }) {
    return Row(
      children: [
        Icon(icon, size: 20, color: _orange),
        const SizedBox(width: 12),
        Text(
          '$label: ',
          style: const TextStyle(
            fontSize: 13,
            color: _grayText,
          ),
        ),
        Text(
          value,
          style: const TextStyle(
            fontSize: 13,
            color: _darkText,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
}

class _FAQItem {
  final String question;
  final String answer;

  _FAQItem({required this.question, required this.answer});
}