import 'package:flutter/material.dart';
import 'package:f0ckapp/models/mediaitem.dart';
import 'package:f0ckapp/services/api.dart';
import 'package:f0ckapp/widgets/video_widget.dart';
import 'package:f0ckapp/utils/SmartRefreshIndicator.dart';

class DetailView extends StatefulWidget {
  final int initialItemId;
  final List<MediaItem> mediaItems;
  final String type;
  final int mode;
  final bool random;

  const DetailView({
    super.key,
    required this.initialItemId,
    required this.mediaItems,
    required this.type,
    required this.mode,
    required this.random,
  });

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

class _DetailViewState extends State<DetailView> {
  late PageController _pageController;
  late List<MediaItem> mediaItems;
  int currentItemId = 0;
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    mediaItems = widget.mediaItems;
    final initialIndex = mediaItems.indexWhere(
      (item) => item.id == widget.initialItemId,
    );
    _pageController = PageController(initialPage: initialIndex);
    currentItemId = mediaItems[initialIndex].id;

    _pageController.addListener(_onPageScroll);
  }

  void _onPageScroll() {
    final newIndex = _pageController.page?.round();
    if (newIndex != null && newIndex < mediaItems.length) {
      setState(() => currentItemId = mediaItems[newIndex].id);
    }

    if (_pageController.position.pixels >=
        _pageController.position.maxScrollExtent - 100) {
      _loadMoreMedia();
    }
  }

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

    try {
      final newMedia = await fetchMedia(
        older: mediaItems.last.id.toString(),
        type: widget.type,
        mode: widget.mode,
        random: widget.random,
      );
      if (mounted && newMedia.isNotEmpty) {
        setState(() => mediaItems.addAll(newMedia));
      }
    } catch (e) {
      _showError("Fehler beim Laden weiterer Medien: $e");
    } finally {
      setState(() => isLoading = false);
    }
  }

  Future<void> _refreshMediaItem() async {
    try {
      final updatedItem = await fetchMediaDetail(currentItemId);
      if (mounted) {
        final index = mediaItems.indexWhere((item) => item.id == currentItemId);
        if (index != -1) {
          setState(() => mediaItems[index] = updatedItem);
        }
      }
    } catch (e) {
      _showError("Fehler beim Aktualisieren des Items: $e");
    }
  }

  void _showError(String message) {
    if (mounted) {
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(SnackBar(content: Text(message)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF171717),
      appBar: AppBar(
        backgroundColor: const Color(0xFF2B2B2B),
        foregroundColor: Colors.white,
        title: Text('f0ck #$currentItemId (${widget.type})'),
        centerTitle: true,
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: mediaItems.length,
        itemBuilder: (context, index) {
          final MediaItem item = mediaItems[index];
          return Scaffold(
            body: SafeArea(
              child: SmartRefreshIndicator(
                onRefresh: _refreshMediaItem,
                child: _buildMediaItem(item)
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildMediaItem(MediaItem item) {
    return SingleChildScrollView(
      child: Column(
        children: [
          if (item.mime.startsWith('image'))
            Image.network(
              item.mediaUrl,
              fit: BoxFit.contain,
            )
          else
            VideoWidget(details: item),
          const SizedBox(height: 20),
          Text(
            item.mime,
            style: const TextStyle(color: Colors.white, fontSize: 18),
          ),
          const SizedBox(height: 10),
          Wrap(
            alignment: WrapAlignment.center,
            spacing: 5.0,
            children: item.tags.map((tag) {
              return Chip(
                label: Text(tag.tag),
                backgroundColor: {
                  1: Colors.green,
                  2: Colors.red
                }[tag.id] ?? const Color(0xFF090909),
                labelStyle: const TextStyle(color: Colors.white),
              );
            }).toList(),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}
