import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/routes/route_name.dart';
import 'package:tanami_app/core/routes/routes.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/features/MainScreens/Invest/presentation/widgets/kyc_card.dart';

import '../bloc/tab_bloc.dart';
import '../bloc/tab_event.dart';
import '../bloc/tab_state.dart';
import '../widgets/invest_closed_details_section.dart';
import '../widgets/invest_details_section.dart';
import '../widgets/invest_image_carousel.dart';

class InvestLayout extends StatelessWidget {
  const InvestLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: AppColor.plainWhite,
        body: Column(
          children: [
            TabBar(
              tabs: const [
                Tab(text: AppText.availableText),
                Tab(text: AppText.closedText),
              ],
              labelStyle: GoogleFonts.dmSans(
                fontWeight: FontWeight.bold,
                fontSize: 14.0,
              ),
              unselectedLabelStyle: GoogleFonts.dmSans(
                fontWeight: FontWeight.normal,
                fontSize: 14.0,
              ),
              overlayColor: WidgetStateProperty.all(Colors.transparent),
              labelColor: AppColor.plainBlack,
              unselectedLabelColor: AppColor.charcoalColor,
              indicatorColor: AppColor.plainBlack,
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorWeight: 1.0,
              indicatorPadding: const EdgeInsets.symmetric(horizontal: 16.0),
            ),
            const Expanded(
              child: TabBarView(
                children: [
                  AvailableItemsScreen(),
                  ClosedItemsScreen(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class AvailableItemsScreen extends StatelessWidget {
  const AvailableItemsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    context.read<TabBloc>().add(LoadAvailableItems());

    return BlocBuilder<TabBloc, TabState>(
      builder: (context, state) {
        if (state.availableItems.isEmpty) {
          return const Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
          itemCount: state.availableItems.length,
          itemBuilder: (context, index) {
            return index == 0
                ? Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 18,
                    ),
                    child: kycCard())
                : GestureDetector(
                    onTap: () {
                      goRouter.pushNamed(RouteName.investDetailScreen,
                          pathParameters: {"type": "available"});
                    },
                    child: Container(
                      margin: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 18,
                      ),
                      decoration: BoxDecoration(
                        color: AppColor.plainWhite,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(20.0)),
                        boxShadow: [
                          BoxShadow(
                            color: AppColor.plainBlack.withOpacity(0.15),
                            spreadRadius: 2,
                            blurRadius: 10,
                            offset: const Offset(0, 3),
                          ),
                        ],
                      ),
                      child: Column(
                        children: [
                          InvestCarouselView(),
                          const InvestDetailsSection(),
                        ],
                      ),
                    ),
                  );
          },
        );
      },
    );
  }
}

class ClosedItemsScreen extends StatelessWidget {
  const ClosedItemsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    context.read<TabBloc>().add(LoadClosedItems());

    return BlocBuilder<TabBloc, TabState>(
      builder: (context, state) {
        if (state.closedItems.isEmpty) {
          return const Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
          itemCount: state.closedItems.length,
          itemBuilder: (context, index) {
            return index == 0
                ? Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 18,
                    ),
                    child: kycCard())
                : GestureDetector(
                    onTap: () {
                      goRouter.pushNamed(RouteName.investDetailScreen,
                          pathParameters: {"type": "closed"});
                    },
                    child: Container(
                      margin: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 18,
                      ),
                      decoration: BoxDecoration(
                        color: AppColor.plainWhite,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(20.0)),
                        boxShadow: [
                          BoxShadow(
                            color: AppColor.plainBlack.withOpacity(0.15),
                            spreadRadius: 2,
                            blurRadius: 10,
                            offset: const Offset(0, 3),
                          ),
                        ],
                      ),
                      child: Column(
                        children: [
                          InvestCarouselView(),
                          const InvestClosedDetailsSection(),
                        ],
                      ),
                    ),
                  );
          },
        );
      },
    );
  }
}
