import 'package:flutter/material.dart';

import 'package:f0ckapp/services/api.dart';
import 'package:f0ckapp/models/mediaitem.dart';
import 'package:f0ckapp/screens/detail.dart';

class MediaGrid extends StatefulWidget {
  const MediaGrid({super.key});

  @override
  State createState() => _MediaGridState();
}

class _MediaGridState extends State<MediaGrid> {
  final ScrollController _scrollController = ScrollController();
  List<MediaItem> mediaItems = [];
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    _loadMedia();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 100) {
        _loadMedia();
      }
    });
  }

  Future<void> _loadMedia() async {
    if (isLoading) return;
    setState(() => isLoading = true);

    try {
      List<MediaItem> newMedia = await fetchMedia(older: mediaItems.isNotEmpty ? mediaItems.last.id.toString() : null);
      setState(() {
        mediaItems.addAll(newMedia);
        isLoading = false;
      });
    } catch (e) {
      print('Fehler: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      controller: _scrollController,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
      itemCount: mediaItems.length + (isLoading ? 1 : 0),
      itemBuilder: (context, index) {
        if (index >= mediaItems.length) {
          return const Center(child: CircularProgressIndicator());
        }
        final item = mediaItems[index];

        return GestureDetector(
          onTap: () async {
            try {
              final details = await fetchMediaDetail(item.id);
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => DetailView(details: details)),
              );
            } catch (e) {
              print('Fehler beim Laden der Details: $e');
            }
          },
          child: Image.network(item.thumbnailUrl, fit: BoxFit.cover),
        );
      },
    );
  }
}