import 'package:flutter/material.dart';
import 'package:furibase/components/buildcard_info.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/screen/pustaka/pustaka_detail_screen.dart';

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

  @override
  State<ListEducation> createState() => _ListEducationState();
}

class _ListEducationState extends State<ListEducation> {
  TextEditingController searchController = TextEditingController();
  List<String> allItems = [
    "Matematika",
    "Fisika",
    "Kimia",
    "Biologi",
    "Sejarah",
    "Geografi",
  ];
  List<String> filteredItems = [];

  @override
  void initState() {
    super.initState();
    filteredItems = List.from(allItems);
  }

  void filterSearch(String query) {
    setState(() {
      filteredItems =
          allItems
              .where((item) => item.toLowerCase().contains(query.toLowerCase()))
              .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      body: Column(
        children: [
          // Header Section
          Container(
            padding: const EdgeInsets.all(10),
            color: Colors.grey.withOpacity(0.2),
            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,
                ),
              ],
            ),
          ),

          // Search Bar
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Container(
              height: 47,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.grey.shade200,
              ),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  const Icon(
                    Icons.search,
                    color: Color.fromARGB(137, 180, 172, 172),
                    size: 18,
                  ),
                  const SizedBox(width: 8),
                  Expanded(
                    child: TextField(
                      controller: searchController,
                      onChanged: filterSearch, // Memanggil filter saat mengetik
                      style: const TextStyle(color: Colors.black, fontSize: 14),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Cari pelajaran...',
                        hintStyle: TextStyle(color: Colors.black54),
                      ),
                    ),
                  ),
                  if (searchController.text.isNotEmpty)
                    IconButton(
                      icon: const Icon(Icons.close, color: Colors.black54),
                      onPressed: () {
                        searchController.clear();
                        filterSearch('');
                      },
                    ),
                ],
              ),
            ),
          ),

          // Collection Items dengan Filter
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child:
                  filteredItems.isEmpty
                      ? const Center(
                        child: Text(
                          "Tidak ada hasil",
                          style: TextStyle(fontSize: 16, color: Colors.black54),
                        ),
                      )
                      : GridView.builder(
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2, // 2 Kolom
                              crossAxisSpacing: 20,
                              mainAxisSpacing: 20,
                              childAspectRatio: 2.5,
                            ),
                        itemCount: filteredItems.length,
                        itemBuilder: (context, index) {
                          return Card(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            elevation: 5,
                            color: const Color.fromARGB(120, 255, 255, 255),

                            child: ListTile(
                              leading: Icon(
                                Icons.book,
                                color: const Color.fromARGB(255, 52, 16, 212),
                              ),
                              title: Text(filteredItems[index]),
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder:
                                        (context) => ListDetailScreen(
                                          title: filteredItems[index],
                                          imagePath: filteredItems[index],
                                          paragraphs: [
                                            """
                                                    <h1>Enter the main heading, usually the same as the title.</h1>
                                                    <p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
                                                    <ul>
                                                      <li>The first item in your list</li>
                                                      <li>The second item; <i>italicize</i> key words</li>
                                                    </ul>
                                                    <p>Improve your image by including an image. </p>
                                                    <p><img src="https://via.placeholder.com/150" alt="A Great HTML Resource"></p>
                                                    <p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.</p>
                                                    <hr>
                                                    <p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
                                                    <p>© Wiley Publishing, 2011</p>
                                                    """,
                                          ],
                                        ),
                                  ),
                                );
                              },
                            ),
                          );
                        },
                      ),
            ),
          ),
          // Bottom Navigation
          // MainMenu(),
        ],
      ),
    );
  }
}