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

import '../../common_packages/app_bar.dart';
import '../widgets/attractions_list.dart';
import '../widgets/get_your_pass_card.dart';
import '../widgets/gradient_container_bg.dart';
import '../widgets/journey_cards_listview.dart';
import '../widgets/pass_card_list.dart';

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

  @override
  State<RegisteredUserHomePage> createState() => _RegisteredUserHomePageState();
}

class _RegisteredUserHomePageState extends State<RegisteredUserHomePage> {

   final List<Map<String, String>> attractions = [
    {
      'title': 'Long-Tail Boat Charter',
      'subtitle': 'Lorem ipsum dolor sit amet...',
      'image':
      'assets/images/clock.png',
    },
    {
      'title': 'Koh Rong Samloemr',
      'subtitle': 'Lorem ipsum dolor sit amet...',
      'image': 'assets/images/koh_rong.png',
    },
     {
       'title': 'Long-Tail Boat Charter',
       'subtitle': 'Lorem ipsum dolor sit amet...',
       'image':
       'assets/images/clock.png',
     },
     {
       'title': 'Koh Rong Samloemr',
       'subtitle': 'Lorem ipsum dolor sit amet...',
       'image': 'assets/images/koh_rong.png',
     },
  ];


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        child: Stack(
          children: [
            Image.asset(
              "assets/images/chicago.png",
              height: 300,
              width: double.infinity,
              fit: BoxFit.cover,
            ),

            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      CommonAppBar(isWhiteLogo: true , isProfilePage: false),
                      const SizedBox(height: 70),
                      Text(
                        "Chicago",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.w500,
                          fontSize: 44,
                        ),
                      ),
                      const SizedBox(height: 4),
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                            "Cras posuere, nisl id dictum consequat, elit enim tincidunt magna...",
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.9),
                          fontSize: 12,
                          fontWeight: FontWeight.w400
                        ),
                      ),
                      const SizedBox(height: 12),

                      // Category tags
                      Wrap(
                        spacing: 8,
                        children: [
                          _buildTag("Food"),
                          _buildTag("Drinks"),
                          _buildTag("Culture"),
                          _buildTag("Souvenirs"),
                        ],
                      ),

                      const SizedBox(height: 40),

                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text.rich(
                            TextSpan(
                              children: const [
                                TextSpan(
                                  text: "Popular ",
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.w500,
                                    color: Color(0xffF95F62),
                                  ),
                                ),
                                TextSpan(
                                  text: "Attractions",
                                  style:
                                  TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w500,),
                                ),
                              ],
                            ),
                          ),
                          InkWell(
                            onTap: (){},
                            child: Text("View all",
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w500,
                                color: Color(0xffF95F62),
                              ),
                            ),
                          )
                        ],
                      ),
                      const SizedBox(height: 12),
                      AttractionsListView(attractions: attractions),
                    ],
                  ),
                ),
                InwardCurvedContainer(
                  child: Stack(
                    children: [
                      DreamJourneySection()
                    ]
                  )
                ),
                const SizedBox(height: 10),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        children: [
                          _buildFeatureCard(
                            image: "assets/images/claim_offers_bg.jpg",
                            title: "Claim offers with your City Cards",
                            subtitle: "Lorem ipsum dolor sit amet...",
                          ),
                        ],
                      ),

                      const SizedBox(height: 24),

                      ChooseYourPassSection(),

                      const SizedBox(height: 20),
                      // ===== GET YOUR PASS SECTION =====
                      GetYourPassCard(),
                      const SizedBox(height: 40),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTag(String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration:
      BoxDecoration(color: Color(0xffF95F62), borderRadius: BorderRadius.circular(20)),
      child: Text(label,
          style:TextStyle(
              color: Colors.white, fontWeight: FontWeight.w500, fontSize: 12)),
    );
  }

   Widget _buildFeatureCard({
     required String image,
     required String title,
     required String subtitle,
   }) {
     return Stack(
       children: [
         ClipRRect(
           borderRadius: BorderRadius.circular(16),
           child: Image.asset(
             image,
             height: 200,
             width: double.infinity,
             fit: BoxFit.cover,
           ),
         ),
         Positioned(
           left: 16,
           right: 16,
           bottom: 16,
           child: Container(
             padding: const EdgeInsets.all(12),
             decoration: BoxDecoration(
               color: Colors.white.withOpacity(0.9),
               borderRadius: BorderRadius.circular(16),
             ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 // Left side text
                 Expanded(
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
                         title,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
                           fontWeight: FontWeight.w600,
                           fontSize: 18,
                         ),
                       ),
                       Text(
                         subtitle,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: GoogleFonts.poppins(
                           fontSize: 14,
                           color: Colors.black.withOpacity(0.6),
                         ),
                       ),
                     ],
                   ),
                 ),

                 const SizedBox(width: 8),

                 // Right side arrow button
                 Container(
                   decoration: const BoxDecoration(
                     color: Color(0xffFDCDCE),
                     shape: BoxShape.circle,
                   ),
                   padding: const EdgeInsets.all(8),
                   child: Image.asset(
                     "assets/icons/arrow_angle_up.png",
                     scale: 4,
                   ),
                 ),
               ],
             ),
           ),
         ),
       ],
     );
   }

}
