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 LimitsScreen extends ConsumerStatefulWidget {
  final Kid kid;

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

  @override
  ConsumerState<LimitsScreen> createState() => LimitsScreenState();
}

class LimitsScreenState extends ConsumerState<LimitsScreen> {
  late List dailyLimits;
  late List timeLimits;
  late List conditions;
  late List blocks;

  @override
  void initState() {
    super.initState();
    dailyLimits = [ //dey, week, month, year
      {"title": "Diario L-V", "limit": "5", "edit": false},
      {"title": "Fines de semana", "limit": "8", "edit": false},
      {"title": "Semanal", "limit": "30", "edit": false},
      {"title": "Mensual", "limit": "1200", "edit": false},
    ];
    timeLimits = [
      {
        "title": "Lunes a Viernes",
        "start": "08:00",
        "end": "20:00",
        "edit": false,
      },
      {
        "title": "Fines de semana",
        "start": "10:00",
        "end": "21:00",
        "edit": false,
      },
      {
        "title": "Vacaciones",
        "start": "09:00",
        "end": "22:00",
        "edit": false
      },
    ];
    conditions = [
      {"title": "Alimentación", "limit": "10", "active": true, "edit": false},
      {"title": "Transporte", "limit": "10", "active": false, "edit": false},
      {"title": "Alimentación", "limit": "10", "active": false, "edit": false},
    ];
    blocks = [
      {"title": "Alojamiento y Hoteles", "active": true},
      {"title": "Supermercados", "active": true},
      {"title": "Gasolineras", "active": true},
      {"title": "Restaurantes", "active": true},
      {"title": "Bares y discotecas", "active": true},
      {"title": "Licorerías", "active": true},
      {"title": "Estancos", "active": true},
    ];
  }

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

    return WalletManagementLayout(
      kid: widget.kid,
      footer: Container(
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: BorderRadius.only(topLeft: Radius.circular(24), topRight: Radius.circular(24))
        ),
        padding: EdgeInsets.all(24),
        child: Column(
          children: [
            PrimaryButton(
              onPressed: () => {},
              text: "Guardar límites",
              color: theme.getColorFor(ThemeCode.buttonPrimary)
            ),
            TextButton(
              onPressed: ()=>Navigator.pop(context),
              child: Text(
                "Cancelar",
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: theme.getColorFor(ThemeCode.textPrimary)
                )
              )
            )
          ],
        ),
      ),
      children: [
        Container(
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
          ),
          child: Column(
            spacing: 10,
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: Text(
                  "Pon límite de gastos",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                )
              ),
              Text("Libertad para ellos, tranquilidad para ti"),
              ...List<Widget>.generate(dailyLimits.length, (int index) {
                return Column(
                  children: [
                    Row(
                      children: [
                        Text(
                          "${dailyLimits[index]["title"]}: ${dailyLimits[index]["limit"]} €",
                        ),
                        Spacer(),
                        TextButton(
                          onPressed: () => {
                            setState(() {
                              dailyLimits[index]["edit"] =
                                  !dailyLimits[index]["edit"];
                            }),
                          },
                          child: Text("Editar"),
                        ),
                      ],
                    ),
                    if (dailyLimits[index]["edit"]) CustomTextField(
                      hint: "5€",
                    ),
                  ],
                );
              }),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
          ),
          child: Column(
            spacing: 10,
            children: [
              Text(
                "Horarios permitidos",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text("Controla cuándo pueden comprar"),
              ...List<Widget>.generate(timeLimits.length, (int index) {
                return Column(
                  children: [
                    Row(
                      children: [
                        Text(
                          "${timeLimits[index]["title"]}: ${timeLimits[index]["start"]} - ${timeLimits[index]["end"]}",
                        ),
                        Spacer(),
                        TextButton(
                          onPressed: () => {
                            setState(() {
                              timeLimits[index]["edit"] = !timeLimits[index]["edit"];
                            }),
                          },
                          child: Text("Editar"),
                        ),
                      ],
                    ),
                    if (timeLimits[index]["edit"]) CustomTextField(
                      hint: "5€",
                    ),
                  ],
                );
              }),
            ],
          ),
        ),
        Container(
          padding: EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(24)),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
          ),
          child: Column(
            spacing: 24,
            children: [
              Text(
                "Condiciones",
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
              ),
              Column(
                spacing: 8,
                children: List<Widget>.generate(conditions.length, (int index)=>
                  Column(
                    spacing: 8,
                    children: [
                      Row(children: [
                        Expanded(child: CheckboxListTile(
                          value: conditions[index]["active"],
                          onChanged: (_)=>setState(() {
                            conditions[index]["active"] = !conditions[index]["active"];
                          }),
                          title: Text(
                            "${conditions[index]["title"]}: ${conditions[index]["limit"]}€/sem",
                            style: TextStyle(fontSize: 16, letterSpacing: 0),
                          ),
                          checkboxScaleFactor: 2,
                          controlAffinity: ListTileControlAffinity.leading,
                          activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
                          contentPadding: EdgeInsets.zero,
                        )),
                        TextButton(
                          onPressed: ()=>setState(() {
                            conditions[index]["edit"] = ! conditions[index]["edit"];
                          }),
                          child: Text(
                            "Editar",
                            style: TextStyle(fontSize: 16, letterSpacing: 0),
                          )
                        )
                      ]),
                      if (conditions[index]["edit"]) CustomTextField(
                        hint: "5€",
                        numeric: true,
                      )
                    ]
                  )
                ),
              )
            ],
          )
        ),
        Container(
          padding: EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: BorderRadius.all(Radius.circular(24))
          ),
          child: Column(
            spacing: 24,
            children: [
              Text(
                "Comercios bloqueados",
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
              ),
              Column(
                spacing: 8,
                children: List<Widget>.generate(blocks.length, (int index) =>
                  CheckboxListTile(
                    value: blocks[index]["active"],
                    onChanged: (_) => setState(() {
                      blocks[index]["active"] = !blocks[index]["active"];
                    }),
                    title: Text(
                      blocks[index]["title"],
                      style: TextStyle(fontSize: 16, letterSpacing: 0),
                    ),
                    checkboxScaleFactor: 2,
                    controlAffinity: ListTileControlAffinity.leading,
                    activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
                    contentPadding: EdgeInsets.zero,
                  )
                )
              )
            ],
          ),
        )
      ],
    );
  }
}