apskel-pos-flutter/lib/presentation/home/pages/home_page.dart

// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:enaklo_pos/presentation/home/widgets/home_right_title.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/core/extensions/int_ext.dart';
import 'package:enaklo_pos/core/extensions/string_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/local_product/local_product_bloc.dart';
import 'package:enaklo_pos/presentation/home/pages/confirm_payment_page.dart';
import 'package:enaklo_pos/data/datasources/product_local_datasource.dart';
import 'package:enaklo_pos/presentation/setting/bloc/sync_product/sync_product_bloc.dart';
import 'package:enaklo_pos/data/models/response/product_response_model.dart';

import '../../../core/assets/assets.gen.dart';
import '../../../core/components/buttons.dart';
import '../../../core/components/spaces.dart';
import '../../../core/constants/colors.dart';
import '../bloc/checkout/checkout_bloc.dart';
import '../widgets/custom_tab_bar.dart';
import '../widgets/home_title.dart';
import '../widgets/order_menu.dart';
import '../widgets/product_card.dart';

class HomePage extends StatefulWidget {
  final bool isTable;
  final TableModel? table;
  const HomePage({
    super.key,
    required this.isTable,
    this.table,
  });

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final searchController = TextEditingController();
  String searchQuery = '';

  @override
  void initState() {
    // First sync products from API, then load local products
    _syncAndLoadProducts();
    super.initState();
  }

  void _syncAndLoadProducts() {
    // Trigger sync from API first
    context.read<SyncProductBloc>().add(const SyncProductEvent.syncProduct());

    // Also load local products initially in case sync fails or takes time
    context
        .read<LocalProductBloc>()
        .add(const LocalProductEvent.getLocalProduct());

    // Initialize checkout with tax and service charge settings
    context.read<CheckoutBloc>().add(const CheckoutEvent.started());
  }

  void onCategoryTap(int index) {
    searchController.clear();
    setState(() {
      searchQuery = '';
    });
  }

  List<Product> _filterProducts(List<Product> products) {
    if (searchQuery.isEmpty) {
      return products;
    }

    return products.where((product) {
      final productName = product.name?.toLowerCase() ?? '';
      final queryLower = searchQuery.toLowerCase();
      return productName.contains(queryLower);
    }).toList();
  }

  List<Product> _filterProductsByCategory(
      List<Product> products, int categoryId) {
    final filteredBySearch = _filterProducts(products);
    return filteredBySearch
        .where((element) => element.category?.id == categoryId)
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'confirmation_screen',
      child: Scaffold(
        backgroundColor: AppColors.white,
        body: BlocListener<SyncProductBloc, SyncProductState>(
          listener: (context, state) {
            state.maybeWhen(
              orElse: () {},
              error: (message) {
                // If sync fails, still try to load local products
                context
                    .read<LocalProductBloc>()
                    .add(const LocalProductEvent.getLocalProduct());
              },
              loaded: (productResponseModel) async {
                // Store context reference before async operations
                final localProductBloc = context.read<LocalProductBloc>();

                // Save synced products to local database
                await ProductLocalDatasource.instance.deleteAllProducts();
                await ProductLocalDatasource.instance.insertProducts(
                  productResponseModel.data!,
                );
                // Then load local products to display
                localProductBloc.add(const LocalProductEvent.getLocalProduct());
              },
            );
          },
          child: Row(
            children: [
              Expanded(
                flex: 3,
                child: Align(
                  alignment: AlignmentDirectional.topStart,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      HomeTitle(
                        controller: searchController,
                        onChanged: (value) {
                          setState(() {
                            searchQuery = value;
                          });
                        },
                      ),
                      BlocBuilder<LocalProductBloc, LocalProductState>(
                        builder: (context, state) {
                          return Expanded(
                            child: CustomTabBarV2(
                              tabTitles: const [
                                'Semua',
                                'Makanan',
                                'Minuman',
                                'Paket'
                              ],
                              tabViews: [
                                // All Products Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    final filteredProducts =
                                        _filterProducts(products);
                                    if (filteredProducts.isEmpty) {
                                      return const Center(
                                        child: Text('No Items Found'),
                                      );
                                    }
                                    return GridView.builder(
                                      itemCount: filteredProducts.length,
                                      padding: const EdgeInsets.all(16),
                                      gridDelegate:
                                          SliverGridDelegateWithMaxCrossAxisExtent(
                                        maxCrossAxisExtent: 180,
                                        mainAxisSpacing: 30,
                                        crossAxisSpacing: 30,
                                        childAspectRatio: 180 / 240,
                                      ),
                                      itemBuilder: (context, index) =>
                                          ProductCard(
                                        data: filteredProducts[index],
                                        onCartButton: () {},
                                      ),
                                    );
                                  }),
                                ),
                                // Makanan Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 1);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) =>
                                                ProductCard(
                                              data: filteredProducts[index],
                                              onCartButton: () {},
                                            ),
                                          );
                                  }),
                                ),
                                // Minuman Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 2);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) {
                                              return ProductCard(
                                                data: filteredProducts[index],
                                                onCartButton: () {},
                                              );
                                            },
                                          );
                                  }),
                                ),
                                // Snack Tab
                                SizedBox(
                                  child: state.maybeWhen(orElse: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loading: () {
                                    return const Center(
                                      child: CircularProgressIndicator(),
                                    );
                                  }, loaded: (products) {
                                    if (products.isEmpty) {
                                      return const Center(
                                        child: Text('No Items'),
                                      );
                                    }
                                    final filteredProducts =
                                        _filterProductsByCategory(products, 3);
                                    return filteredProducts.isEmpty
                                        ? const _IsEmpty()
                                        : GridView.builder(
                                            itemCount: filteredProducts.length,
                                            padding: const EdgeInsets.all(16),
                                            gridDelegate:
                                                SliverGridDelegateWithMaxCrossAxisExtent(
                                              maxCrossAxisExtent:
                                                  200, // Lebar maksimal tiap item (bisa kamu ubah)
                                              mainAxisSpacing: 30,
                                              crossAxisSpacing: 30,
                                              childAspectRatio: 0.85,
                                            ),
                                            itemBuilder: (context, index) {
                                              return ProductCard(
                                                data: filteredProducts[index],
                                                onCartButton: () {},
                                              );
                                            },
                                          );
                                  }),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: Material(
                    color: Colors.white,
                    child: Column(
                      children: [
                        HomeRightTitle(
                          table: widget.table,
                        ),
                        Padding(
                          padding: const EdgeInsets.all(16.0)
                              .copyWith(bottom: 0, top: 27),
                          child: Column(
                            children: [
                              const Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    'Item',
                                    style: TextStyle(
                                      color: AppColors.primary,
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 130,
                                  ),
                                  SizedBox(
                                    width: 50.0,
                                    child: Text(
                                      'Qty',
                                      style: TextStyle(
                                        color: AppColors.primary,
                                        fontSize: 16,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                  SizedBox(
                                    child: Text(
                                      'Price',
                                      style: TextStyle(
                                        color: AppColors.primary,
                                        fontSize: 16,
                                        fontWeight: FontWeight.w600,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              const SpaceHeight(8),
                              const Divider(),
                            ],
                          ),
                        ),
                        Expanded(
                          child: SingleChildScrollView(
                            padding:
                                const EdgeInsets.all(16.0).copyWith(top: 0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                BlocBuilder<CheckoutBloc, CheckoutState>(
                                  builder: (context, state) {
                                    return state.maybeWhen(
                                      orElse: () => const Center(
                                        child: Text('No Items'),
                                      ),
                                      loaded: (products,
                                          discountModel,
                                          discount,
                                          discountAmount,
                                          tax,
                                          serviceCharge,
                                          totalQuantity,
                                          totalPrice,
                                          draftName,
                                          orderType) {
                                        if (products.isEmpty) {
                                          return const Center(
                                            child: Text('No Items'),
                                          );
                                        }
                                        return ListView.separated(
                                          shrinkWrap: true,
                                          physics:
                                              const NeverScrollableScrollPhysics(),
                                          itemBuilder: (context, index) =>
                                              OrderMenu(data: products[index]),
                                          separatorBuilder: (context, index) =>
                                              const SpaceHeight(1.0),
                                          itemCount: products.length,
                                        );
                                      },
                                    );
                                  },
                                ),
                                const SpaceHeight(8.0),
                              ],
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(16.0).copyWith(top: 0),
                          child: Column(
                            children: [
                              const Divider(),
                              const SpaceHeight(16.0),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  const Text(
                                    'Pajak',
                                    style: TextStyle(
                                      color: AppColors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  BlocBuilder<CheckoutBloc, CheckoutState>(
                                    builder: (context, state) {
                                      final tax = state.maybeWhen(
                                          orElse: () => 0,
                                          loaded: (products,
                                              discountModel,
                                              discount,
                                              discountAmount,
                                              tax,
                                              serviceCharge,
                                              totalQuantity,
                                              totalPrice,
                                              draftName,
                                              orderType) {
                                            if (products.isEmpty) {
                                              return 0;
                                            }
                                            return tax;
                                          });
                                      return Text(
                                        '$tax %',
                                        style: const TextStyle(
                                          color: AppColors.primary,
                                          fontWeight: FontWeight.w600,
                                        ),
                                      );
                                    },
                                  ),
                                ],
                              ),
                              const SpaceHeight(16.0),
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  const Text(
                                    'Sub total',
                                    style: TextStyle(
                                      color: AppColors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  BlocBuilder<CheckoutBloc, CheckoutState>(
                                    builder: (context, state) {
                                      final price = state.maybeWhen(
                                          orElse: () => 0,
                                          loaded: (products,
                                              discountModel,
                                              discount,
                                              discountAmount,
                                              tax,
                                              serviceCharge,
                                              totalQuantity,
                                              totalPrice,
                                              draftName,
                                              orderType) {
                                            if (products.isEmpty) {
                                              return 0;
                                            }
                                            return products
                                                .map((e) =>
                                                    e.product.price!
                                                        .toIntegerFromText *
                                                    e.quantity)
                                                .reduce((value, element) =>
                                                    value + element);
                                          });

                                      return Text(
                                        price.currencyFormatRp,
                                        style: const TextStyle(
                                          color: AppColors.primary,
                                          fontWeight: FontWeight.w900,
                                        ),
                                      );
                                    },
                                  ),
                                ],
                              ),
                              SpaceHeight(16.0),
                              Align(
                                alignment: Alignment.bottomCenter,
                                child: Expanded(
                                  child: Button.filled(
                                    borderRadius: 12,
                                    elevation: 1,
                                    onPressed: () {
                                      context.push(ConfirmPaymentPage(
                                        isTable: widget.isTable,
                                        table: widget.table,
                                      ));
                                    },
                                    label: 'Lanjutkan Pembayaran',
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _IsEmpty extends StatelessWidget {
  const _IsEmpty();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SpaceHeight(40),
        Assets.icons.noProduct.svg(),
        const SizedBox(height: 40.0),
        const Text(
          'Belum Ada Produk',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 16),
        ),
      ],
    );
  }
}