import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:helpers/helpers.dart';
import 'package:rluv/features/budget/widgets/add_transaction_dialog.dart';
import 'package:rluv/features/budget/widgets/budget_net_bar.dart';
import 'package:rluv/global/styles.dart';
import 'package:rluv/global/utils.dart';

import '../../../global/store.dart';

class BudgetOverviewScreen extends ConsumerStatefulWidget {
  const BudgetOverviewScreen({super.key});

  @override
  ConsumerState<BudgetOverviewScreen> createState() =>
      _BudgetOverviewScreenState();
}

class _BudgetOverviewScreenState extends ConsumerState<BudgetOverviewScreen> {
  final budgetListScrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    final budgetCategoriesRef = ref.watch(Store().budgetCategoriesProvider);
    final screen = BuildMedia(context).size;
    return budgetCategoriesRef.when(
      data: ((budgetCategories) => RefreshIndicator(
            onRefresh: () async {
              final _ = await ref.refresh(Store().dashboardProvider.future);
            },
            child: Column(
              children: [
                /// TOP HALF, TITLE & OVERVIEW
                Container(
                  height: screen.height * 0.33,
                  width: screen.width,
                  color: Styles.purpleNurple,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const Spacer(flex: 2),
                      Text(
                        formatDate(DateTime.now()),
                        style: const TextStyle(
                            fontSize: 16, color: Styles.electricBlue),
                      ),
                      const Spacer(),
                      const Text('MONTHLY',
                          style: TextStyle(
                              fontSize: 42, color: Styles.electricBlue)),
                      const Spacer(flex: 2),
                      const BudgetNetBar(isPositive: true, net: 5024.64),
                      const Spacer(),
                      const BudgetNetBar(isPositive: false, net: 2004.37),
                      const Spacer(),
                    ],
                  ),
                ),

                /// BOTTOM HALF, BUDGET BREAKDOWN
                Expanded(
                  child: SizedBox(
                    width: screen.width,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(14.0),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Styles.blushingPink,
                              borderRadius: BorderRadius.circular(16.0),
                            ),
                            child: Column(
                              children: [
                                const Padding(
                                  padding: EdgeInsets.all(8.0),
                                  child: Text(
                                    'BUDGET',
                                    style: TextStyle(
                                        fontSize: 28,
                                        color: Styles.electricBlue),
                                  ),
                                ),
                                Scrollbar(
                                  controller: budgetListScrollController,
                                  thumbVisibility: true,
                                  child: ListView(
                                    controller: budgetListScrollController,
                                    shrinkWrap: true,
                                    children: [
                                      for (final budget in budgetCategories)
                                        Row(
                                          children: [
                                            Padding(
                                              padding:
                                                  const EdgeInsets.all(8.0),
                                              child: SizedBox(
                                                width: 85,
                                                child: Text(
                                                  budget.name,
                                                  style: const TextStyle(
                                                      fontSize: 16.0),
                                                ),
                                              ),
                                            ),
                                            AnimatedContainer(
                                              duration: const Duration(
                                                  milliseconds: 500),
                                              child: Expanded(
                                                  child: Padding(
                                                padding: const EdgeInsets.only(
                                                    right: 18.0),
                                                child: Stack(
                                                  children: [
                                                    Container(
                                                      height: 30,
                                                      decoration: BoxDecoration(
                                                        color: Colors.black,
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(10.0),
                                                      ),
                                                    ),
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.all(
                                                              2.0),
                                                      child: Container(
                                                        height: 26,
                                                        decoration:
                                                            BoxDecoration(
                                                          color: Styles
                                                              .emptyBarGrey,
                                                          borderRadius:
                                                              BorderRadius
                                                                  .circular(
                                                                      10.0),
                                                        ),
                                                      ),
                                                    ),
                                                    Padding(
                                                      padding:
                                                          const EdgeInsets.all(
                                                              2.0),
                                                      child: SizedBox(
                                                        height: 26,
                                                        child:
                                                            FractionallySizedBox(
                                                          heightFactor: 1.0,
                                                          widthFactor: 0.5,
                                                          child: Container(
                                                            decoration:
                                                                BoxDecoration(
                                                              color:
                                                                  budget.color,
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          10.0),
                                                            ),
                                                          ),
                                                        ),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              )),
                                            )
                                          ],
                                        ),
                                      const SizedBox(height: 20),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        const Spacer(),
                        Padding(
                          padding: const EdgeInsets.only(bottom: 24.0),
                          child: Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                      left: 20.0, right: 15.0),
                                  child: Container(
                                    height: 70,
                                    decoration: BoxDecoration(
                                      color: Styles.seaweedGreen,
                                      borderRadius: BorderRadius.circular(15.0),
                                    ),
                                    child: InkWell(
                                      child: const Center(
                                        child: Padding(
                                          padding: EdgeInsets.symmetric(
                                              horizontal: 20.0, vertical: 14.0),
                                          child: Text(
                                            'Transaction History',
                                            textAlign: TextAlign.center,
                                            style: TextStyle(fontSize: 25),
                                          ),
                                        ),
                                      ),
                                      onTap: () {
                                        printRed('FIXME');
                                      },
                                    ),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(right: 20.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Styles.purpleNurple,
                                    borderRadius: BorderRadius.circular(40.0),
                                  ),
                                  height: 80,
                                  width: 80,
                                  child: IconButton(
                                    icon: const Icon(
                                      Icons.add,
                                      size: 48,
                                      color: Styles.lavender,
                                    ),
                                    onPressed: () {
                                      showDialog(
                                        context: context,
                                        builder: (BuildContext context) {
                                          return const AddTransactionDialog();
                                        },
                                      );
                                    },
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          )),
      loading: () => const CircularProgressIndicator(),
      error: (error, stackTrace) => Text('Error: $error, \n\n$stackTrace'),
    );
  }
}