import 'package:flutter/material.dart';
import 'main_wrapper.dart';
import '../widgets.dart';
import '../game/config.dart';

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

  @override
  State<StoryScreen> createState() => _StoryScreenState();
}

class _StoryScreenState extends State<StoryScreen> {
  final PageController _pageController = PageController();
  int _currentPage = 0;
  final int _totalPages = 3;

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

  void _onSkip() {
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (context) => const MainWrapper()),
      (route) => false,
    );
  }

  void _onNext() {
    if (_currentPage < _totalPages - 1) {
      _pageController.nextPage(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    } else {
      _onSkip(); // Start Game
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black, // Dark background for story
      body: Center(
        child: ResponsiveContainer(
          child: SafeArea(
            child: Stack(
              children: [
                // 1. PageView for Story Content
                PageView(
                  controller: _pageController,
                  physics:
                      const NeverScrollableScrollPhysics(), // Disable swipe
                  onPageChanged: (index) {
                    setState(() {
                      _currentPage = index;
                    });
                  },
                  children: [
                    _buildStoryPage(1),
                    _buildStoryPage(2),
                    _buildStoryPage(3),
                  ],
                ),

                // 2. Skip Button (Top Right)
                Positioned(
                  top: 16,
                  right: 16,
                  child: TextButton(
                    onPressed: _onSkip,
                    child: const Text(
                      "SKIP",
                      style: TextStyle(
                        color: ThemeConfig.textColorGrey, // Reverted to Grey
                        fontSize:
                            ThemeConfig.fontSizeMedium, // Reverted to Medium
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),

                // 3. Next/Start Button (Bottom Center or Right)
                Positioned(
                  bottom: 32,
                  left: 16,
                  right: 16,
                  child: Center(
                    child: SizedBox(
                      width: 200,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          backgroundColor: ThemeConfig.btnActionActive,
                          padding: const EdgeInsets.symmetric(vertical: 16),
                        ),
                        onPressed: _onNext,
                        child: Text(
                          _currentPage == _totalPages - 1
                              ? "START BATTLE"
                              : "NEXT",
                          style: const TextStyle(
                            color: ThemeConfig.textColorWhite,
                            fontSize: ThemeConfig.fontSizeHeader,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildStoryPage(int pageIndex) {
    return Container(
      color: Colors.black,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Placeholder for Image
            Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                color: Colors.grey[800],
                border: Border.all(color: ThemeConfig.textColorGrey),
              ),
              child: Center(
                child: Icon(Icons.image, size: 64, color: Colors.grey[600]),
              ),
            ),
            const SizedBox(height: 32),
            Text(
              "Story Image $pageIndex",
              style: const TextStyle(
                color: ThemeConfig.textColorWhite,
                fontSize: ThemeConfig.fontSizeHeader,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0),
              child: Text(
                "This is the placeholder text for the story part $pageIndex. Describe the lore or setting here.",
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: ThemeConfig.textColorGrey,
                  fontSize: ThemeConfig.fontSizeMedium,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}