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

import '../../../common/data/service_data.dart';
import '../../../common/theme/theme.dart';
import '../../../sample/product_sample_data.dart';
import '../../components/delegate/category_delegate.dart';
import 'widgets/header.dart';
import 'widgets/product_section.dart';

@RoutePage()
class MenuPage extends StatefulWidget {
  final Service service;
  const MenuPage({super.key, required this.service});

  @override
  State<MenuPage> createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  final ScrollController _scrollController = ScrollController();
  final List<GlobalKey> _productSectionKeys = [];

  String _selectedCategoryId = "";

  @override
  void initState() {
    super.initState();
    _selectedCategoryId = categories.isNotEmpty ? categories.first.id : "";

    // Initialize keys for each category
    for (int i = 0; i < categories.length; i++) {
      _productSectionKeys.add(GlobalKey());
    }
  }

  void _scrollToCategory(String categoryId) {
    setState(() {
      _selectedCategoryId = categoryId;
    });

    final categoryIndex = categories.indexWhere((cat) => cat.id == categoryId);
    if (categoryIndex >= 0 && categoryIndex < _productSectionKeys.length) {
      final key = _productSectionKeys[categoryIndex];
      final context = key.currentContext;

      if (context != null) {
        Future.delayed(Duration(milliseconds: 100), () {
          if (mounted) {
            Scrollable.ensureVisible(
              context,
              duration: Duration(milliseconds: 500),
              curve: Curves.easeInOut,
              alignment: 0.1,
            );
          }
        });
      }
    }
  }

  List<Product> _getProductsByCategory(String categoryId) {
    return products
        .where((product) => product.categoryId == categoryId)
        .toList();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          // App Bar with merchant info
          SliverAppBar(
            expandedHeight: 200,
            pinned: true,
            backgroundColor: AppColor.primary,
            leading: IconButton(
              icon: Icon(Icons.arrow_back, color: AppColor.textWhite),
              onPressed: () => Navigator.of(context).pop(),
            ),
            actions: [
              IconButton(
                icon: Icon(Icons.share, color: AppColor.textWhite),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.favorite_border, color: AppColor.textWhite),
                onPressed: () {},
              ),
            ],
            flexibleSpace: FlexibleSpaceBar(
              background: MenuHeader(service: widget.service),
            ),
          ),

          // Categories (will be pinned)
          SliverPersistentHeader(
            pinned: true,
            delegate: SliverCategoryDelegate(
              categories: categories,
              selectedCategoryId: _selectedCategoryId,
              onCategoryTap: _scrollToCategory,
            ),
          ),

          // Product sections by category
          ...categories.map((category) {
            final categoryProducts = _getProductsByCategory(category.id);
            final categoryIndex = categories.indexOf(category);

            return SliverToBoxAdapter(
              key: _productSectionKeys[categoryIndex],
              child: MenuProductSection(
                category: category,
                categoryProducts: categoryProducts,
              ),
            );
          }),
        ],
      ),
    );
  }
}