import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/card_list.dart';
import 'package:freekake/components/collection_container%20copy.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/topbar_container.dart';
import 'package:freekake/helpers/color_helper.dart';
import 'package:freekake/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();
  late final WebViewController _controller;
  late String urlOrAssetPath;
  bool _shouldShowWebView = false;

  // load extension
  final listDetailExtension = ListDetailExtension();

  Future<void> _initExtension() async {
    await listDetailExtension.load();
  }

  List<String> allItems = [
    "Matematika",
    "Fisika",
    "Kimia",
    "Biologi",
    "Sejarah",
    "Geografi",
  ];

  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? 
                """,
      "file": "assets/html/furikake/index.html",
    },
    {
      "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
          """,
      "file": "assets/html/index.html",
    },
  ];
  List<Map<String, dynamic>> filteredItems = [];

  @override
  void initState() {
    super.initState();
    filteredItems = List.from(_listContent);
    if (!kIsWeb && (Platform.isAndroid || Platform.isIOS)) {
      _shouldShowWebView = true;
      _controller =
          WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);
      urlOrAssetPath = "assets/makanan_bergizi/index.html";
      _loadContent(urlOrAssetPath);
      _initExtension();
    }
  }

  void _loadContent(String path) async {
    if (_shouldShowWebView && _controller != null) {
      if (path.startsWith('http')) {
        // Load dari Internet
        _controller.loadRequest(Uri.parse(path));
      } else {
        // Load dari assets lokal
        // String fileHtml = await rootBundle.loadString(path);
        String fileHtml = await DefaultAssetBundle.of(
          context,
        ).loadString('assets/html/index.html');
        _controller.loadHtmlString(fileHtml);
      }
    }
  }

  void filterSearch(String query) {
    setState(() {
      if (query.isEmpty) {
        filteredItems = List.from(_listContent);
      } else {
        filteredItems =
            _listContent.where((item) {
              return item["title"].toLowerCase().contains(query.toLowerCase());
            }).toList();
      }
    });
  }

  void filterByCategory(String category) {
    setState(() {
      filteredItems =
          _listContent.where((item) {
            return item["category"].toLowerCase() == category.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>> filteredCollections =
        _collections
            .where(
              (item) => item["label"].toLowerCase().contains(
                _searchQuery.toLowerCase(),
              ),
            )
            .toList();
    if (_shouldShowWebView && _controller != null) {
      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(),
                                  filterByCategory(item["category"]),
                                },
                          );
                        }).toList(),
                  ),
                ],
              ),
            ),
            // Collection Items dengan Filter
            SizedBox(height: 20),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: const Color.fromARGB(223, 200, 200, 206),
                  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, 255, 255, 255),
                        thickness: 2,
                      ),
                    ),
                    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: 10.0,
                                    left: 10,
                                    right: 10,
                                  ),
                                  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,
                                                      ) => listDetailExtension.buildPage({
                                                        'title':
                                                            filteredItems[index]['category'],
                                                        'imagePath':
                                                            filteredItems[index]['image'],
                                                        'filepath':
                                                            filteredItems[index]['file'],
                                                        'paragraphs':
                                                            """
                                                           """ +
                                                            "<h1> ${_listContent[index]["title"]} </h1> <p> ${_listContent[index]["body"]}",
                                                      }),
                                                ),
                                              );
                                            },
                                          );
                                        },
                                      ),
                                    ),
                                  ),
                                ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    } else {
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(40),
          child: Text("WebView tidak tersedia untuk platform ini."),
        ),
      );
    }
  }
}