import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:veloe_kemono_party_flutter/app_layout.dart';
import 'package:veloe_kemono_party_flutter/main.dart';
import 'package:veloe_kemono_party_flutter/models/creator.dart';
import 'package:veloe_kemono_party_flutter/pages/widgets/creator_card.dart';

class HomeScreen extends ConsumerStatefulWidget {
  const HomeScreen({super.key});

  @override
  ConsumerState<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends ConsumerState<HomeScreen> {
  final TextEditingController _searchController = TextEditingController();
  final _searchQuery = StateProvider<String>((ref) => '');

  final filteredCreatorsProvider = FutureProvider.autoDispose.family<List<Creator>, String>(
    (ref, query) async {
      final originalList = await ref.watch(creatorsProvider.future);
      return originalList.where(
        (creator) => creator.name.toLowerCase().contains(query.toLowerCase())
      ).toList();
    },
  );

  @override
  void initState() {
    super.initState();
    
    ref.listenManual(sourceChangeProvider, (_, __) {
      ref.invalidate(creatorsProvider);
      ref.invalidate(_searchQuery);
      _searchController.clear();
    });
  }

   @override
  Widget build(BuildContext context) {
    
    ref.watch(sourceChangeProvider);
    
    
    final filteredCreators = ref.watch(filteredCreatorsProvider(ref.watch(_searchQuery)));
    
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: _buildSearchField(ref),
          leading: Builder(
            builder: (context) => IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () => AppLayout.openDrawer(context),
            ),
          ),
          actions: [
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () => ref.invalidate(creatorsProvider),
            ),
          ],
        ),
        body: _buildCreatorsList(filteredCreators),
      ),
    );
  }

  Widget _buildSearchField(WidgetRef ref) {
    return TextField(
      controller: _searchController,
      decoration: InputDecoration(
        hintText: 'Search creators...',
        border: InputBorder.none,
        suffixIcon: IconButton(
          icon: const Icon(Icons.clear),
          onPressed: () {
            _searchController.clear();
            ref.read(_searchQuery.notifier).state = '';
          },
        ),
      ),
      onChanged: (value) => ref.read(_searchQuery.notifier).state = value,
    );
  }

  Widget _buildCreatorsList(AsyncValue<List<Creator>> creatorsAsync) {
    return RefreshIndicator(
      onRefresh: () => ref.refresh(filteredCreatorsProvider(ref.read(_searchQuery)).future),
      child: creatorsAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (error, _) => Center(child: Text(error.toString())),
        data: (creators) => creators.isEmpty
            ? const Center(child: Text('No matching creators found'))
            : ListView.separated(
                padding: const EdgeInsets.all(16),
                itemCount: creators.length,
                separatorBuilder: (_, __) => const SizedBox(height: 8),
                itemBuilder: (context, index) => CreatorCard(creator: creators[index]),
              ),
      ),
    );
  }
  /*
  Widget _buildGlobalPostsGrid() {
    final postsAsync = ref.watch(postsProvider(('82522', 'patreon','')));

    return postsAsync.when(
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, _) => Center(child: Text(error.toString())),
      data: (posts) => CustomScrollView(
        slivers: [
          SliverAppBar(),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => PostContainer(post: posts[index]),
              childCount: posts.length,
            ),
          ),
        ],
      ),
    );
  }
  */
}