// packages/feature_game_sequence/lib/widgets/sequence_button_widget.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/sequence_models.dart';
import '../controllers/sequence_game_controller.dart'; 

class SequenceButtonWidget extends StatelessWidget {
  final SequenceButtonId id;
  final VoidCallback? onTap;

  const SequenceButtonWidget({
    super.key,
    required this.id,
    this.onTap,
  });

  Color _getButtonColor() {
    switch (id) {
      case SequenceButtonId.btn0: return Colors.green.shade400;
      case SequenceButtonId.btn1: return Colors.red.shade400;
      case SequenceButtonId.btn2: return Colors.blue.shade400;
      case SequenceButtonId.btn3: return Colors.yellow.shade400;
      case SequenceButtonId.btn4: return Colors.purple.shade400;
      case SequenceButtonId.btn5: return Colors.orange.shade400;
      case SequenceButtonId.btn6: return Colors.teal.shade400;
      case SequenceButtonId.btn7: return Colors.pink.shade400;
      case SequenceButtonId.btn8: return Colors.indigo.shade400;
      case SequenceButtonId.btn9: return Colors.cyan.shade400;
      default: return Colors.grey;
    }
  }

  @override
  Widget build(BuildContext context) {
    final controller = context.watch<SequenceGameController>();
    final isInputPhase = controller.currentState == SequenceGameState.input;

    final bool isActive = 
        controller.activePresentationId == id || 
        (isInputPhase && controller.userInput.lastOrNull == id); 
    
    final String buttonSymbol = controller.getSymbolForId(id);

    final Color baseColor = _getButtonColor();
    final Color activeColor = baseColor.withOpacity(1.0).withAlpha(255);
    final Color inactiveColor = baseColor.withOpacity(onTap == null ? 0.4 : 0.8);

    return GestureDetector(
      onTap: onTap,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 100),
        curve: Curves.easeOut,
        decoration: BoxDecoration(
          color: isActive ? activeColor : inactiveColor,
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
              color: isActive ? Colors.white : Colors.transparent, 
              width: isActive ? 4 : 0
          ),
          boxShadow: isActive
              ? [BoxShadow(color: activeColor.withOpacity(0.8), blurRadius: 10, offset: const Offset(0, 0))]
              : [const BoxShadow(color: Colors.black26, blurRadius: 4, offset: Offset(2, 2))],
        ),
        child: Center(
          // 🔽 [🔥 수정] FittedBox를 사용하여 텍스트 크기 자동 조절 (단어 대응)
          child: Padding(
            padding: const EdgeInsets.all(4.0),
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(
                buttonSymbol,
                style: const TextStyle(
                  fontSize: 28, // 기본 폰트 크기
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}