import 'package:flutter/material.dart';
import 'package:lba/res/colors.dart';

class RecordingIndicator extends StatelessWidget {
  final String formattedDuration;

  const RecordingIndicator({
    super.key,
    required this.formattedDuration,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      key: const ValueKey('recording_indicator'),
      padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
        decoration: BoxDecoration(
          color: AppColors.errorColor.withOpacity(0.1),
          borderRadius: BorderRadius.circular(20),
          border: Border.all(color: AppColors.errorColor.withOpacity(0.3)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              width: 12,
              height: 12,
              decoration: BoxDecoration(
                color: AppColors.errorColor,
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: AppColors.errorColor.withOpacity(0.5),
                    blurRadius: 8,
                    spreadRadius: 2,
                  ),
                ],
              ),
            ),
            const SizedBox(width: 12),
            Icon(
              Icons.mic,
              color: AppColors.errorColor,
              size: 20,
            ),
            const SizedBox(width: 8),
            Text(
              'Recording... $formattedDuration',
              style: TextStyle(
                color: AppColors.errorColor,
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
            ),
            const SizedBox(width: 12),
            const RecordingPulseAnimation(),
          ],
        ),
      ),
    );
  }
}

class RecordingPulseAnimation extends StatefulWidget {
  const RecordingPulseAnimation({super.key});

  @override
  _RecordingPulseAnimationState createState() =>
      _RecordingPulseAnimationState();
}

class _RecordingPulseAnimationState extends State<RecordingPulseAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(
      begin: 0.5,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Row(
          children: List.generate(3, (index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 1),
              child: AnimatedContainer(
                duration: Duration(milliseconds: 200 + (index * 100)),
                height: 16 * _animation.value,
                width: 3,
                decoration: BoxDecoration(
                  color: AppColors.errorColor.withOpacity(_animation.value),
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
            );
          }),
        );
      },
    );
  }
}