// Tetap gunakan import seperti sebelumnya
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);

  static const Color primaryColor = Color(0xFF1E3A8A);
  static const Color cardColor = Color(0xFF3B82F6);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        backgroundColor: primaryColor,
        elevation: 6,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
        ),
        title: Text(
          "FeMonitor",
          style: GoogleFonts.poppins(
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.info_outline, color: Colors.white),
            onPressed: controller.keInfo,
          ),
        ],
      ),
      body: SafeArea(
        child: Obx(() {
          return SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 12),
                Text(
                  "Satuan Kadar Zat Besi",
                  style: GoogleFonts.poppins(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  children: [
                    Expanded(
                      child: _feCard("KADAR FE SEBELUM", controller.feSebelum.value, Icons.water_drop),
                    ),
                    const SizedBox(width: 12),
                    Expanded(
                      child: _feCard("KADAR FE SESUDAH", controller.feSesudah.value, Icons.water),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
                Text(
                  "Hasil Deteksi: ${controller.hasilDeteksi}",
                  style: GoogleFonts.poppins(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                    color: Colors.redAccent,
                  ),
                ),
                const SizedBox(height: 30),
                Row(
                  children: [
                    // Status Pompa
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Status Pompa", style: GoogleFonts.poppins(fontSize: 14, fontWeight: FontWeight.w500)),
                          const SizedBox(height: 8),
                         GestureDetector(
  onTap: controller.togglePompa,
  child: AnimatedContainer(
    duration: const Duration(milliseconds: 300),
    width: double.infinity,
    height: 60,
    decoration: BoxDecoration(
      color: controller.pompaOn.value
          ? Colors.greenAccent.shade400
          : Colors.grey.shade400,
      borderRadius: BorderRadius.circular(40),
    ),
    alignment: controller.pompaOn.value
        ? Alignment.centerRight
        : Alignment.centerLeft,
    padding: const EdgeInsets.symmetric(horizontal: 6),
    child: Container(
      width: 70,
      height: 46,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(30),
        color: Colors.white,
      ),
      alignment: Alignment.center,
      child: Text(
        controller.pompaOn.value ? 'ON' : 'OFF',
        style: GoogleFonts.poppins(
          fontWeight: FontWeight.bold,
          color: HomeView.primaryColor,
        ),
      ),
    ),
  ),
),

                        ],
                      ),
                    ),
                    const SizedBox(width: 16),
                    // Simpan Data
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Simpan Data", style: GoogleFonts.poppins(fontSize: 14, fontWeight: FontWeight.w500)),
                          const SizedBox(height: 8),
                          SizedBox(
                            height: 60,
                            width: double.infinity,
                            child: ElevatedButton(
                              onPressed: () {
                                showDialog(
                                  context: context,
                                  builder: (ctx) => _buildConfirmationDialog(ctx),
                                );
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: primaryColor,
                                foregroundColor: Colors.white,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(15),
                                ),
                              ),
                              child: const Icon(Icons.save, size: 28),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 30),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("Riwayat Pengecekan", style: GoogleFonts.poppins(fontSize: 17, fontWeight: FontWeight.w600)),
                    GestureDetector(
                      onTap: controller.keHistory,
                      child: Text("Selengkapnya",
                        style: GoogleFonts.poppins(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                          color: primaryColor,
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 12),
                Obx(() {
                  final list = controller.historyList;
                  if (list.isEmpty) {
                    return Text("Belum ada data.", style: GoogleFonts.poppins());
                  }
                  return Column(
                    children: list.map((item) {
                      return Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                        margin: const EdgeInsets.only(bottom: 10),
                        child: Padding(
                          padding: const EdgeInsets.all(12),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text.rich(
  TextSpan(
    children: [
      const TextSpan(text: "Sebelum: "),
      TextSpan(
        text: "${(item['fe_sebelum'] as num).toStringAsFixed(2)}",
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
      const TextSpan(text: "   Sesudah: "),
      TextSpan(
        text: "${(item['fe_sesudah'] as num).toStringAsFixed(2)}",
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    ],
  ),
  style: GoogleFonts.poppins(fontSize: 14),
),

                                  Text(
                                    item['formatted_time'] ?? '-',
                                    style: GoogleFonts.poppins(fontSize: 13, color: Colors.grey[600]),
                                  ),
                                ],
                              ),
                              const SizedBox(height: 6),
                              Text(
                                "Hasil: ${item['result']}",
                                style: GoogleFonts.poppins(fontSize: 14),
                              ),
                            ],
                          ),
                        ),
                      );
                    }).toList(),
                  );
                }),
              ],
            ),
          );
        }),
      ),
    );
  }

  // Widget Konfirmasi Simpan Data
  Widget _buildConfirmationDialog(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      backgroundColor: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.warning_amber_rounded, size: 50, color: Colors.orange.shade700),
            const SizedBox(height: 16),
            Text(
              "Konfirmasi Penyimpanan",
              style: GoogleFonts.poppins(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: primaryColor,
              ),
            ),
            const SizedBox(height: 10),
            Text(
              "Apakah kamu yakin ingin menyimpan data ini?",
              textAlign: TextAlign.center,
              style: GoogleFonts.poppins(fontSize: 14, color: Colors.black87),
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text("Batal", style: GoogleFonts.poppins(color: Colors.red)),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                    Get.find<HomeController>().simpanKeFirestore();
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: primaryColor,
                    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                  ),
                  child: Text("Yakin", style: GoogleFonts.poppins(color: Colors.white)),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget _feCard(String label, double value, IconData icon) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: cardColor,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.blue.withOpacity(0.2),
            blurRadius: 6,
            offset: const Offset(0, 4),
          )
        ],
      ),
      child: Column(
        children: [
          Icon(icon, color: Colors.white, size: 32),
          const SizedBox(height: 8),
          Text(
            "${value.toStringAsFixed(2)} mg/L",
            style: GoogleFonts.poppins(
              fontSize: 22,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 6),
          Text(label, textAlign: TextAlign.center,
            style: GoogleFonts.poppins(fontSize: 14, color: Colors.white70),
          ),
        ],
      ),
    );
  }
}