// =================================================================
// HALAMAN BARU: DEVICE MANAGEMENT
// =================================================================

import 'package:CCTV_App/home_page.dart';
import 'package:CCTV_App/provider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class DeviceManagementPage extends StatefulWidget {
  const DeviceManagementPage({super.key});
  @override
  State<DeviceManagementPage> createState() => _DeviceManagementPageState();
}

class _DeviceManagementPageState extends State<DeviceManagementPage> {
  @override
  void initState() {
    super.initState();
    Future.microtask(() => context.read<AppState>().fetchUserDevices());
  }

  void _showAddDeviceDialog() {
    final formKey = GlobalKey<FormState>();
    final deviceIdController = TextEditingController();
    final deviceNameController = TextEditingController();
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          backgroundColor: Theme.of(context).cardColor,
          title: const Text('Tambah perangkat baru'),
          content: Form(
            key: formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                TextFormField(
                    controller: deviceIdController,
                    decoration: const InputDecoration(labelText: 'Device ID'),
                    validator: (value) =>
                        value!.isEmpty ? 'Device ID wajib diisi' : null),
                const SizedBox(height: 16),
                TextFormField(
                    controller: deviceNameController,
                    decoration: const InputDecoration(
                        labelText: 'Nama perangkat (e.g., Teras Rumah)'),
                    validator: (value) =>
                        value!.isEmpty ? 'Perangkat harus diberi nama' : null),
              ],
            ),
          ),
          actions: [
            TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: const Text('Batal')),
            ElevatedButton(
                onPressed: () async {
                  if (formKey.currentState!.validate()) {
                    final appState = context.read<AppState>();
                    final result = await appState.addUserDevice(
                        deviceIdController.text.trim(),
                        deviceNameController.text.trim());
                    if (mounted) {
                      Navigator.of(context).pop();
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content:
                              Text(result ?? 'Perangkat berhasil ditambahkan!'),
                          backgroundColor: result == null
                              ? Colors.green
                              : Theme.of(context).colorScheme.error));
                    }
                  }
                },
                child: const Text('Tambah')),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.add_box_outlined),
          color: Theme.of(context).primaryColor,
          tooltip: 'Tambah Perangkat',
          onPressed: _showAddDeviceDialog,
        ),
        title: const Text('Daftar Perangkat'),
        centerTitle: true,
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        elevation: 0,
        actions: [
          TextButton.icon(
            icon: const Icon(Icons.logout),
            label: const Text('Logout'),
            onPressed: () async => await context.read<AppState>().signOut(),
            style: TextButton.styleFrom(
              foregroundColor: Colors.red,
              padding: const EdgeInsets.symmetric(horizontal: 16),
            ),
          )
        ],
      ),
      body: Consumer<AppState>(
        builder: (context, appState, child) {
          if (appState.isLoading && appState.userDevices.isEmpty) {
            return const Center(child: CircularProgressIndicator());
          }
          if (appState.userDevices.isEmpty) {
            return const Center(
              child: Padding(
                padding: EdgeInsets.all(24.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(CupertinoIcons.camera_viewfinder,
                        size: 60, color: Colors.white38),
                    SizedBox(height: 16),
                    Text('Perangkat tidak ditemukan',
                        style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.white)),
                    SizedBox(height: 8),
                    // PERUBAHAN 3: Memperbarui teks bantuan
                    Text(
                        'Klik ikon [+] di pojok kiri atas untuk menambahkan perangkat baru.',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white70)),
                  ],
                ),
              ),
            );
          }
          return RefreshIndicator(
            onRefresh: () => appState.fetchUserDevices(),
            child: ListView.builder(
              padding: const EdgeInsets.all(8.0),
              itemCount: appState.userDevices.length,
              itemBuilder: (context, index) {
                final device = appState.userDevices[index];
                return Card(
                  margin:
                      const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
                  child: ListTile(
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 20),
                    leading: const Icon(CupertinoIcons.camera_fill,
                        color: Colors.tealAccent),
                    title: Text(device['device_name'],
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.white)),
                    subtitle: Text(device['device_id'],
                        style: const TextStyle(color: Colors.white70)),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete_outline,
                          color: Colors.redAccent),
                      onPressed: () async {
                        final confirm = await showDialog<bool>(
                            context: context,
                            builder: (context) => AlertDialog(
                                  title: const Text('Konfirmasi Hapus'),
                                  content: Text(
                                      'Apakah anda yakin untuk menghapus perangkat ${device['device_name']}?'),
                                  actions: [
                                    TextButton(
                                        onPressed: () =>
                                            Navigator.of(context).pop(false),
                                        child: const Text('Batal')),
                                    TextButton(
                                        onPressed: () =>
                                            Navigator.of(context).pop(true),
                                        child: const Text('Hapus',
                                            style: TextStyle(
                                                color: Colors.redAccent))),
                                  ],
                                ));
                        if (confirm == true) {
                          await appState.removeUserDevice(device['id']);
                        }
                      },
                    ),
                    onTap: () async {
                      await appState.selectDevice(device);
                      if (mounted) {
                        Navigator.of(context).push(MaterialPageRoute(
                            builder: (_) => const ControlPage()));
                      }
                    },
                  ),
                );
              },
            ),
          );
        },
      ),
      // PERUBAHAN 4: Menghapus FloatingActionButton
      // floatingActionButton: FloatingActionButton(
      //     onPressed: _showAddDeviceDialog,
      //     backgroundColor: Theme.of(context).primaryColor,
      //     child: const Icon(Icons.add, color: Colors.black)),
    );
  }
}


// class DeviceManagementPage extends StatefulWidget {
//   const DeviceManagementPage({super.key});
//   @override
//   State<DeviceManagementPage> createState() => _DeviceManagementPageState();
// }

// class _DeviceManagementPageState extends State<DeviceManagementPage> {
//   @override
//   void initState() {
//     super.initState();
//     Future.microtask(() => context.read<AppState>().fetchUserDevices());
//   }

//   void _showAddDeviceDialog() {
//     final formKey = GlobalKey<FormState>();
//     final deviceIdController = TextEditingController();
//     final deviceNameController = TextEditingController();
//     showDialog(
//       context: context,
//       builder: (context) {
//         return AlertDialog(
//           backgroundColor: Theme.of(context).cardColor,
//           title: const Text('Tambah perangkat baru'),
//           content: Form(
//             key: formKey,
//             child: Column(
//               mainAxisSize: MainAxisSize.min,
//               children: [
//                 TextFormField(
//                     controller: deviceIdController,
//                     decoration: const InputDecoration(labelText: 'Device ID'),
//                     validator: (value) =>
//                         value!.isEmpty ? 'Device ID wajib diisi' : null),
//                 const SizedBox(height: 16),
//                 TextFormField(
//                     controller: deviceNameController,
//                     decoration: const InputDecoration(
//                         labelText: 'Nama perangkat (e.g., Teras Rumah)'),
//                     validator: (value) =>
//                         value!.isEmpty ? 'Perangkat harus diberi nama' : null),
//               ],
//             ),
//           ),
//           actions: [
//             TextButton(
//                 onPressed: () => Navigator.of(context).pop(),
//                 child: const Text('Batal')),
//             ElevatedButton(
//                 onPressed: () async {
//                   if (formKey.currentState!.validate()) {
//                     final appState = context.read<AppState>();
//                     final result = await appState.addUserDevice(
//                         deviceIdController.text.trim(),
//                         deviceNameController.text.trim());
//                     if (mounted) {
//                       Navigator.of(context).pop();
//                       ScaffoldMessenger.of(context).showSnackBar(SnackBar(
//                           content:
//                               Text(result ?? 'Perangkat berhasil ditambahkan!'),
//                           backgroundColor: result == null
//                               ? Colors.green
//                               : Theme.of(context).colorScheme.error));
//                     }
//                   }
//                 },
//                 child: const Text('Tambah')),
//           ],
//         );
//       },
//     );
//   }

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text('Daftar Perangkat Tertaut'),
//         backgroundColor: Theme.of(context).scaffoldBackgroundColor,
//         elevation: 0,
//         actions: [
//           IconButton(
//               icon: const Icon(Icons.logout),
//               onPressed: () async => await context.read<AppState>().signOut())
//         ],
//       ),
//       body: Consumer<AppState>(
//         builder: (context, appState, child) {
//           if (appState.isLoading && appState.userDevices.isEmpty) {
//             return const Center(child: CircularProgressIndicator());
//           }
//           if (appState.userDevices.isEmpty) {
//             return const Center(
//               child: Padding(
//                 padding: EdgeInsets.all(24.0),
//                 child: Column(
//                   mainAxisAlignment: MainAxisAlignment.center,
//                   children: [
//                     Icon(CupertinoIcons.camera_viewfinder,
//                         size: 60, color: Colors.white38),
//                     SizedBox(height: 16),
//                     Text('Perangkat tidak ditermukan',
//                         style: TextStyle(
//                             fontSize: 20,
//                             fontWeight: FontWeight.bold,
//                             color: Colors.white)),
//                     SizedBox(height: 8),
//                     Text(
//                         'Klik [+] dipojok kanan bawah untuk menambahkan perangkat.',
//                         textAlign: TextAlign.center,
//                         style: TextStyle(color: Colors.white70)),
//                   ],
//                 ),
//               ),
//             );
//           }
//           return RefreshIndicator(
//             onRefresh: () => appState.fetchUserDevices(),
//             child: ListView.builder(
//               padding: const EdgeInsets.all(8.0),
//               itemCount: appState.userDevices.length,
//               itemBuilder: (context, index) {
//                 final device = appState.userDevices[index];
//                 return Card(
//                   margin:
//                       const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
//                   child: ListTile(
//                     contentPadding: const EdgeInsets.symmetric(
//                         vertical: 10, horizontal: 20),
//                     leading: const Icon(CupertinoIcons.camera_fill,
//                         color: Colors.tealAccent),
//                     title: Text(device['device_name'],
//                         style: const TextStyle(
//                             fontWeight: FontWeight.bold, color: Colors.white)),
//                     subtitle: Text(device['device_id'],
//                         style: const TextStyle(color: Colors.white70)),
//                     trailing: IconButton(
//                       icon: const Icon(Icons.delete_outline,
//                           color: Colors.redAccent),
//                       onPressed: () async {
//                         final confirm = await showDialog<bool>(
//                             context: context,
//                             builder: (context) => AlertDialog(
//                                   title: const Text('Confirm Deletion'),
//                                   content: Text(
//                                       'Apakah anda yakin untuk menghapus perangkat ${device['device_name']}?'),
//                                   actions: [
//                                     TextButton(
//                                         onPressed: () =>
//                                             Navigator.of(context).pop(false),
//                                         child: const Text('Batal')),
//                                     TextButton(
//                                         onPressed: () =>
//                                             Navigator.of(context).pop(true),
//                                         child: const Text('Hapus',
//                                             style: TextStyle(
//                                                 color: Colors.redAccent))),
//                                   ],
//                                 ));
//                         if (confirm == true) {
//                           await appState.removeUserDevice(device['id']);
//                         }
//                       },
//                     ),
//                     onTap: () async {
//                       await appState.selectDevice(device);
//                       if (mounted) {
//                         Navigator.of(context).push(MaterialPageRoute(
//                             builder: (_) => const HomePage()));
//                       }
//                     },
//                   ),
//                 );
//               },
//             ),
//           );
//         },
//       ),
//       floatingActionButton: FloatingActionButton(
//           onPressed: _showAddDeviceDialog,
//           backgroundColor: Theme.of(context).primaryColor,
//           child: const Icon(Icons.add, color: Colors.black)),
//     );
//   }
// }