import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:novyronst/common/const/const_color.dart';
import 'package:novyronst/common/const/const_string.dart';
import 'package:novyronst/common/help/app_nav.dart';
import 'package:novyronst/common/help/help_image.dart';
import 'package:novyronst/common/model/ny_drama_model.dart';
import 'package:novyronst/pages/first/player_detail/video_detail_page.dart';
import 'package:novyronst/tools/widgets/novy_com_widget.dart';

import '../../../tools/util/app_screen.dart';
import '../../../tools/widgets/novy_button_bg.dart';
import '../../widgets/cut_corner_clipper.dart';
import '../../widgets/ny_tag_widget.dart';

class HomeRankWidget extends StatelessWidget {
  const HomeRankWidget({super.key, required this.dramaRanks});

  final List<NyDramaModel> dramaRanks;

  @override
  Widget build(BuildContext context) {
    return CutCornerClipper(
      width: AppScreen.screenWidth - 32,
      cutCorner: CutCorner.bottomLeft,
      cutSize: 40,
      child: Padding(
        padding: const EdgeInsets.all(8),
        child: dramaRanks.isEmpty
            ? const SizedBox(height: 20)
            : Column(
                children: [
                  _buildRankList(),
                  const SizedBox(height: 5),
                  Row(
                    children: [
                      SizedBox(width: 20.w),
                      NovyButtonBg(text: 'Keep Watching', width: 308.w),
                    ],
                  ),
                ],
              ),
      ),
    );
  }

  Row _buildRankList() {
    return Row(
      children: [
        _firstVideoView(),
        const SizedBox(width: 8),
        _otherVideoView(),
      ],
    );
  }

  Widget _firstVideoView() {
    final item = dramaRanks.first;
    var tag = 'Safiray';
    if (item.categoryList != null && item.categoryList!.isNotEmpty) {
      tag = item.categoryList!.first.name;
    }

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => AppNav.to(VideoDetailPage(drama: item)),
      child: SizedBox(
        width: 160.w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Stack(
              children: [
                SizedBox(
                  width: 160.w,
                  height: 240.w,
                  child: HelpImage.network(item.imageUrl, fit: BoxFit.cover),
                ),
                Positioned(top: -10, left: 1, child: _colorsText(1)),
              ],
            ),
            const SizedBox(height: 10),
            NovyText(
              item.name,
              fontSize: 15,
              color: Colors.black,
              fontFamily: ConstFont.montMedium,
            ),
            const SizedBox(height: 5),
            Row(children: [NyTagWidget(text: tag)]),
            const SizedBox(height: 8),
          ],
        ),
      ),
    );
  }

  Widget _otherVideoView() {
    var count = dramaRanks.length - 1;
    if (count > 3) count = 3;
    return Column(
      children: List.generate(count, (index) {
        final item = dramaRanks[index + 1];
        var tag = '';
        if (item.categoryList != null && item.categoryList!.isNotEmpty) {
          tag = item.categoryList!.first.name;
        }

        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => AppNav.to(VideoDetailPage(drama: item)),
          child: Container(
            margin: const EdgeInsets.only(bottom: 8),
            width: 160.w,
            height: 93.w,
            child: Row(
              children: [
                HelpImage.network(item.imageUrl, width: 62.w, height: 93.w),
                const SizedBox(width: 8),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _colorsText(index + 2),
                      const SizedBox(height: 8),
                      NovyText(item.name, fontSize: 13, color: Colors.black),
                      const SizedBox(height: 5),
                      tag.isNotEmpty
                          ? NyTagWidget(text: tag)
                          : const SizedBox(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    );
  }

  Widget _colorsText(int index) {
    if (index == 4) {
      return Text(
        '$index',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.grey.withAlpha(127),
          fontStyle: FontStyle.italic,
        ),
      );
    }
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: [
            ConstColor.withValue('#3ED71F'),
            ConstColor.withValue('#FFFF65'),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ).createShader(bounds);
      },
      child: Text(
        '$index',
        style: TextStyle(
          fontSize: index == 1 ? 40 : 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
          fontStyle: FontStyle.italic,
        ),
      ),
    );
  }
}