// Author: fruit.com.cn

part of '../discover_view.dart';

class _HomeDramaGrid extends StatelessWidget {
  const _HomeDramaGrid({
    required this.l10n,
    required this.categories,
    required this.dramas,
    required this.searching,
    required this.onOpen,
  });

  final AppLocalizations l10n;
  final CategoryController categories;
  final List<Drama> dramas;
  final bool searching;
  final ValueChanged<Drama> onOpen;

  @override
  Widget build(BuildContext context) {
    if (categories.loading && categories.feed.sections.isEmpty) {
      return const SliverFillRemaining(
        hasScrollBody: false,
        child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
      );
    }
    if (categories.error != null) {
      return _fill(
        EmptyState(
          key: const Key('home-categories-error'),
          icon: Icons.cloud_off_rounded,
          title: l10n.categoriesError,
          subtitle: l10n.emptyHint,
          actionLabel: l10n.retry,
          onAction: categories.load,
        ),
      );
    }
    if (dramas.isEmpty) {
      return _fill(
        EmptyState(
          key: const Key('home-all-dramas-empty'),
          icon: searching
              ? Icons.search_off_rounded
              : Icons.movie_filter_outlined,
          title: searching
              ? l10n.noSearchResults
              : categories.selectedSectionMissing
              ? l10n.noCategoryDramas
              : l10n.noSearchResults,
          subtitle: l10n.emptyHint,
        ),
      );
    }
    return SliverMainAxisGroup(
      slivers: [
        _dramaGrid(dramas),
        const SliverToBoxAdapter(child: SizedBox(height: 24)),
      ],
    );
  }

  Widget _dramaGrid(List<Drama> items) => SliverPadding(
    key: const Key('home-all-dramas-section'),
    padding: const EdgeInsets.symmetric(horizontal: 14),
    sliver: SliverGrid(
      key: const Key('home-all-dramas-grid'),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        mainAxisExtent: 164,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) => _HomeDramaCard(
          l10n: l10n,
          drama: items[index],
          onTap: () => onOpen(items[index]),
        ),
        childCount: items.length,
      ),
    ),
  );

  Widget _fill(Widget child) =>
      SliverFillRemaining(hasScrollBody: false, child: child);
}

class _HomeDramaCard extends StatelessWidget {
  const _HomeDramaCard({
    required this.l10n,
    required this.drama,
    required this.onTap,
  });

  final AppLocalizations l10n;
  final Drama drama;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final genre = drama.genre.isEmpty ? drama.category : drama.genre;
    final free =
        drama.freeEpisodes > 0 ||
        drama.episodes.any((episode) => episode.isFree);
    return InkWell(
      key: Key('home-drama-card-${drama.id}'),
      onTap: onTap,
      borderRadius: BorderRadius.circular(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            key: Key('home-drama-cover-${drama.id}'),
            height: 120,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Stack(
                fit: StackFit.expand,
                children: [
                  RemoteImage(
                    drama.posterUrl,
                    fit: BoxFit.cover,
                    showFallbackIcon: true,
                  ),
                  const DecoratedBox(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Color(0x0D000000), Color(0xCC000000)],
                        stops: [0.45, 1],
                      ),
                    ),
                  ),
                  if (free)
                    Positioned(
                      top: 6,
                      left: 6,
                      child: Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 6,
                          vertical: 2,
                        ),
                        decoration: BoxDecoration(
                          color: AppColors.blue,
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Text(
                          l10n.free,
                          style: const TextStyle(
                            color: AppColors.onPrimary,
                            fontSize: 8,
                            fontWeight: FontWeight.w800,
                          ),
                        ),
                      ),
                    ),
                  Positioned(
                    left: 6,
                    right: 6,
                    bottom: 6,
                    child: Text(
                      drama.title,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                        color: AppColors.onPrimary,
                        fontSize: 9,
                        fontWeight: FontWeight.w800,
                        shadows: [Shadow(blurRadius: 6, color: Colors.black)],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 5),
          Text(
            drama.title,
            key: Key('home-drama-title-${drama.id}'),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              color: AppColors.onSurface,
              fontSize: 11,
              fontWeight: FontWeight.w800,
            ),
          ),
          const SizedBox(height: 2),
          Text(
            genre.isEmpty ? l10n.videoPending : genre,
            key: Key('home-drama-genre-${drama.id}'),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
          ),
        ],
      ),
    );
  }
}