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 = [
      {"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", "edit": false},
      {"title": "Transporte", "limit": "10", "edit": false},
      {"title": "Alimentación", "limit": "10", "edit": false},
    ];
    blocks = [];
  }

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

    return WalletManagementLayout(
      kid: widget.kid,
      footer: Column(
        children: [
          FilledButton(
            onPressed: () => {},
            child: SizedBox(
              width: double.infinity,
              child: Center(child: Text("Guardar límites")),
            ),
          ),
        ],
      ),
      children: [
        Container(
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
          ),
          child: Column(
            spacing: 10,
            children: [
              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(),
                  ],
                );
              }),
            ],
          ),
        ),
        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(),
                  ],
                );
              }),
            ],
          ),
        ),
      ],
    );
  }
}