import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:home/src/presentation/wallet_management_layout.dart';
import 'package:sf_shared/sf_shared.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class WageScreen extends ConsumerStatefulWidget {
  final Kid kid;

  const WageScreen({super.key, required this.kid});

  @override
  ConsumerState<WageScreen> createState() => _WageScreenState();
}

class _WageScreenState extends ConsumerState<WageScreen> {
  String frequence = 'weekly';

  final Map<String, bool> conditions = {
    'weeklyLimits': false,
    'incidences': false,
    'holidays': false,
  };

  @override
  Widget build(BuildContext context) {
    final theme = ref.watch(themePortProvider);

    return WalletManagementLayout(
      kid: widget.kid,
      footer: Container(
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        child: Column(
          spacing: 10,
          children: [
            FilledButton(
              onPressed: () {},
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                child: const Center(child: Text('Activar paga automática')),
              ),
            ),
            TextButton(onPressed: () {}, child: const Text('Cancelar')),
          ],
        ),
      ),
      children: [
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Paga automática',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Cantidad',
                  hintText: '0€',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              ),
              const Text('Saldo total disponible después: 30 €'),
            ],
          ),
        ),

        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Frecuencia',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              const Text('Cuándo se envía el dinero'),
              CheckboxListTile(
                title: const Text('Semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'weekly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'weekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Cada dos semanas'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'biweekly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'biweekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Mensual'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'monthly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'monthly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              SizedBox(
                width: double.infinity,
                child: DropdownMenu<String>(
                  label: const Text('Día de la semana'),
                  initialSelection: 'Domingo',
                  dropdownMenuEntries: () {
                    const days = [
                      'Lunes',
                      'Martes',
                      'Miércoles',
                      'Jueves',
                      'Viernes',
                      'Sábado',
                      'Domingo',
                    ];
                    return List<DropdownMenuEntry<String>>.generate(
                      days.length,
                      (index) => DropdownMenuEntry<String>(
                        value: days[index],
                        label: days[index],
                      ),
                    );
                  }(),
                ),
              ),
              DropdownMenu<int>(
                label: const Text('Hora del día'),
                initialSelection: 9,
                dropdownMenuEntries: List<DropdownMenuEntry<int>>.generate(
                  24,
                  (index) =>
                      DropdownMenuEntry<int>(value: index, label: '$index:00'),
                ),
              ),
              TextField(
                minLines: 3,
                maxLines: 3,
                maxLength: 150,
                decoration: InputDecoration(
                  labelText:
                      'Escribir mensaje a ${widget.kid.name} del motivo del ingreso',
                  hintText: 'Escribe tu mensaje',
                  border: const OutlineInputBorder(),
                ),
              ),
              const Align(
                alignment: Alignment.topLeft,
                child: Text('Máximo 150 caracteres'),
              ),
            ],
          ),
        ),

        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Condiciones',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              const Text('Este dato aparecerá en el reloj del peque'),
              CheckboxListTile(
                title: const Text('Sólo si cumple límites semanales'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions['weeklyLimits'],
                onChanged: (_) {
                  setState(() {
                    conditions['weeklyLimits'] =
                        !(conditions['weeklyLimits'] ?? false);
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Sólo si no ha tenido incidencias'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions['incidences'],
                onChanged: (_) {
                  setState(() {
                    conditions['incidences'] =
                        !(conditions['incidences'] ?? false);
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Pausar durante vacaciones'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions['holidays'],
                onChanged: (_) {
                  setState(() {
                    conditions['holidays'] = !(conditions['holidays'] ?? false);
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
