import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:math' as math;

class TemperatureControlBlock extends StatefulWidget {
  final bool isOn;
  final int targetTemperature;
  final int currentTemperature;
  final int minTemperature;
  final int maxTemperature;
  final Function(bool) onTogglePower;
  final VoidCallback onIncreaseTemperature;
  final VoidCallback onDecreaseTemperature;

  const TemperatureControlBlock({
    super.key,
    required this.isOn,
    required this.targetTemperature,
    required this.currentTemperature,
    required this.minTemperature,
    required this.maxTemperature,
    required this.onTogglePower,
    required this.onIncreaseTemperature,
    required this.onDecreaseTemperature,
  });

  @override
  State<TemperatureControlBlock> createState() =>
      _TemperatureControlBlockState();
}

class _TemperatureControlBlockState extends State<TemperatureControlBlock>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    final progress = (widget.targetTemperature - widget.minTemperature) /
        (widget.maxTemperature - widget.minTemperature);

    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 20.w),
      child: Column(
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: Padding(
              padding: EdgeInsets.only(right: 20.w),
              child: _buildPowerSwitch(),
            ),
          ),
          SizedBox(height: 20.h),
          _buildCircularTemperatureControl(progress),
          SizedBox(height: 40.h),
          _buildControlButtons(),
        ],
      ),
    );
  }

  Widget _buildPowerSwitch() {
    return GestureDetector(
      onTap: () => widget.onTogglePower(!widget.isOn),
      child: Container(
        width: 88.w,
        height: 48.h,
        decoration: BoxDecoration(
          gradient: widget.isOn
              ? const LinearGradient(
                  colors: [
                    Color.fromRGBO(96, 165, 250, 1),
                    Color.fromRGBO(59, 130, 246, 1),
                  ],
                )
              : const LinearGradient(
                  colors: [
                    Color.fromRGBO(209, 213, 219, 1),
                    Color.fromRGBO(156, 163, 175, 1),
                  ],
                ),
          borderRadius: BorderRadius.circular(24.r),
        ),
        child: Stack(
          children: [
            AnimatedAlign(
              duration: const Duration(milliseconds: 200),
              alignment: widget.isOn ? Alignment.centerRight : Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 4.w),
                child: Container(
                  width: 40.w,
                  height: 40.h,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.1),
                        blurRadius: 4,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCircularTemperatureControl(double progress) {
    final size = 400.w;
    final center = size / 2;
    final radius = size / 2 - 20;
    
    // 计算小圆点的位置 - 从顶部开始逆时针旋转
    final angle = -math.pi / 2 + (2 * math.pi * progress);
    final dotX = center + radius * math.cos(angle);
    final dotY = center + radius * math.sin(angle);

    return SizedBox(
      width: size,
      height: size,
      child: Stack(
        children: [
          CustomPaint(
            size: Size(size, size),
            painter: _CircularProgressPainter(
              progress: progress,
              isOn: widget.isOn,
            ),
          ),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '${widget.targetTemperature}',
                  style: TextStyle(
                    fontSize: 100.sp,
                    fontWeight: FontWeight.w500,
                    color: widget.isOn
                        ? const Color.fromRGBO(37, 99, 235, 1)
                        : const Color.fromRGBO(209, 213, 219, 1),
                  ),
                ),
                SizedBox(height: 8.h),
                Text(
                  '°C',
                  style: TextStyle(
                    fontSize: 48.sp,
                    fontWeight: FontWeight.w400,
                    color: widget.isOn
                        ? const Color.fromRGBO(59, 130, 246, 1)
                        : const Color.fromRGBO(209, 213, 219, 1),
                  ),
                ),
                SizedBox(height: 20.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '当前室温 ',
                      style: TextStyle(
                        fontSize: 28.sp,
                        color: const Color.fromRGBO(156, 163, 175, 1),
                      ),
                    ),
                    Text(
                      '${widget.currentTemperature}°C',
                      style: TextStyle(
                        fontSize: 28.sp,
                        color: const Color.fromRGBO(107, 114, 128, 1),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          AnimatedPositioned(
            duration: const Duration(milliseconds: 200),
            left: dotX - 32.w,
            top: dotY - 32.w,
            child: Container(
              width: 64.w,
              height: 64.w,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(37, 99, 235, 1),
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: const Color.fromRGBO(37, 99, 235, 0.3),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Center(
                child: Container(
                  width: 20.w,
                  height: 20.w,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildControlButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: widget.onDecreaseTemperature,
          child: Container(
            width: 140.w,
            height: 120.h,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(229, 231, 235, 1),
              borderRadius: BorderRadius.circular(40.r),
            ),
            child: Icon(
              Icons.remove,
              size: 48.sp,
              color: const Color.fromRGBO(107, 114, 128, 1),
            ),
          ),
        ),
        SizedBox(width: 40.w),
        Text(
          '温度调节',
          style: TextStyle(
            fontSize: 32.sp,
            color: const Color.fromRGBO(107, 114, 128, 1),
          ),
        ),
        SizedBox(width: 40.w),
        GestureDetector(
          onTap: widget.onIncreaseTemperature,
          child: Container(
            width: 140.w,
            height: 120.h,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(229, 231, 235, 1),
              borderRadius: BorderRadius.circular(40.r),
            ),
            child: Icon(
              Icons.add,
              size: 48.sp,
              color: const Color.fromRGBO(107, 114, 128, 1),
            ),
          ),
        ),
      ],
    );
  }
}

class _CircularProgressPainter extends CustomPainter {
  final double progress;
  final bool isOn;

  _CircularProgressPainter({required this.progress, required this.isOn});

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - 20;

    final backgroundPaint = Paint()
      ..color = const Color.fromRGBO(219, 234, 254, 1)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 40.w
      ..strokeCap = StrokeCap.round;

    final foregroundPaint = Paint()
      ..shader = isOn
          ? const LinearGradient(
              colors: [
                Color.fromRGBO(96, 165, 250, 1),
                Color.fromRGBO(59, 130, 246, 1),
              ],
            ).createShader(Rect.fromCircle(center: center, radius: radius))
          : const LinearGradient(
              colors: [
                Color.fromRGBO(209, 213, 219, 1),
                Color.fromRGBO(209, 213, 219, 1),
              ],
            ).createShader(Rect.fromCircle(center: center, radius: radius))
      ..style = PaintingStyle.stroke
      ..strokeWidth = 40.w
      ..strokeCap = StrokeCap.round;

    canvas.drawCircle(center, radius, backgroundPaint);

    final startAngle = -math.pi / 2;
    final sweepAngle = 2 * math.pi * progress;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      startAngle,
      sweepAngle,
      false,
      foregroundPaint,
    );
  }

  @override
  bool shouldRepaint(covariant _CircularProgressPainter oldDelegate) {
    return oldDelegate.progress != progress || oldDelegate.isOn != isOn;
  }
}
