import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

// =================================================================
// MAIN.DART & SETUP
// =================================================================

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  await Supabase.initialize(
    url: dotenv.env['SUPABASE_URL']!,
    anonKey: dotenv.env['SUPABASE_ANON_KEY']!,
  );

  await initializeDateFormatting('id_ID', null);

  runApp(
    ChangeNotifierProvider(
      create: (context) => AppState(),
      child: const MyApp(),
    ),
  );
}

final supabase = Supabase.instance.client;

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Security Monitor',
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.tealAccent,
        scaffoldBackgroundColor: const Color(0xFF1a1a1a),
        cardColor: const Color(0xFF2c2c2c),
        colorScheme: const ColorScheme.dark(
          primary: Colors.tealAccent,
          secondary: Colors.teal,
          surface: Color(0xFF2c2c2c),
          onSurface: Colors.white,
        ),
        textTheme: const TextTheme(
          bodyLarge: TextStyle(color: Colors.white70),
          bodyMedium: TextStyle(color: Colors.white70),
          titleLarge:
              TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          titleMedium: TextStyle(color: Colors.white),
        ),
        inputDecorationTheme: InputDecorationTheme(
            filled: true,
            fillColor: Colors.black.withOpacity(0.3),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: BorderSide.none),
            labelStyle: const TextStyle(color: Colors.white54)),
        useMaterial3: true,
      ),
      home: const AuthWrapper(), // Menggunakan AuthWrapper untuk logika awal
      debugShowCheckedModeBanner: false,
    );
  }
}

// =================================================================
// STATE MANAGEMENT (PROVIDER)
// =================================================================

class AppState extends ChangeNotifier {
  bool _isLoading = false;
  String? _deviceId;
  List<Map<String, dynamic>> _events = [];
  Map<String, dynamic>? _deviceStatus;
  User? _currentUser;

  RealtimeChannel? _eventsChannel;
  RealtimeChannel? _deviceStatusChannel;

  bool get isLoading => _isLoading;
  String? get deviceId => _deviceId;
  List<Map<String, dynamic>> get events => _events;
  Map<String, dynamic>? get deviceStatus => _deviceStatus;
  User? get currentUser => _currentUser;

  AppState() {
    _currentUser = supabase.auth.currentUser;
    supabase.auth.onAuthStateChange.listen((data) {
      final session = data.session;
      _currentUser = session?.user;
      if (_currentUser == null) {
        clearState();
      }
      notifyListeners();
    });
  }

  void _unsubscribeFromChannels() {
    if (_eventsChannel != null) {
      supabase.removeChannel(_eventsChannel!);
      _eventsChannel = null;
    }
    if (_deviceStatusChannel != null) {
      supabase.removeChannel(_deviceStatusChannel!);
      _deviceStatusChannel = null;
    }
  }

  void clearState() {
    _deviceId = null;
    _events.clear();
    _deviceStatus = null;
    _unsubscribeFromChannels();
    notifyListeners();
  }

  void _setLoading(bool value) {
    _isLoading = value;
    notifyListeners();
  }

  Future<bool> setDeviceIdAndFetchData(String deviceId) async {
    _setLoading(true);
    try {
      final response = await supabase
          .from('device_status')
          .select('device_id')
          .eq('device_id', deviceId)
          .maybeSingle();

      if (response == null) {
        _setLoading(false);
        return false;
      }

      _deviceId = deviceId;
      await fetchInitialData();
      _listenToRealtimeChanges();
      notifyListeners();
      _setLoading(false);
      return true;
    } catch (e) {
      print('Error validating device ID: $e');
      _setLoading(false);
      return false;
    }
  }

  Future<void> fetchInitialData() async {
    if (_deviceId == null) return;
    _setLoading(true);
    await Future.wait([
      fetchEvents(),
      fetchDeviceStatus(),
    ]);
    _setLoading(false);
  }

  Future<void> fetchEvents() async {
    if (_deviceId == null) return;
    try {
      final response = await supabase
          .from('events')
          .select()
          .eq('device_id', _deviceId!)
          .order('timestamp', ascending: false);
      _events = List<Map<String, dynamic>>.from(response);
    } catch (e) {
      print('Error fetching events: $e');
      _events = [];
    }
    notifyListeners();
  }

  Future<void> fetchDeviceStatus() async {
    if (_deviceId == null) return;
    try {
      final response = await supabase
          .from('device_status')
          .select()
          .eq('device_id', _deviceId!)
          .single();
      _deviceStatus = response;
    } catch (e) {
      print('Error fetching device status: $e');
      _deviceStatus = null;
    }
    notifyListeners();
  }

  void _listenToRealtimeChanges() {
    if (_deviceId == null) return;
    _unsubscribeFromChannels();

    _eventsChannel = supabase.channel('public:events:device_id=$_deviceId');
    _eventsChannel!
        .onPostgresChanges(
          event: PostgresChangeEvent.insert,
          schema: 'public',
          table: 'events',
          filter: PostgresChangeFilter(
            type: PostgresChangeFilterType.eq,
            column: 'device_id',
            value: _deviceId!,
          ),
          callback: (payload) {
            final newEvent = payload.newRecord;
            if (!_events.any((e) => e['id'] == newEvent['id'])) {
              _events.insert(0, newEvent);
              notifyListeners();
            }
          },
        )
        .subscribe();

    _deviceStatusChannel =
        supabase.channel('public:device_status:device_id=$_deviceId');
    _deviceStatusChannel!
        .onPostgresChanges(
          event: PostgresChangeEvent.update,
          schema: 'public',
          table: 'device_status',
          filter: PostgresChangeFilter(
            type: PostgresChangeFilterType.eq,
            column: 'device_id',
            value: _deviceId!,
          ),
          callback: (payload) {
            _deviceStatus = payload.newRecord;
            notifyListeners();
          },
        )
        .subscribe();
  }

  Future<void> signOut() async {
    _setLoading(true);
    await supabase.auth.signOut();
    // clearState() akan dipanggil oleh listener onAuthStateChange
    _setLoading(false);
  }

  Future<String?> setSleepSchedule(int durationMicroseconds) async {
    if (_deviceId == null) {
      return "Device not identified.";
    }
    _setLoading(true);

    try {
      await supabase.from('device_status').update({
        'schedule_duration': durationMicroseconds,
        'last_update': DateTime.now().toIso8601String(),
      }).eq('device_id', _deviceId!);

      _setLoading(false);
      return null;
    } on PostgrestException catch (e) {
      _setLoading(false);
      print('Error setting sleep schedule: ${e.message}');
      return e.message;
    } catch (e) {
      _setLoading(false);
      print('Generic error setting sleep schedule: $e');
      return 'An unexpected error occurred.';
    }
  }
}

// =================================================================
// AUTH & ROUTING
// =================================================================

class AuthWrapper extends StatelessWidget {
  const AuthWrapper({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<AuthState>(
      stream: supabase.auth.onAuthStateChange,
      builder: (context, snapshot) {
        // Tampilkan loading spinner selagi menunggu event auth pertama.
        if (!snapshot.hasData) {
          return const Scaffold(
            body: Center(child: CircularProgressIndicator()),
          );
        }

        // Sesuai alur aplikasi, selalu mulai dari LoginPage untuk meminta Device ID,
        // terlepas dari status sesi sebelumnya.
        return const LoginPage();
      },
    );
  }
}

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

class _RegisterPageState extends State<RegisterPage> {
  final _fullNameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  bool _isLoading = false;

  Future<void> _signUp() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() => _isLoading = true);
    try {
      await supabase.auth.signUp(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
        data: {'full_name': _fullNameController.text.trim()},
      );
      if (!mounted) return;

      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text(
            'Registrasi berhasil! Silakan periksa email untuk verifikasi & login.'),
        backgroundColor: Colors.green,
      ));
      Navigator.pop(context);
    } on AuthException catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(e.message),
        backgroundColor: Colors.redAccent,
      ));
    } catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text("Error: ${e.toString()}"),
        backgroundColor: Colors.redAccent,
      ));
    } finally {
      if (mounted) setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.transparent, elevation: 0),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Icon(CupertinoIcons.person_add_solid,
                    size: 80, color: Colors.tealAccent),
                const SizedBox(height: 16),
                const Text('Buat Akun Baru',
                    textAlign: TextAlign.center,
                    style:
                        TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
                const SizedBox(height: 48),
                TextFormField(
                  controller: _fullNameController,
                  decoration: const InputDecoration(labelText: 'Nama Lengkap'),
                  validator: (value) =>
                      value!.isEmpty ? 'Nama tidak boleh kosong' : null,
                ),
                const SizedBox(height: 16),
                TextFormField(
                  controller: _emailController,
                  decoration: const InputDecoration(labelText: 'Email'),
                  keyboardType: TextInputType.emailAddress,
                  validator: (value) =>
                      value!.isEmpty ? 'Email tidak boleh kosong' : null,
                ),
                const SizedBox(height: 16),
                TextFormField(
                  controller: _passwordController,
                  decoration: const InputDecoration(labelText: 'Password'),
                  obscureText: true,
                  validator: (value) =>
                      value!.length < 6 ? 'Password minimal 6 karakter' : null,
                ),
                const SizedBox(height: 32),
                ElevatedButton(
                  onPressed: _isLoading ? null : _signUp,
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    backgroundColor: Colors.tealAccent,
                    foregroundColor: Colors.black,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12)),
                  ),
                  child: _isLoading
                      ? const SizedBox(
                          width: 24,
                          height: 24,
                          child: CircularProgressIndicator(
                              strokeWidth: 2, color: Colors.black))
                      : const Text('Register',
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold)),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class LoginPage extends StatefulWidget {
  final bool showLogoutSuccess;

  const LoginPage({super.key, this.showLogoutSuccess = false});
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _deviceIdController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  bool _isLoading = false;

  // PERBAIKAN: Menambahkan initState untuk menampilkan snackbar jika diperlukan.
  @override
  void initState() {
    super.initState();
    if (widget.showLogoutSuccess) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (mounted) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Anda telah berhasil logout.'),
              backgroundColor: Colors.green,
              behavior: SnackBarBehavior.floating,
            ),
          );
        }
      });
    }
  }

  Future<void> _signIn() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() => _isLoading = true);
    final appState = Provider.of<AppState>(context, listen: false);

    try {
      final authResponse = await supabase.auth.signInWithPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );

      if (authResponse.user == null) {
        throw 'Login gagal, pengguna tidak ditemukan.';
      }

      final deviceIdIsValid = await appState
          .setDeviceIdAndFetchData(_deviceIdController.text.trim());

      if (!mounted) return;

      if (deviceIdIsValid) {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (_) => const DashboardPage()),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text('Login berhasil, tetapi Device ID tidak terdaftar.'),
          backgroundColor: Colors.orange,
        ));
        await appState.signOut();
      }
    } on AuthException catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text(e.message),
        backgroundColor: Colors.redAccent,
      ));
    } catch (e) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Terjadi kesalahan: ${e.toString()}'),
        backgroundColor: Colors.redAccent,
      ));
    } finally {
      if (mounted) setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    final userEmail = supabase.auth.currentUser?.email;
    if (userEmail != null && _emailController.text.isEmpty) {
      _emailController.text = userEmail;
    }

    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Icon(CupertinoIcons.shield_lefthalf_fill,
                    size: 80, color: Colors.tealAccent),
                const SizedBox(height: 16),
                const Text('Security Monitor',
                    textAlign: TextAlign.center,
                    style:
                        TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
                const SizedBox(height: 48),
                TextFormField(
                  controller: _emailController,
                  decoration: const InputDecoration(labelText: 'Email'),
                  keyboardType: TextInputType.emailAddress,
                  validator: (value) =>
                      value!.isEmpty ? 'Email tidak boleh kosong' : null,
                ),
                const SizedBox(height: 16),
                TextFormField(
                  controller: _passwordController,
                  decoration: const InputDecoration(labelText: 'Password'),
                  obscureText: true,
                  validator: (value) =>
                      value!.isEmpty ? 'Password tidak boleh kosong' : null,
                ),
                const SizedBox(height: 16),
                TextFormField(
                  controller: _deviceIdController,
                  decoration: const InputDecoration(labelText: 'Device ID'),
                  validator: (value) =>
                      value!.isEmpty ? 'Device ID tidak boleh kosong' : null,
                ),
                const SizedBox(height: 32),
                ElevatedButton(
                  onPressed: _isLoading ? null : _signIn,
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    backgroundColor: Colors.tealAccent,
                    foregroundColor: Colors.black,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12)),
                  ),
                  child: _isLoading
                      ? const SizedBox(
                          width: 24,
                          height: 24,
                          child: CircularProgressIndicator(
                              strokeWidth: 2, color: Colors.black))
                      : const Text('Login',
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold)),
                ),
                const SizedBox(height: 24),
                TextButton(
                  onPressed: () => Navigator.push(context,
                      MaterialPageRoute(builder: (_) => const RegisterPage())),
                  child: const Text('Belum punya akun? Daftar sekarang',
                      style: TextStyle(color: Colors.white70)),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// =================================================================
// DASHBOARD PAGE & COMPONENTS
// =================================================================

class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Consumer<AppState>(
              builder: (context, appState, child) {
                if (appState.isLoading && appState.events.isEmpty) {
                  return const Center(child: CircularProgressIndicator());
                }
                return RefreshIndicator(
                  onRefresh: Provider.of<AppState>(context, listen: false)
                      .fetchInitialData,
                  color: Colors.tealAccent,
                  backgroundColor: const Color(0xFF2c2c2c),
                  child: const CustomScrollView(
                    slivers: [
                      SliverToBoxAdapter(child: ProfileBar()),
                      SliverToBoxAdapter(child: SettingsBar()),
                      SliverToBoxAdapter(child: SizedBox(height: 20)),
                      SliverToBoxAdapter(
                          child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        child: Text("Footage Gallery",
                            style: TextStyle(
                                fontSize: 22, fontWeight: FontWeight.bold)),
                      )),
                      SliverToBoxAdapter(child: SizedBox(height: 10)),
                      FootageGallery(),
                    ],
                  ),
                );
              },
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Consumer<AppState>(
                builder: (context, appState, child) {
                  return Visibility(
                    visible: appState.isLoading,
                    child: const LinearProgressIndicator(
                        color: Colors.tealAccent,
                        backgroundColor: Colors.transparent),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

class ProfileBar extends StatelessWidget {
  const ProfileBar({super.key});

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<AppState>(context, listen: false).currentUser;
    final fullName = user?.userMetadata?['full_name'] ?? 'No Name';
    final email = user?.email ?? 'No Email';

    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          CircleAvatar(
            backgroundColor: Colors.teal,
            child: Text(fullName.isNotEmpty ? fullName[0].toUpperCase() : 'U',
                style: const TextStyle(
                    color: Colors.white, fontWeight: FontWeight.bold)),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(fullName,
                    style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white)),
                Text(email,
                    style:
                        const TextStyle(fontSize: 14, color: Colors.white70)),
              ],
            ),
          ),
          IconButton(
            tooltip: "Logout",
            icon: const Icon(Icons.logout, color: Colors.white70),
            onPressed: () async {
              final bool? confirmLogout = await showDialog<bool>(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    backgroundColor: const Color(0xFF2c2c2c),
                    title: const Text('Konfirmasi Logout',
                        style: TextStyle(color: Colors.white)),
                    content: const Text('Apakah Anda yakin ingin keluar?',
                        style: TextStyle(color: Colors.white70)),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: const Text('Batal',
                            style: TextStyle(color: Colors.white70)),
                      ),
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(true),
                        child: const Text('Logout',
                            style: TextStyle(color: Colors.redAccent)),
                      ),
                    ],
                  );
                },
              );

              if (!context.mounted) return;

              if (confirmLogout == true) {
                // PERBAIKAN: Navigasi dulu, baru proses logout di latar belakang.
                final appState = Provider.of<AppState>(context, listen: false);

                Navigator.of(context).pushAndRemoveUntil(
                  MaterialPageRoute(
                      builder: (context) =>
                          const LoginPage(showLogoutSuccess: true)),
                  (route) => false,
                );

                await appState.signOut();
              }
            },
          )
        ],
      ),
    );
  }
}

class SettingsBar extends StatelessWidget {
  const SettingsBar({super.key});

  void _showSetTimerDialog(BuildContext context, AppState appState) async {
    final now = DateTime.now();
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.fromDateTime(now.add(const Duration(hours: 1))),
    );

    if (pickedTime != null) {
      DateTime scheduledTime = DateTime(
          now.year, now.month, now.day, pickedTime.hour, pickedTime.minute);
      if (scheduledTime.isBefore(now)) {
        scheduledTime = scheduledTime.add(const Duration(days: 1));
      }

      final duration = scheduledTime.difference(now);
      final durationMicroseconds = duration.inMicroseconds;

      final error = await appState.setSleepSchedule(durationMicroseconds);

      if (context.mounted) {
        if (error == null) {
          final formattedTime = DateFormat.jm('id_ID').format(scheduledTime);
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Jadwal deep sleep diatur hingga $formattedTime'),
            backgroundColor: Colors.green,
          ));
        } else {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Gagal mengatur jadwal: $error'),
            backgroundColor: Colors.redAccent,
          ));
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<AppState>(
      builder: (context, appState, child) {
        final statusData = appState.deviceStatus;

        if (statusData == null) {
          return const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Center(
                child: Text("Mencari status perangkat...",
                    style: TextStyle(color: Colors.white24))),
          );
        }

        final deviceId = statusData['device_id'] ?? 'N/A';
        final deviceStatus = statusData['status'] ?? 'unknown';
        final isOnline = deviceStatus == 'active';
        final lastUpdateString =
            statusData['last_update'] ?? DateTime.now().toIso8601String();
        final lastUpdate = DateTime.parse(lastUpdateString).toLocal();
        final formattedLastUpdate =
            DateFormat('dd MMM, HH:mm:ss', 'id_ID').format(lastUpdate);

        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.circular(16),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Device: $deviceId',
                          style: const TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold)),
                      const SizedBox(height: 8),
                      Row(
                        children: [
                          Icon(Icons.circle,
                              color: isOnline
                                  ? Colors.greenAccent
                                  : Colors.redAccent,
                              size: 12),
                          const SizedBox(width: 8),
                          Text(isOnline ? 'Active' : 'Inactive',
                              style: const TextStyle(color: Colors.white)),
                        ],
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'Last update: $formattedLastUpdate',
                        style: const TextStyle(
                            fontSize: 12, color: Colors.white54),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
                const SizedBox(width: 12),
                ElevatedButton(
                  onPressed: isOnline
                      ? () => _showSetTimerDialog(context, appState)
                      : null,
                  style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.teal,
                      foregroundColor: Colors.white,
                      disabledBackgroundColor: Colors.grey.withOpacity(0.3)),
                  child: const Text('Set Timer'),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

class FootageGallery extends StatelessWidget {
  const FootageGallery({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<AppState>(
      builder: (context, appState, child) {
        final events = appState.events;
        if (events.isEmpty) {
          return const SliverToBoxAdapter(
            child: Center(
              child: Padding(
                padding: EdgeInsets.all(48.0),
                child: Column(
                  children: [
                    Icon(CupertinoIcons.photo_on_rectangle,
                        size: 60, color: Colors.white24),
                    SizedBox(height: 16),
                    Text('Belum ada tangkapan',
                        style: TextStyle(color: Colors.white24, fontSize: 16)),
                  ],
                ),
              ),
            ),
          );
        }
        return SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              final event = events[index];
              return FootageCard(event: event);
            },
            childCount: events.length,
          ),
        );
      },
    );
  }
}

class FootageCard extends StatelessWidget {
  final Map<String, dynamic> event;
  const FootageCard({super.key, required this.event});

  @override
  Widget build(BuildContext context) {
    final imageUrl = event['image_ref'] as String?;
    final location = event['location'] ?? 'Unknown Location';
    final eventType = event['event_type'] ?? 'Unknown Event';
    final timestampString =
        event['timestamp'] ?? DateTime.now().toIso8601String();
    final timestamp = DateTime.parse(timestampString);

    final formattedTime = DateFormat('EEEE, dd MMMM yyyy, HH:mm:ss', 'id_ID')
        .format(timestamp.toLocal());

    String displayEventType = 'Unknown';
    Color eventColor = Colors.grey;
    if (eventType == 'motion') {
      displayEventType = 'Motion Detected';
      eventColor = Colors.orange.shade800;
    } else if (eventType == 'vibration') {
      displayEventType = 'Vibration Detected';
      eventColor = Colors.purple.shade800;
    }

    return Container(
      margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 10,
            offset: const Offset(0, 4),
          )
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (imageUrl != null && imageUrl.isNotEmpty)
              Image.network(
                imageUrl,
                fit: BoxFit.cover,
                width: double.infinity,
                height: 250,
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Container(
                    height: 250,
                    color: Colors.black12,
                    child: Center(
                      child: CircularProgressIndicator(
                        color: Colors.tealAccent,
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes!
                            : null,
                      ),
                    ),
                  );
                },
                errorBuilder: (context, error, stackTrace) => Container(
                  height: 250,
                  color: Colors.black12,
                  child: const Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(CupertinoIcons.exclamationmark_triangle,
                            color: Colors.redAccent, size: 50),
                        SizedBox(height: 8),
                        Text("Gagal memuat gambar",
                            style: TextStyle(color: Colors.white70))
                      ],
                    ),
                  ),
                ),
              )
            else
              Container(
                height: 100,
                color: Colors.black12,
                child: const Center(
                    child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(CupertinoIcons.videocam,
                        size: 30, color: Colors.white24),
                    SizedBox(height: 8),
                    Text("No image captured",
                        style: TextStyle(color: Colors.white24))
                  ],
                )),
              ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                        color: eventColor,
                        borderRadius: BorderRadius.circular(8)),
                    child: Text(
                      displayEventType,
                      style: const TextStyle(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    ),
                  ),
                  const SizedBox(height: 12),
                  Row(
                    children: [
                      const Icon(CupertinoIcons.location_solid,
                          size: 16, color: Colors.white70),
                      const SizedBox(width: 8),
                      Text(location,
                          style: const TextStyle(
                              fontSize: 16, color: Colors.white)),
                    ],
                  ),
                  const SizedBox(height: 8),
                  Row(
                    children: [
                      const Icon(CupertinoIcons.time_solid,
                          size: 16, color: Colors.white70),
                      const SizedBox(width: 8),
                      Text(formattedTime,
                          style: const TextStyle(
                              fontSize: 14, color: Colors.white70)),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}