import 'package:flutter/material.dart';
import 'package:skywood/global/client/play_client.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/home/players/page/drama_detail_page.dart';
import 'package:skywood/pages/search/page/result_page.dart';
import 'package:skywood/pages/search/widget/search_util.dart';
import 'package:skywood/pages/search/widget/search_view.dart';
import 'package:skywood/pages/widgets/pixel_widgets.dart';
import 'package:skywood/utils/models/drama/skywood_drama.dart';
import 'package:skywood/utils/tools/help_nav.dart';
import 'package:skywood/utils/tools/sky_time_tool.dart';
import 'package:skywood/utils/tools/widgets/sky_app_bar.dart';
import 'package:skywood/utils/tools/widgets/sky_text_field.dart';

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

  @override
  State<StatefulWidget> createState() {
    return _MainRootState();
  }
}

class _MainRootState extends State<SearchPage> {

  List<String> _searchHistory = [];
  final _searchController = TextEditingController();
  final _searchFocus = FocusNode();

  final List<String> _titles = const [
    "Mr. Gu's Sweet Weakness",
    'Secret Wife with a Scar',
    'A Second Chance at Love',
    'Shadows of the Heart',
    'Boarding Pass To Love',
    'The Love Blueprint',
    'Who Dared Touch My Bride',
    'Famous Families Fled',
  ];
  List<SkywoodDrama> _searchHots = [];

  Future<void> _loadSearchHistory() async {
    final list = await SearchUtil.getSearchList();
    if (!mounted) return;
    setState(() {
      _searchHistory = list;
    });
  }

  Future<void> _onGoSearch(String keyword, {bool isTapKey = false}) async {
    if (isTapKey == true) {

    } else {
      await SearchUtil.addSearch(keyword);
      await _loadSearchHistory();
    }
    HelpNav.to(ResultPage(
      keyword: keyword,
    ));
    // 发起 搜索

  }

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

    _loadSearchHistory();
    _getSearchHots();
  }

  void _getSearchHots() {
    PlayClient.getSearchHots().then((value) {
      print('object: ${value.length}');
      setState(() {
        _searchHots = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SkyAppBar(
        showBackButton: false,
        titleWidget: SkyTextField(
          controller: _searchController,
          focusNode: _searchFocus,
          border: Border.all(width: 0.6, color: CommonColor.black),
          borderRadius: BorderRadius.circular(20),
          width: 300, height: 36,
          placeholder: 'Search',
          prefix: HelpImg.asset(ConstImg.search, width: 14.w, height: 14.w),
          textInputAction: TextInputAction.search,
          onEditingComplete: () {
            print('object');
            _searchFocus.unfocus();
            if (_searchController.text.trim().isEmpty) return;
            _onGoSearch(_searchController.text);
          },
        ),
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(child: _buildHistory()),
          SliverToBoxAdapter(child: SizedBox(height: 30.h)),
          SliverToBoxAdapter(child: _buildTitle('Trending Now')),
          SliverToBoxAdapter(child: SizedBox(height: 10.h)),
          SliverToBoxAdapter(child: _buildTrendingList()),
          SliverToBoxAdapter(child: SizedBox(height: 20.h)),
        ],
      ),
    );
  }


  Widget _buildHistory() {
    return SearchView(
      searchHistory: _searchHistory,
      onTapClear: () {
        _searchHistory.clear();
        setState(() {});
      },
      onTapHistory: (value) {
        print('object: $value');
        HelpNav.to(ResultPage(keyword: value));
      },
    );
  }

  Widget _buildTitle(String title, {double fontSize = 18}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Text(
        title,
        style: TextStyle(
          color: CommonColor.black,
          fontSize: fontSize.sp,
          fontWeight: FontWeight.w700,
          height: 1.1,
        ),
      ),
    );
  }

  Widget _buildTrendingList() {
    if (_searchHots.isEmpty) return const SizedBox.shrink();

    // 每4个一组
    final List<List<SkywoodDrama>> groupedData = [];
    for (int i = 0; i < _searchHots.length; i += 4) {
      final end = (i + 4 > _searchHots.length) ? _searchHots.length : i + 4;
      groupedData.add(_searchHots.sublist(i, end));
    }

    return SizedBox(
      height: 114 * 4 + 20, // 104 * 4 + 10 * 3
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        itemBuilder: (context, index) {
          final group = groupedData[index];
          return _buildGroup(group);
        },
        separatorBuilder: (context, index) => SizedBox(width: 10.w),
        itemCount: groupedData.length,
      ),
    );
  }

  /// 一组卡片（垂直排列，最多4个）
  Widget _buildGroup(List<SkywoodDrama> group) {
    return SizedBox(
      width: 236,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: group.map((drama) {
          return _TrendingItem(drama: drama, onTap: () {
            HelpNav.to(DramaDetailPage(dramaBean: drama));
          });
        }).toList(),
      ),
    );
  }

}

class _TrendingItem extends StatelessWidget {
  const _TrendingItem({required this.drama,
    this.onTap
  });

  final SkywoodDrama drama;
  final Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 10),
      // width: 236.w,
      // height: 104.w,
      child: Row(
        children: [

          HelpImg.network(drama.imageUrl, width: 80, height: 104, fit: BoxFit.cover),
          SizedBox(width: 8),
          Expanded(
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 10),
              child: SizedBox(
                height: 84,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      drama.name,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: CommonColor.black,
                        fontSize: 13.sp,
                        fontWeight: FontWeight.bold,
                        height: 1.2,
                      ),
                    ),
                    Spacer(),
                    Row(
                      children: [
                        HelpImg.asset(ConstImg.hot, width: 15.w, height: 15.w),
                        SizedBox(width: 2.w),
                        Text(
                          SkyTimeTool.formatNum(drama.watchTotal, unit: 'w'),
                          style: TextStyle(
                            color: const Color(0x80000000),
                            fontSize: 13.w,
                            height: 1,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ).addInkWell(onTap: onTap);
  }
}