import 'package:flutter/material.dart';
import 'package:freekake/components/buildcard_info.dart';
import 'package:freekake/components/collection_container.dart';
import 'package:freekake/components/menu_button.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:freekake/screen/Home_screen.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;

  void _onMenuTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Header Section
          Container(
            padding: const EdgeInsets.all(10),
            color: const Color.fromARGB(251, 122, 129, 121).withOpacity(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(50, 237, 227, 227),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  const Icon(Icons.search, color: Colors.black54, size: 18),
                  const SizedBox(width: 8),
                  Expanded(
                    child: TextField(
                      style: const TextStyle(color: Colors.black, fontSize: 12),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Search...',
                        hintStyle: TextStyle(color: Colors.grey),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Collection Items
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 120,
                vertical: 40,
              ),
              child: GridView.count(
                crossAxisCount: 2, // Membuat dua kolom dalam grid
                crossAxisSpacing: 20,
                mainAxisSpacing: 20,
                children: [
                  CollectionContainer(
                    label: "Luffy",
                    imagesrc: 'images/luffy.png',
                    width: 100,
                    height: 100,
                    onTapAc:
                        () => {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ListEducation(),
                            ),
                          ),
                        },
                  ),
                  CollectionContainer(
                    label: "Oni Chan",
                    imagesrc: 'images/klipartz.png',
                    width: 100,
                    height: 100,
                    onTapAc: () => {},
                  ),
                  CollectionContainer(
                    label: "Cepot",
                    imagesrc: 'images/cepott.png',
                    width: 100,
                    height: 100,
                    onTapAc: () => {},
                  ),
                  CollectionContainer(
                    label: "Cepot",
                    imagesrc: 'images/cepott.png',
                    width: 100,
                    height: 100,
                    onTapAc: () => {},
                  ),
                ],
              ),
            ),
          ),

          // Horizontal Scroll List
          SizedBox(
            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(15),
                      ),
                      child: Container(
                        width: 80,
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.book,
                              size: 50,
                              color: Colors.blueAccent,
                            ),
                            Text(
                              'Item $index',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

          // Bottom Navigation
          Container(
            color: Colors.transparent,
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                MenuButton(
                  label: "E-furibuddy",
                  icon: 'icons/furrybuddy.svg',
                  onPress:
                      () => Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => HomeScreen()),
                      ),
                ),
                MenuButton(
                  label: "Koleksi",
                  icon: 'icons/koleksi.svg',
                  onPress: () {},
                ),
                ScanButton(),
                MenuButton(
                  label: "Pustaka",
                  icon: 'icons/Pustaka.svg',
                  onPress: () {},
                ),
                MenuButton(
                  label: "Saya",
                  icon: 'icons/Saya.svg',
                  onPress: () {},
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}