import 'package:flutter/material.dart';
import 'package:furibase/components/buildcard_info.dart';
import 'package:furibase/components/card_list.dart';
import 'package:furibase/components/collection_container%20copy.dart';
import 'package:furibase/components/main_menu.dart';
import 'package:furibase/components/topbar_container.dart';
import 'package:furibase/helpers/color_helper.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) {
    String _searchQuery = "";
    final List<Map<String, dynamic>> _collections = [
      {
        "label": "Kesehatan",
        "image": "assets/icons/healthy.svg",
        "color": "#cdd0ee",
        "category": "kesehatan",
      },
      {
        "label": "Gizi",
        "image": "assets/icons/Nutrition.svg",
        "color": "#e8e29a",
        "category": "gizi",
      },
      {
        "label": "Pendidikan",
        "image": "assets/icons/Education.svg",
        "color": "#efd8c6",
        "category": "pendidikan",
      },
      {
        "label": "Keselamatan",
        "image": "assets/icons/Safety.svg",
        "color": "#cef1da",
        "category": "keselamatan",
      },
    ];

    final List<Map<String, dynamic>> _listContent = [
      {
        "title": "Taburan Lezat untuk Nasi!",
        "image": "assets/icons/healthy.svg",
        "color": "#cdd0ee",
        "category": "kesehatan",
        "body":
            """Tahukah kamu bahwa di Jepang ada bumbu tabur yang bisa membuat nasi 
                menjadi lebih enak? Namanya Furikake! Kata "furikake" berasal dari bahasa Jepang, yaitu "furi" 
                yang berarti menaburkan dan "kake" yang berarti menuangkan. Jadi, 
                furikake adalah bumbu yang ditaburkan di atas nasi supaya lebih lezat!
                """,
      },
      {
        "title": "Makan Sehat dengan Gizi Seimbang",
        "image": "assets/icons/Safety.svg",
        "color": "#cef1da",
        "category": "keselamatan",
        "body":
            """upaya makan kita sehat, ada aturan "Isi Piringku" yang bisa kita ikuti: 
          🍽️ Separuh piring: Sayur dan buah 🍽️ Seperempat piring: Karbohidrat (seperti nasi atau roti) 
          🍽️ Seperempat piring: Protein (seperti ayam atau tempe) 🍽️ Sedikit lemak sehat
          """,
      },
    ];
    List<Map<String, dynamic>> filteredCollections =
        _collections
            .where(
              (item) => item["label"].toLowerCase().contains(
                _searchQuery.toLowerCase(),
              ),
            )
            .toList();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color.fromARGB(225, 79, 76, 182),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => Navigator.of(context).pop(false),
        ),
        actions: <Widget>[],
      ),
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: Column(
        children: [
          // Header Section
          Container(
            width: MediaQuery.of(context).size.width,
            height: 150,
            decoration: BoxDecoration(
              color: const Color.fromARGB(225, 79, 76, 182),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(25),
                bottomRight: Radius.circular(25),
              ),
            ),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 20,
                    vertical: 6,
                  ),
                  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('');
                            },
                          ),
                      ],
                    ),
                  ),
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children:
                      filteredCollections.map((item) {
                        return CollectionContainer(
                          label: item["label"]!,
                          imageSvg: item["image"]!,
                          iconw: 20,
                          iconh: 20,
                          width: 70,
                          height: 70,
                          textColor: Colors.black,
                          lblSize: 10,
                          colorContiner: ColorHelper.hexToColor(item["color"]),
                          onTapAc:
                              () => {
                                searchController.clear(),
                                filterSearch(item["category"]),
                              },
                        );
                      }).toList(),
                ),
              ],
            ),
          ),

          // 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
          SizedBox(height: 20),
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: const Color.fromARGB(224, 145, 145, 155),
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25),
                  topRight: Radius.circular(25),
                ),
              ),
              child: Column(
                children: [
                  SizedBox(height: 5),
                  Padding(
                    padding: EdgeInsets.symmetric(
                      horizontal: MediaQuery.of(context).size.width / 4,
                    ),
                    child: Divider(
                      color: const Color.fromARGB(255, 155, 147, 147),
                      height: 20,
                    ),
                  ),

                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        // vertical: 10,
                      ),
                      child:
                          filteredItems.isEmpty
                              ? const Center(
                                child: Text(
                                  "Tidak ada hasil",
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.black54,
                                  ),
                                ),
                              )
                              : Padding(
                                padding: EdgeInsets.only(
                                  top: 20.0,
                                  left: 20,
                                  right: 20,
                                ),
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(20),
                                      topRight: Radius.circular(20),
                                    ),
                                    color: const Color.fromARGB(
                                      255,
                                      222,
                                      181,
                                      133,
                                    ),
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                      top: 12,
                                      right: 20,
                                      left: 20,
                                    ),
                                    child: GridView.builder(
                                      gridDelegate:
                                          const SliverGridDelegateWithFixedCrossAxisCount(
                                            crossAxisCount: 1, // 2 Kolom
                                            crossAxisSpacing: 10,
                                            mainAxisSpacing: 10,
                                            childAspectRatio: 2.5,
                                          ),
                                      itemCount: _listContent.length,
                                      itemBuilder: (context, index) {
                                        return GestureDetector(
                                          child: CardList(
                                            title:
                                                _listContent[index]["title"] ??
                                                "",
                                            body:
                                                _listContent[index]["body"] ??
                                                "",
                                          ),
                                          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>
                                                            """,
                                                      ], */
                                                      paragraphs: """
                                                      <!DOCTYPE html>
                                                      <html lang="id">
                                                      <head>
                                                          <meta charset="UTF-8">
                                                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                          <title>Furikake: Taburan Lezat untuk Nasi!</title>
                                                          <style>
                                                              * {
                                                                  box-sizing: border-box;
                                                                  margin: 0;
                                                                  padding: 0;
                                                              }
                                                              
                                                              body {
                                                                  font-family: 'Roboto', sans-serif;
                                                                  line-height: 1.5;
                                                                  color: #333;
                                                                  background-color: #fff;
                                                                  padding: 15px;
                                                                  max-width: 100%;
                                                                  max-height:100%;
                                                                  overflow-x: hidden;
                                                              }
                                                              
                                                              h1 {
                                                                  color: #d32f2f;
                                                                  text-align: center;
                                                                  font-size: 1.5rem;
                                                                  margin: 10px 0 15px 0;
                                                                  font-weight: 500;
                                                              }
                                                              
                                                              h2 {
                                                                  color: #f57c00;
                                                                  font-size: 1.3rem;
                                                                  margin: 20px 0 10px 0;
                                                                  font-weight: 500;
                                                                  padding-bottom: 3px;
                                                                  border-bottom: 1px solid #eee;
                                                              }
                                                              
                                                              p {
                                                                  margin-bottom: 15px;
                                                                  font-size: 0.95rem;
                                                                  text-align: left;
                                                              }
                                                              
                                                              .kanji {
                                                                  font-size: 2.2rem;
                                                                  text-align: center;
                                                                  color: #333;
                                                                  margin: 10px 0;
                                                                  font-family: 'Noto Sans JP', sans-serif;
                                                                  line-height: 1;
                                                              }
                                                              
                                                              .main-image {
                                                                  width: 100%;
                                                                  margin: 15px 0;
                                                                  text-align: center;
                                                              }
                                                              
                                                              .main-image img {
                                                                  max-width: 100%;
                                                                  height: auto;
                                                                  border-radius: 8px;
                                                              }
                                                              
                                                              .main-image p {
                                                                  text-align: center;
                                                                  font-size: 0.85rem;
                                                                  color: #666;
                                                                  margin-top: 5px;
                                                              }
                                                              
                                                              .ingredients {
                                                                  display: grid;
                                                                  grid-template-columns: 1fr 1fr;
                                                                  gap: 10px;
                                                                  margin: 15px 0;
                                                              }
                                                              
                                                              .ingredient {
                                                                  text-align: center;
                                                              }
                                                              
                                                              .ingredient img {
                                                                  width: 100%;
                                                                  border-radius: 6px;
                                                              }
                                                              
                                                              .ingredient p {
                                                                  font-size: 0.85rem;
                                                                  margin-top: 3px;
                                                                  text-align: center;
                                                              }
                                                              
                                                              .highlight {
                                                                  background-color: #f5f5f5;
                                                                  padding: 12px;
                                                                  margin: 15px 0;
                                                                  border-radius: 6px;
                                                              }
                                                              
                                                              ul {
                                                                  padding-left: 20px;
                                                                  margin-bottom: 15px;
                                                              }
                                                              
                                                              li {
                                                                  margin-bottom: 8px;
                                                                  font-size: 0.95rem;
                                                              }
                                                              
                                                              strong {
                                                                  font-weight: 500;
                                                              }
                                                          </style>
                                                      </head>
                                                      <body>
                                                          <h1>Furikake: Taburan Lezat untuk Nasi!</h1>
                                                          
                                                          <div class="kanji">振り掛け</div>
                                                          
                                                          <p>Tahukah kamu bahwa di Jepang ada bumbu tabur yang 
                                                          bisa membuat nasi menjadi lebih enak? Namanya Furikake! Kata "furikake" berasal dari bahasa Jepang, 
                                                          yaitu "furi" yang berarti menaburkan dan "kake" yang berarti menuangkan. 
                                                          Jadi, furikake adalah bumbu yang ditaburkan di atas nasi supaya lebih lezat!</p>
                                                        """,
                                                    ),
                                              ),
                                            );
                                          },
                                        );
                                      },
                                    ),
                                  ),
                                ),
                              ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // Bottom Navigation
          // MainMenu(),
        ],
      ),
    );
  }
}