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

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

  @override
  State<ChooseYourPassSection> createState() => _ChooseYourPassSectionState();
}

class _ChooseYourPassSectionState extends State<ChooseYourPassSection> {
  final PageController _pageController = PageController(
    viewportFraction: 0.92,
  );

  int _currentPage = 0;

  final List<Map<String, dynamic>> passes = [
    {
      "title": "Chicago-\nFLEXI CARD",
      "price": "\$50",
      "color": const Color(0xffF95FAF),
      "bgColor": const Color(0xFFFDE7F1),
    },
    {
      "title": "Chicago-\nUnlimited CARD",
      "price": "\$120",
      "color": const Color(0xffF95F62),
      "bgColor": const Color(0xFFFFE8E8),
    },
  ];

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      final page = _pageController.page ?? 0;
      setState(() => _currentPage = page.round());
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // ===== TITLE =====
        Text(
          "Choose your Pass",
          style: GoogleFonts.poppins(
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          "Dive into an extensive selection of thrilling destinations, "
              "thoughtfully categorized to help you find the perfect getaway.",
          style: GoogleFonts.poppins(
            fontSize: 13,
            color: Colors.grey[700],
          ),
        ),

        const SizedBox(height: 20),

        // ===== STATIC PAGEVIEW (no animation) =====
        SizedBox(
          height: 430,
          child: PageView.builder(
            controller: _pageController,
            itemCount: passes.length,
            itemBuilder: (context, index) {
              final item = passes[index];
              return _buildPassCard(item);
            },
          ),
        ),

        const SizedBox(height: 12),

        Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(passes.length, (index) {
              bool isActive = index == _currentPage;
              return AnimatedContainer(
                duration: const Duration(milliseconds: 250),
                margin: const EdgeInsets.symmetric(horizontal: 4),
                width: isActive ? 40 : 20,
                height: 6,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: isActive
                      ? const Color(0xffF95F62)
                      : const Color(0xffFEE7E7),
                ),
              );
            }),
          ),
        ),
      ],
    );
  }

  // ===== CARD BUILDER =====
  Widget _buildPassCard(Map<String, dynamic> item) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: item['bgColor'],
        border: Border.all(color: item['color'].withOpacity(0.6)),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            item['title'],
            style: GoogleFonts.poppins(
              fontSize: 22,
              fontWeight: FontWeight.w700,
              color: item['color'],
            ),
          ),
          const SizedBox(height: 6),
          Text(
            "From ${item['price']}",
            style: GoogleFonts.poppins(
              fontSize: 16,
              color: item['color'],
              fontWeight: FontWeight.w600,
            ),
          ),
          const SizedBox(height: 12),
          Text(
            "Dive into an extensive selection of thrilling destinations, "
                "thoughtfully categorized to help you find the perfect getaway.",
            style: GoogleFonts.poppins(
              fontSize: 12,
              color: Colors.grey[800],
              height: 1.4,
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            "• Fusce tincidunt interdum ex, in tincidunt libero porttitor vel.\n"
                "• Pellentesque vel nisl posuere, ullamcorper nibh.\n"
                "• Fusce tincidunt interdum ex, in tincidunt libero porttitor vel.",
            style: TextStyle(
              fontSize: 12,
              color: Colors.black54,
              height: 1.5,
            ),
          ),
          const Spacer(),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: item['color'],
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
              child: Text(
                "Get a Pass",
                style: GoogleFonts.poppins(
                  fontWeight: FontWeight.w600,
                  fontSize: 14,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
