import 'package:wanisdriver/Provider/language_provider.dart';
import 'package:wanisdriver/models/CityModel.dart';
import 'package:flutter/material.dart';
import '../utils/colors.dart';
import 'FullScreenDropdownModal.dart';
import 'custom_text.dart';

class CustomDropdownWidget<T> extends StatefulWidget {
  final String label;
  final IconData icon;
  final List<T>? items;
  final String? selectedItem;
  final Function(String?) onChanged;
  final String Function(T) getItemLabel;
  final bool? required;
  final String? hintText;

  const CustomDropdownWidget({
    Key? key,
    required this.label,
    required this.icon,
    required this.items,
    this.hintText,
    required this.selectedItem,
    required this.onChanged,
    required this.getItemLabel,
    this.required,
  }) : super(key: key);

  @override
  State<CustomDropdownWidget<T>> createState() => _CustomDropdownWidgetState<T>();
}

class _CustomDropdownWidgetState<T> extends State<CustomDropdownWidget<T>>
    with SingleTickerProviderStateMixin {
  bool _isFocused = false;
  bool _hasContent = false;

  late AnimationController _animationController;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _hasContent = widget.selectedItem != null && widget.selectedItem!.isNotEmpty;

    _animationController = AnimationController(
      duration: const Duration(milliseconds: 200),
      vsync: this,
    );

    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.02).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _openFullScreenModal() {
    setState(() {
      _isFocused = true;
    });
    _animationController.forward();

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => FullScreenDropdownModal<T>(
        label: widget.label,
        items: widget.items ?? [],
        selectedItem: widget.selectedItem,
        getItemLabel: widget.getItemLabel,
        onSelect: (value) {
          setState(() {
            _hasContent = value != null && value.isNotEmpty;
            _isFocused = false;
          });
          widget.onChanged(value);
          _animationController.reverse();
        },
      ),
    ).then((_) {
      setState(() {
        _isFocused = false;
      });
      _animationController.reverse();
    });
  }

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;
    final theme = Theme.of(context);
    final Color activeColor = theme.primaryColor;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
      child: AnimatedBuilder(
        animation: _scaleAnimation,
        builder: (context, child) {
          return Transform.scale(
            scale: _scaleAnimation.value,
            child: GestureDetector(
              onTap: _openFullScreenModal,
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  boxShadow: _isFocused
                      ? [
                    BoxShadow(
                      color: activeColor.withOpacity(0.2),
                      blurRadius: 8,
                      offset: const Offset(0, 4),
                    )
                  ]
                      : [
                    BoxShadow(
                      color: isDarkMode
                          ? Colors.black.withOpacity(0.2)
                          : Colors.black.withOpacity(0.05),
                      blurRadius: 4,
                      offset: const Offset(0, 2),
                    )
                  ],
                ),
                child: Stack(
                  children: [
                    // Main Input Container
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                      decoration: BoxDecoration(
                        color: isDarkMode
                            ? AppColors.blackBackgroundColor
                            : AppColors.darkSecondaryText2,
                        borderRadius: BorderRadius.circular(15),
                        border: Border.all(
                          color: _isFocused
                              ? activeColor
                              : Colors.grey.shade200,
                          width: _isFocused ? 1.5 : 1,
                        ),
                      ),
                      child: Row(
                        children: [
                          Icon(
                            widget.icon,
                            color: _isFocused || _hasContent
                                ? activeColor
                                : isDarkMode
                                ? AppColors.darkSecondaryText
                                : const Color(0xFFA2A2A2),
                            size: 18,
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Text(
                              _hasContent ? widget.selectedItem! : '',
                              style: TextStyle(
                                fontFamily: 'Poppins',
                                fontSize: 16,
                                color: isDarkMode ? AppColors.white : Colors.black87,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                          Icon(
                            Icons.keyboard_arrow_down,
                            color: _isFocused || _hasContent
                                ? activeColor
                                : isDarkMode
                                ? AppColors.darkSecondaryText
                                : const Color(0xFFA2A2A2),
                          ),
                        ],
                      ),
                    ),

                    // Floating Label
                    Positioned(
                      left: 40,
                      top: _isFocused || _hasContent ? 0 : 20,
                      child: AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        padding: const EdgeInsets.symmetric(horizontal: 4),
                        color: Colors.transparent,
                        child: RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: languageSingleton.translate(widget.label),
                                style: TextStyle(
                                  color: _isFocused || _hasContent
                                      ? activeColor
                                      : isDarkMode
                                      ? AppColors.darkSecondaryText
                                      : const Color(0xFFA2A2A2),
                                  fontSize: _isFocused || _hasContent ? 11 : 14,
                                  fontFamily: 'Poppins',
                                  fontWeight: _isFocused || _hasContent
                                      ? FontWeight.w600
                                      : FontWeight.w400,
                                ),
                              ),
                              if (widget.required != null) ...[
                                if (widget.required!)
                                  TextSpan(
                                    text: ' *',
                                    style: TextStyle(
                                      color: Colors.red,
                                      fontSize: _isFocused || _hasContent ? 11 : 14,
                                      fontFamily: 'Poppins',
                                      fontWeight: FontWeight.w600,
                                    ),
                                  )
                                else
                                  TextSpan(
                                    text: languageSingleton.translate(' (Optional)'),
                                    style: TextStyle(
                                      color: isDarkMode
                                          ? AppColors.darkSecondaryText.withOpacity(0.7)
                                          : const Color(0xFF999999),
                                      fontSize: _isFocused || _hasContent ? 10 : 12,
                                      fontFamily: 'Poppins',
                                      fontWeight: FontWeight.w400,
                                      fontStyle: FontStyle.italic,
                                    ),
                                  ),
                              ],
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}