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

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

  @override
  State<DreamJourneySection> createState() => _DreamJourneySectionState();
}

class _DreamJourneySectionState extends State<DreamJourneySection> {
  late PageController _pageController;
  double _currentPage = 1.0;

  final List<Map<String, dynamic>> baseJourneys = [
    {
      "city": "Tokyo",
      "country": "Japan",
      "days": "4 days",
      "tags": ["Modern Culture", "Temple"],
      "image": "assets/images/tokyo.jpg",
      "itinerary": [
        {"title": "Senso-ji Temple", "time": "8:00 AM"},
        {"title": "Tokyo Skytree", "time": "8:00 AM"},
      ]
    },
    {
      "city": "Paris",
      "country": "France",
      "days": "3 days",
      "tags": ["Art", "Romantic"],
      "image": "assets/images/paris.jpg",
      "itinerary": [
        {"title": "Eiffel Tower", "time": "9:00 AM"},
        {"title": "Louvre Museum", "time": "11:00 AM"},
      ]
    },
    {
      "city": "Bangkok",
      "country": "Thailand",
      "days": "5 days",
      "tags": ["Culture", "Food"],
      "image": "assets/images/bangkok.jpg",
      "itinerary": [
        {"title": "Wat Arun", "time": "9:00 AM"},
        {"title": "Floating Market", "time": "1:00 PM"},
      ]
    },
  ];

  late List<Map<String, dynamic>> journeys;

  @override
  void initState() {
    super.initState();

    // Duplicate list for infinite scroll illusion
    journeys = List.generate(9, (i) => baseJourneys[i % baseJourneys.length]);

    _pageController = PageController(initialPage: 1, viewportFraction: 0.75);
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page ?? 1.0;
      });

      // Infinite loop logic
      if (_pageController.page == journeys.length - 2) {
        Future.microtask(() {
          _pageController.jumpToPage(2);
        });
      } else if (_pageController.page == 1) {
        Future.microtask(() {
          _pageController.jumpToPage(journeys.length - 3);
        });
      }
    });
  }

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

  // --- build ---
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 60),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // === Title ===
          Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: "Plan Your ",
                  style: GoogleFonts.poppins(
                      fontSize: 20, fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "Dream Journey",
                  style: GoogleFonts.poppins(
                    fontSize: 20,
                    fontWeight: FontWeight.w600,
                    color: const Color(0xffF95F62),
                  ),
                ),
                TextSpan(
                  text: "\nin Just 3 Seconds",
                  style: GoogleFonts.poppins(
                      fontSize: 20, fontWeight: FontWeight.w600),
                ),
              ],
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 40),

          // === 3D Tilted Carousel ===
          SizedBox(
            height: 440,
            child: PageView.builder(
              controller: _pageController,
              physics: const BouncingScrollPhysics(),
              itemCount: journeys.length,
              itemBuilder: (context, index) {
                final double distance = (_currentPage - index);
                final double scale = (1 - (distance.abs() * 0.15)).clamp(0.8, 1.0);

                // 👇 3D tilt transform (top tilts out, bottom tilts in)
                final Matrix4 transform = Matrix4.identity()
                  ..setEntry(3, 2, 0.0015) // perspective
                  ..rotateX(distance * -0.4); // tilt angle

                return Transform(
                  alignment: Alignment.center,
                  transform: transform,
                  child: Opacity(
                    opacity: (1 - distance.abs() * 0.3).clamp(0.6, 1),
                    child: Transform.scale(
                      scale: scale,
                      child: _buildJourneyCard(journeys[index]),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  // --- Card Widget ---
  Widget _buildJourneyCard(Map<String, dynamic> item) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 15,
            offset: const Offset(0, 8),
          )
        ],
      ),
      // child: Column(
      //   crossAxisAlignment: CrossAxisAlignment.start,
      //   children: [
      //     // Image + badge
      //     Stack(
      //       children: [
      //         ClipRRect(
      //           borderRadius:
      //           const BorderRadius.vertical(top: Radius.circular(20)),
      //           child: Image.asset(
      //             item['image'],
      //             height: 160,
      //             width: double.infinity,
      //             fit: BoxFit.cover,
      //           ),
      //         ),
      //         Positioned(
      //           right: 10,
      //           top: 10,
      //           child: Container(
      //             padding:
      //             const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      //             decoration: BoxDecoration(
      //               color: const Color(0xffF95F62),
      //               borderRadius: BorderRadius.circular(12),
      //             ),
      //             child: Text(
      //               item['days'],
      //               style: GoogleFonts.poppins(
      //                 color: Colors.white,
      //                 fontSize: 12,
      //                 fontWeight: FontWeight.w500,
      //               ),
      //             ),
      //           ),
      //         ),
      //       ],
      //     ),
      //     Padding(
      //       padding: const EdgeInsets.all(16.0),
      //       child: Column(
      //         crossAxisAlignment: CrossAxisAlignment.start,
      //         children: [
      //           Text(item['city'],
      //               style: GoogleFonts.poppins(
      //                   fontSize: 16, fontWeight: FontWeight.w600)),
      //           Text(item['country'],
      //               style: GoogleFonts.poppins(
      //                   fontSize: 12, color: Colors.grey[600])),
      //           const SizedBox(height: 8),
      //           Wrap(
      //             spacing: 8,
      //             children: List.generate(
      //               item['tags'].length,
      //                   (i) => Container(
      //                 padding: const EdgeInsets.symmetric(
      //                     horizontal: 10, vertical: 4),
      //                 decoration: BoxDecoration(
      //                   color: const Color(0xffFEE7E7),
      //                   borderRadius: BorderRadius.circular(20),
      //                 ),
      //                 child: Text(
      //                   item['tags'][i],
      //                   style: GoogleFonts.poppins(
      //                     color: const Color(0xffF95F62),
      //                     fontSize: 11,
      //                   ),
      //                 ),
      //               ),
      //             ),
      //           ),
      //           const SizedBox(height: 16),
      //           const Divider(),
      //           const SizedBox(height: 8),
      //           Text("Day 1",
      //               style: GoogleFonts.poppins(
      //                   fontWeight: FontWeight.w600, fontSize: 13)),
      //           const SizedBox(height: 6),
      //           ...List.generate(
      //             item['itinerary'].length,
      //                 (i) {
      //               final activity = item['itinerary'][i];
      //               return Container(
      //                 margin: const EdgeInsets.only(bottom: 8),
      //                 padding: const EdgeInsets.all(10),
      //                 decoration: BoxDecoration(
      //                   color: const Color(0xffFEE7E7),
      //                   borderRadius: BorderRadius.circular(10),
      //                 ),
      //                 child: Row(
      //                   children: [
      //                     CircleAvatar(
      //                       radius: 12,
      //                       backgroundColor: const Color(0xffF95F62),
      //                       child: Text(
      //                         "${i + 1}",
      //                         style: const TextStyle(
      //                             color: Colors.white, fontSize: 12),
      //                       ),
      //                     ),
      //                     const SizedBox(width: 8),
      //                     Column(
      //                       crossAxisAlignment: CrossAxisAlignment.start,
      //                       children: [
      //                         Text(activity['title'],
      //                             style: GoogleFonts.poppins(
      //                                 fontSize: 12,
      //                                 fontWeight: FontWeight.w500)),
      //                         Text(activity['time'],
      //                             style: GoogleFonts.poppins(
      //                                 fontSize: 11,
      //                                 color: Colors.grey[700])),
      //                       ],
      //                     ),
      //                   ],
      //                 ),
      //               );
      //             },
      //           ),
      //           const Divider(),
      //           const SizedBox(height: 4),
      //           Text("Day 2",
      //               style: GoogleFonts.poppins(
      //                   fontWeight: FontWeight.w600, fontSize: 13)),
      //         ],
      //       ),
      //     )
      //   ],
      // ),
    );
  }
}
