import 'package:flutter/material.dart';

class TargetCelenganItem {
  final String emoji;
  final String label;
  const TargetCelenganItem({required this.emoji, required this.label});
}

class TargetCelenganPicker extends StatefulWidget {
  final String? selected;
  final void Function(String label) onSelected;
  final bool hideHeader;

  const TargetCelenganPicker({
    super.key,
    required this.onSelected,
    this.selected,
    this.hideHeader = false,
  });

  static void show(
    BuildContext context, {
    required String? selected,
    required void Function(String label) onSelected,
  }) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.white,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      builder: (_) => TargetCelenganPicker(
        selected: selected,
        onSelected: (label) {
          onSelected(label);
          Navigator.of(context).pop();
        },
      ),
    );
  }

  @override
  State<TargetCelenganPicker> createState() => _TargetCelenganPickerState();
}

class _TargetCelenganPickerState extends State<TargetCelenganPicker> {
  static const List<TargetCelenganItem> _items = [
    TargetCelenganItem(emoji: '📱', label: 'Iphone'),
    TargetCelenganItem(emoji: '👟', label: 'Sepatu'),
    TargetCelenganItem(emoji: '👕', label: 'Baju'),
    TargetCelenganItem(emoji: '🏍️', label: 'Motor'),
    TargetCelenganItem(emoji: '🚗', label: 'Mobil'),
    TargetCelenganItem(emoji: '🏠', label: 'Rumah'),
    TargetCelenganItem(emoji: '✈️', label: 'Liburan'),
    TargetCelenganItem(emoji: '💻', label: 'Laptop'),
    TargetCelenganItem(emoji: '📚', label: 'Pendidikan'),
    TargetCelenganItem(emoji: '💍', label: 'Perhiasan'),
    TargetCelenganItem(emoji: '🎮', label: 'PS 5'),
    TargetCelenganItem(emoji: '🏋️', label: 'Olahraga'),
  ];

  String? _selected;

  @override
  void initState() {
    super.initState();
    _selected = widget.selected;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(16, 12, 16, widget.hideHeader ? 0 : 24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          if (!widget.hideHeader) ...[
            Center(
              child: Container(
                width: 40,
                height: 4,
                margin: const EdgeInsets.only(bottom: 16),
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
            ),
            const Text(
              'Pilih Target Celengan',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Colors.black87,
              ),
            ),
            const SizedBox(height: 4),
            const Text(
              'Pilih tujuan tabunganmu',
              style: TextStyle(fontSize: 13, color: Colors.grey),
            ),
            const SizedBox(height: 16),
          ],
          Wrap(
            spacing: 10,
            runSpacing: 10,
            children: _items.map((item) {
              final isSelected = _selected == item.label;
              return GestureDetector(
                onTap: () => setState(() => _selected = item.label),
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 200),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 14,
                    vertical: 10,
                  ),
                  decoration: BoxDecoration(
                    color: isSelected ? const Color(0xFFD6E8F7) : Colors.white,
                    borderRadius: BorderRadius.circular(30),
                    border: Border.all(
                      color: isSelected
                          ? const Color(0xFF5B9BD5)
                          : Colors.grey.shade300,
                      width: isSelected ? 1.5 : 1,
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(item.emoji, style: const TextStyle(fontSize: 18)),
                      const SizedBox(width: 6),
                      Text(
                        item.label,
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                          color: isSelected
                              ? const Color(0xFF5B9BD5)
                              : Colors.black87,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }).toList(),
          ),
          const SizedBox(height: 20),
          GestureDetector(
            onTap: () {
              if (_selected != null) widget.onSelected(_selected!);
            },
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 14),
              decoration: BoxDecoration(
                color: _selected != null
                    ? const Color(0xFF5B9BD5)
                    : Colors.grey.shade300,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Center(
                child: Text(
                  _selected != null ? 'Pilih $_selected' : 'Pilih Dulu',
                  style: TextStyle(
                    color: _selected != null ? Colors.white : Colors.grey,
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}