import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../common_packages/app_bar.dart';
import '../widgets/explore_cities_card.dart';

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

  @override
  State<FirstTimeUserHomePage> createState() => _FirstTimeUserHomePageState();
}

class _FirstTimeUserHomePageState extends State<FirstTimeUserHomePage> {
  final ScrollController _scrollController = ScrollController();

  double _scrollProgress = 0.0;

  final List<Map<String, String>> featuredCities = [
    {
      "name": "Melbourne",
      "description": "Australia's cultural capital famous for vibrant...",
      "individualTicket": "\$350+",
      "cityCard": "\$199",
      "savings": "Save \$151+",
      "image": "assets/images/city_sydney.png",
    },
    {
      "name": "Sydney",
      "description": "Australia's cultural capital famous for vibrant...",
      "individualTicket": "\$400+",
      "cityCard": "\$249",
      "savings": "Save \$151+",
      "image": "assets/images/city_sydney.png",
    },
    {
      "name": "Sydney",
      "description": "Australia's cultural capital famous for vibrant...",
      "individualTicket": "\$400+",
      "cityCard": "\$249",
      "savings": "Save \$151+",
      "image": "assets/images/city_sydney.png",
    },
  ];

  final List<Map<String, String>> upcomingCities = [
    {"image": "assets/images/city_turkey.jpg", "name": "Turkey"},
    {"image": "assets/images/city_germany.jpg", "name": "Germany"},
    {"image": "assets/images/city_switz.jpg", "name": "Switzerland"},
    {"image": "assets/images/city_maldives.jpg", "name": "Maldives"},
    {"image": "assets/images/city_turkey.jpg", "name": "Turkey"},
    {"image": "assets/images/city_germany.jpg", "name": "Germany"},
    {"image": "assets/images/city_switz.jpg", "name": "Switzerland"},
    {"image": "assets/images/city_maldives.jpg", "name": "Maldives"},
  ];

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_updateScrollProgress);
  }

  void _updateScrollProgress() {
    if (!_scrollController.hasClients ||
        _scrollController.position.maxScrollExtent == 0)
      return;
    setState(() {
      _scrollProgress =
          (_scrollController.offset /
                  _scrollController.position.maxScrollExtent)
              .clamp(0.0, 1.0);
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: Stack(
          children: [
            Image.asset("assets/images/home_bg.png"),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CommonAppBar(isWhiteLogo: false, isProfilePage: false),
                  SizedBox(height: 140.h),
                  Text(
                    "CityCards.\nSee More,\nSpend Less.",
                    style: TextStyle(
                      fontSize: 44.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(height: 8.h),
                  const Text(
                    "Instant QR access to 40+ attractions,\nexclusive perks, and savings up to 30%",
                    style: TextStyle(color: Colors.white),
                  ),
                  SizedBox(height: 20.h),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      fixedSize: const Size(200, 50),
                      padding: EdgeInsets.symmetric(
                        horizontal: 15.w,
                        vertical: 15.h,
                      ),
                      backgroundColor: const Color(0xffF95F62),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25.r),
                      ),
                    ),
                    onPressed: () {},
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text(
                          "Get You'r CityCard",
                          style: TextStyle(color: Colors.white),
                        ),
                        SizedBox(width: 10.w),
                        Image.asset("assets/icons/arrow.png", height: 13.h),
                      ],
                    ),
                  ),
                  SizedBox(height: 80.h),
                  Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: "Explore ",
                          style: TextStyle(
                            fontSize: 24.sp,
                            fontWeight: FontWeight.w500,
                            color: Color(0xffF95F62),
                          ),
                        ),
                        TextSpan(
                          text: "Cities",
                          style: TextStyle(
                            fontSize: 24,
                            color: Colors.black,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h),
                  const Text(
                    "Explore your dream destination and experience various attractions.",
                    style: TextStyle(color: Color(0xff676D75)),
                  ),
                  SizedBox(height: 16.sp),

                  // Horizontal cards
                  SizedBox(
                    height: 270.h,
                    child: ListView.builder(
                      controller: _scrollController,
                      scrollDirection: Axis.horizontal,
                      itemCount: featuredCities.length,
                      itemBuilder: (context, index) {
                        final city = featuredCities[index];
                        return ExploreCitiesCard(
                          name: city['name']!,
                          description: city['description']!,
                          imageUrl: city['image']!,
                          individualPrice: city['individualTicket']!,
                          cityCardPrice: city['cityCard']!,
                          savingsText: city['savings']!,
                        );
                      },
                    ),
                  ),

                  SizedBox(height: 10.h),
                  SizedBox(height: 10.h),
                  Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      width: 200.w,
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10.r),
                        child: LinearProgressIndicator(
                          value: _scrollProgress,
                          minHeight: 6.h,
                          backgroundColor: Color(0xffFEE7E7),
                          color: const Color(0xffF95F62),
                        ),
                      ),
                    ),
                  ),

                  SizedBox(height: 40.h),
                  Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: "Upcoming ",
                          style: TextStyle(
                            fontSize: 24.sp,
                            fontWeight: FontWeight.w500,
                            color: Color(0xffF95F62),
                          ),
                        ),
                        TextSpan(
                          text: "Cities",
                          style: TextStyle(
                            fontSize: 24.sp,
                            color: Colors.black,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    "Explore your dream destination and experience various attractions.",
                    style: TextStyle(color: Colors.grey[600]),
                  ),
                  SizedBox(height: 16.h),
                  SizedBox(
                    height: 80.h,
                    child: ListView.separated(
                      scrollDirection: Axis.horizontal,
                      itemCount: upcomingCities.length,
                      separatorBuilder: (_, __) => SizedBox(width: 16.w),
                      itemBuilder: (context, index) {
                        return Column(
                          children: [
                            CircleAvatar(
                              radius: 28.r,
                              backgroundImage: AssetImage(
                                upcomingCities[index]["image"] ?? "",
                              ),
                            ),
                            SizedBox(height: 4.h),
                            Text(
                              upcomingCities[index]["name"] ?? "",
                              style: TextStyle(fontSize: 12.sp),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
