import 'package:classifragise/pages/camera_page.dart';
import 'package:classifragise/pages/pilih_gambar_page.dart';
import 'package:classifragise/pages/strawberry_info_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Bagian Header dengan Background Merah
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
              decoration: const BoxDecoration(
                color: Color(0xFF891A2D),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(30),
                  bottomRight: Radius.circular(30),
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Baris pertama: Judul & Ikon Info
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "ClassiFragis",
                        style: GoogleFonts.poppins(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      IconButton(
                        icon:
                            const Icon(Icons.info_outline, color: Colors.white),
                        onPressed: () {
                          // Navigasi ke halaman informasi stroberi
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    const StrawberryInfoPage()),
                          );
                        },
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),

                  // Gambar Header
                  Center(
                    child: Image.asset(
                      "assets/home4.png", // Ganti dengan gambar ilustrasi utama
                      width: 320,
                      height: 250,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 20),

            // Judul
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                "Identifikasi Kesegaran Buah Stroberi",
                textAlign: TextAlign.center,
                style: GoogleFonts.poppins(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
            ),

            const SizedBox(height: 5),

            // Deskripsi
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: RichText(
                textAlign: TextAlign.justify,
                text: TextSpan(
                  style:
                      GoogleFonts.poppins(fontSize: 14, color: Colors.black54),
                  children: [
                    const TextSpan(
                        text:
                            "Gunakan kedua fitur ini secara optimal untuk membantu menyelesaikan masalah Anda dalam memilih "),
                    TextSpan(
                      text: "Stroberi",
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF891A2D)),
                    ),
                    const TextSpan(text: "."),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 20),

            // Tombol Pilih Gambar
            OptionCard(
              title: "Pilih Gambar",
              description: "Buka galeri untuk memilih gambar stroberi.",
              icon: Icons.image_outlined,
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => const SelectImagePage()),
                ); // Aksi pilih gambar
              },
            ),

            const SizedBox(height: 10),

            // Garis Pemisah dengan Tulisan "atau"
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Row(
                children: [
                  const Expanded(child: Divider(color: Colors.black26)),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    child: Text("atau",
                        style: GoogleFonts.poppins(
                          fontSize: 14,
                          color: Colors.black45,
                        )),
                  ),
                  const Expanded(child: Divider(color: Colors.black26)),
                ],
              ),
            ),

            const SizedBox(height: 10),

            // Tombol Ambil Gambar
            OptionCard(
              title: "Ambil Gambar",
              description: "Buka kamera untuk mengambil gambar stroberi.",
              icon: Icons.camera_alt_outlined,
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const CameraPage()),
                );
              },
            ),

            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}

class OptionCard extends StatelessWidget {
  final String title;
  final String description;
  final IconData icon;
  final VoidCallback onTap;

  const OptionCard({
    required this.title,
    required this.description,
    required this.icon,
    required this.onTap,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 20),
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
          color: const Color(0xFF891A2D),
          borderRadius: BorderRadius.circular(15),
          boxShadow: [
            BoxShadow(
              color: Colors.black12.withOpacity(0.2),
              blurRadius: 5,
              spreadRadius: 1,
              offset: const Offset(0, 3),
            ),
          ],
        ),
        child: Row(
          children: [
            // Ikon
            Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
              ),
              child: Icon(
                icon,
                size: 30,
                color: const Color(0xFF891A2D),
              ),
            ),
            const SizedBox(width: 15),

            // Teks Deskripsi
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: GoogleFonts.poppins(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    description,
                    style: GoogleFonts.poppins(
                      fontSize: 12,
                      color: Colors.white70,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}