MTMusic/lib/view/song_recommendation_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'dart:math' as math;
import '../api/api_music_rank.dart';
import '../common_widget/app_data.dart';
import '../models/getRank_bean.dart';
import '../common_widget/Song_widegt.dart';
import 'music_view.dart'; // 导入MusicView
import 'package:music_player_miao/common_widget/app_data.dart';
import '../common/download_manager.dart';
import '../models/getRank_bean.dart';
import '../view_model/rank_view_model.dart';
import 'music_view.dart';
import '../common_widget/Song_widegt.dart';
import '../api/api_collection.dart';
import '../api/api_music_likes.dart';
import '../api/api_music_list.dart';
import '../models/universal_bean.dart';
import 'comment_view.dart';

class SongRecommendationView extends StatefulWidget {
  const SongRecommendationView({super.key});

  @override
  State<SongRecommendationView> createState() => _SongRecommendationViewState();
}

class _SongRecommendationViewState extends State<SongRecommendationView> with TickerProviderStateMixin {
  bool isLoading = false;
  List rankNames = [];
  List rankSingerName = [];
  List rankCoverPath = [];
  List rankMusicPath = [];
  List<double> relevanceValues = [];
  List<Song> songs = [];
  final downloadManager = Get.put(DownloadManager());
  late AnimationController _animationController;
  late List<Animation<double>> _circleFadeInAnimations;
  late List<AnimationController> _dotAnimationControllers;

  @override
  void initState() {
    super.initState();
    _loadRecommendedSongs();

    _animationController = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _circleFadeInAnimations = [];
    _dotAnimationControllers = [];
  }

  Future<void> _loadRecommendedSongs() async {
    setState(() {
      isLoading = true;
    });

    try {
      RankBean bean2 = await GetRank().getRank(Authorization: AppData().currentToken);
      if (bean2.code != 200) return;

      rankNames.clear();
      rankSingerName.clear();
      rankCoverPath.clear();
      rankMusicPath.clear();
      relevanceValues.clear();

      setState(() {
        List<int> ids = bean2.data!.take(6).map((data) => data.id!).toList();
        rankNames = bean2.data!.take(6).map((data) => data.name!).toList();
        rankSingerName = bean2.data!.take(6).map((data) => data.singerName!).toList();
        rankCoverPath = bean2.data!.take(6).map((data) => data.coverPath!).toList();
        rankMusicPath = bean2.data!.take(6).map((data) => data.musicPath!).toList();

        songs.clear();
        for (int i = 0; i < rankNames.length; i++) {
          songs.add(Song(
            artistPic: rankCoverPath[i],
            title: rankNames[i],
            artist: rankSingerName[i],
            musicurl: rankMusicPath[i],
            pic: rankCoverPath[i],
            id: ids[i],
            likes: null,
            collection: null,
          ));
          relevanceValues.add(0.75);
        }
      });
    } catch (e) {
      print('Error fetching data: $e');
    }

    setState(() {
      isLoading = false;
    });

    _resetCircleAnimations();
  }

  void _resetCircleAnimations() {
    _circleFadeInAnimations.clear();
    for (final controller in _dotAnimationControllers) {
      controller.dispose();
    }
    _dotAnimationControllers.clear();

    for (int i = 0; i < songs.length; i++) {
      final fadeIn = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: _animationController,
          curve: Interval(i * 0.1, (i + 1) * 0.1, curve: Curves.easeInOut),
        ),
      );
      _circleFadeInAnimations.add(fadeIn);

      final dotController = AnimationController(
        duration: Duration(milliseconds: (2000 - relevanceValues[i] * 1500).toInt()),
        vsync: this,
      )..repeat(reverse: true);
      _dotAnimationControllers.add(dotController);
    }

    _animationController.forward(from: 0);
  }

  double _generateRelevance() {
    return 0.6 + math.Random().nextDouble() * 0.4;
  }

  double _getCircleSize(double relevance) {
    return 20.0 + (relevance * 130);
  }

  Map<String, double> _getCirclePosition(int index, int totalItems, Size screenSize) {
    final radius = math.min(screenSize.width, screenSize.height) * 0.28;
    final angle = (index * 2 * math.pi / totalItems) - math.pi / 2;
    return {
      'left': radius * math.cos(angle),
      'top': radius * math.sin(angle),
    };
  }

  Color _getCircleColor(double relevance) {
    return Color(0xFFB2FF59).withOpacity(0.3);
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final safeAreaPadding = MediaQuery.of(context).padding;

    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/img/app_bg.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: SafeArea(
          child: Stack(
            children: [
              Positioned(
                top: 20,
                left: 0,
                right: 0,
                child: Center(
                  child: Text(
                    '知音推荐',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                      color: Colors.black.withOpacity(0.8),
                    ),
                  ),
                ),
              ),
              Center(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    // 先画连接线
                    CustomPaint(
                      size: Size(screenSize.width, screenSize.height),
                      painter: LinePainter(
                        recommendedSongs: songs,
                        relevanceValues: relevanceValues,
                        screenSize: screenSize,
                        lineAnimation: _animationController,
                      ),
                    ),
                    // 画六个圆圈按钮
                    if (!isLoading)
                      Stack(
                        children: List.generate(6, (index) {
                          final song = songs[index];
                          final relevance = relevanceValues[index];
                          final size = _getCircleSize(relevance);
                          final position = _getCirclePosition(index, songs.length, screenSize);

                          return AnimatedPositioned(
                            duration: Duration(milliseconds: 500),
                            left: screenSize.width / 2 + position['left']! - size / 2,
                            top: screenSize.height / 2 + position['top']! - size / 2 - safeAreaPadding.top + 1, // 稍微下移一点
                            child: FadeTransition(
                              opacity: _circleFadeInAnimations.isNotEmpty && index < _circleFadeInAnimations.length
                                  ? _circleFadeInAnimations[index]
                                  : AlwaysStoppedAnimation(0.0),
                              child: SongCircleButton(
                                relevance: relevance,
                                size: size,
                                songTitle: song.title ?? '',
                                artistName: song.artist ?? '',
                                relevancePercentage: (relevance * 100).toInt(),
                                songIndex: index,
                                songList: songs,
                                onPressed: () {
                                  print("Tapped on song: ${song.title} by ${song.artist}");
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) => MusicView(
                                        songList: songs,
                                        initialSongIndex: index,
                                        onSongStatusChanged: (index, isCollected, isLiked) {
                                          setState(() {
                                            songs[index].collection = isCollected;
                                            songs[index].likes = isLiked;
                                            downloadManager.updateSongInfo(songs[index].id, isCollected, isLiked);
                                          });
                                        },
                                      ),
                                    ),
                                  );
                                },
                              ),
                            ),
                          );
                        }),
                      ),
                    ..._dotAnimationControllers.asMap().entries.map((entry) {
                      final index = entry.key;
                      final dotController = entry.value;

                      return AnimatedBuilder(
                        animation: dotController,
                        builder: (context, child) {
                          final progress = dotController.value;
                          final position = _getCirclePosition(index, songs.length, screenSize);
                          final radius = math.min(screenSize.width, screenSize.height) * 0.28;
                          final angle = (index * 2 * math.pi / songs.length) - math.pi / 2;

                          final dotPosition = Offset(
                            screenSize.width / 2 + position['left']! - progress * (radius - 60) * math.cos(angle),
                            screenSize.height / 2 + position['top']! - progress * (radius - 60) * math.sin(angle),
                          );

                          return Positioned(
                            left: dotPosition.dx - 4,
                            top: dotPosition.dy - 4,
                            child: Container(
                              width: 8,
                              height: 8,
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.6),
                                shape: BoxShape.circle,
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.white.withOpacity(0.4),
                                    blurRadius: 8,
                                    spreadRadius: 3,
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    }).toList(),
                    // 中间的刷新按钮
                    Container(
                      width: 80,
                      height: 80,
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        shape: BoxShape.circle,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.blue.withOpacity(0.3),
                            blurRadius: 15,
                            spreadRadius: 5,
                          ),
                        ],
                      ),
                      child: IconButton(
                        icon: Icon(
                          isLoading ? Icons.hourglass_empty : Icons.refresh,
                          color: Colors.white,
                          size: 30,
                        ),
                        onPressed: () {
                          if (!isLoading) {
                            _animationController.reverse(from: 1);
                            Future.delayed(const Duration(milliseconds: 500), () {
                              _loadRecommendedSongs();
                            });
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Circle button widget
class SongCircleButton extends StatelessWidget {
  final double relevance;
  final double size;
  final String songTitle;
  final String artistName;
  final int relevancePercentage;
  final int songIndex;
  final List<Song> songList;
  final VoidCallback onPressed;

  const SongCircleButton({
    required this.relevance,
    required this.size,
    required this.songTitle,
    required this.artistName,
    required this.relevancePercentage,
    required this.songIndex,
    required this.songList,
    required this.onPressed,
  });

  Color _getCircleColor() {
    return Color(0xFFFFC1E3);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed, // 绑定点击事件
      child: Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          color: _getCircleColor().withOpacity(0.9),

          borderRadius: BorderRadius.circular(size / 2),
          boxShadow: [
            BoxShadow(
              color: _getCircleColor().withOpacity(0.6), // 光晕的颜色
              blurRadius: 12, // 光晕的模糊程度
              spreadRadius: 8, // 光晕的扩散程度
            ),
          ],// 圆形按钮
        ),

        child: Center(
          child: Column(


            children: [
              // 显示相关度百分比
              Text(
                '    ',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 4),
              // 显示歌曲标题
              Text(
                songTitle,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 14,
                ),
              ),
              const SizedBox(height: 2),
              // 显示歌手名字
              Text(
                artistName,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white70,
                  fontSize: 12,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {
  final List recommendedSongs;
  final List<double> relevanceValues;
  final Size screenSize;
  final Animation<double> lineAnimation;

  LinePainter({
    required this.recommendedSongs,
    required this.relevanceValues,
    required this.screenSize,
    required this.lineAnimation,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);

    for (int i = 0; i < recommendedSongs.length; i++) {
      final relevance = relevanceValues[i];
      final position = _getCirclePosition(i, recommendedSongs.length, size);
      final end = Offset(center.dx + position['left']!, center.dy + position['top']!);

      final paint = Paint()
        ..color = Colors.grey.withOpacity(0.2) // 浅灰色，透明度为0.5
        ..strokeWidth = 0.01 + math.pow(relevance, 2) * 10;

      canvas.drawLine(center, end, paint);
    }
  }

  Map<String, double> _getCirclePosition(int index, int totalItems, Size size) {
    final radius = math.min(size.width, size.height) * 0.28;
    final angle = (index * 2 * math.pi / totalItems) - math.pi / 2;
    return {
      'left': radius * math.cos(angle),
      'top': radius * math.sin(angle),
    };
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}