import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:news_app/ui/video/video_detail_page.dart';
import 'package:news_app/widget/load_image.dart';

import '../../model/video_new_model.dart';
import '../../provider/video_rank_provider.dart';
import '../../widget/auth_gesture_detector.dart';
import '../../widget/list_animation_layout.dart';
import '../activity/favorite_video_item_widget.dart';

class VideoRankListPage extends ConsumerStatefulWidget {
  const VideoRankListPage({super.key});

  @override
  ConsumerState<VideoRankListPage> createState() => _VideoRankListPageState();
}

final rankVideoProvider =
    NotifierProvider<VideoRankProvider, List<VideoNewModel>>(() {
      return VideoRankProvider();
    });

class _VideoRankListPageState extends ConsumerState<VideoRankListPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    ref.read(rankVideoProvider.notifier).fetchRankVideos();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final rankVideos = ref.watch(rankVideoProvider);
    return Container(
      padding: EdgeInsets.only(left: 12.w, right: 12.w),
      width: double.infinity,
      height: double.infinity,
      child:
          rankVideos.isEmpty
              ? ListAnimationLayout()
              : ListView.builder(
                itemCount: rankVideos.length,
                itemBuilder: (context, index) {
                  return AuthGestureDetector(
                    onTap: () {
                      context.push(
                        "/video/detail",
                        extra: VideoParam(
                          id: rankVideos[index].contentId ?? "",
                          videoUrl:rankVideos[index].url,
                        ),
                      );
                    },
                    child: FavoriteVideoItemWidget(data: rankVideos[index]),
                  );
                },
              ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Widget buildVideoListItem(VideoNewModel item) {
  return Container(
    padding: EdgeInsets.all(10.w),
    margin: EdgeInsets.only(bottom: 12.h),
    height: 144.h,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4.r),
      color: Colors.white,
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Expanded(
          child: Builder(
            builder: (ctx) {
              if (item.coverImage?.isNotEmpty == true) {
                return LoadImage(item.coverImage ?? "", fit: BoxFit.cover);
              } else {
                return LoadAssetImage('none', fit: BoxFit.cover);
              }
            },
          ),
        ),

        SizedBox(width: 10.w),
        Expanded(
          child: Column(
            mainAxisSize: MainAxisSize.min, // 重要属性
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                item.title ?? "",
                style: TextStyle(color: Color(0xFF333333), fontSize: 12),
                maxLines: 3,
              ),
              Expanded(
                child: Container(), // 空容器作为弹性间隔
              ),
              Text(
                item.author ?? "",
                style: TextStyle(color: Color(0xFF666666), fontSize: 12),
              ),
              SizedBox(height: 8.h),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  LoadAssetImage("videoplayicon", width: 13.w, height: 11.h),
                  SizedBox(width: 2.w),
                  Text(
                    item.viewCount == null ? "0" : item.viewCount.toString(),
                    style: TextStyle(color: Color(0xFF999999), fontSize: 12),
                  ),
                  SizedBox(width: 16.w),
                  Text(
                    item.createTime ?? "",
                    style: TextStyle(color: Color(0xFF999999), fontSize: 12),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}