import 'package:flutter/material.dart';
import '../models/prank_sound.dart';
import '../managers/sound_manager.dart';

class BigPlayerPanel extends StatelessWidget {
  final Color themeColor;
  final double bottomOffset;

  const BigPlayerPanel({
    super.key,
    this.themeColor = const Color(0xFF6C63FF),
    this.bottomOffset = 30.0,
  });

  @override
  Widget build(BuildContext context) {
    final manager = SoundManager();

    return ValueListenableBuilder<PrankSound?>(
      valueListenable: manager.currentSoundNotifier,
      builder: (context, currentSound, child) {
        if (currentSound == null) return const SizedBox.shrink();

        return AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          margin: EdgeInsets.fromLTRB(16, 0, 16, bottomOffset),
          padding: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(32),
            boxShadow: [
              BoxShadow(
                color: themeColor.withOpacity(0.2),
                blurRadius: 30,
                offset: const Offset(0, 10),
                spreadRadius: 0,
              ),
            ],
            border: Border.all(color: Colors.white, width: 1),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 1. Title & Close
              Row(
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      color: themeColor.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Icon(Icons.music_note_rounded, color: themeColor, size: 28),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          currentSound.title,
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18,
                            color: Color(0xFF1D1D35),
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        const SizedBox(height: 4),
                        const Text('Now Playing', style: TextStyle(color: Colors.grey, fontSize: 12)),
                      ],
                    ),
                  ),
                  IconButton(
                    onPressed: manager.stop,
                    icon: const Icon(Icons.keyboard_arrow_down_rounded, size: 30, color: Colors.grey),
                  )
                ],
              ),
              const SizedBox(height: 20),

              // 2. Progress Bar
              ValueListenableBuilder<Duration>(
                valueListenable: manager.positionNotifier,
                builder: (context, position, _) {
                  final duration = manager.durationNotifier.value;
                  double progress = 0.0;
                  if (duration.inMilliseconds > 0) {
                    progress = position.inMilliseconds / duration.inMilliseconds;
                    if (progress > 1.0) progress = 1.0;
                  }

                  return Column(
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: LinearProgressIndicator(
                          value: progress,
                          backgroundColor: Colors.grey[100],
                          valueColor: AlwaysStoppedAnimation<Color>(themeColor),
                          minHeight: 8,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(_formatDuration(position), style: TextStyle(color: Colors.grey[400], fontSize: 12, fontWeight: FontWeight.bold)),
                          Text(_formatDuration(duration), style: TextStyle(color: Colors.grey[400], fontSize: 12, fontWeight: FontWeight.bold)),
                        ],
                      )
                    ],
                  );
                },
              ),
              const SizedBox(height: 10),

              // 3. Controls (Only Play/Pause as requested)
              Center(
                child: ValueListenableBuilder<bool>(
                  valueListenable: manager.isPlayingNotifier,
                  builder: (context, isPlaying, _) {
                    return GestureDetector(
                      onTap: () => manager.play(currentSound),
                      child: Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                          color: themeColor,
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(
                              color: themeColor.withOpacity(0.4),
                              blurRadius: 20,
                              offset: const Offset(0, 10),
                            )
                          ],
                        ),
                        child: Icon(
                          isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
                          color: Colors.white,
                          size: 38,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, "0");
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    return "$twoDigitMinutes:$twoDigitSeconds";
  }
}