import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'alternative_draw_animations.dart';

class DrawAnimationSelector extends StatefulWidget {
  final List<Map<String, dynamic>> members;
  final Function(String winnerId) onDrawComplete;
  final String? serverSeed;
  final String? clientSeed;
  final int? nonce;
  final Duration animationDuration;

  const DrawAnimationSelector({
    super.key,
    required this.members,
    required this.onDrawComplete,
    this.serverSeed,
    this.clientSeed,
    this.nonce,
    this.animationDuration = const Duration(seconds: 4),
  });

  @override
  State<DrawAnimationSelector> createState() => _DrawAnimationSelectorState();
}

class _DrawAnimationSelectorState extends State<DrawAnimationSelector> {
  bool _isDrawStarted = false;

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

  void _startDraw() {
    setState(() {
      _isDrawStarted = true;
    });
  }

  void _resetDraw() {
    setState(() {
      _isDrawStarted = false;
    });
  }

  Widget _buildAnimationSelector() {
    return Container(
      padding: EdgeInsets.all(24.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10.r,
            offset: Offset(0, 5.h),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 72.w,
            height: 72.w,
            decoration: BoxDecoration(
              color: Colors.purple.shade50,
              borderRadius: BorderRadius.circular(20.r),
            ),
            child: Icon(
              Icons.casino,
              color: Colors.purple.shade600,
              size: 36.w,
            ),
          ),
          SizedBox(height: 16.h),
          Text(
            'Slot Machine Draw',
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.w700,
              color: Colors.grey.shade800,
            ),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 12.h),
          Text(
            'Our signature animation for dramatic, high-energy winner reveals.',
            style: TextStyle(
              fontSize: 14.sp,
              color: Colors.grey.shade600,
              height: 1.4,
            ),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 16.h),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h),
            decoration: BoxDecoration(
              color: Colors.purple.shade50,
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Text(
              'Members in draw: ${widget.members.length}',
              style: TextStyle(
                fontSize: 13.sp,
                fontWeight: FontWeight.w600,
                color: Colors.purple.shade600,
              ),
            ),
          ),
          SizedBox(height: 24.h),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: _startDraw,
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.purple.shade600,
                foregroundColor: Colors.white,
                padding: EdgeInsets.symmetric(vertical: 16.h),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.r),
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.play_arrow, size: 20.w),
                  SizedBox(width: 8.w),
                  Text(
                    'Start Slot Machine',
                    style: TextStyle(fontSize: 16.sp),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400.w,
      child: Column(
        children: [
          if (!_isDrawStarted) _buildAnimationSelector(),
          if (_isDrawStarted) ...[
            SlotMachineDrawAnimation(
              members: widget.members,
              onDrawComplete: widget.onDrawComplete,
              serverSeed: widget.serverSeed,
              clientSeed: widget.clientSeed,
              nonce: widget.nonce,
              animationDuration: widget.animationDuration,
            ),
            SizedBox(height: 20.h),
            SizedBox(
              width: double.infinity,
              child: OutlinedButton(
                onPressed: _resetDraw,
                style: OutlinedButton.styleFrom(
                  padding: EdgeInsets.symmetric(vertical: 12.h),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(8.r),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.refresh, size: 18.w, color: Colors.purple.shade600),
                    SizedBox(width: 6.w),
                    Text(
                      'Spin Again',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w600,
                        color: Colors.purple.shade600,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ],
      ),
    );
  }
}