import 'dart:async';
import 'package:flutter/material.dart';
import 'package:maibu_satabot_v2/features/web_view/web_view_page.dart';

class BannerItem {
  final String image;
  final String title;
  final String url;

  BannerItem({required this.image, required this.title, required this.url});
}

class BannerCarousel extends StatefulWidget {
  final List<BannerItem> items;

  const BannerCarousel({Key? key, required this.items}) : super(key: key);

  @override
  State<BannerCarousel> createState() => _BannerCarouselState();
}

class _BannerCarouselState extends State<BannerCarousel> {
  final PageController _controller = PageController();
  int _currentIndex = 0;
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    _startAutoPlay();
  }

  void _startAutoPlay() {
    _timer = Timer.periodic(Duration(seconds: 4), (timer) {
      if (_controller.hasClients) {
        _currentIndex++;
        if (_currentIndex >= widget.items.length) {
          _currentIndex = 0;
        }

        _controller.animateToPage(_currentIndex, duration: Duration(milliseconds: 300), curve: Curves.ease);
      }
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 160,
      child: Stack(
        children: [
          PageView.builder(
            controller: _controller,
            itemCount: widget.items.length,
            onPageChanged: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            itemBuilder: (context, index) {
              final item = widget.items[index];

              return GestureDetector(
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (_) => WebViewPage(url: item.url)));
                },
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 12),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    image: DecorationImage(image: AssetImage(item.image), fit: BoxFit.cover),
                  ),
                  child: Stack(
                    children: [
                      Positioned(
                        left: 12,
                        bottom: 12,
                        child: Text(item.title, style: TextStyle(color: Colors.white, fontSize: 16)),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),

          /// 指示器
          Positioned(
            bottom: 8,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(widget.items.length, (index) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  width: _currentIndex == index ? 10 : 6,
                  height: 6,
                  decoration: BoxDecoration(color: _currentIndex == index ? Colors.white : Colors.white54, borderRadius: BorderRadius.circular(3)),
                );
              }),
            ),
          ),
          Positioned(
            top: 12,
            right: 24,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              decoration: BoxDecoration(color: Colors.black.withOpacity(0.5), borderRadius: BorderRadius.circular(4)),
              child: Text('了解我们', style: TextStyle(color: Colors.white, fontSize: 14)),
            ),
          ),
        ],
      ),
    );
  }
}