import 'package:auth/auth.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:home/src/presentation/deposit_screen.dart';
import 'package:home/src/presentation/kid_wallet_screen.dart';
import 'package:home/src/presentation/money_text.dart';
import 'package:sf_shared/sf_shared.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class HomeScreen extends ConsumerWidget {
  final String name = "Juan";
  final double total = 95.03;
  final List<Kid> kids = [
    Kid(name: "Carlos", balance: 25.47),
    Kid(name: "Ana", balance: 25.47),
  ];
  late final double available = double.parse(
    kids.fold(total, (t, e) => t - e.balance).toStringAsFixed(2),
  );

  HomeScreen({super.key});

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

    return SafeArea(
      child: SingleChildScrollView(
        child: Container(
          color: theme.getColorFor(ThemeCode.backgroundSecondary),
          margin: EdgeInsets.all(30),
          child: Column(
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: Text.rich(
                  TextSpan(
                    text: "Hola, ",
                    style: TextStyle(fontSize: 25),
                    children: <TextSpan>[
                      TextSpan(
                        text: name,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ),
              ),
              walletsList(context, kids, ref),
              Align(
                alignment: Alignment.topLeft,
                child: TextButton(
                  onPressed: () => Navigator.push(
                    context,
                    MaterialPageRoute(builder: (_) => CreateProfileScreen()),
                  ),
                  child: Text(
                    "+ Añadir otro peque",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: theme.getColorFor(ThemeCode.textPrimary),
                    ),
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                ),
                child: Column(
                  spacing: 5,
                  children: [
                    Row(
                      children: [
                        Text(
                          "Wallet",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                          ),
                        ),
                        Spacer(),
                        MoneyText(
                          text: "$total€ total",
                          size: 25,
                          resize: true,
                          color: theme.getColorFor(ThemeCode.textPrimary),
                        ),
                      ],
                    ),
                    Stack(
                      children: [
                        LinearProgressIndicator(
                          value: available / total,
                          minHeight: 70,
                          borderRadius: BorderRadius.all(Radius.circular(16)),
                          color: theme.getColorFor(ThemeCode.buttonPrimary),
                          backgroundColor: theme.getColorFor(
                            ThemeCode.backgroundTertiary,
                          ),
                        ),
                        FractionallySizedBox(
                          widthFactor: available / total,
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10),
                            child: Center(
                              child: MoneyText(
                                text: "$available€",
                                size: 35,
                                resize: true,
                                color: theme.getColorFor(
                                  ThemeCode.textSecondary,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Center(child: Text("Disponible")),
                  ],
                ),
              ),
              DepositBlock(max: 150 - total),
            ],
          ),
        ),
      ),
    );
  }

  Widget walletsList(BuildContext context, List<Kid> kids, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    return Column(
      spacing: 20,
      children: List<Widget>.generate(kids.length, (int index) {
        return GestureDetector(
          onTap: () => {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => KidWalletScreen(kid: kids[index]),
              ),
            ),
          },
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(16.0)),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: theme.getCardColorFor(index),
                ),
              ),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      kids[index].name,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 25,
                        color: theme.getColorFor(ThemeCode.textSecondary),
                      ),
                    ),
                  ),
                  Row(
                    spacing: 10,
                    children: [
                      SizedBox(
                        height: 60,
                        width: 60,
                        child: SvgPicture.asset("assets/images/ui/face.svg"),
                      ),
                      Spacer(),
                      Column(
                        children: [
                          MoneyText(
                            text: "${kids[index].balance}€",
                            size: 50,
                            resize: true,
                            color: theme.getColorFor(ThemeCode.textSecondary),
                          ),
                          Text(
                            "en su hucha",
                            style: TextStyle(
                              color: theme.getColorFor(ThemeCode.textSecondary),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Row(
                    children: [
                      TextButton(
                        onPressed: () => showDialog(
                          context: context,
                          builder: (BuildContext context) => Dialog(
                            child: SizedBox(
                              height: 100,
                              width: double.infinity,
                              child: Column(
                                children: [
                                  FilledButton(
                                    onPressed: () => {},
                                    child: Text("Cámara"),
                                  ),
                                  OutlinedButton(
                                    onPressed: () => {},
                                    child: Text("Galería de fotos"),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        child: Row(
                          spacing: 10,
                          children: [
                            Icon(
                              Icons.edit,
                              color: theme.getColorFor(ThemeCode.textSecondary),
                            ),
                            Text(
                              "Editar",
                              style: TextStyle(
                                color: theme.getColorFor(
                                  ThemeCode.textSecondary,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Spacer(),
                      FilledButton(
                        onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => DepositScreen(kid: kids[index]),
                          ),
                        ),
                        style: ButtonStyle(
                          backgroundColor: WidgetStatePropertyAll<Color>(
                            theme.getColorFor(ThemeCode.buttonSecondary),
                          ),
                        ),
                        child: Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 0,
                            vertical: 10,
                          ),
                          child: Text("+ Añadir dinero"),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
}
