import 'dart:developer';

import 'package:dropdown_search/dropdown_search.dart';
import 'package:enaklo_pos/core/components/buttons.dart';
import 'package:enaklo_pos/core/components/custom_modal_dialog.dart';
import 'package:enaklo_pos/core/components/flushbar.dart';
import 'package:enaklo_pos/core/components/spaces.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/data/models/response/order_response_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/order_form/order_form_bloc.dart';
import 'package:enaklo_pos/presentation/home/models/product_quantity.dart';
import 'package:enaklo_pos/presentation/sales/blocs/order_loader/order_loader_bloc.dart';
import 'package:enaklo_pos/presentation/success/pages/success_save_order_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class PaymentAddOrderDialog extends StatefulWidget {
  final List<ProductQuantity> items;
  const PaymentAddOrderDialog({super.key, required this.items});

  @override
  State<PaymentAddOrderDialog> createState() => _PaymentAddOrderDialogState();
}

class _PaymentAddOrderDialogState extends State<PaymentAddOrderDialog> {
  Order? selectOrder;

  @override
  void initState() {
    super.initState();
    context.read<OrderLoaderBloc>().add(
          OrderLoaderEvent.getByStatus(
            'pending',
            dateFrom: DateTime.now(),
            dateTo: DateTime.now(),
            limit: 20,
          ),
        );
  }

  @override
  Widget build(BuildContext context) {
    return CustomModalDialog(
      title: 'Bayar Nanti',
      subtitle: 'Simpan pesanan dan bayar nanti',
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
      minWidth: context.deviceWidth * 0.4,
      minHeight: context.deviceHeight * 0.4,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Pilih Meja yang sudah dipesan',
                style: TextStyle(
                  color: AppColors.black,
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SpaceHeight(6.0),
              BlocBuilder<OrderLoaderBloc, OrderLoaderState>(
                  builder: (context, state) {
                return state.maybeWhen(
                  orElse: () =>
                      Center(child: const CircularProgressIndicator()),
                  loading: () =>
                      Center(child: const CircularProgressIndicator()),
                  loaded: (
                    orders,
                    totalOrder,
                    _,
                    __,
                    ___,
                  ) {
                    final availableOrders = orders;

                    if (selectOrder == null && availableOrders.isNotEmpty) {
                      selectOrder = availableOrders.first;
                    }

                    if (availableOrders.isEmpty) {
                      return Container(
                        padding: const EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: Colors.orange[50],
                          borderRadius: BorderRadius.circular(16),
                          border: Border.all(
                            color: Colors.orange,
                            width: 1,
                          ),
                        ),
                        child: const Text(
                          'Tidak ada meja yang tersedia. Silakan pilih opsi lain.',
                          style: TextStyle(color: Colors.orange),
                        ),
                      );
                    }

                    return DropdownSearch<Order>(
                      items: orders,
                      selectedItem: selectOrder,

                      // Dropdown properties
                      dropdownDecoratorProps: DropDownDecoratorProps(
                        dropdownSearchDecoration: InputDecoration(
                          hintText: "Pilih Meja",
                          hintStyle: TextStyle(
                            color: Colors.grey.shade600,
                            fontSize: 14,
                          ),
                          prefixIcon: Icon(
                            Icons.category_outlined,
                            color: Colors.grey.shade500,
                            size: 20,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(
                              color: Colors.grey.shade300,
                              width: 1.5,
                            ),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(
                              color: Colors.grey.shade300,
                              width: 1.5,
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide(
                              color: Colors.blue.shade400,
                              width: 2,
                            ),
                          ),
                          filled: true,
                          fillColor: Colors.white,
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 16,
                          ),
                        ),
                      ),

                      // Popup properties
                      popupProps: PopupProps.menu(
                        showSearchBox: true,
                        searchFieldProps: TextFieldProps(
                          decoration: InputDecoration(
                            hintText: "Cari meja...",
                            prefixIcon: const Icon(Icons.search),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8),
                            ),
                            contentPadding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 12,
                            ),
                          ),
                        ),
                        menuProps: MenuProps(
                          backgroundColor: Colors.white,
                          elevation: 8,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(12),
                          ),
                        ),
                        itemBuilder: (context, order, isSelected) {
                          return Container(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 12,
                            ),
                            decoration: BoxDecoration(
                              color: isSelected
                                  ? Colors.blue.shade50
                                  : Colors.transparent,
                              border: Border(
                                bottom: BorderSide(
                                  color: Colors.grey.shade100,
                                  width: 0.5,
                                ),
                              ),
                            ),
                            child: Row(
                              children: [
                                Container(
                                  width: 8,
                                  height: 8,
                                  decoration: BoxDecoration(
                                    color: isSelected
                                        ? Colors.blue.shade600
                                        : Colors.grey.shade400,
                                    shape: BoxShape.circle,
                                  ),
                                ),
                                const SizedBox(width: 12),
                                Expanded(
                                  child: Text(
                                    "${order.tableNumber ?? ""} - ${order.metadata?['customer_name']}",
                                    style: TextStyle(
                                      fontSize: 14,
                                      fontWeight: isSelected
                                          ? FontWeight.w600
                                          : FontWeight.w500,
                                      color: isSelected
                                          ? Colors.blue.shade700
                                          : Colors.black87,
                                    ),
                                  ),
                                ),
                                if (isSelected)
                                  Icon(
                                    Icons.check,
                                    color: Colors.blue.shade600,
                                    size: 18,
                                  ),
                              ],
                            ),
                          );
                        },
                        emptyBuilder: (context, searchEntry) {
                          return Container(
                            padding: const EdgeInsets.all(20),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Icon(
                                  Icons.search_off,
                                  color: Colors.grey.shade400,
                                  size: 48,
                                ),
                                const SizedBox(height: 12),
                                Text(
                                  searchEntry.isEmpty
                                      ? "Tidak ada meja tersedia"
                                      : "Tidak ditemukan meja dengan '${searchEntry}'",
                                  style: TextStyle(
                                    color: Colors.grey.shade600,
                                    fontSize: 14,
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ],
                            ),
                          );
                        },
                      ),

                      // Item as string (for search functionality)
                      itemAsString: (Order order) => order.tableNumber ?? "",

                      // Comparison function
                      compareFn: (Order? item1, Order? item2) {
                        return item1?.id == item2?.id;
                      },

                      // On changed callback
                      onChanged: (Order? selectedOrder) {
                        if (selectedOrder != null) {
                          setState(() {
                            selectOrder = selectedOrder;
                          });
                          log("selectOrder: ${selectOrder!.tableNumber}");
                        }
                      },

                      // Validator (optional)
                      validator: (Order? value) {
                        if (value == null) {
                          return "Meja harus dipilih";
                        }
                        return null;
                      },
                    );
                  },
                );
              }),
            ],
          ),
          SpaceHeight(24),
          BlocListener<OrderFormBloc, OrderFormState>(
            listener: (context, state) {
              state.maybeWhen(
                orElse: () {},
                successMsg: () {
                  context.pop();
                  context.pushReplacement(
                    SuccessSaveOrderPage(
                      productQuantity: widget.items,
                      orderId: selectOrder?.id ?? "",
                    ),
                  );
                },
                error: (message) => AppFlushbar.showError(context, message),
              );
            },
            child: BlocBuilder<OrderFormBloc, OrderFormState>(
              builder: (context, state) {
                return state.maybeWhen(
                  orElse: () => Button.filled(
                    onPressed: () {
                      context
                          .read<OrderFormBloc>()
                          .add(OrderFormEvent.addToOrder(
                            items: widget.items,
                            orderId: selectOrder?.id ?? "",
                          ));
                    },
                    label: "Simpan",
                  ),
                  loading: () => Center(
                    child: const CircularProgressIndicator(),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}