import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.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> {
  late String _backgroundImage;
  final AudioPlayer _audioPlayer = AudioPlayer();
  bool _isPlaying = false;
  Duration _duration = Duration.zero;
  Duration _position = Duration.zero;

  @override
  void initState() {
    super.initState();
    _backgroundImage =
        'assets/images/00${(widget.selectedIndex + 1).toString()}.jpg';

    _audioPlayer.onPlayerStateChanged.listen((state) {
      if (mounted) {
        setState(() {
          _isPlaying = state == PlayerState.playing;
        });
      }
    });

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

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

    _setAudio();
  }

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

  @override
  void dispose() {
    _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(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  // 상단 바 (뒤로가기, 제목, 새로고침)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        onPressed: () {
                          // 이 버튼을 누르면 이전 화면으로 돌아갑니다.
                          Navigator.pop(context);
                        },
                        icon: const Icon(Icons.arrow_back, color: Colors.black),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(Icons.refresh, color: Colors.black),
                      ),
                    ],
                  ),
                  const SizedBox(height: 32),

                  // 시 제목
                  const Text(
                    '별을 보며',
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                    textAlign: TextAlign.left,
                  ),
                  const SizedBox(height: 16),

                  // 시 본문
                  const Text(
                    '내 너무 별을 쳐다보아\n별들은 더럽히지 않았을까.\n\n내 너무 하늘을 쳐다보아\n하늘은 더럽히지 않았을까.\n\n별아, 어찌하라.\n이 세상 무엇을 쳐다보리.\n\nH 흔들리며 흔들리며 걸어가던 거리\n영망으로 술에 취해 쓰러지던 골목에서\n\n바라보며 너 눈물 같은 빛남\n가슴 어지러움 황홀히 헹구어 비치는\n이 찬란함마저 가질 수 없다면\n나는 무엇으로 가난하라.\n\n- 시집 『나의 나무가 너의 나무에게』, 오상사, 1985년',
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black87,
                      height: 1.5,
                    ),
                  ),
                  const SizedBox(height: 48),

                  // 추천의 글 박스
                  Container(
                    padding: const EdgeInsets.all(20.0),
                    decoration: BoxDecoration(
                      color: const Color(0xFFF07B41).withOpacity(0.3),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: const Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '추천의 글',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                        ),
                        SizedBox(height: 8),
                        Text(
                          '밤하늘과 별을 통해 우주와 상호 교감하며 시인으로서 끊임없는\n창작 열정, 내재적 갈등을 보여주는 작품으로 팍팍한 삶의 위로\n가 되는 이성선적 서정의 대표작입니다.',
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.black87,
                            height: 1.4,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const Spacer(), // Use Spacer to push controls to the bottom

                  // 하단 음악 제어
                  _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: [
            _buildCircularButton(Icons.replay_5, () {
              final newPosition = _position - const Duration(seconds: 5);
              _audioPlayer.seek(newPosition > Duration.zero ? newPosition : Duration.zero);
            }),
            const SizedBox(width: 16),
            _buildCircularButton(_isPlaying ? Icons.pause : Icons.play_arrow, () {
              if (_isPlaying) {
                _audioPlayer.pause();
              } else {
                _audioPlayer.resume();
              }
            }),
            const SizedBox(width: 16),
            _buildCircularButton(Icons.forward_5, () {
              final newPosition = _position + const Duration(seconds: 5);
              _audioPlayer.seek(newPosition < _duration ? newPosition : _duration);
            }),
          ],
        ),
      ],
    );
  }

  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(':');
  }

  // 원형 버튼을 만드는 헬퍼 함수
  Widget _buildCircularButton(IconData icon, VoidCallback onPressed) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: const Color(0xFFF07B41),
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white, width: 2),
      ),
      child: IconButton(
        onPressed: onPressed,
        icon: Icon(icon, color: Colors.white),
        iconSize: 30,
      ),
    );
  }
}