import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:skywood/global/client/user_client.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/mine/widget/mine_section_view.dart';
import 'package:skywood/pages/widgets/pixel_widgets.dart';
import 'package:skywood/utils/models/user/skywood_user.dart';
import 'package:skywood/utils/tools/app_toast.dart';
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';

import '../widgets/common_bg_page.dart';

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

  @override
  State<StatefulWidget> createState() {
    return _MainRootState();
  }
}

class _MainRootState extends State<MinePage> {

  SkywoodUser? _userInfo;

  @override
  void initState() {
    super.initState();

    _getUserData();
  }

  void _getUserData() {
    UserClient.getUserInfo().then((value) {
      setState(() {
        _userInfo = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return CommonBgPage(
      child: SafeArea(
          bottom: false,
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              children: [
                const SizedBox(height: 5),
                mImgBg(imgName: ConstImg.mineTop),
                const SizedBox(height: 10),
                MineSectionView(title: 'PLAYER CARD', imgName: ConstImg.sectionBg2, paddingSpace: 16,
                  child: _userInfo==null ? null : _showUserInfo(),
                ),
                const SizedBox(height: 6),
                MineSectionView(title: 'GAME MENU', imgName: ConstImg.sectionBg1),
              ],
            ),
          )
      ),
    );
  }

  Widget _showUserInfo() {
    String _name = _userInfo!.givingName!.isEmpty || _userInfo!.givingName==''
        ? 'Visitor'
        : _userInfo!.givingName!;
    return Column(
      children: [
        Row(
          children: [
            _userInfo!.avator.isEmpty || _userInfo!.avator==''
                ? HelpImg.asset(ConstImg.defAvatar, width: 60)
                : HelpImg.asset(ConstImg.defAvatar),
            const SizedBox(width: 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 5),
                SkyText(text: _name, fontSize: 18, fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
                const SizedBox(height: 15),
                Row(
                  children: [
                    SkyText(text: _userInfo!.customerId,
                      fontSize: 10,
                      color: Colors.white.withAlpha(200),
                    ),
                    const SizedBox(width: 6),
                    HelpImg.asset(ConstImg.copy, width: 12),
                  ],
                ).addInkWell(onTap: () async {
                  // copy
                  if (_userInfo!.customerId.isEmpty) return;
                  await Clipboard.setData(ClipboardData(text: _userInfo!.customerId));
                  AppToast.showSuccess('ID is Copied!');
                }),
                const SizedBox(height: 10),
              ],
            )
          ],
        )
      ],
    );
  }

  Widget _buildHeader() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Column(
        children: [
          Row(
            children: [
              _DecorIcon(icon: Icons.forest, color: const Color(0xFFFF5454)),
              SizedBox(width: 10.w),
              Expanded(
                child: Container(
                  height: 60.h,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: const Color(0xFF16ED1E),
                    border: Border.all(color: CommonColor.black, width: 1.5.w),
                    boxShadow: const [
                      BoxShadow(color: Color(0xFF1C1E1F), offset: Offset(3, 3)),
                    ],
                  ),
                  child: RichText(
                    text: TextSpan(
                      style: TextStyle(
                        fontSize: 24.sp,
                        fontWeight: FontWeight.w900,
                        height: 1,
                        shadows: const [
                          Shadow(
                            color: Color(0xFF1C1E1F),
                            offset: Offset(2, 2),
                          ),
                        ],
                      ),
                      children: const [
                        TextSpan(
                          text: 'Profile ',
                          style: TextStyle(color: Color(0xFFFFDC4C)),
                        ),
                        TextSpan(
                          text: 'Menu',
                          style: TextStyle(color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              SizedBox(width: 10.w),
              _DecorIcon(icon: Icons.live_tv, color: const Color(0xFF8965FB)),
            ],
          ),
          SizedBox(height: 12.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(7, (index) {
              return Padding(
                padding: EdgeInsets.symmetric(horizontal: 3.w),
                child: Icon(
                  index < 4 ? Icons.favorite : Icons.question_mark,
                  size: index < 4 ? 18.w : 14.w,
                  color: index.isEven
                      ? const Color(0xFF1AF23A)
                      : const Color(0xFF653CFA),
                ),
              );
            }),
          ),
        ],
      ),
    );
  }

  Widget _buildPlayerCard() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: PixelPanel(
        color: CommonColor.primacyColor,
        shadowColor: CommonColor.black,
        padding: EdgeInsets.zero,
        child: Column(
          children: [
            const PixelSectionLabel(label: 'Player Card'),
            Padding(
              padding: EdgeInsets.all(16.w),
              child: Row(
                children: [
                  Container(
                    width: 68.w,
                    height: 68.w,
                    padding: EdgeInsets.all(4.w),
                    decoration: BoxDecoration(
                      color: const Color(0xFFE9C7FF),
                      border: Border.all(color: CommonColor.black, width: 1.w),
                    ),
                    child: Icon(
                      Icons.person_pin,
                      size: 42.w,
                      color: const Color(0xFF653CFA),
                    ),
                  ),
                  SizedBox(width: 15.w),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Vistor',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.sp,
                          fontWeight: FontWeight.w700,
                          height: 1,
                        ),
                      ),
                      SizedBox(height: 12.h),
                      Text(
                        'ID: 32432233341',
                        style: TextStyle(
                          color: Colors.white.withValues(alpha: 0.72),
                          fontSize: 10.sp,
                          height: 1,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildWalletShop() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Row(
        children: [
          Expanded(
            child: _SmallPanel(
              label: 'Treasure Wallet',
              child: Row(
                children: [
                  Icon(
                    Icons.inventory_2,
                    size: 70.w,
                    color: const Color(0xFFFFDC4C),
                  ),
                  SizedBox(width: 6.w),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        _WalletValue(label: 'Coins', value: '15,890'),
                        Divider(height: 8.h, color: Colors.white54),
                        _WalletValue(label: 'Bonus', value: '20,000'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(width: 10.w),
          Expanded(
            child: _SmallPanel(
              label: 'Item Shop',
              child: Row(
                children: [
                  Icon(
                    Icons.storefront,
                    size: 66.w,
                    color: const Color(0xFFFF8DB8),
                  ),
                  SizedBox(width: 7.w),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Get More\nCoins',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w600,
                            height: 1.1,
                          ),
                        ),
                        SizedBox(height: 14.h),
                        const PixelButton(
                          label: 'Store',
                          width: 70,
                          height: 20,
                          color: Color(0xFFFF88CF),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCheckpoint() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: PixelPanel(
        color: CommonColor.primacyColor,
        padding: EdgeInsets.zero,
        shadowColor: CommonColor.black,
        child: Column(
          children: [
            const PixelSectionLabel(label: 'Daily Checkpoint'),
            Padding(
              padding: EdgeInsets.fromLTRB(16.w, 10.h, 10.w, 10.h),
              child: Row(
                children: [
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: List.generate(7, (index) {
                        return _DayBox(day: index + 1, active: index == 0);
                      }),
                    ),
                  ),
                  SizedBox(width: 12.w),
                  const PixelButton(
                    label: 'Check In',
                    width: 70,
                    height: 22,
                    color: Color(0xFFFF88CF),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildGameMenu() {
    final items = const [
      _MenuItem('Log In', Icons.login),
      _MenuItem('Wallet', Icons.account_balance_wallet),
      _MenuItem('Language', Icons.public),
      _MenuItem('Feedback', Icons.mail),
      _MenuItem('Settings', Icons.settings),
      _MenuItem('About Us', Icons.info),
    ];

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: PixelPanel(
        color: CommonColor.primacyColor,
        padding: EdgeInsets.zero,
        shadowColor: CommonColor.black,
        child: Column(
          children: [
            const PixelSectionLabel(label: 'Game Menu'),
            Padding(
              padding: EdgeInsets.all(10.w),
              child: GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5,
                  mainAxisSpacing: 8.h,
                  crossAxisSpacing: 6.w,
                  childAspectRatio: 1,
                ),
                itemCount: items.length,
                itemBuilder: (context, index) => _MenuTile(item: items[index]),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SmallPanel extends StatelessWidget {
  const _SmallPanel({required this.label, required this.child});

  final String label;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return PixelPanel(
      color: CommonColor.primacyColor,
      shadowColor: CommonColor.black,
      padding: EdgeInsets.zero,
      child: SizedBox(
        height: 134.h,
        child: Column(
          children: [
            PixelSectionLabel(label: label),
            Expanded(
              child: Padding(padding: EdgeInsets.all(8.w), child: child),
            ),
          ],
        ),
      ),
    );
  }
}

class _WalletValue extends StatelessWidget {
  const _WalletValue({required this.label, required this.value});

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          label,
          style: TextStyle(color: Colors.white70, fontSize: 9.sp, height: 1),
        ),
        SizedBox(height: 2.h),
        Text(
          value,
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.sp,
            fontWeight: FontWeight.w900,
            height: 1,
          ),
        ),
      ],
    );
  }
}

class _DayBox extends StatelessWidget {
  const _DayBox({required this.day, required this.active});

  final int day;
  final bool active;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 28.w,
      height: 34.h,
      decoration: BoxDecoration(
        color: active ? const Color(0xFF91F473) : Colors.white,
        border: Border.all(color: CommonColor.black, width: 1.w),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Day', style: TextStyle(fontSize: 7.sp, height: 1)),
          SizedBox(height: 4.h),
          Text(
            '$day',
            style: TextStyle(
              fontSize: 14.sp,
              fontWeight: FontWeight.w800,
              height: 1,
            ),
          ),
        ],
      ),
    );
  }
}

class _MenuTile extends StatelessWidget {
  const _MenuTile({required this.item});

  final _MenuItem item;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(4.w, 4.h, 4.w, 6.h),
      decoration: BoxDecoration(
        color: const Color(0xFF8D62F7),
        border: Border.all(color: CommonColor.black, width: 1.w),
        boxShadow: const [
          BoxShadow(color: Color(0xFF1C1E1F), offset: Offset(2, 2)),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(item.icon, color: Colors.white, size: 25.w),
          SizedBox(height: 5.h),
          Text(
            item.label,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              color: Colors.white,
              fontSize: 8.sp,
              fontWeight: FontWeight.w700,
              height: 1,
            ),
          ),
        ],
      ),
    );
  }
}

class _DecorIcon extends StatelessWidget {
  const _DecorIcon({required this.icon, required this.color});

  final IconData icon;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50.w,
      height: 50.w,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: CommonColor.black, width: 1.w),
        boxShadow: const [
          BoxShadow(color: Color(0xFF1C1E1F), offset: Offset(2, 2)),
        ],
      ),
      child: Icon(icon, color: color, size: 32.w),
    );
  }
}

class _MenuItem {
  const _MenuItem(this.label, this.icon);

  final String label;
  final IconData icon;
}