import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/home_controller.dart';
import 'package:google_fonts/google_fonts.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.blue,
        elevation: 0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              "Hello Zidan",
              style: GoogleFonts.poppins(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            ),
            IconButton(
              icon: const Icon(Icons.notifications, color: Colors.white),
              onPressed: controller.keNotifikasi,
            ),
          ],
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Obx(() {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 20),

                // Hanya Mode
                GestureDetector(
                  onTap: () {
                    _showModeDialog(context);
                  },
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(color: Colors.grey.shade300),
                    ),
                    child: _statusTile(
                      icon: Icons.touch_app,
                      label: "Mode",
                      value: controller.mode.value,
                      color: Colors.blue,
                    ),
                  ),
                ),

                const SizedBox(height: 24),

                // Monitoring
                Text(
                  "Monitoring",
                  style: GoogleFonts.poppins(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 16),

                Obx(() => _monitorPakanCard(controller.tinggiPakan.value.toInt())),

                const SizedBox(height: 28),

                // Kontrol Alat
                Text(
                  "Kontrol Alat",
                  style: GoogleFonts.poppins(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 16),

                _customSwitch(
                  label: "Pembersih Aquarium",
                  value: controller.pembersih.value,
                  onChanged: controller.togglePembersih,
                  isActive: controller.mode.value == "Manual",
                ),
                const SizedBox(height: 16),
                _customSwitch(
                  label: "Pakan Ikan",
                  value: controller.pakan.value,
                  onChanged: controller.togglePakan,
                  isActive: controller.mode.value == "Manual",
                ),

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

  void _showModeDialog(BuildContext context) {
    Get.dialog(
      AlertDialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        titlePadding: const EdgeInsets.only(top: 20),
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
        actionsPadding: const EdgeInsets.only(bottom: 20, right: 10, left: 10),
        title: Column(
          children: [
            const SizedBox(height: 10),
            Text(
              "Pilih Mode",
              style: GoogleFonts.poppins(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
        content: Text(
          "Silakan pilih mode kontrol alat yang diinginkan.",
          style: GoogleFonts.poppins(fontSize: 14),
          textAlign: TextAlign.center,
        ),
        actionsAlignment: MainAxisAlignment.spaceEvenly,
        actions: [
          ElevatedButton.icon(
            onPressed: () {
              Get.back();
              Get.find<HomeController>().mode.value = "Manual";
            },
            icon: const Icon(Icons.handyman, color: Colors.white, size: 18),
            label: const Text("Manual", style: TextStyle(color: Colors.white)),
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
          ElevatedButton.icon(
            onPressed: () {
              Get.back();
              Get.find<HomeController>().mode.value = "Otomatis";
            },
            icon: const Icon(Icons.autorenew, color: Colors.white, size: 18),
            label:
                const Text("Otomatis", style: TextStyle(color: Colors.white)),
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _statusTile({
    required IconData icon,
    required String label,
    required String value,
    required Color color,
  }) {
    return Row(
      children: [
        CircleAvatar(
          backgroundColor: color,
          radius: 18,
          child: Icon(icon, color: Colors.white, size: 20),
        ),
        const SizedBox(width: 8),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(label,
                style: GoogleFonts.poppins(
                    fontWeight: FontWeight.w500, fontSize: 12)),
            Text(value,
                style: GoogleFonts.poppins(
                    fontWeight: FontWeight.bold, fontSize: 12)),
          ],
        ),
      ],
    );
  }

  Widget _monitorPakanCard(int tinggiPakan) {
    Color backgroundColor;
    String statusText;

    if (tinggiPakan <= 1) {
      backgroundColor = Colors.red;
      statusText = "Pakan habis";
    } else if (tinggiPakan <= 4) {
      backgroundColor = Colors.orange;
      statusText = "Pakan setengah";
    } else if (tinggiPakan <= 7) {
      backgroundColor = Colors.lightBlue;
      statusText = "Pakan penuh";
    } else {
      backgroundColor = Colors.grey;
      statusText = "Status tidak diketahui";
    }

    return Container(
      width: double.infinity,
      height: 150,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Pakan Ikan",
            style: GoogleFonts.poppins(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Colors.white,
            ),
          ),
          const Spacer(),
          Text(
  "${controller.tinggiPakan.value} cm",
  style: GoogleFonts.poppins(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
),

          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Text(
              statusText,
              style: GoogleFonts.poppins(
                fontSize: 13,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _customSwitch({
    required String label,
    required bool value,
    required Function(bool) onChanged,
    required bool isActive,
  }) {
    return Row(
      children: [
        GestureDetector(
          onTap: isActive ? () => onChanged(!value) : null,
          child: Opacity(
            opacity: isActive ? 1.0 : 0.5,
            child: Container(
              width: 110,
              height: 56,
              decoration: BoxDecoration(
                color: value ? Colors.lightBlue : Colors.blue[50],
                borderRadius: BorderRadius.circular(40),
              ),
              alignment: value ? Alignment.centerRight : Alignment.centerLeft,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Container(
                width: 38,
                height: 38,
                decoration: BoxDecoration(
                  color: Colors.blue[100],
                  shape: BoxShape.circle,
                ),
                alignment: Alignment.center,
                child: Text(
                  value ? "On" : "Off",
                  style: GoogleFonts.poppins(
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(width: 12),
        Text(
          label,
          style: GoogleFonts.poppins(fontSize: 16),
        ),
      ],
    );
  }
}