import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/gen/assets.gen.dart';
import 'package:lba/res/colors.dart';
import 'package:lba/widgets/button.dart';
import 'package:lba/widgets/profile_app_bar.dart';

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

  @override
  State<NotificationSettingsPage> createState() =>
      _NotificationSettingsPageState();
}

class _NotificationSettingsPageState extends State<NotificationSettingsPage>
    with TickerProviderStateMixin {
  bool _specialOffers = true;
  bool _orderStatus = true;
  bool _accountNotifications = false;
  bool _productUpdates = true;

  String _selectedFrequency = 'Daily';

  late AnimationController _animationController;
  late List<Animation<double>> _animations;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200),
    );

    const int itemCount = 9;

    _animations = List.generate(itemCount, (index) {
      final double startTime = (index / itemCount) * 0.5;
      final double endTime = (startTime + 0.5).clamp(0.0, 1.0);
      return Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: _animationController,
          curve: Interval(startTime, endTime, curve: Curves.easeOutCubic),
        ),
      );
    });

    _animationController.forward();
  }

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

  Widget _buildAnimatedWidget(Widget child, int index) {
    if (index >= _animations.length) return child;

    return FadeTransition(
      opacity: _animations[index],
      child: SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(0.0, 0.5),
          end: Offset.zero,
        ).animate(_animations[index]),
        child: child,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.scaffoldBackground,
      appBar: const ProfileAppBar(
        title: 'Notifications',
        showBackButton: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 20,),
            _buildAnimatedWidget(
              _buildSectionHeader(
                icon: Assets.icons.category2.path,
                title: 'Notification Categories',
              ),
              0,
            ),
            const SizedBox(height: 16),
            _buildAnimatedWidget(
              _buildSwitchOption(
                title: 'Special Offers',
                value: _specialOffers,
                onChanged: (val) => setState(() => _specialOffers = val),
              ),
              1,
            ),
            _buildAnimatedWidget(
              _buildSwitchOption(
                title: 'Order Status',
                value: _orderStatus,
                onChanged: (val) => setState(() => _orderStatus = val),
              ),
              2,
            ),
            _buildAnimatedWidget(
              _buildSwitchOption(
                title: 'Account Notifications',
                value: _accountNotifications,
                onChanged: (val) => setState(() => _accountNotifications = val),
              ),
              3,
            ),
            _buildAnimatedWidget(
              _buildSwitchOption(
                title: 'Product Updates',
                value: _productUpdates,
                onChanged: (val) => setState(() => _productUpdates = val),
              ),
              4,
            ),

            const SizedBox(height: 32),

            _buildAnimatedWidget(
              _buildSectionHeader(
                icon: Assets.icons.notificationStatus.path,
                title: 'Notification Frequency Control',
              ),
              5,
            ),
            const SizedBox(height: 16),
            _buildAnimatedWidget(
              _buildFrequencyOption('Daily'),
              6,
            ),
            _buildAnimatedWidget(
              _buildFrequencyOption('Weekly'),
              6,
            ),
            _buildAnimatedWidget(
              _buildFrequencyOption('Monthly'),
              6,
            ),

            const SizedBox(height: 40),

            _buildAnimatedWidget(
              SizedBox(
                width: double.infinity,
                height: 50,
                child: Button(
                  text: "Submit",
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  color: AppColors.confirmButton,
                ),
              ),
              7,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionHeader({required String icon, required String title}) {
    return Row(
      children: [
        SvgPicture.asset(icon, width: 24, color: AppColors.primary),
        const SizedBox(width: 12),
        Text(
          title,
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: AppColors.textPrimary,
          ),
        ),
      ],
    );
  }

  Widget _buildSwitchOption({
    required String title,
    required bool value,
    required ValueChanged<bool> onChanged,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 8.0),
      child: Row(
        children: [
          Expanded(
            child: Text(
              title,
              style: TextStyle(
                fontSize: 16, 
                fontWeight: FontWeight.w500,
                color: AppColors.textPrimary,
              ),
            ),
          ),
          Transform.scale(
            scale: 0.75,
            child: Switch(
              value: value,
              onChanged: onChanged,
              activeColor: Colors.white,
              activeTrackColor: AppColors.trunOff_On,
              inactiveThumbColor: Colors.white,
              inactiveTrackColor: AppColors.divider.withOpacity(0.4),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFrequencyOption(String title) {
    bool isSelected = _selectedFrequency == title;
    return InkWell(
      onTap: () {
        setState(() {
          _selectedFrequency = title;
        });
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
        child: Row(
          children: [
            Expanded(
              child: Text(
                title,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: AppColors.textPrimary,
                ),
              ),
            ),
            AnimatedContainer(
              duration: const Duration(milliseconds: 200),
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                  color: isSelected ? AppColors.primary : AppColors.divider,
                  width: 2,
                ),
              ),
              child: isSelected
                  ? Center(
                      child: Container(
                        width: 12,
                        height: 12,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: AppColors.primary,
                        ),
                      ),
                    )
                  : null,
            ),
          ],
        ),
      ),
    );
  }
}