import 'package:citycards_customer/common_packages/custom_filled_button.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:citycards_customer/itinerary_creation/bloc/itinerary_steps_selection_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CitySelectionView extends StatelessWidget {
  CitySelectionView({super.key});

  final List<Map<String, String>> cityList = [
    {"flag": "🇫🇷", "city": "Paris"},
    {"flag": "🇯🇵", "city": "Tokyo"},
    {"flag": "🇺🇸", "city": "New York"},
    {"flag": "🇬🇧", "city": "London"},
    {"flag": "🇪🇸", "city": "Barcelona"},
    {"flag": "🇦🇪", "city": "Dubai"},
    {"flag": "🇮🇹", "city": "Rome"},
    {"flag": "🇹🇭", "city": "Bangkok"},
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "👋 Hello! We'd love to know more about you. Which city are you visiting?",
            style: TextStyle(
              color: Color(0xFF101828),
              fontSize: 24.sp,
              fontWeight: FontWeight.w500,
            ),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 32.h),
          Container(
            height: 56.h,
            width: double.infinity,
            padding: EdgeInsets.only(left: 20.w),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Color(0xFFF95F62)),
              borderRadius: BorderRadius.circular(28.r),
            ),
            child: Row(
              children: [
                Image.asset("assets/icons/location.png", scale: 4),
                SizedBox(width: 12.w),
                CustomText(
                  text: "Tokyo",
                  color: Color(0xFF737373),
                  size: 14.sp,
                ),
              ],
            ),
          ),
          SizedBox(height: 16.h),
          Align(
            alignment: Alignment.topLeft,
            child: CustomText(
              text: "Popular destinations",
              size: 16.sp,
              weight: FontWeight.w500,
              color: Color(0xFF6A7282),
            ),
          ),
          SizedBox(height: 10.h),
          SizedBox(
            height: 175.h,
            child: GridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 16.h,
                crossAxisSpacing: 16.w,
              ),
              itemCount: cityList.length,
              itemBuilder: (context, index) {
                final item = cityList[index];
                return Container(
                  height: 78.h,
                  width: 76.w,

                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      CustomText(text: item['flag'] ?? ""),
                      SizedBox(height: 4.h),
                      CustomText(
                        text: item['city'] ?? "",
                        size: 12.sp,
                        color: Color(0xFF364153),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 40.h),
          CustomFilledButton(onTap: () {
            context.read<ItineraryStepNavigationBloc>().add(
              ItineraryStepNavigationNextEvent(),
            );
          }, label: "Continue", showArrow: true),
        ],
      ),
    );
  }
}
