import 'package:flutter/material.dart';
import 'package:tugas_akhir_supabase/core/theme/app_colors.dart';
import 'package:tugas_akhir_supabase/screens/community/models/group.dart';
import 'package:tugas_akhir_supabase/screens/community/services/group_service.dart';

class GroupSelector extends StatefulWidget {
  final String selectedGroupId;
  final Function(Group) onGroupSelected;

  const GroupSelector({
    super.key,
    required this.selectedGroupId,
    required this.onGroupSelected,
  });

  @override
  _GroupSelectorState createState() => _GroupSelectorState();
}

class _GroupSelectorState extends State<GroupSelector> {
  final _groupService = GroupService();
  List<Group> _groups = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadGroups();
  }

  Future<void> _loadGroups() async {
    setState(() => _isLoading = true);

    try {
      final userGroups = await _groupService.getUserGroups();
      
      // Tambahkan debugging logs
      print('[INFO] Loaded ${userGroups.length} groups for selector');
      userGroups.forEach((group) => print('[DEBUG] Group: ${group.name}, ID: ${group.id}'));
      
      if (mounted) {
        setState(() {
          _groups = userGroups;
          _isLoading = false;
        });
      }
    } catch (e) {
      print('[ERROR] Failed to load groups: $e');
      if (mounted) {
        setState(() => _isLoading = false);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return Container(
        color: Colors.white,
        padding: const EdgeInsets.all(12),
        child: const Center(
          child: CircularProgressIndicator(),
        ),
      );
    }

    if (_groups.isEmpty) {
      return Container(
        color: Colors.white,
        padding: const EdgeInsets.all(12),
        child: const Center(
          child: Text('Tidak ada grup tersedia'),
        ),
      );
    }

    return Container(
      color: Colors.white,
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: ListView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: _groups.length,
        itemBuilder: (context, index) {
          final group = _groups[index];
          final isSelected = group.id == widget.selectedGroupId;

          return ListTile(
            leading: CircleAvatar(
              backgroundColor: isSelected ? AppColors.primary : Colors.grey[200],
              child: Text(
                group.name.substring(0, 1).toUpperCase(),
                style: TextStyle(
                  color: isSelected ? Colors.white : Colors.grey[800],
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            title: Text(group.name),
            subtitle: group.isDefault
                ? const Text('Grup Default', style: TextStyle(fontSize: 12))
                : null,
            trailing: isSelected
                ? const Icon(Icons.check_circle, color: AppColors.primary)
                : null,
            onTap: () => widget.onGroupSelected(group),
            selected: isSelected,
            selectedTileColor: Colors.green[50],
          );
        },
      ),
    );
  }
}