import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/constants/app_colors.dart';
import '../../../core/utils/format_utils.dart';
import '../../providers/user_providers.dart';
import '../../providers/mining_providers.dart';

class AssetPage extends ConsumerWidget {
  const AssetPage({super.key});

  // 设计色彩
  static const Color _orange = Color(0xFFFF6B00);
  static const Color _green = Color(0xFF10B981);
  static const Color _grayText = Color(0xFF6B7280);
  static const Color _darkText = Color(0xFF1F2937);
  static const Color _bgGray = Color(0xFFF3F4F6);
  static const Color _lightGray = Color(0xFFF9FAFB);
  static const Color _riverBed = Color(0xFF4B5563);
  static const Color _serenade = Color(0xFFFFF7ED);
  static const Color _feta = Color(0xFFF0FDF4);
  static const Color _scandal = Color(0xFFDCFCE7);
  static const Color _jewel = Color(0xFF15803D);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final user = ref.watch(userNotifierProvider);
    final accountSequence = user.accountSequence ?? '';
    final accountAsync = ref.watch(shareAccountProvider(accountSequence));

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: RefreshIndicator(
          onRefresh: () async {
            ref.invalidate(shareAccountProvider(accountSequence));
          },
          child: SingleChildScrollView(
            child: Column(
              children: [
                // 顶部导航栏
                _buildAppBar(context, user),
                // 内容
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Column(
                    children: [
                      const SizedBox(height: 8),
                      // 总资产卡片
                      accountAsync.when(
                        data: (account) => _buildTotalAssetCard(account),
                        loading: () => _buildLoadingCard(),
                        error: (_, __) => _buildErrorCard('资产加载失败'),
                      ),
                      const SizedBox(height: 24),
                      // 快捷操作按钮
                      _buildQuickActions(),
                      const SizedBox(height: 24),
                      // 资产列表
                      accountAsync.when(
                        data: (account) => _buildAssetList(account),
                        loading: () => _buildLoadingCard(),
                        error: (_, __) => const SizedBox.shrink(),
                      ),
                      const SizedBox(height: 24),
                      // 收益统计
                      _buildEarningsCard(),
                      const SizedBox(height: 24),
                      // 账户列表
                      accountAsync.when(
                        data: (account) => _buildAccountList(account),
                        loading: () => _buildLoadingCard(),
                        error: (_, __) => const SizedBox.shrink(),
                      ),
                      const SizedBox(height: 100),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildAppBar(BuildContext context, user) {
    return Container(
      color: _bgGray.withOpacity(0.9),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      child: Row(
        children: [
          // 头像
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(18),
              border: Border.all(color: _green, width: 2),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Center(
                child: Text(
                  user.nickname?.substring(0, 1) ?? 'U',
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: _darkText,
                  ),
                ),
              ),
            ),
          ),
          const Spacer(),
          // 标题
          const Text(
            '我的资产',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Color(0xFF111827),
            ),
          ),
          const Spacer(),
          // 设置按钮
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(18),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 4,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: const Icon(Icons.settings_outlined, size: 20, color: _grayText),
          ),
          const SizedBox(width: 12),
          // 通知按钮
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(18),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 4,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Stack(
              children: [
                const Center(
                  child: Icon(Icons.notifications_outlined, size: 20, color: _grayText),
                ),
                Positioned(
                  right: 8,
                  top: 8,
                  child: Container(
                    width: 8,
                    height: 8,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTotalAssetCard(account) {
    final totalAsset = account?.tradingBalance ?? '88888.88';
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 30,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Stack(
        children: [
          // 背景装饰圆
          Positioned(
            right: -20,
            top: -40,
            child: Container(
              width: 128,
              height: 128,
              decoration: BoxDecoration(
                color: _serenade,
                borderRadius: BorderRadius.circular(64),
              ),
            ),
          ),
          // 顶部渐变条
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 4,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFFFF6B00), Color(0xFFFDBA74)],
                ),
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
              ),
            ),
          ),
          // 内容
          Padding(
            padding: const EdgeInsets.fromLTRB(24, 20, 24, 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题行
                Row(
                  children: [
                    const Text(
                      '总资产估值',
                      style: TextStyle(
                        fontSize: 14,
                        color: _grayText,
                      ),
                    ),
                    const SizedBox(width: 8),
                    Icon(
                      Icons.visibility_outlined,
                      size: 14,
                      color: _grayText.withOpacity(0.5),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                // 金额
                Text(
                  '¥ ${formatAmount(totalAsset)}',
                  style: const TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    color: _orange,
                    letterSpacing: -0.75,
                  ),
                ),
                const SizedBox(height: 4),
                // USDT估值
                const Text(
                  '≈ 12,345.67 USDT',
                  style: TextStyle(
                    fontSize: 14,
                    color: Color(0xFF9CA3AF),
                  ),
                ),
                const SizedBox(height: 12),
                // 今日收益
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    color: _feta,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.trending_up, size: 14, color: _green),
                      const SizedBox(width: 6),
                      Text(
                        '+¥ 156.78 今日',
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w500,
                          color: _green,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildQuickActions() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildQuickActionItem(Icons.add, '接收', _orange),
        _buildQuickActionItem(Icons.remove, '发送', _orange),
        _buildQuickActionItem(Icons.swap_horiz, '划转', _orange),
        _buildQuickActionItem(Icons.download, '提现', _orange),
      ],
    );
  }

  Widget _buildQuickActionItem(IconData icon, String label, Color color) {
    return Column(
      children: [
        Container(
          width: 48,
          height: 48,
          decoration: BoxDecoration(
            color: _serenade,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Icon(icon, color: color, size: 24),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w500,
            color: _riverBed,
          ),
        ),
      ],
    );
  }

  Widget _buildAssetList(account) {
    return Column(
      children: [
        // 积分股
        _buildAssetItem(
          icon: Icons.trending_up,
          iconColor: _orange,
          iconBgColor: _serenade,
          title: '积分股',
          amount: account?.miningBalance ?? '123456.78',
          valueInCny: '¥15,234.56',
          tag: '含倍数资产: 246,913.56',
          growthText: '每秒 +0.0015',
        ),
        const SizedBox(height: 16),
        // 绿积分
        _buildAssetItem(
          icon: Icons.eco,
          iconColor: _green,
          iconBgColor: _feta,
          title: '绿积分',
          amount: account?.tradingBalance ?? '88888.88',
          valueInCny: '¥10,986.54',
          badge: '可提现',
          badgeColor: _jewel,
          badgeBgColor: _scandal,
        ),
        const SizedBox(height: 16),
        // 待分配积分股
        _buildAssetItem(
          icon: Icons.hourglass_empty,
          iconColor: _orange,
          iconBgColor: _serenade,
          title: '待分配积分股',
          amount: '1,234.56',
          subtitle: '次日开始参与分配',
        ),
      ],
    );
  }

  Widget _buildAssetItem({
    required IconData icon,
    required Color iconColor,
    required Color iconBgColor,
    required String title,
    required String amount,
    String? valueInCny,
    String? tag,
    String? growthText,
    String? badge,
    Color? badgeColor,
    Color? badgeBgColor,
    String? subtitle,
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Row(
        children: [
          // 图标
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
              color: iconBgColor,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(icon, color: iconColor, size: 24),
          ),
          const SizedBox(width: 12),
          // 内容
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 标题行
                Row(
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF111827),
                      ),
                    ),
                    if (badge != null) ...[
                      const SizedBox(width: 7),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                        decoration: BoxDecoration(
                          color: badgeBgColor ?? _scandal,
                          borderRadius: BorderRadius.circular(9999),
                        ),
                        child: Text(
                          badge,
                          style: TextStyle(
                            fontSize: 10,
                            fontWeight: FontWeight.w500,
                            color: badgeColor ?? _jewel,
                          ),
                        ),
                      ),
                    ],
                  ],
                ),
                const SizedBox(height: 2),
                // 数量
                Text(
                  formatAmount(amount),
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF111827),
                  ),
                ),
                // 估值
                if (valueInCny != null)
                  Text(
                    '≈ $valueInCny',
                    style: const TextStyle(
                      fontSize: 12,
                      color: Color(0xFF9CA3AF),
                    ),
                  ),
                // 副标题
                if (subtitle != null)
                  Padding(
                    padding: const EdgeInsets.only(top: 3),
                    child: Text(
                      subtitle,
                      style: const TextStyle(
                        fontSize: 12,
                        color: Color(0xFF9CA3AF),
                      ),
                    ),
                  ),
                // 标签行
                if (tag != null || growthText != null)
                  Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Row(
                      children: [
                        if (tag != null)
                          Container(
                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                            decoration: BoxDecoration(
                              color: _serenade,
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: Text(
                              tag,
                              style: const TextStyle(
                                fontSize: 10,
                                color: _orange,
                              ),
                            ),
                          ),
                        if (growthText != null) ...[
                          const SizedBox(width: 8),
                          Row(
                            children: [
                              Icon(Icons.bolt, size: 12, color: _green),
                              Text(
                                growthText,
                                style: TextStyle(
                                  fontSize: 10,
                                  color: _green,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ],
                    ),
                  ),
              ],
            ),
          ),
          // 箭头
          Icon(Icons.chevron_right, size: 14, color: _grayText.withOpacity(0.5)),
        ],
      ),
    );
  }

  Widget _buildEarningsCard() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        children: [
          // 标题
          Row(
            children: [
              Container(
                width: 4,
                height: 20,
                decoration: BoxDecoration(
                  color: _orange,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
              const SizedBox(width: 8),
              const Text(
                '收益统计',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: _darkText,
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          // 统计数据
          Row(
            children: [
              _buildEarningsItem('累计收益', '12,345.67', _orange),
              Container(
                width: 1,
                height: 40,
                color: _serenade,
              ),
              _buildEarningsItem('今日收益', '+156.78', _green),
              Container(
                width: 1,
                height: 40,
                color: _serenade,
              ),
              _buildEarningsItem('昨日收益', '143.21', const Color(0xFF9CA3AF)),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildEarningsItem(String label, String value, Color valueColor) {
    return Expanded(
      child: Column(
        children: [
          Text(
            label,
            style: const TextStyle(
              fontSize: 12,
              color: _grayText,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 4),
          Text(
            value,
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
              color: valueColor,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  Widget _buildAccountList(account) {
    return Column(
      children: [
        // 交易账户
        _buildAccountItem(
          icon: Icons.account_balance_wallet,
          iconColor: _orange,
          title: '交易账户',
          balance: account?.tradingBalance ?? '5678.90',
          unit: '绿积分',
          status: '正常',
          statusColor: _green,
          statusBgColor: _feta,
        ),
        const SizedBox(height: 16),
        // 提现账户
        _buildAccountItem(
          icon: Icons.savings,
          iconColor: _orange,
          title: '提现账户',
          balance: '1,234.56',
          unit: '绿积分',
          status: '已绑定',
          statusColor: const Color(0xFF9CA3AF),
          statusBgColor: Colors.white,
          statusBorder: true,
        ),
      ],
    );
  }

  Widget _buildAccountItem({
    required IconData icon,
    required Color iconColor,
    required String title,
    required String balance,
    required String unit,
    required String status,
    required Color statusColor,
    required Color statusBgColor,
    bool statusBorder = false,
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Row(
        children: [
          // 图标
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: _serenade,
              borderRadius: BorderRadius.circular(18),
            ),
            child: Icon(icon, color: iconColor, size: 20),
          ),
          const SizedBox(width: 12),
          // 内容
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF111827),
                  ),
                ),
                const SizedBox(height: 2),
                RichText(
                  text: TextSpan(
                    children: [
                      TextSpan(
                        text: '$balance ',
                        style: const TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: _orange,
                        ),
                      ),
                      TextSpan(
                        text: unit,
                        style: const TextStyle(
                          fontSize: 12,
                          color: Color(0xFF9CA3AF),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 状态标签
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
            decoration: BoxDecoration(
              color: statusBgColor,
              borderRadius: BorderRadius.circular(9999),
              border: statusBorder ? Border.all(color: const Color(0xFFE5E7EB)) : null,
            ),
            child: Text(
              status,
              style: TextStyle(
                fontSize: 10,
                color: statusColor,
              ),
            ),
          ),
          const SizedBox(width: 8),
          // 箭头
          Icon(Icons.chevron_right, size: 14, color: _grayText.withOpacity(0.5)),
        ],
      ),
    );
  }

  Widget _buildLoadingCard() {
    return Container(
      padding: const EdgeInsets.all(32),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: const Center(child: CircularProgressIndicator()),
    );
  }

  Widget _buildErrorCard(String message) {
    return Container(
      padding: const EdgeInsets.all(32),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Center(
        child: Column(
          children: [
            const Icon(Icons.error_outline, size: 48, color: AppColors.error),
            const SizedBox(height: 8),
            Text(message),
          ],
        ),
      ),
    );
  }
}