import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gobang/components/game_action_bar.dart';
import 'package:gobang/components/game_status_text.dart';
import 'package:gobang/controllers/game_controller.dart';
import 'package:gobang/routes/app_routes.dart';
import 'package:gobang/themes/app_colors.dart';
import 'package:gobang/widgets/gobang_board.dart';

class HomePage extends GetView<GameController> {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final theme = controller.themeFactory.value.getTheme();
      final _ = controller.useCircle.value;
      final boardSize = (1.sw * 0.82).clamp(0.0, 1.sh * 0.52);
      final isDark = theme.isDark;

      return Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          foregroundColor: AppColors.ivory,
          title: Text(
            '南瓜五子棋',
            style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 22.sp,
              letterSpacing: 0.6,
            ),
          ),
          actions: [
            _GlassIconButton(
              onPressed: controller.toggleTheme,
              icon: controller.currentLight,
            ),
            _GlassIconButton(
              onPressed: controller.toggleShape,
              icon: controller.currentShape,
            ),
            _GlassIconButton(
              onPressed: () => Get.toNamed(AppRoutes.settings),
              icon: const Icon(Icons.tune_rounded, color: AppColors.ivory),
            ),
            SizedBox(width: 8.w),
          ],
        ),
        body: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: theme.gradient,
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0, 0.42, 1],
            ),
          ),
          child: SafeArea(
            child: SingleChildScrollView(
              padding: EdgeInsets.fromLTRB(20.w, 8.h, 20.w, 24.h),
              child: Column(
                children: [
                  const GameStatusText(),
                  SizedBox(height: 20.h),
                  Container(
                    padding: EdgeInsets.all(16.w),
                    decoration: BoxDecoration(
                      color: isDark ? AppColors.darkSurface : AppColors.ivory,
                      borderRadius: BorderRadius.circular(24.r),
                      boxShadow: [
                        BoxShadow(
                          color: AppColors.ink.withValues(alpha: 0.28),
                          blurRadius: 28,
                          offset: const Offset(0, 12),
                          spreadRadius: -4,
                        ),
                      ],
                    ),
                    child: GobangBoard(size: boardSize.toDouble()),
                  ),
                  SizedBox(height: 20.h),
                  const GameActionBar(),
                  SizedBox(height: 12.h),
                  Text(
                    '你执白 · AI 执黑',
                    style: TextStyle(
                      color: isDark
                          ? AppColors.muted
                          : AppColors.muted.withValues(alpha: 0.9),
                      fontSize: 12.sp,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    });
  }
}

class _GlassIconButton extends StatelessWidget {
  const _GlassIconButton({required this.onPressed, required this.icon});

  final VoidCallback onPressed;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 2.w),
      child: Material(
        color: Colors.white.withValues(alpha: 0.18),
        borderRadius: BorderRadius.circular(12.r),
        child: InkWell(
          onTap: onPressed,
          borderRadius: BorderRadius.circular(12.r),
          child: SizedBox(
            width: 40.w,
            height: 40.w,
            child: Center(child: icon),
          ),
        ),
      ),
    );
  }
}