import 'package:flutter/material.dart';
import 'package:furibase/components/bottom_navbar.dart';
import 'package:furibase/components/buildcard_info.dart';
import 'package:furibase/components/collection_container.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/scan_button.dart';
import 'package:furibase/components/topbar_container.dart';
import 'package:furibase/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, String>> _collections = [
    {"label": "Kesehatan", "image": "icons/healthy.svg"},
    {"label": "Gizi", "image": "icons/Nutrition.svg"},
    {"label": "Pendidikan", "image": "icons/Education.svg"},
    {"label": "Keselamatan", "image": "icons/Safety.svg"},
  ];

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

  @override
  Widget build(BuildContext context) {
    List<Map<String, String>> filteredCollections =
        _collections
            .where(
              (item) => item["label"]!.toLowerCase().contains(
                _searchQuery.toLowerCase(),
              ),
            )
            .toList();

    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 166, 161, 161),
      body: 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(50, 237, 227, 227),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  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
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 106,
                    vertical: 20,
                  ),
                  child: GridView.count(
                    crossAxisCount: 2,
                    crossAxisSpacing: 20,
                    mainAxisSpacing: 20,
                    children:
                        filteredCollections.map((item) {
                          return CollectionContainer(
                            label: item["label"]!,
                            imageSvg: item["image"]!,
                            width: 100,
                            height: 100,
                            textColor: Colors.black,
                            onTapAc:
                                () => {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) => ListEducation(),
                                    ),
                                  ),
                                },
                          );
                        }).toList(),
                  ),
                ),
              ),
              SizedBox(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 40,
                    vertical: 1,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("List Topic"),
                      Divider(color: Colors.amber),
                    ],
                  ),
                ),
              ),
              // Horizontal Scroll List
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
                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: const Color.fromARGB(120, 255, 255, 255),
                            // 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).toString(),
                                      style: const TextStyle(
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              // 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: 1,
            left: MediaQuery.of(context).size.width / 2 - 48,
            child: Transform.translate(
              offset: Offset(0, -20),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }
}