import 'package:citycards_customer/home/views/explore_cities_card.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  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 Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Stack(
            children: [
              Image.asset("assets/images/home_bg.png"),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Image.asset("assets/logo/logo_city_cards.png",
                            height: 50),
                        Row(
                          children: [
                            Container(
                              padding: const EdgeInsets.all(10),
                              decoration: const BoxDecoration(
                                color: Colors.white,
                                shape: BoxShape.circle,
                              ),
                              child: Image.asset(
                                "assets/icons/shopping_cart.png",
                                height: 20,
                              ),
                            ),
                            const SizedBox(width: 8),
                            const CircleAvatar(
                              backgroundColor: Color(0xffFFDFDF),
                              backgroundImage:
                              AssetImage("assets/images/profile_img.png"),
                            ),
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: 140),
                    const Text(
                      "CityCards.\nSee More,\nSpend Less.",
                      style: TextStyle(
                        fontSize: 44,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text(
                      "Instant QR access to 40+ attractions,\nexclusive perks, and savings up to 30%",
                      style: TextStyle(color: Colors.white),
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        fixedSize: const Size(200, 50),
                        padding: const EdgeInsets.all(15),
                        backgroundColor: const Color(0xffF95F62),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25),
                        ),
                      ),
                      onPressed: () {},
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text("Get You'r CityCard",
                              style: TextStyle(color: Colors.white)),
                          const SizedBox(width: 10),
                          Image.asset("assets/icons/arrow.png", height: 13),
                        ],
                      ),
                    ),
                    const SizedBox(height: 80),
                    Text.rich(
                      TextSpan(
                        children: const [
                          TextSpan(
                            text: "Explore ",
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.w500,
                              color: Color(0xffF95F62),
                            ),
                          ),
                          TextSpan(
                            text: "Cities",
                            style:
                            TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.w500,),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 8),
                    const Text(
                      "Explore your dream destination and experience various attractions.",
                      style: TextStyle(color: Color(0xff676D75)),
                    ),
                    const SizedBox(height: 16),

                    // Horizontal cards
                    SizedBox(
                      height: 270,
                      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']!,
                          );
                        },
                      ),
                    ),

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


                    const SizedBox(height: 40),
                    Text.rich(
                      TextSpan(
                        children: const [
                          TextSpan(
                            text: "Upcoming ",
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.w500,
                              color: Color(0xffF95F62),
                            ),
                          ),
                          TextSpan(
                            text: "Cities",
                            style:
                            TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.w500),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      "Explore your dream destination and experience various attractions.",
                      style: TextStyle(color: Colors.grey[600]),
                    ),
                    const SizedBox(height: 16),
                    SizedBox(
                      height: 80,
                      child: ListView.separated(
                        scrollDirection: Axis.horizontal,
                        itemCount: upcomingCities.length,
                        separatorBuilder: (_, __) => const SizedBox(width: 16),
                        itemBuilder: (context, index) {
                          return Column(
                            children: [
                              CircleAvatar(
                                radius: 28,
                                backgroundImage: AssetImage(upcomingCities[index]["image"] ?? ""),
                              ),
                              const SizedBox(height: 4),
                              Text(upcomingCities[index]["name"] ?? "",
                                  style: const TextStyle(fontSize: 12)),
                            ],
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: "Explore"),
          BottomNavigationBarItem(
              icon: Icon(Icons.auto_fix_high), label: "Magic Itinerary"),
          BottomNavigationBarItem(
              icon: Icon(Icons.card_giftcard), label: "My Passes"),
          BottomNavigationBarItem(
              icon: Icon(Icons.post_add), label: "Postcard"),
        ],
      ),
    );
  }
}
