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

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

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

class _DisplayModeSettingsScreenState extends State<DisplayModeSettingsScreen> {
  // Use GetX controller
  final DisplayModeController _controller = Get.find<DisplayModeController>();

  @override
  Widget build(BuildContext context) {
    return BaseDetailScreen(
      title: 'Display Mode',
      content: Obx(() {
        // Show loading indicator if controller is loading
        if (_controller.isLoading.value) {
          return const Center(child: CircularProgressIndicator());
        }

        // Show error message if there is one
        if (_controller.errorMessage.value.isNotEmpty) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Error: ${_controller.errorMessage.value}',
                  style: TextStyle(color: Colors.red),
                  textAlign: TextAlign.center,
                ),
                ElevatedButton(
                  onPressed: () => _controller.loadSettings(),
                  child: Text('Retry'),
                ),
              ],
            ),
          );
        }

        // Show normal content
        return ListView(
          children: [
            _buildSectionHeader('Theme'),
            ..._controller.themeOptions.map((mode) => _buildRadioItem(mode)),
          ],
        );
      }),
    );
  }

  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 _buildRadioItem(String mode) {
    final theme = Theme.of(context);
    IconData icon;

    switch (mode) {
      case 'System default':
        icon = Icons.brightness_auto;
        break;
      case 'Light mode':
        icon = Icons.light_mode_outlined;
        break;
      case 'Dark mode':
        icon = Icons.dark_mode_outlined;
        break;
      default:
        icon = Icons.brightness_auto;
    }

    return Obx(
      () => InkWell(
        onTap: () => _controller.changeThemeMode(mode),
        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(mode, style: theme.textTheme.bodyLarge)),
              Radio<String>(
                value: mode,
                groupValue: _controller.selectedThemeMode.value,
                activeColor: theme.primaryColor,
                onChanged: (value) {
                  if (value != null) {
                    _controller.changeThemeMode(value);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
