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

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:freekake/components/card_list.dart';
import 'package:freekake/components/collection_container%20copy.dart';
import 'package:freekake/helpers/color_helper.dart';
import 'package:freekake/screen/pustaka/list_detail_screen.dart';
import 'package:list_detail_extension/list_detail_extension.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

class ListEducation extends StatefulWidget {
  final String? selectedCategory;
  const ListEducation({super.key, this.selectedCategory});

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

class _ListEducationState extends State<ListEducation> {
  TextEditingController searchController = TextEditingController();
  late final WebViewController _controller;
  late String urlOrAssetPath;
  bool _shouldShowWebView = false;
  String? selectedCategory;
  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/html/furikake/furikake.jpg",
      "color": "#cdd0ee",
      "category": "Kesehatan",
      "type": "Materi",
      "point": "10",
      "coint": "100",
      "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/html/lemak.png",
      "color": "#cef1da",
      "category": "Keselamatan",
      "type": "Materi",
      "point": "100",
      "coint": "20",
      "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",
    },
    {
      "title": "Memori Game",
      "image": "assets/html/freekake.png",
      "color": "#cef1da",
      "category": "Gizi",
      "type": "Materi",
      "point": "100",
      "coint": "20",
      "body":
          """Game untuk melatih daya ingat siswa, sehingga bisa diharapkan bisa 
          menemukan cara sendiri untuk mengingat sesuatu
          """,
      "file": "assets/html/memory/memory.html",
    },
    {
      "title": "Find Words",
      "image": "assets/html/freekake.png",
      "color": "#cef1da",
      "category": "Kesehatan",
      "type": "Materi",
      "point": "100",
      "coint": "20",
      "body": """
            No Descripptions
          """,
      "file": "assets/html/findwords/findwords.html",
    },
  ];
  List<Map<String, dynamic>> filteredItems = [];

  @override
  void initState() {
    super.initState();

    selectedCategory = widget.selectedCategory;
    print(selectedCategory);
    if (selectedCategory != null && selectedCategory!.isNotEmpty) {
      filteredItems =
          _listContent
              .where((item) => item["category"] == selectedCategory)
              .toList();
    } else {
      filteredItems = List.from(_listContent);
    }
    if (!kIsWeb && (Platform.isAndroid || Platform.isIOS)) {
      _shouldShowWebView = true;
      _controller =
          WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);
      urlOrAssetPath = "assets/html/index.html";
      _loadContent(urlOrAssetPath);
      _initExtension();
    }
  }

  void _loadContent(String path) async {
    if (_shouldShowWebView) {
      if (path.startsWith('http')) {
        // Load dari Internet
        _controller.loadRequest(Uri.parse(path));
      } else {
        try {
          await rootBundle.load(path);
          await _controller.loadFlutterAsset(path);
        } catch (e) {
          print("Gagal memuat file HTML: $path\nError: $e");
        }
        _controller.loadFlutterAsset(path);
      }
    }
  }

  void filterSearch(String query) {
    setState(() {
      selectedCategory = null;
      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(() {
      selectedCategory = category;
      filteredItems =
          _listContent.where((item) {
            return item["category"].toLowerCase() == category.toLowerCase();
          }).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    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(),
                searchController.text.toLowerCase(),
              ),
            )
            .toList();
    if (_shouldShowWebView) {
      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
            headerContainer(context, collections),
            // Collection Items dengan Filter
            SizedBox(height: 20),
            Expanded(child: contentContainer(context)),
          ],
        ),
      );
    } else {
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(40),
          child: Text("WebView tidak tersedia untuk platform ini."),
        ),
      );
    }
  }

  Container headerContainer(
    BuildContext context,
    List<Map<String, dynamic>> filteredCollections,
  ) {
    return 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) {
                  final isSelected = selectedCategory == item["category"];
                  return CollectionContainer(
                    label: item["label"]!,
                    imageSvg: item["image"]!,
                    iconw: 20,
                    iconh: 20,
                    width: 70,
                    height: 70,
                    textColor:
                        isSelected
                            ? const Color.fromARGB(255, 230, 48, 160)
                            : Colors.black,
                    lblSize: 10,
                    // colorContiner: ColorHelper.hexToColor(item["color"]),
                    colorContiner:
                        isSelected
                            ? const Color.fromARGB(255, 84, 3, 224)
                            : ColorHelper.hexToColor(item["color"]),
                    onTapAc:
                        () => {
                          searchController.clear(),
                          filterByCategory(item["category"]),
                        },
                  );
                }).toList(),
          ),
        ],
      ),
    );
  }

  Container contentContainer(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color.fromARGB(223, 200, 200, 206),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25),
          topRight: Radius.circular(25),
        ),
      ),
      child: _listCard(context),
    );
  }

  Column _listCard(BuildContext context) {
    return 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: _generateList(),
                        ),
                      ),
                    ),
          ),
        ),
      ],
    );
  }

  GridView _generateList() {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 1,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 2.5,
      ),
      itemCount: filteredItems.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          child: CardList(
            title: filteredItems[index]["title"] ?? "",
            body: filteredItems[index]["body"] ?? "",
            gambar: filteredItems[index]['image'],
            point: filteredItems[index]['point'],
            coint: filteredItems[index]['coint'],
            tipe: filteredItems[index]['type'],
          ),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder:
                    // (context) => listDetailExtension.buildPage({
                    //   'title': filteredItems[index]['category'],
                    //   'imagePath': filteredItems[index]['image'],
                    //   'filepath': filteredItems[index]['file'],
                    //   'paragraphs':
                    //       """
                    //               """
                    //       "<h1> ${filteredItems[index]["title"]} </h1> <p> ${filteredItems[index]["body"]}",
                    // }),
                    (context) => ListDetailScreen(
                      title: filteredItems[index]['category'],
                      // 'imagePath': filteredItems[index]['image'],
                      filepath: filteredItems[index]['file'],
                    ),
              ),
            );
          },
        );
      },
    );
  }
}