import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/collection_container.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:freekake/components/topbar_container.dart';
import 'package:freekake/helpers/color_helper.dart';
import 'package:freekake/screen/pustaka/list_education.dart';

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

  @override
  State<PustakaScreen> createState() => _PustakaScreenState();
}

class _PustakaScreenState extends State<PustakaScreen> {
  final PageController _pageController = PageController();
  int _selectedIndex = 0;
  final TextEditingController _searchController = TextEditingController();
  String _searchQuery = "";

  final List<Map<String, dynamic>> _collections = [
    {
      "label": "Kesehatan",
      "image": "assets/icons/healthy.svg",
      "color": "#cdd0ee",
    },
    {
      "label": "Gizi",
      "image": "assets/icons/Nutrition.svg",
      "color": "#e8e29a",
    },
    {
      "label": "Pendidikan",
      "image": "assets/icons/Education.svg",
      "color": "#efd8c6",
    },
    {
      "label": "Keselamatan",
      "image": "assets/icons/Safety.svg",
      "color": "#cef1da",
    },
  ];

  void _onMenuTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final buttonScanSize = screenWidth * 0.20;
    final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
    List<Map<String, dynamic>> filteredCollections =
        _collections
            .where(
              (item) => item["label"]!.toLowerCase().contains(
                _searchQuery.toLowerCase(),
              ),
            )
            .toList();

    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: pustakaBody(
        filteredCollections,
        context,
        bottomPadding,
        screenWidth,
        buttonScanSize,
      ),
    );
  }

  Stack pustakaBody(
    List<Map<String, dynamic>> filteredCollections,
    BuildContext context,
    double bottomPadding,
    double screenWidth,
    double buttonScanSize,
  ) {
    return Stack(
      children: [
        //Top Bar
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: SizedBox(height: 130, child: TopbarContainer()),
        ),
        Column(
          children: [
            // Header Section
            Container(
              padding: const EdgeInsets.all(10),
              color: const Color.fromARGB(250, 255, 255, 255).withOpacity(0.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  BuildcardInfo(
                    icon: Icons.person,
                    text: 'User01',
                    extraIcon: Icons.emoji_events,
                    extraText: "5000",
                    width: 180,
                  ),
                  BuildcardInfo(
                    icon: Icons.monetization_on,
                    text: "1.300",
                    width: 90,
                  ),
                ],
              ),
            ),

            // // Date Display
            // Padding(
            //   padding: const EdgeInsets.symmetric(vertical: 10),
            //   child: Text(
            //     DateTime.now().toString(),
            //     style: const TextStyle(color: Colors.white),
            //   ),
            // ),

            // Search Bar
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
              child: Container(
                height: 47,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: const Color.fromARGB(255, 237, 227, 227),
                ),
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Row(
                  children: [
                    const Icon(Icons.search, color: Colors.black54, size: 18),
                    const SizedBox(width: 8),
                    Expanded(
                      child: TextField(
                        controller: _searchController,
                        onChanged: (value) {
                          setState(() {
                            _searchQuery = value;
                          });
                        },
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 12,
                        ),
                        decoration: const InputDecoration(
                          border: InputBorder.none,
                          hintText: 'Search...',
                          hintStyle: TextStyle(color: Colors.grey),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // Collection Items
            SizedBox(
              height: 440,
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 58,
                  vertical: 60,
                ),
                child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 140,
                    mainAxisSpacing: 20,
                    crossAxisSpacing: 20,
                    childAspectRatio: 1, // 1:1 rasio (kotak)
                  ),
                  itemCount: filteredCollections.length,
                  itemBuilder: (context, index) {
                    final item = filteredCollections[index];
                    return CollectionContainer(
                      label: item["label"]!,
                      imageSvg: item["image"]!,
                      width: 30,
                      height: 80,
                      textColor: Colors.black,
                      circle: true,
                      colorContiner: ColorHelper.hexToColor(item["color"]),
                      onTapAc: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => const ListEducation(),
                          ),
                        );
                      },
                    );
                  },
                ),
              ),
            ),
            // SizedBox(
            //   child: Padding(
            //     padding: const EdgeInsets.symmetric(
            //       horizontal: 5,
            //       vertical: 1,
            //     ),
            //     child: Column(
            //       crossAxisAlignment: CrossAxisAlignment.start,
            //       children: [
            //         Text("List Topic", style: TextStyle(color: Colors.black)),
            //         Divider(color: Colors.transparent),
            //       ],
            //     ),
            //   ),
            // ),
            // Horizontal Scroll List
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: 100,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: List.generate(
                      10,
                      (index) => Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: Card(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          elevation: 5,
                          color: ColorHelper.hexToColor("#efd8c6"),
                          // color: const Color.fromARGB(140, 255, 255, 255),
                          // shape: RoundedRectangleBorder(
                          //   borderRadius: BorderRadius.circular(15),
                          // ),
                          child: GestureDetector(
                            onTap:
                                () => {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) => ListEducation(),
                                    ),
                                  ),
                                },
                            child: Container(
                              width: 80,
                              padding: const EdgeInsets.all(10),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.book,
                                    size: 50,
                                    color: Colors.blueAccent,
                                  ),
                                  Text(
                                    'Topic ${index + 1}',
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Color.fromARGB(255, 0, 0, 0),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            // Bottom Navigation
            // MainMenu(),
          ],
        ),
        // BG MEnu
        Stack(
          children: [
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: SizedBox(height: 85, child: BottomNavbar()),
            ),
            Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
          ],
        ),
        Positioned(
          bottom: bottomPadding * 98,
          left: (screenWidth - buttonScanSize) / 2,
          child: Transform.translate(
            offset: Offset(0, -20),
            child: ScanButton(),
          ),
        ),
      ],
    );
  }
}