import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart' hide Table;
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../../application/order/order_form/order_form_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/table/table.dart';
import '../../button/button.dart';
import '../../spaces/space.dart';
import '../dialog.dart';

class OrderPayLaterDialog extends StatelessWidget {
  final List<Table> tables;
  const OrderPayLaterDialog({super.key, required this.tables});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CheckoutFormBloc, CheckoutFormState>(
      builder: (context, state) {
        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: [
              Text(
                'Pilih Meja',
                style: AppStyle.md.copyWith(
                  color: AppColor.black,
                  fontWeight: FontWeight.w600,
                ),
              ),
              const SpaceHeight(6.0),
              Builder(
                builder: (context) {
                  if (tables.isEmpty) {
                    return Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: AppColor.warning.withOpacity(0.15),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(color: AppColor.warning, width: 1),
                      ),
                      child: Text(
                        'Tidak ada meja yang tersedia. Silakan pilih opsi lain.',
                        style: AppStyle.md.copyWith(color: AppColor.warning),
                      ),
                    );
                  }

                  return DropdownSearch<Table>(
                    items: tables,
                    selectedItem: state.table,

                    // 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, category, 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(
                                  category.tableName,
                                  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: (Table table) => table.tableName,

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

                    // On changed callback
                    onChanged: (Table? selectedTable) {
                      context.read<CheckoutFormBloc>().add(
                        CheckoutFormEvent.updateTable(selectedTable),
                      );
                    },

                    // Validator (optional)
                    validator: (Table? value) {
                      if (value == null) {
                        return "Meja harus dipilih";
                      }
                      return null;
                    },
                  );
                },
              ),
              const SpaceHeight(24),
              BlocBuilder<OrderFormBloc, OrderFormState>(
                builder: (context, orderState) {
                  return AppElevatedButton.filled(
                    label: 'Simpan',
                    isLoading: orderState.isCreating,
                    onPressed: () {
                      context.read<OrderFormBloc>().add(
                        OrderFormEvent.createOrder(
                          items: state.items,
                          orderType: state.orderType,
                          table: state.table,
                        ),
                      );
                    },
                  );
                },
              ),
            ],
          ),
        );
      },
    );
  }
}
