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) {
    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: 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: 'Cari konten...',
                            hintStyle: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // Collection Items
              Container(
                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"]!,
                        lblSize: 11,
                        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: 40,
                    vertical: 1,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Daftar Topik", 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(
                                      'Topik ' + (index + 1).toString(),
                                      style: const TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 11,
                                        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: 8,
            left: MediaQuery.of(context).size.width / 2 - 38,
            child: Transform.translate(
              offset: Offset(0, -20),
              child: ScanButton(),
            ),
          ),
        ],
      ),
    );
  }
}