import 'package:autos/core/widgets/hamburger_button.dart';
import 'package:autos/core/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'package:autos/core/theme/app_typography.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PricingScreen extends ConsumerStatefulWidget {
  const PricingScreen({super.key});

  @override
  ConsumerState<PricingScreen> createState() => _PricingScreenState();
}

class _PricingScreenState extends ConsumerState<PricingScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  String selected = 'pricing';

  bool isMonthly = true;

  @override
  Widget build(BuildContext context) {
    final double topPadding = MediaQuery.of(context).padding.top + 16;

    return Scaffold(
      key: _scaffoldKey,
      drawer: SideMenu(
        selected: selected,
        onItemSelected: (key) {
          setState(() => selected = key);
        },
      ),
      backgroundColor: const Color(0xFFF6FDFF),
      body: Stack(
        children: [
          // Top centered title (same style as your dashboard)
          Positioned(
            top: topPadding,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Choose Your Plan",
                  style: AppTypo.h2.copyWith(fontWeight: FontWeight.w700),
                ),
              ],
            ),
          ),

          // Main content
          SingleChildScrollView(
            padding: EdgeInsets.fromLTRB(16, topPadding + 70, 16, 20),
            child: Column(
              children: [
                const Text(
                  "🚀  Subscribe to a plan and start automating your eBay listings instantly.",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 15, color: Colors.black54),
                ),

                const SizedBox(height: 22),

                // Monthly / Yearly toggle
                Container(
                  padding: const EdgeInsets.all(4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(40),
                    border: Border.all(color: const Color(0xFF00BFFF)),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      _toggleButton("Monthly", isMonthly, () {
                        setState(() => isMonthly = true);
                      }),
                      _toggleButton("Yearly (Save 15%)", !isMonthly, () {
                        setState(() => isMonthly = false);
                      }),
                    ],
                  ),
                ),

                const SizedBox(height: 30),

                // Pricing cards
                Column(
                  children: [
                    _pricingCard(
                      title: "Starter Sync",
                      subtitle: "Upload up to 100 products per month",
                      price: isMonthly ? "\$49" : "\$499",
                      features: const [
                        "Auto price & inventory updates",
                        "Daily sync",
                        "Manual sync option",
                        "Basic reporting dashboard",
                      ],
                      isPopular: false,
                    ),

                    const SizedBox(height: 20),

                    _pricingCard(
                      title: "Growth Sync",
                      subtitle: "Upload up to 250 products per month",
                      price: isMonthly ? "\$99" : "\$999",
                      features: const [
                        "Everything in Starter",
                        "3-hour sync interval",
                        "Bulk product import",
                        "Priority email support",
                      ],
                      isPopular: true,
                    ),

                    const SizedBox(height: 20),

                    _pricingCard(
                      title: "Pro Sync",
                      subtitle: "Upload up to 1000 products per month",
                      price: isMonthly ? "\$249" : "\$2499",
                      features: const [
                        "Everything in Growth",
                        "Real-time sync",
                        "Advanced analytics dashboard",
                        "Dedicated account manager",
                        "API access",
                      ],
                      isPopular: false,
                    ),
                  ],
                ),

                const SizedBox(height: 40),

                const Divider(thickness: 0.6),

                const SizedBox(height: 12),

                const Text(
                  "© 2025. Data4Autos. All rights reserved.",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 13,
                    color: Colors.black45,
                    fontWeight: FontWeight.w500,
                  ),
                ),

                const SizedBox(height: 20),
              ],
            ),
          ),

          // Hamburger button (keeps same behavior as other screens)
          HamburgerButton(scaffoldKey: _scaffoldKey),
        ],
      ),
    );
  }

  /// Toggle button
  Widget _toggleButton(String text, bool active, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
        decoration: BoxDecoration(
          color: active ? const Color(0xFF00BFFF) : Colors.transparent,
          borderRadius: BorderRadius.circular(30),
        ),
        child: Text(
          text,
          style: TextStyle(
            color: active ? Colors.white : const Color(0xFF00BFFF),
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }

  /// Pricing card widget
  Widget _pricingCard({
    required String title,
    required String subtitle,
    required String price,
    required List<String> features,
    required bool isPopular,
  }) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(20),
          margin: const EdgeInsets.only(top: 12),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: isPopular ? const Color(0xFF00BFFF) : Colors.transparent,
              width: 2,
            ),
            boxShadow: [
              BoxShadow(
                blurRadius: 12,
                color: Colors.black.withOpacity(0.05),
                offset: const Offset(0, 6),
              ),
            ],
          ),
          child: Column(
            children: [
              const SizedBox(height: 10),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),

              const SizedBox(height: 8),

              Text(
                subtitle,
                textAlign: TextAlign.center,
                style: const TextStyle(color: Colors.black54),
              ),

              const SizedBox(height: 18),

              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: price,
                      style: const TextStyle(
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    const TextSpan(
                      text: " / month",
                      style: TextStyle(color: Colors.black54),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 20),

              Column(
                children: features
                    .map(
                      (e) => Padding(
                        padding: const EdgeInsets.symmetric(vertical: 6),
                        child: Row(
                          children: [
                            const Icon(
                              Icons.check_circle,
                              color: Color(0xFF00BFFF),
                              size: 18,
                            ),
                            const SizedBox(width: 10),
                            Expanded(child: Text(e)),
                          ],
                        ),
                      ),
                    )
                    .toList(),
              ),

              const SizedBox(height: 25),

              // Subscribe button
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: isPopular
                        ? const Color(0xFF00BFFF)
                        : Colors.white,
                    foregroundColor: isPopular
                        ? Colors.white
                        : const Color(0xFF00BFFF),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                      side: const BorderSide(color: Color(0xFF00BFFF)),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 14),
                    elevation: isPopular ? 6 : 0,
                  ),
                  onPressed: () {},
                  child: Text(
                    isMonthly ? "Subscribe Monthly" : "Subscribe Yearly",
                  ),
                ),
              ),
            ],
          ),
        ),

        // Most popular badge
        if (isPopular)
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
            decoration: BoxDecoration(
              color: const Color(0xFF00BFFF),
              borderRadius: BorderRadius.circular(20),
            ),
            child: const Text(
              "MOST POPULAR",
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
      ],
    );
  }
}