import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:poet/poet_screen.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 앱의 시작 화면을 PoetStudyScreen으로 설정
    return MaterialApp(
      home: PoetStudyScreen(),
    );
  }
}

class PoetStudyScreen extends StatefulWidget {
  @override
  _PoetStudyScreenState createState() => _PoetStudyScreenState();
}

class _PoetStudyScreenState extends State<PoetStudyScreen>
    with WidgetsBindingObserver {
  // Variables to control grid spacing
  final double _crossAxisSpacing = 1.0;
  final double _mainAxisSpacing = 1.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _setSystemUIOverlayStyle();
  }

  void _setSystemUIOverlayStyle() {
    if (defaultTargetPlatform == TargetPlatform.android) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    // When the main screen is disposed, restore the system UI
    if (defaultTargetPlatform == TargetPlatform.android) {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    }
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      _setSystemUIOverlayStyle();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Background Image
          Positioned.fill(
            child: Image.asset(
              'assets/images/Main_Back.webp',
              fit: BoxFit.cover,
            ),
          ),

          // Main content
          Transform.translate(
            offset: Offset(0.0, -40.0), // Move up by 40 pixels
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(150.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min, // Use minimum space
                  children: [
                    Center(
                      child: GridView.builder(
                        gridDelegate:
                            SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: _crossAxisSpacing,
                          mainAxisSpacing: _mainAxisSpacing,
                        ),
                        itemCount: 9,
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return _buildGridItem(context, index);
                        },
                      ),
                    ),
                    SizedBox(height: 30), // Added space
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 5),
                        child: Image.asset(
                          'assets/images/title.webp',
                          width: 500, // Adjust as needed
                          height: 100, // Adjust as needed
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildGridItem(BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => PoetScreen(
                    selectedIndex: index,
                  )),
        );
      },
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/images/go_subsets/Button_${(index + 1).toString().padLeft(2, '0')}.webp',
              width: 260,
              height: 260,
              fit: BoxFit.contain,
            ),
          ],
        ),
      ),
    );
  }
}