// configuracion.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'rutas.dart';

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

  @override
  State<ConfiguracionView> createState() => _ConfiguracionViewState();
}

class _ConfiguracionViewState extends State<ConfiguracionView> {
  String selectedOption = '7 días'; // Valor por defecto
  bool _isLoading = true;

  // Opciones del combobox
  final List<String> opciones = [
    'Cada día',
    'Cada 3 días',
    'Cada semana',
    'Cada quincena',
  ];

  // Mapa para mostrar valores más amigables
  final Map<String, String> opcionesMap = {
    'Cada día': '1 día',
    'Cada 3 días': '3 días',
    'Cada semana': '7 días',
    'Cada quincena': '15 días',
  };

  @override
  void initState() {
    super.initState();
    _cargarPreferencia();
  }

  // Cargar la preferencia guardada
  Future<void> _cargarPreferencia() async {
    try {
      final prefs = await SharedPreferences.getInstance();
      final String? savedOption = prefs.getString('notificacion_frecuencia');

      setState(() {
        if (savedOption != null && opciones.contains(savedOption)) {
          selectedOption = savedOption;
        }
        _isLoading = false;
      });
    } catch (e) {
      print('Error al cargar preferencia: $e');
      setState(() {
        _isLoading = false;
      });
    }
  }

  // Guardar la preferencia
  Future<void> _guardarPreferencia(String value) async {
    try {
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('notificacion_frecuencia', value);

      // Mostrar mensaje de confirmación
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Notificaciones: $value'),
            backgroundColor: colorAzul,
            duration: const Duration(seconds: 1),
          ),
        );
      }
    } catch (e) {
      print('Error al guardar preferencia: $e');
    }
  }

  // Mostrar diálogo con opciones
  void _mostrarSelector() {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (BuildContext context) {
        return Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text(
                'Frecuencia de notificaciones',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: colorAzul,
                ),
              ),
              const SizedBox(height: 20),
              ...opciones.map((opcion) {
                return ListTile(
                  leading: Icon(
                    selectedOption == opcion ? Icons.radio_button_checked : Icons.radio_button_unchecked,
                    color: colorAzul,
                  ),
                  title: Text(
                    opcion,
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: selectedOption == opcion ? FontWeight.bold : FontWeight.normal,
                      color: selectedOption == opcion ? colorAzul : Colors.black87,
                    ),
                  ),
                  trailing: Text(
                    opcionesMap[opcion]!,
                    style: const TextStyle(
                      fontSize: 14,
                      color: Colors.grey,
                    ),
                  ),
                  onTap: () {
                    setState(() {
                      selectedOption = opcion;
                    });
                    _guardarPreferencia(opcion);
                    Navigator.pop(context);
                  },
                );
              }),
              const SizedBox(height: 10),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Column(
          children: [
            // AppBar personalizado
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
              decoration: const BoxDecoration(
                color: colorAzul,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ),
              ),
              child: const Text(
                'Configuración',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
            ),
            // Contenido
            Expanded(
              child: _isLoading
                  ? const Center(
                child: CircularProgressIndicator(
                  color: colorAzul,
                ),
              )
                  : Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  children: [
                    // Selector de notificaciones
                    GestureDetector(
                      onTap: _mostrarSelector,
                      child: Container(
                        padding: const EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 4),
                          borderRadius: BorderRadius.circular(25),
                        ),
                        child: Row(
                          children: [
                            const Icon(Icons.notifications_active_outlined, size: 60),
                            const SizedBox(width: 10),
                            Text(
                              selectedOption,
                              style: const TextStyle(
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const Spacer(),
                            const Icon(Icons.keyboard_arrow_down, size: 50),
                          ],
                        ),
                      ),
                    ),
                    const SizedBox(height: 20),
                    // Información adicional
                    Container(
                      padding: const EdgeInsets.all(15),
                      decoration: BoxDecoration(
                        color: colorAzul.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Row(
                        children: [
                          Icon(Icons.info_outline, color: colorAzul, size: 30),
                          const SizedBox(width: 10),
                          Expanded(
                            child: Text(
                              'Recibirás notificaciones cada ${opcionesMap[selectedOption]}',
                              style: TextStyle(
                                fontSize: 16,
                                color: colorAzul,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}