import 'dart:io';

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

class PoetScreen extends StatefulWidget {
  final int selectedIndex;

  const PoetScreen({super.key, required this.selectedIndex});

  @override
  State<PoetScreen> createState() => _PoetScreenState();
}

class _PoetScreenState extends State<PoetScreen> with WidgetsBindingObserver {
  late String _backgroundImage;
  final AudioPlayer _audioPlayer = AudioPlayer();
  bool _isPlaying = false;
  Duration _duration = Duration.zero;
  Duration _position = Duration.zero;
  PlayerState? _playerState;
  late Source _source;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _setSystemUIOverlayStyle();

    _backgroundImage =
        'assets/images/subsets/Sub_${(widget.selectedIndex + 1).toString().padLeft(2, '0')}.webp';
    _source = AssetSource('audio/00${(widget.selectedIndex + 1).toString()}.wav');

    _audioPlayer.onPlayerStateChanged.listen((state) {
      if (mounted) {
        setState(() {
          _isPlaying = state == PlayerState.playing;
          _playerState = state;
        });
      }
      if (state == PlayerState.completed) {
        _audioPlayer.seek(Duration.zero);
        setState(() {
          _position = Duration.zero;
        });
      }
    });

    _audioPlayer.onDurationChanged.listen((newDuration) {
      if (mounted) {
        setState(() {
          _duration = newDuration;
        });
      }
    });

    _audioPlayer.onPositionChanged.listen((newPosition) {
      if (mounted) {
        setState(() {
          _position = newPosition;
        });
      }
    });

    _setAudio();
  }

  void _setSystemUIOverlayStyle() {
    if (Platform.isAndroid) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    }
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _setSystemUIOverlayStyle();
    }
  }

  Future<void> _setAudio() async {
    try {
      await _audioPlayer.setSource(_source);
    } catch (e) {
      // Handle error, e.g., show a snackbar
      print("Error setting audio source: $e");
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    if (Platform.isAndroid) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    }
    _audioPlayer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 배경 이미지
          Positioned.fill(
            child: Image.asset(
              _backgroundImage,
              fit: BoxFit.cover,
            ),
          ),

          // 메인 콘텐츠
          SafeArea(
            child: Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  // 상단 바 (뒤로가기, 제목, 새로고침)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      _buildCircularImageButton('assets/images/ui/UI_Back.webp', () {
                        // 이 버튼을 누르면 이전 화면으로 돌아갑니다.
                        Navigator.pop(context);
                      }, size: 50, imageSize: 25),
                      _buildCircularImageButton('assets/images/ui/UI_Replay.webp', () {
                        // Refresh action here
                      }, size: 50, imageSize: 25),
                    ],
                  ),


                  // 하단 음악 제어
                  _buildMusicControls(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMusicControls() {
    return Column(
      children: [
        Slider(
          min: 0,
          max: _duration.inSeconds.toDouble(),
          value: _position.inSeconds.toDouble(),
          onChanged: (value) async {
            final position = Duration(seconds: value.toInt());
            await _audioPlayer.seek(position);
          },
          activeColor: const Color(0xFFF07B41),
          inactiveColor: Colors.grey,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(_formatDuration(_position)),
              Text(_formatDuration(_duration - _position)),
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildCircularImageButton('assets/images/ui/UI_5minus.webp', () {
              final newPosition = _position - const Duration(seconds: 5);
              _audioPlayer.seek(newPosition > Duration.zero ? newPosition : Duration.zero);
            }),
            const SizedBox(width: 16),
            _buildPlayPauseButton(),
            const SizedBox(width: 16),
            _buildCircularImageButton('assets/images/ui/UI_5plus.webp', () {
              final newPosition = _position + const Duration(seconds: 5);
              _audioPlayer.seek(newPosition < _duration ? newPosition : _duration);
            }),
          ],
        ),
      ],
    );
  }

  Widget _buildPlayPauseButton() {
    return GestureDetector(
      onTap: () {
        if (_isPlaying) {
          _audioPlayer.pause();
        } else {
          if (_playerState == PlayerState.completed) {
            _audioPlayer.play(_source);
          } else {
            _audioPlayer.resume();
          }
        }
      },
      child: Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          color: const Color(0xFFF07B41),
          shape: BoxShape.circle,
          border: Border.all(color: Colors.white, width: 2),
        ),
        child: Center(
          child: _isPlaying
              ? const Icon(Icons.pause, color: Colors.white, size: 50)
              : Image.asset(
                  'assets/images/ui/UI_Play.webp',
                  width: 50,
                  height: 50,
                ),
        ),
      ),
    );
  }

  Widget _buildCircularImageButton(String imagePath, VoidCallback onPressed, {double size = 80, double imageSize = 50}) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          color: const Color(0xFFF07B41),
          shape: BoxShape.circle,
          border: Border.all(color: Colors.white, width: 2),
        ),
        child: Center(
          child: Image.asset(
            imagePath,
            width: imageSize,
            height: imageSize,
          ),
        ),
      ),
    );
  }

  String _formatDuration(Duration duration) {
    String twoDigits(int n) => n.toString().padLeft(2, '0');
    final hours = twoDigits(duration.inHours);
    final minutes = twoDigits(duration.inMinutes.remainder(60));
    final seconds = twoDigits(duration.inSeconds.remainder(60));
    return [
      if (duration.inHours > 0) hours,
      minutes,
      seconds,
    ].join(':');
  }

  
}
