import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/personalization/presentasion/controllers/settings/security_controller.dart';
import 'package:sigap/src/features/personalization/presentasion/pages/settings/widgets/base_detail_screen.dart';
import 'package:sigap/src/shared/widgets/loaders/custom_circular_loader.dart';

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

  @override
  _SecuritySettingsScreenState createState() => _SecuritySettingsScreenState();
}

class _SecuritySettingsScreenState extends State<SecuritySettingsScreen> {
  // Get the controller
  final SecurityController controller = Get.put(SecurityController());

  @override
  Widget build(BuildContext context) {
    return BaseDetailScreen(
      title: 'Security Settings',
      content: Obx(() {
        if (controller.isLoading.value) {
          return const Center(child: DCircularLoader());
        }

        return ListView(
          children: [
            _buildSectionHeader('App Lock'),
            Obx(
              () => _buildSwitchItem(
                icon: Icons.fingerprint_outlined,
                title: 'Biometric Authentication',
                subtitle: 'Use your fingerprint or face to sign in',
                value: controller.requireBiometric.value,
                onChanged: (value) async {
                  // Show loading
                  final wasLoading = controller.isLoading.value;
                  if (!wasLoading) controller.setLoading(true);

                  // Toggle biometric
                  await controller.toggleBiometricAuthentication(value);

                  // Hide loading if we showed it
                  if (!wasLoading) controller.setLoading(false);
                },
              ),
            ),
            _buildNavigationItem(
              icon: Icons.lock_outline,
              title: 'Change passcode',
              onTap: () {},
            ),

            _buildSectionHeader('Two-Factor Authentication'),
            Obx(
              () => _buildSwitchItem(
                icon: Icons.security_outlined,
                title: 'Enable 2FA',
                value: controller.enable2FA.value,
                onChanged: (value) {
                  controller.toggleSecuritySetting('enable_2fa', value);
                },
              ),
            ),
            _buildNavigationItem(
              icon: Icons.backup_outlined,
              title: 'Manage backup codes',
              onTap: () {},
            ),

            _buildSectionHeader('Login Alerts'),
            Obx(
              () => _buildSwitchItem(
                icon: Icons.email_outlined,
                title: 'Send email alerts',
                value: controller.sendEmailAlerts.value,
                onChanged: (value) {
                  controller.toggleSecuritySetting('send_email_alerts', value);
                },
              ),
            ),
            Obx(
              () => _buildSwitchItem(
                icon: Icons.notifications_outlined,
                title: 'Send push notification',
                value: controller.sendPushNotification.value,
                onChanged: (value) {
                  controller.toggleSecuritySetting(
                    'send_push_notification',
                    value,
                  );
                },
              ),
            ),
          ],
        );
      }),
    );
  }

  Widget _buildSectionHeader(String title) {
    final theme = Theme.of(context);

    return Container(
      padding: const EdgeInsets.fromLTRB(20, 30, 20, 10),
      child: Text(
        title,
        style: theme.textTheme.titleMedium?.copyWith(
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }

  Widget _buildNavigationItem({
    required IconData icon,
    required String title,
    required VoidCallback onTap,
  }) {
    final theme = Theme.of(context);

    return InkWell(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
        child: Row(
          children: [
            Icon(icon, size: 24, color: theme.iconTheme.color),
            const SizedBox(width: 15),
            Expanded(child: Text(title, style: theme.textTheme.bodyLarge)),
            Icon(Icons.chevron_right, color: theme.hintColor),
          ],
        ),
      ),
    );
  }

  Widget _buildSwitchItem({
    required IconData icon,
    required String title,
    String? subtitle,
    required bool value,
    required ValueChanged<bool> onChanged,
  }) {
    final theme = Theme.of(context);

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      child: Row(
        children: [
          Icon(icon, size: 24, color: theme.iconTheme.color),
          const SizedBox(width: 15),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(title, style: theme.textTheme.bodyLarge),
                if (subtitle != null)
                  Text(
                    subtitle,
                    style: theme.textTheme.bodySmall?.copyWith(
                      color: theme.textTheme.bodySmall?.color?.withOpacity(0.7),
                    ),
                  ),
              ],
            ),
          ),
          Switch(
            value: value,
            onChanged: onChanged,
            activeColor: theme.primaryColor,
            activeTrackColor: theme.primaryColor.withOpacity(0.4),
          ),
        ],
      ),
    );
  }
}
