import 'package:flutter/material.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/widgets/pixel_widgets.dart';

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

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

class _MainRootState extends State<SearchPage> {
  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',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        bottom: false,
        child: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(child: _buildSearchBar()),
            SliverToBoxAdapter(child: SizedBox(height: 16.h)),
            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: 120.h)),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchBar() {
    return Padding(
      padding: EdgeInsets.fromLTRB(15.w, 10.h, 15.w, 0),
      child: Row(
        children: [
          Container(
            width: 34.w,
            height: 34.w,
            decoration: BoxDecoration(
              color: const Color(0xFFB6FFA7),
              border: Border.all(color: CommonColor.black, width: 1.w),
              boxShadow: const [
                BoxShadow(color: Color(0xFF91F473), offset: Offset(2, 2)),
              ],
            ),
            child: Icon(
              Icons.arrow_back_ios_new,
              size: 16.w,
              color: CommonColor.black,
            ),
          ),
          SizedBox(width: 10.w),
          Expanded(
            child: Container(
              height: 36.h,
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              decoration: BoxDecoration(
                border: Border.all(color: CommonColor.black, width: 1.w),
                borderRadius: BorderRadius.circular(40.r),
              ),
              child: Row(
                children: [
                  Icon(Icons.search, size: 16.w, color: CommonColor.black),
                  SizedBox(width: 7.w),
                  Text(
                    'Search',
                    style: TextStyle(
                      color: const Color(0xFF3E3D40),
                      fontSize: 12.sp,
                      height: 1,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHistory() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(child: _buildTitle('Search History', fontSize: 14)),
              Icon(
                Icons.delete_outline,
                size: 18.w,
                color: const Color(0xFF888888),
              ),
            ],
          ),
          SizedBox(height: 10.h),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
            decoration: BoxDecoration(
              color: const Color(0x0D000000),
              borderRadius: BorderRadius.circular(20.r),
            ),
            child: Text(
              'Love',
              style: TextStyle(
                color: const Color(0x80000000),
                fontSize: 12.sp,
                fontWeight: FontWeight.w500,
                height: 1,
              ),
            ),
          ),
        ],
      ),
    );
  }

  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() {
    return SizedBox(
      height: 446.h,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 15.w),
        child: Wrap(
          direction: Axis.vertical,
          spacing: 10.h,
          runSpacing: 10.w,
          children: _titles
              .map((title) => _TrendingItem(title: title))
              .toList(),
        ),
      ),
    );
  }
}

class _TrendingItem extends StatelessWidget {
  const _TrendingItem({required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 236.w,
      height: 104.h,
      child: Row(
        children: [
          const PosterImage(
            width: 80,
            height: 104,
            borderRadius: 4,
            showBorder: false,
          ),
          SizedBox(width: 8.w),
          Expanded(
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 10.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    title,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: CommonColor.black,
                      fontSize: 13.sp,
                      fontWeight: FontWeight.w500,
                      height: 1.2,
                    ),
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.local_fire_department,
                        size: 15.w,
                        color: const Color(0xFFFF6A00),
                      ),
                      SizedBox(width: 2.w),
                      Text(
                        '17.3K',
                        style: TextStyle(
                          color: const Color(0x80000000),
                          fontSize: 10.sp,
                          height: 1,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}