import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../../../../application/table/table_loader/table_loader_bloc.dart';
import '../../../../../../common/theme/theme.dart';
import '../../../../../../domain/table/table.dart' as t;
import '../../../../../router/app_router.gr.dart';

class TableFloatingBottomNavbar extends StatelessWidget {
  final t.Table? selectedTable;
  const TableFloatingBottomNavbar({super.key, this.selectedTable});

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 20, // Jarak dari bawah
      left: 16, // Jarak dari kiri
      right: 16,
      child: AnimatedSlide(
        duration: const Duration(milliseconds: 400),
        curve: Curves.elasticOut,
        offset: selectedTable == null ? const Offset(0, 2) : Offset.zero,
        child: AnimatedOpacity(
          duration: const Duration(milliseconds: 200),
          opacity: selectedTable == null ? 0.0 : 1.0,
          child: IgnorePointer(
            ignoring: selectedTable == null,
            child: Container(
              margin: const EdgeInsets.all(16),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [AppColor.primary, AppColor.primary.withOpacity(0.6)],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(24),
                boxShadow: [
                  BoxShadow(
                    color: AppColor.primary.withOpacity(0.3),
                    blurRadius: 20,
                    offset: const Offset(0, 8),
                  ),
                ],
              ),
              child: Row(
                children: [
                  const Icon(Icons.table_bar, color: Colors.white, size: 24),
                  const SizedBox(width: 12),
                  const Text(
                    "1 Meja Dipilih",
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 4),
                            child: Container(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 12,
                                vertical: 6,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.white.withOpacity(0.2),
                                borderRadius: BorderRadius.circular(16),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Text(
                                    selectedTable?.tableName ?? "",
                                    style: const TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  const SizedBox(width: 4),
                                  GestureDetector(
                                    onTap: () {
                                      context.read<TableLoaderBloc>().add(
                                        const TableLoaderEvent.setSelectedTable(
                                          null,
                                        ),
                                      );
                                    },
                                    child: const Icon(
                                      Icons.close,
                                      color: Colors.white,
                                      size: 16,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      foregroundColor: AppColor.primary,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                      ),
                      padding: const EdgeInsets.symmetric(
                        horizontal: 24,
                        vertical: 12,
                      ),
                    ),
                    onPressed: () {
                      if (selectedTable?.status.isAvailable ?? true) {
                        context.read<CheckoutFormBloc>().add(
                          CheckoutFormEvent.updateTable(selectedTable),
                        );
                        context.read<TableLoaderBloc>().add(
                          const TableLoaderEvent.setSelectedTable(null),
                        );
                        context.router.navigate(
                          const MainRoute(children: [HomeRoute()]),
                        );
                      } else {}
                    },
                    child: const Text(
                      "Tempatkan Pesanan",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
