import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter/material.dart';

/// 全屏图片查看器：黑底 modal + 多图左右翻页（PageView）+ 双指缩放/拖拽（InteractiveViewer）。
/// 点击背景或右上角关闭按钮退出。纯 Flutter 内置组件，无需额外依赖。
///
/// 用法：
/// ```dart
/// showFullscreenImages(context, urls, initialIndex: 2);
/// ```
void showFullscreenImages(BuildContext context, List<String> urls,
    {int initialIndex = 0}) {
  if (urls.isEmpty) return;
  Navigator.of(context).push(PageRouteBuilder(
    opaque: false,
    barrierColor: Colors.black87, // ds-ignore: 全屏媒体查看器黑底白控固定色
    pageBuilder: (_, __, ___) =>
        FullscreenImageViewer(urls: urls, initialIndex: initialIndex),
  ));
}

class FullscreenImageViewer extends StatefulWidget {
  final List<String> urls;
  final int initialIndex;
  const FullscreenImageViewer(
      {super.key, required this.urls, this.initialIndex = 0});

  @override
  State<FullscreenImageViewer> createState() => _FullscreenImageViewerState();
}

class _FullscreenImageViewerState extends State<FullscreenImageViewer> {
  late PageController _ctrl;

  @override
  void initState() {
    super.initState();
    _ctrl = PageController(initialPage: widget.initialIndex);
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          children: [
            PageView.builder(
              controller: _ctrl,
              itemCount: widget.urls.length,
              itemBuilder: (_, i) => Center(
                child: InteractiveViewer(
                  child: Image.network(widget.urls[i],
                      fit: BoxFit.contain,
                      errorBuilder: (_, __, ___) => const Icon(
                          LucideIcons.imageOff,
                          size: 64,
                          color: Colors.white54)), // ds-ignore: 全屏媒体查看器黑底白控固定色
                ),
              ),
            ),
            Positioned(
              top: 40,
              right: 16,
              child: GestureDetector(
                onTap: () => Navigator.of(context).pop(),
                child: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                      color: Colors.black54, // ds-ignore: 全屏媒体查看器黑底白控固定色
                      borderRadius: BorderRadius.circular(20)),
                  child: const Icon(LucideIcons.x,
                      color: Colors.white, // ds-ignore: 全屏媒体查看器黑底白控固定色
                      size: 20), // ds-ignore: 全屏媒体查看器黑底白控固定色
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}