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/table_model.dart';
import 'package:enaklo_pos/presentation/home/bloc/get_table_status/get_table_status_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/transfer_table/transfer_table_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class TransferTableDialog extends StatefulWidget {
  final TableModel fromTable;
  const TransferTableDialog({
    super.key,
    required this.fromTable,
  });

  @override
  State<TransferTableDialog> createState() => _TransferTableDialogState();
}

class _TransferTableDialogState extends State<TransferTableDialog> {
  TableModel? selectTable;

  @override
  void initState() {
    super.initState();
    context
        .read<GetTableStatusBloc>()
        .add(GetTableStatusEvent.getTablesStatus('available'));
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<TransferTableBloc, TransferTableState>(
      listener: (context, state) {
        state.maybeWhen(
          orElse: () {},
          success: () {
            context.pop();
          },
        );
      },
      child: CustomModalDialog(
        title: 'Transfer Meja',
        subtitle: 'Pilih meja yang tersedia',
        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',
                  style: TextStyle(
                    color: AppColors.black,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SpaceHeight(6.0),
                BlocBuilder<GetTableStatusBloc, GetTableStatusState>(
                    builder: (context, state) {
                  return state.maybeWhen(
                    orElse: () =>
                        Center(child: const CircularProgressIndicator()),
                    loading: () =>
                        Center(child: const CircularProgressIndicator()),
                    success: (tables) {
                      final availableTables = tables;

                      if (selectTable == null && availableTables.isNotEmpty) {
                        selectTable = availableTables.first;
                      }

                      if (availableTables.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<TableModel>(
                        items: tables,
                        selectedItem: selectTable,

                        // 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: (TableModel table) =>
                            table.tableName ?? "",

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

                        // On changed callback
                        onChanged: (TableModel? selectedTable) {
                          if (selectedTable != null) {
                            setState(() {
                              selectTable = selectedTable;
                            });
                            log("selectTable: ${selectTable!.tableName}");
                          }
                        },

                        // Validator (optional)
                        validator: (TableModel? value) {
                          if (value == null) {
                            return "Meja harus dipilih";
                          }
                          return null;
                        },
                      );
                    },
                  );
                }),
              ],
            ),
            SpaceHeight(24),
            BlocBuilder<TransferTableBloc, TransferTableState>(
              builder: (context, state) {
                return state.maybeWhen(
                  orElse: () => Button.filled(
                    onPressed: () {
                      if (selectTable == null) {
                        AppFlushbar.showError(
                            context, 'Silahkan Pilih Meja Tujuan');
                        return;
                      }

                      context.read<TransferTableBloc>().add(
                            TransferTableEvent.transferTable(
                              fromTableId: widget.fromTable.id ?? "",
                              toTableId: selectTable!.id ?? "",
                            ),
                          );
                    },
                    label: "Transfer",
                  ),
                  loading: () => Center(
                    child: const CircularProgressIndicator(),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}