import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

class ManualPage extends StatefulWidget {
  const ManualPage({super.key});

  @override
  State<ManualPage> createState() => _ManualPageState();
}

class _ManualPageState extends State<ManualPage> {
  final manualRef = FirebaseDatabase.instance.ref("manual");
  final servo1Ref = FirebaseDatabase.instance.ref("servo1");
  final servo2Ref = FirebaseDatabase.instance.ref("servo2");

  bool servo1Open = false;
  bool servo2Open = false;

  Widget cardServo(
    String title,
    bool isOpen,
    VoidCallback onPressed,
  ) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(15),
      margin: const EdgeInsets.only(bottom: 15),
      decoration: BoxDecoration(
        color: const Color(0xFFFFC107),
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 5,
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(
            width: 90,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.white,
              ),
              onPressed: onPressed,
              child: Text(
                isOpen ? "Close" : "Open",
                style: const TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFE8E9BF),

      appBar: AppBar(
        backgroundColor: const Color(0xFFE8E9BF),
        elevation: 0,
        title: const Text(
          "Manual Pakan",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        iconTheme: const IconThemeData(
          color: Colors.black,
        ),
      ),

      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [

            // ===== BERI PAKAN =====
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(15),
              margin: const EdgeInsets.only(bottom: 15),
              decoration: BoxDecoration(
                color: const Color(0xFFFFC107),
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    blurRadius: 5,
                  )
                ],
              ),
              child: Row(
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween,
                children: [

                  const Text(
                    "Beri Pakan",
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),

                  SizedBox(
                    width: 90,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                      ),
                      onPressed: () async {
                        await manualRef.update({
                          "action": "start"
                        });

                        ScaffoldMessenger.of(context)
                            .showSnackBar(
                          const SnackBar(
                            content: Text(
                              "Pemberian pakan dimulai",
                            ),
                          ),
                        );
                      },
                      child: const Text(
                        "Mulai",
                        style: TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),

            // ===== SERVO KANAN =====
            cardServo(
              "Servo Kanan",
              servo1Open,
              () async {
                servo1Open = !servo1Open;

                await servo1Ref.update({
                  "action":
                      servo1Open ? "open" : "close"
                });

                setState(() {});
              },
            ),

            // ===== SERVO KIRI =====
            cardServo(
              "Servo Kiri",
              servo2Open,
              () async {
                servo2Open = !servo2Open;

                await servo2Ref.update({
                  "action":
                      servo2Open ? "open" : "close"
                });

                setState(() {});
              },
            ),
          ],
        ),
      ),
    );
  }
}