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

class PumpControlScreen extends StatefulWidget {
  const PumpControlScreen({Key? key}) : super(key: key);

  @override
  State<PumpControlScreen> createState() => _PumpControlScreenState();
}

class _PumpControlScreenState extends State<PumpControlScreen> {
  final DatabaseReference _database = FirebaseDatabase.instance.ref();
  bool pump3Enabled = false;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadPumpStatus();
  }

  void _loadPumpStatus() {
    _database.child('schedule/pump3Enabled').onValue.listen((event) {
      if (event.snapshot.value != null) {
        setState(() {
          pump3Enabled = event.snapshot.value as bool;
          isLoading = false;
        });
        print(
            'Pump status updated: pump3Enabled = $pump3Enabled'); // Debug print
      }
    });
  }

  Future<void> _togglePump3(bool value) async {
    try {
      await _database.child('schedule').update({
        'pump3Enabled': value,
      });
      print('Updated pump3 status: $value'); // Debug print

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Pompa 3 ${value ? "diaktifkan" : "dinonaktifkan"}'),
          backgroundColor: Colors.green,
        ),
      );
    } catch (e) {
      print('Error updating pump status: $e'); // Debug print
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Error: ${e.toString()}'),
          backgroundColor: Colors.red,
        ),
      );
    }
  }

  Widget _buildPump2Card() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.grey.shade200, Colors.grey.shade100],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Icon(
                  Icons.water,
                  color: Colors.grey,
                  size: 32,
                ),
                const SizedBox(width: 12),
                Text(
                  'Pompa 2',
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.power_off,
                    color: Colors.grey,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    'Pompa Mati',
                    style: TextStyle(
                      color: Colors.grey,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPump3Card() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue.shade200, Colors.blue.shade100],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Icon(
                  Icons.water,
                  color: Colors.blue,
                  size: 32,
                ),
                const SizedBox(width: 12),
                Text(
                  'Pompa 3',
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: pump3Enabled
                    ? Colors.blue.withOpacity(0.1)
                    : Colors.grey.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    pump3Enabled ? Icons.power : Icons.power_off,
                    color: pump3Enabled ? Colors.blue : Colors.grey,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    pump3Enabled ? 'Pompa Menyala' : 'Pompa Mati',
                    style: TextStyle(
                      color: pump3Enabled ? Colors.blue : Colors.grey,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPump4Card() {
    return Card(
      elevation: 4,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              !pump3Enabled ? Colors.green.shade200 : Colors.grey.shade200,
              !pump3Enabled ? Colors.green.shade100 : Colors.grey.shade100
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Icon(
                  Icons.water,
                  color: !pump3Enabled ? Colors.green : Colors.grey,
                  size: 32,
                ),
                const SizedBox(width: 12),
                Text(
                  'Pompa 4',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: !pump3Enabled ? Colors.green : Colors.grey,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: !pump3Enabled
                    ? Colors.green.withOpacity(0.1)
                    : Colors.grey.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    !pump3Enabled ? Icons.power : Icons.power_off,
                    color: !pump3Enabled ? Colors.green : Colors.grey,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    !pump3Enabled ? 'Pompa Menyala' : 'Pompa Mati',
                    style: TextStyle(
                      color: !pump3Enabled ? Colors.green : Colors.grey,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kontrol Pompa'),
        backgroundColor: Colors.blue,
      ),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : Column(
              children: [
                Expanded(
                  child: RefreshIndicator(
                    onRefresh: () async {
                      setState(() {
                        isLoading = true;
                      });
                      _loadPumpStatus();
                    },
                    child: SingleChildScrollView(
                      physics: const AlwaysScrollableScrollPhysics(),
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        children: [
                          _buildPump2Card(),
                          const SizedBox(height: 16),
                          _buildPump3Card(),
                          const SizedBox(height: 16),
                          _buildPump4Card(),
                        ],
                      ),
                    ),
                  ),
                ),
                // Toggle button at the bottom
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.2),
                        spreadRadius: 1,
                        blurRadius: 5,
                        offset: const Offset(0, -2),
                      ),
                    ],
                  ),
                  child: ElevatedButton(
                    onPressed: () => _togglePump3(!pump3Enabled),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: pump3Enabled ? Colors.red : Colors.green,
                      padding: const EdgeInsets.symmetric(vertical: 18),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30),
                      ),
                      elevation: 4,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          pump3Enabled ? Icons.power_off : Icons.power,
                          color: Colors.white,
                          size: 28,
                        ),
                        const SizedBox(width: 12),
                        Text(
                          pump3Enabled ? 'Matikan Pompa 3' : 'Nyalakan Pompa 3',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
    );
  }
}