import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:tm_app/core/utils/size_config.dart';

// Note: Ensure your size_config and theme imports are present
// import 'package:tm_app/core/utils/size_config.dart';
// import 'package:tm_app/core/theme/colors.dart';

class EditKeyWordBottomSheet extends StatefulWidget {
  const EditKeyWordBottomSheet({super.key});

  @override
  State<EditKeyWordBottomSheet> createState() => _EditKeyWordBottomSheetState();
}

class _EditKeyWordBottomSheetState extends State<EditKeyWordBottomSheet> {
  final List<String> _keywords = [
    '1234',
    'Lorem ipsum',
    'sample',
    'Unknown',
    'Lorem ipsum 02',
  ];

  // Location selection state
  bool _isDropdownOpen = false;
  final List<Map<String, String>> _selectedCountries = [
    {'code': 'NO', 'name': 'Norway', 'flag': '🇳🇴'},
    {'code': 'SE', 'name': 'Sweden', 'flag': '🇸🇪'},
  ];

  final List<Map<String, String>> _allCountries = [
    {'code': 'AU', 'name': 'Australia', 'flag': '🇦🇺'},
    {'code': 'AT', 'name': 'Austria', 'flag': '🇦🇹'},
    {'code': 'AZ', 'name': 'Azerbaijan', 'flag': '🇦🇿'},
    {'code': 'BS', 'name': 'Bahamas', 'flag': '🇧🇸'},
    {'code': 'BH', 'name': 'Bahrain', 'flag': '🇧🇭'},
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(
        left: 24.0.w(),
        right: 24.0.w(),
        top: 24.0.h(),
        bottom: MediaQuery.of(context).viewInsets.bottom + 24.0.h(),
      ),
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(32)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // KEY WORD SECTION
          _buildSectionHeader('Key Word'),
          SizedBox(height: 16.0.h()),
          Wrap(
            spacing: 8,
            runSpacing: 12.0.h(),
            children: _keywords.map((e) => _buildKeywordChip(e)).toList(),
          ),

          SizedBox(height: 32.0.h()),
          const Divider(color: Color(0xFFF1F1F1)),
          SizedBox(height: 24.0.h()),

          // LOCATION SECTION
          _buildSectionHeader('Location'),
          SizedBox(height: 16.0.h()),

          Stack(
            clipBehavior: Clip.none,
            children: [
              // 1. Selected Country Chips (Below the input)
              Padding(
                padding: EdgeInsets.only(top: 64.0.h()),
                child: Wrap(
                  spacing: 12,
                  runSpacing: 8,
                  children:
                      _selectedCountries
                          .map((c) => _buildCountryChip(c))
                          .toList(),
                ),
              ),

              // 2. The Pseudo-TextField
              GestureDetector(
                onTap: () => setState(() => _isDropdownOpen = !_isDropdownOpen),
                child: Container(
                  height: 52.0.h(),
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  decoration: BoxDecoration(
                    border: Border.all(color: const Color(0xFFD1E3FF)),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Location',
                        style: TextStyle(
                          color: Colors.grey.shade400,
                          fontSize: 16.0.sp(),
                        ),
                      ),
                      Icon(
                        _isDropdownOpen
                            ? Icons.keyboard_arrow_up
                            : Icons.keyboard_arrow_down,
                        color: Colors.grey,
                      ),
                    ],
                  ),
                ),
              ),

              // 3. Floating Dropdown Menu (Positioned ABOVE the input field)
              if (_isDropdownOpen)
                Positioned(
                  bottom: 60.0.h(), // Sits above the text field
                  left: 0,
                  right: 0,
                  child: Material(
                    elevation: 12,
                    shadowColor: Colors.black26,
                    borderRadius: BorderRadius.circular(12),
                    color: Colors.white,
                    child: Container(
                      constraints: BoxConstraints(maxHeight: 220.0.h()),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        border: Border.all(color: Colors.grey.shade100),
                      ),
                      child: ListView.separated(
                        shrinkWrap: true,
                        padding: EdgeInsets.zero,
                        itemCount: _allCountries.length,
                        separatorBuilder:
                            (context, index) => const Divider(
                              height: 1,
                              color: Color(0xFFF5F5F5),
                            ),
                        itemBuilder: (context, index) {
                          final country = _allCountries[index];
                          return ListTile(
                            contentPadding: const EdgeInsets.symmetric(
                              horizontal: 16,
                            ),
                            leading: Text(
                              country['flag']!,
                              style: const TextStyle(fontSize: 22),
                            ),
                            title: Text(
                              country['name']!,
                              style: TextStyle(
                                fontSize: 15.0.sp(),
                                color: Colors.black87,
                              ),
                            ),
                            onTap: () {
                              setState(() {
                                // Add if not already selected
                                if (!_selectedCountries.any(
                                  (c) => c['code'] == country['code'],
                                )) {
                                  _selectedCountries.add(country);
                                }
                                _isDropdownOpen = false;
                              });
                            },
                          );
                        },
                      ),
                    ),
                  ),
                ),
            ],
          ),

          SizedBox(height: 40.0.h()),

          // SAVE BUTTON
          SizedBox(
            width: double.infinity,
            height: 54.0.h(),
            child: ElevatedButton(
              onPressed: () => context.pop(),
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(
                  0xFFE8F1FF,
                ), // Matches "Save" blue background
                foregroundColor: const Color(
                  0xFF1A73E8,
                ), // Matches "Save" text color
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(28),
                ),
              ),
              child: Text(
                'Save',
                style: TextStyle(
                  fontSize: 16.0.sp(),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(String title) {
    return Row(
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 18.0.sp(),
            fontWeight: FontWeight.w500,
            color: const Color(0xFF616161),
          ),
        ),
        SizedBox(width: 8.0.w()),
        Icon(
          Icons.edit_outlined,
          size: 20.0.w(),
          color: const Color(0xFF757575),
        ),
      ],
    );
  }

  Widget _buildKeywordChip(String label) {
    // Coloring logic to match screenshot
    Color bg = const Color(0xFFF5F5F5);
    Color text = const Color(0xFF424242);

    if (label == '1234') bg = const Color(0xFFE8F5E9);
    if (label == 'Lorem ipsum') bg = const Color(0xFFFFF3E0);
    if (label == 'Unknown') bg = const Color(0xFFFFEBEE);
    if (label == 'Lorem ipsum 02' || label == 'sample')
      bg = const Color(0xFFECEFF1);

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
      decoration: BoxDecoration(
        color: bg,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        label,
        style: TextStyle(
          color: text,
          fontSize: 14.0.sp(),
          fontWeight: FontWeight.w400,
        ),
      ),
    );
  }

  Widget _buildCountryChip(Map<String, String> country) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      decoration: BoxDecoration(
        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            country['code']!,
            style: TextStyle(
              fontSize: 14.0.sp(),
              fontWeight: FontWeight.w600,
              color: const Color(0xFF424242),
            ),
          ),
          SizedBox(width: 6.0.w()),
          Text(country['flag']!, style: const TextStyle(fontSize: 18)),
          SizedBox(width: 6.0.w()),
          GestureDetector(
            onTap: () => setState(() => _selectedCountries.remove(country)),
            child: const Icon(Icons.cancel, size: 18, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}