import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:allium_dry/app/modules/control/controllers/control_controller.dart';

class ControlView extends GetView<ControlController> {
  const ControlView({super.key});

  @override
  Widget build(BuildContext context) {
    // Mengambil instance controller
    final ControlController controller = Get.put(ControlController());

    return Scaffold(
      backgroundColor: const Color(0xFFE3F2FD),
      appBar: AppBar(
        title: const Text('Control Oven'),
        centerTitle: true,
        backgroundColor: Colors.lightBlueAccent,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Oven Switch
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Oven',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.blueGrey,
                  ),
                ),
                Switch(
                  value: true,
                  onChanged: (bool value) {
                    // Handle oven state change
                  },
                  activeColor: Colors.green,
                  inactiveTrackColor: Colors.blueGrey.withOpacity(0.5),
                  inactiveThumbColor: Colors.blueGrey.withOpacity(0.7),
                ),
              ],
            ),
            const SizedBox(height: 30),

            // Temperature Control
            Text(
              'Temperature',
              style: TextStyle(fontSize: 18, color: Colors.blueGrey),
            ),
            const SizedBox(height: 10),
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueGrey.withOpacity(0.2),
                    blurRadius: 5,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              padding: const EdgeInsets.all(20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Menampilkan suhu menggunakan Obx
                  Obx(
                    () => Text(
                      '${controller.temperature.value}°C',
                      style: TextStyle(
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                        color: Colors.blueGrey,
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        icon: Icon(Icons.remove, color: Colors.blueGrey),
                        onPressed: controller.decreaseTemperature,
                      ),
                      IconButton(
                        icon: Icon(Icons.add, color: Colors.blueGrey),
                        onPressed: controller.increaseTemperature,
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),

            // Timer Control
            Text(
              'Timer',
              style: TextStyle(fontSize: 18, color: Colors.blueGrey),
            ),
            const SizedBox(height: 10),
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueGrey.withOpacity(0.2),
                    blurRadius: 5,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              padding: const EdgeInsets.all(20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Menampilkan timer menggunakan Obx
                  Obx(
                    () => Text(
                      '${controller.timer.value}'
                      '',
                      style: TextStyle(
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                        color: Colors.blueGrey,
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      IconButton(
                        icon: Icon(Icons.remove, color: Colors.blueGrey),
                        onPressed: controller.decreaseTimer,
                      ),
                      IconButton(
                        icon: Icon(Icons.add, color: Colors.blueGrey),
                        onPressed: controller.increaseTimer,
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),

            // Start Button
            ElevatedButton(
              onPressed: () {
                // Logic to start the oven
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.lightBlueAccent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(25),
                ),
                minimumSize: Size(double.infinity, 45),
              ),
              child: const Text('Start', style: TextStyle(color: Colors.white)),
            ),
          ],
        ),
      ),
    );
  }
}