import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class VoicemailPage extends StatefulWidget {
  const VoicemailPage({Key? key}) : super(key: key);

  @override
  State<VoicemailPage> createState() => _VoicemailPageState();
}

class _VoicemailPageState extends State<VoicemailPage> {
  bool _expanded = false;
  bool _isPlaying = false;
  Duration _duration = Duration.zero;
  Duration _position = Duration.zero;
  late AudioPlayer _audioPlayer;

  @override
  void initState() {
    super.initState();
    _audioPlayer = AudioPlayer();
    _audioPlayer.onDurationChanged.listen((Duration d) {
      setState(() => _duration = d);
    });
    _audioPlayer.onPositionChanged.listen((Duration p) {
      setState(() => _position = p);
    });
    _audioPlayer.onPlayerComplete.listen((event) {
      setState(() {
        _isPlaying = false;
        _position = Duration.zero;
      });
    });
  }

  Future<void> _togglePlayPause() async {
    if (_isPlaying) {
      await _audioPlayer.pause();
    } else {
      await _audioPlayer.play(UrlSource('voicemail.mp3'));
    }
    setState(() => _isPlaying = !_isPlaying);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      // appBar: AppBar(
      //   // title: const Text('Voicemail'),
      //   backgroundColor: Colors.black,
      // ),
      body: ListView(
        children: [
          GestureDetector(
            onTap: () {
              setState(() {
                _expanded = !_expanded;
              });
            },
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              margin: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: const Color.fromARGB(255, 30, 30, 30),
                borderRadius: BorderRadius.circular(12.0),
              ),
              padding: const EdgeInsets.all(16),
              child: _expanded
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            const CircleAvatar(
                              radius: 28,
                                backgroundColor: Colors.amber,
                                child: Text(
                                  "JD",
                                  style: TextStyle(
                                    color: Colors.deepOrange,
                                    fontSize: 28,
                                  ),
                                ),
                            ),
                            const SizedBox(width: 12),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: const [
                                Text(
                                  'John Doe',
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  'Wed 3:00 PM - 1:20 min',
                                  style: TextStyle(color: Colors.grey),
                                ),
                              ],
                            ),
                          ],
                        ),
                        const SizedBox(height: 16),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            IconButton(
                              icon: Icon(
                                _isPlaying ? Icons.pause : Icons.play_arrow,
                                color: Colors.white,
                              ),
                              onPressed: _togglePlayPause,
                            ),
                            SizedBox(
                              width: 200,
                              child: Slider(
                                min: 0,
                                max: _duration.inSeconds.toDouble(),
                                value: _position.inSeconds.toDouble(),
                                onChanged: (value) async {
                                  final newPos = Duration(seconds: value.toInt());
                                  await _audioPlayer.seek(newPos);
                                },
                                activeColor: Colors.blue,
                                inactiveColor: Colors.grey,
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(height: 16),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: const [
                                Icon(Icons.call, color: Colors.green),
                                SizedBox(width: 8),
                                Text('Call', style: TextStyle(color: Colors.white)),
                              ],
                            ),
                            const SizedBox(height: 12),
                            Row(
                              children: const [
                                Icon(Icons.message, color: Colors.blue),
                                SizedBox(width: 8),
                                Text('Text', style: TextStyle(color: Colors.white)),
                              ],
                            ),
                            const SizedBox(height: 12),
                            Row(
                              children: const [
                                Icon(Icons.block, color: Colors.red),
                                SizedBox(width: 8),
                                Text('Block', style: TextStyle(color: Colors.white)),
                              ],
                            ),
                            const SizedBox(height: 12),
                            Row(
                              children: const [
                                Icon(Icons.share, color: Colors.white),
                                SizedBox(width: 8),
                                Text('Share', style: TextStyle(color: Colors.white)),
                              ],
                            ),
                          ],
                        ),
                      ],
                    )
                  : Row(
                      children: [
                        const CircleAvatar(
                          radius: 28,
                          backgroundColor: Colors.amber,
                          child: Text(
                            "JD",
                            style: TextStyle(
                              color: Colors.deepOrange,
                              fontSize: 28,
                            ),
                          ),
                        ),
                        const SizedBox(width: 12),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: const [
                            Text(
                              'John Doe',
                              style: TextStyle(color: Colors.white),
                            ),
                            Text(
                              'Wed 3:00 PM - 1:20 min',
                              style: TextStyle(color: Colors.grey),
                            ),
                          ],
                        ),
                      ],
                    ),
            ),
          ),
        ],
      ),
    );
  }
}