import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gobang/controllers/game_controller.dart';
import 'package:gobang/themes/app_colors.dart';
import 'package:gobang/themes/black_theme_factory.dart';

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

  @override
  Widget build(BuildContext context) {
    final c = Get.find<GameController>();
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [AppColors.ink, AppColors.mist],
          ),
        ),
        child: SafeArea(
          child: Padding(
            padding: EdgeInsets.fromLTRB(24.w, 16.h, 24.w, 24.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    IconButton(
                      onPressed: Get.back,
                      icon: const Icon(Icons.arrow_back_ios_new_rounded,
                          color: AppColors.ivory),
                    ),
                    Text(
                      '设置 · 样式',
                      style: TextStyle(
                        color: AppColors.ivory,
                        fontSize: 26.sp,
                        fontWeight: FontWeight.w800,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 6.h),
                Text(
                  '主题 / 棋子 / 特效',
                  style: TextStyle(
                    color: AppColors.ivory.withValues(alpha: 0.7),
                    fontSize: 13.sp,
                  ),
                ),
                SizedBox(height: 20.h),
                Obx(() {
                  final isDark = c.themeFactory.value is BlackThemeFactory;
                  final circle = c.useCircle.value;
                  return Column(
                    children: [
                      _Card(
                        title: '主题色',
                        child: Row(
                          children: [
                            _Swatch(
                              color: AppColors.ink,
                              selected: !isDark,
                              onTap: () {
                                if (isDark) c.toggleTheme();
                              },
                            ),
                            SizedBox(width: 12.w),
                            _Swatch(
                              color: AppColors.darkBg,
                              selected: isDark,
                              onTap: () {
                                if (!isDark) c.toggleTheme();
                              },
                            ),
                            SizedBox(width: 12.w),
                            const _Swatch(color: AppColors.pumpkin),
                            SizedBox(width: 12.w),
                            const _Swatch(color: AppColors.inkMid),
                          ],
                        ),
                      ),
                      SizedBox(height: 14.h),
                      _Card(
                        title: '棋子形状',
                        child: Row(
                          children: [
                            _Chip(
                              label: '圆形',
                              selected: circle,
                              onTap: () {
                                if (!circle) c.toggleShape();
                              },
                            ),
                            SizedBox(width: 12.w),
                            _Chip(
                              label: '方形',
                              selected: !circle,
                              onTap: () {
                                if (circle) c.toggleShape();
                              },
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 14.h),
                      const _Card(
                        title: '动效',
                        child: Text(
                          '落子缩放 · 脉冲高亮 · 胜负弹窗',
                          style: TextStyle(
                            color: Color(0xFF5A736A),
                            fontSize: 13,
                          ),
                        ),
                      ),
                    ],
                  );
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _Card extends StatelessWidget {
  const _Card({required this.title, required this.child});

  final String title;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(18.w),
      decoration: BoxDecoration(
        color: AppColors.ivory,
        borderRadius: BorderRadius.circular(20.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              color: AppColors.ink,
              fontSize: 15.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
          SizedBox(height: 12.h),
          child,
        ],
      ),
    );
  }
}

class _Swatch extends StatelessWidget {
  const _Swatch({required this.color, this.selected = false, this.onTap});

  final Color color;
  final bool selected;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 36.w,
        height: 36.w,
        decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(
            color: selected ? AppColors.pumpkin : Colors.white54,
            width: selected ? 3 : 1,
          ),
        ),
      ),
    );
  }
}

class _Chip extends StatelessWidget {
  const _Chip({
    required this.label,
    required this.selected,
    required this.onTap,
  });

  final String label;
  final bool selected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h),
        decoration: BoxDecoration(
          color: selected ? AppColors.ink : AppColors.mist,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: selected ? AppColors.ivory : AppColors.ink,
            fontWeight: FontWeight.w600,
            fontSize: 13.sp,
          ),
        ),
      ),
    );
  }
}