import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:on_field_work/helpers/widgets/my_text.dart';
import 'package:on_field_work/model/tenant/tenant_services_model.dart';
import 'package:on_field_work/controller/tenant/service_controller.dart';

class ServiceSelector extends StatelessWidget {
  final ServiceController controller;

  /// Called whenever a new service is selected (including "All Services")
  final Future<void> Function(Service?)? onSelectionChanged;

  /// Optional height for the selector
  final double? height;

  const ServiceSelector({
    super.key,
    required this.controller,
    this.onSelectionChanged,
    this.height,
  });

  Widget _popupSelector({
    required String currentValue,
    required List<String> items,
  }) {
    return PopupMenuButton<String>(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      onSelected: items.isEmpty
          ? null
          : (name) async {
              Service? service = name == "All Services"
                  ? null
                  : controller.services.firstWhere((e) => e.name == name);

              controller.selectService(service);

              if (onSelectionChanged != null) {
                await onSelectionChanged!(service);
              }
            },
      itemBuilder: (context) {
        if (items.isEmpty || items.length == 1 && items[0] == "All Services") {
          return [
            const PopupMenuItem<String>(
              enabled: false,
              child: Center(
                child: Text(
                  "No services found",
                  style: TextStyle(color: Colors.grey),
                ),
              ),
            ),
          ];
        }
        return items
            .map((e) => PopupMenuItem<String>(value: e, child: MyText(e)))
            .toList();
      },
      child: Container(
        height: height,
        padding: const EdgeInsets.symmetric(horizontal: 12),
        decoration: BoxDecoration(
          color: Colors.grey.shade100,
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Text(
                  currentValue.isEmpty ? "No services found" : currentValue,
                  style: const TextStyle(
                    color: Colors.black87,
                    fontSize: 13,
                    height: 1.2,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              const Icon(Icons.arrow_drop_down, color: Colors.grey, size: 18),
            ],
          ),
        ),
      ),
    );
  }

  Widget _skeletonSelector() {
    return Container(
      height: height ?? 40,
      padding: const EdgeInsets.symmetric(horizontal: 12),
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: 100,
            height: 14,
            color: Colors.grey.shade400,
          ),
          Container(
            width: 18,
            height: 18,
            decoration: BoxDecoration(
              color: Colors.grey.shade400,
              shape: BoxShape.circle,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      if (controller.isLoadingServices.value) {
        return _skeletonSelector();
      }

      final serviceNames = controller.services.isEmpty
          ? <String>[]
          : <String>[
              "All Services",
              ...controller.services.map((e) => e.name).toList(),
            ];

      final currentValue =
          controller.services.isEmpty ? "" : controller.currentSelection;

      return _popupSelector(
        currentValue: currentValue,
        items: serviceNames,
      );
    });
  }
}
