import 'package:design_system/design_system.dart';
import 'package:flutter/material.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: [
            PrimaryButton(
              onPressed: () => {},
              text: "Activar paga automática",
              color: theme.getColorFor(ThemeCode.buttonPrimary),
            ),
            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: [
              Align(
                alignment: Alignment.topLeft,
                child: const Text(
                  "Paga automática",
                  style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
                ),
              ),
              CustomTextField(
                keyboardType: TextInputType.number,
                label: "Cantidad",
                hint: "0€",
              ),
              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(24),
          child: Column(
            spacing: 10,
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: const Text(
                  "Frecuencia",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
              ),
              Align(
                alignment: Alignment.topLeft,
                child: const Text("Cuándo se envía el dinero"),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'weekly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'weekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Cada dos semanas'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'biweekly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'biweekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Mensual'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == 'monthly',
                onChanged: (_) {
                  setState(() {
                    frequence = 'monthly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CustomDropdown(
                items: [
                  Text("Lunes"),
                  Text("Martes"),
                  Text("Miércoles"),
                  Text("Jueves"),
                  Text("Viernes"),
                  Text("Sábado"),
                  Text("Domingo"),
                ],
                values: [
                  "Lunes",
                  "Martes",
                  "Miércoles",
                  "Jueves",
                  "Viernes",
                  "Sábado",
                  "Domingo",
                ],
                onChanged: (value) => {},
                hint: "Día de la semana",
              ),
              CustomDropdown(
                hint: "Hora del día",
                items: List<Widget>.generate(24, (int index) {
                  return Text("$index:00");
                }),
                onChanged: (value) => {},
              ),
              CustomTextField(
                lines: 3,
                length: 150,
                label:
                    "Escribir mensaje a ${widget.kid.name} del motivo del ingreso",
                hint: "Escribe tu mensaje",
              ),
              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(24),
          child: Column(
            spacing: 10,
            children: [
              const Align(
                alignment: Alignment.topLeft,
                child: Text(
                  "Condiciones",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
              ),
              const Align(
                alignment: Alignment.topLeft,
                child: Text("Este dato aparecerá en el reloj del peque"),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                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(
                contentPadding: EdgeInsets.zero,
                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(
                contentPadding: EdgeInsets.zero,
                title: const Text('Pausar durante vacaciones'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions['holidays'],
                onChanged: (_) {
                  setState(() {
                    conditions['holidays'] = !(conditions['holidays'] ?? false);
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
            ],
          ),
        ),
      ],
    );
  }
}