import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_undraw/flutter_undraw.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:skeletonizer/skeletonizer.dart';
import 'package:spotube/collections/fake.dart';
import 'package:spotube/components/fallbacks/error_box.dart';
import 'package:spotube/components/waypoint.dart';
import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/modules/artist/artist_card.dart';
import 'package:spotube/modules/search/loading.dart';
import 'package:spotube/pages/search/search.dart';
import 'package:spotube/provider/metadata_plugin/search/artists.dart';

class SearchPageArtistsTab extends HookConsumerWidget {
  const SearchPageArtistsTab({super.key});

  @override
  Widget build(BuildContext context, ref) {
    final controller = useScrollController();

    final searchTerm = ref.watch(searchTermStateProvider);
    final searchArtistsSnapshot =
        ref.watch(metadataPluginSearchArtistsProvider(searchTerm));
    final searchArtistsNotifier =
        ref.read(metadataPluginSearchArtistsProvider(searchTerm).notifier);
    final searchArtists = searchArtistsSnapshot.asData?.value.items ?? [];

    if (searchArtistsSnapshot.hasError) {
      return ErrorBox(
        error: searchArtistsSnapshot.error!,
        onRetry: () {
          ref.invalidate(metadataPluginSearchArtistsProvider(searchTerm));
        },
      );
    }

    return SearchPlaceholder(
      snapshot: searchArtistsSnapshot,
      child: AnimatedSwitcher(
        duration: const Duration(milliseconds: 300),
        child: LayoutBuilder(builder: (context, constrains) {
          if (searchArtistsSnapshot.hasValue && searchArtists.isEmpty) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                spacing: 10,
                children: [
                  Undraw(
                    height: 200 * context.theme.scaling,
                    illustration: UndrawIllustration.taken,
                    color: Theme.of(context).colorScheme.primary,
                  ),
                  Text(
                    context.l10n.nothing_found,
                    textAlign: TextAlign.center,
                  ).muted().small()
                ],
              ),
            );
          }

          return GridView.builder(
            padding: const EdgeInsets.all(16),
            itemCount: searchArtists.length + 1,
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              mainAxisExtent: constrains.smAndDown ? 225 : 250,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
            ),
            itemBuilder: (context, index) {
              if (searchArtists.isNotEmpty && index == searchArtists.length) {
                if (searchArtistsSnapshot.asData?.value.hasMore != true) {
                  return const SizedBox.shrink();
                }

                return Waypoint(
                  controller: controller,
                  isGrid: true,
                  onTouchEdge: searchArtistsNotifier.fetchMore,
                  child: Skeletonizer(
                    enabled: true,
                    child: ArtistCard(FakeData.artist),
                  ),
                );
              }

              return Skeletonizer(
                enabled: searchArtistsSnapshot.isLoading,
                child: ArtistCard(
                  searchArtists.elementAtOrNull(index) ?? FakeData.artist,
                ),
              );
            },
          );
        }),
      ),
    );
  }
}