// lib/widgets/full_player_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';

class FullPlayerPage extends StatelessWidget {
  const FullPlayerPage({super.key});

  @override
  Widget build(BuildContext context) {
    final service = context.watch<AudioService>();
    final song = service.currentSong!;

    return Scaffold(
      backgroundColor: const Color(0xFF0E1211),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new),
          onPressed: () => Navigator.pop(context),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.playlist_play_outlined),
            onPressed: () {},
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 280,
              height: 280,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: const Color(0xFF2A3332),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xFF7C9A9E).withOpacity(0.2),
                    blurRadius: 60,
                    spreadRadius: 10,
                  ),
                ],
              ),
              child:
                  const Icon(Icons.music_note, size: 80, color: Colors.white24),
            ),
            const SizedBox(height: 60),
            Text(
              song.title,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 8),
            Text(
              song.artist,
              style: TextStyle(fontSize: 16, color: Colors.grey[400]),
            ),
            const SizedBox(height: 40),
            Slider(
              value: 0.3,
              onChanged: (v) {},
              activeColor: const Color(0xFFB8D4D0),
              inactiveColor: Colors.grey[800],
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.skip_previous, size: 32),
                  color: Colors.white60,
                ),
                const SizedBox(width: 20),
                CircleAvatar(
                  radius: 32,
                  backgroundColor: const Color(0xFF7C9A9E),
                  child: IconButton(
                    icon: Icon(
                      service.isPlaying ? Icons.pause : Icons.play_arrow,
                      color: Colors.black87,
                      size: 32,
                    ),
                    onPressed: () => context.read<AudioService>().togglePlay(),
                  ),
                ),
                const SizedBox(width: 20),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.skip_next, size: 32),
                  color: Colors.white60,
                ),
              ],
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.volume_up_outlined),
                  color: Colors.white38,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}