import 'package:flutter/material.dart';
import 'game/level1_hindubuddha.dart';
import 'game/level2_hindubuddha.dart';
import 'game/level3_hindubuddha.dart';
import 'utils/level_manager.dart';
import 'utils/audio_manager.dart';

class HinduBuddhaLevelPage extends StatefulWidget {
  const HinduBuddhaLevelPage({Key? key}) : super(key: key);

  @override
  State<HinduBuddhaLevelPage> createState() => _HinduBuddhaLevelPageState();
}

class _HinduBuddhaLevelPageState extends State<HinduBuddhaLevelPage> {
  bool isLevel1Completed = false;
  bool isLevel2Completed = false;
  bool isLevel3Completed = false;

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

  Future<void> _loadLevelStatus() async {
    final level1Status = await LevelManager.isLevelCompleted(1, 'hindu_buddha');
    final level2Status = await LevelManager.isLevelCompleted(2, 'hindu_buddha');
    final level3Status = await LevelManager.isLevelCompleted(3, 'hindu_buddha');

    setState(() {
      isLevel1Completed = level1Status;
      isLevel2Completed = level2Status;
      isLevel3Completed = level3Status;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background.jpg'),
            fit: BoxFit.cover, // Menutupi seluruh layar
          ),
        ),
        child: Stack(
          children: [

            // Tombol Setting dan Petunjuk
            Positioned(
              top: 10,
              right: 10,
              child: IconButton(
                icon: Image.asset(
                  'assets/icons/exit.png',
                  width: 40,
                  height: 40,
                ),
                onPressed: () {
                  AudioManager.playClickSound();
                  Navigator.pop(context);
                },
              ),
            ),

            // Konten Utama
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/title.png'),
                        fit: BoxFit.cover,
                      ),
                      // Opsional: tambahkan border radius jika ingin sudut melengkung
                      borderRadius: BorderRadius.circular(10),
                    ),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 24, vertical: 15),
                    child: Text(
                      'HINDU & BUDDHA',
                      style: TextStyle(
                        fontSize: 25,
                        fontFamily: 'Bestime',
                        color: Color.fromARGB(225, 193,138,83),
                        // Opsional: tambahkan shadow jika teks kurang terlihat
                      ),
                    ),
                  ),
                  const SizedBox(height: 30),

                  // Level 1
                  Container(
                    width: 300,
                    height: 70,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/button.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                    child: ElevatedButton(
                      onPressed: () {
                        AudioManager.playClickSound();
                        Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const Level1HinduBuddha(),
                        ),
                      );
                    },
                    style: ButtonStyle(
                        minimumSize: MaterialStateProperty.all(const Size(0, 0)),
                        backgroundColor: MaterialStateProperty.all(Colors.transparent),
                        elevation: MaterialStateProperty.all(0),
                        shape: MaterialStateProperty.all(RoundedRectangleBorder(
                          borderRadius: BorderRadius.zero,
                        )),
                        overlayColor: MaterialStateProperty.all(Colors.transparent),
                      ),
                      child: const Text(
                        'Level 1',
                        style: TextStyle(
                          color: Color.fromARGB(255, 103, 75, 47),
                          fontFamily: 'Bestime',
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 20),

                  // Level 2
                  Container(
                    width: 300,
                    height: 70,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/button.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                    child: ElevatedButton(
                      onPressed: isLevel1Completed? () {
                        AudioManager.playClickSound();
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => const Level2HinduBuddha(),
                              ),
                            );
                          }
                        : null,
                    style: ButtonStyle(
                        minimumSize: MaterialStateProperty.all(const Size(0, 0)),
                        backgroundColor: MaterialStateProperty.all(Colors.transparent),
                        elevation: MaterialStateProperty.all(0),
                        shape: MaterialStateProperty.all(RoundedRectangleBorder(
                          borderRadius: BorderRadius.zero,
                        )),
                        overlayColor: MaterialStateProperty.all(Colors.transparent),
                      ),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Text(
                            'Level 2',
                            style: TextStyle(
                              color: isLevel1Completed ? Color.fromARGB(255, 103, 75, 47) : Color.fromARGB(255, 103, 75, 47).withOpacity(0.5),
                              fontFamily: 'Bestime',
                              fontSize: 14,
                            ),
                          ),
                          if (!isLevel1Completed)
                            Icon(
                              Icons.lock,
                              color: Colors.white.withOpacity(0.7),
                              size: 24,
                            ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(height: 20),

                  // Level 3
                  Container(
                    width: 300,
                    height: 70,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/button.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                    child: ElevatedButton(
                      onPressed: isLevel2Completed? () {
                        AudioManager.playClickSound();
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => const Level3HinduBuddha(),
                              ),
                            );
                          }
                        : null,
                    style: ButtonStyle(
                        minimumSize: MaterialStateProperty.all(const Size(0, 0)),
                        backgroundColor: MaterialStateProperty.all(Colors.transparent),
                        elevation: MaterialStateProperty.all(0),
                        shape: MaterialStateProperty.all(RoundedRectangleBorder(
                          borderRadius: BorderRadius.zero,
                        )),
                        overlayColor: MaterialStateProperty.all(Colors.transparent),
                      ),
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          Text(
                            'Level 3',
                            style: TextStyle(
                              color: isLevel2Completed ? Color.fromARGB(255, 103, 75, 47) : Color.fromARGB(255, 103, 75, 47).withOpacity(0.5),
                              fontFamily: 'Bestime',
                              fontSize: 14,
                            ),
                          ),
                          if (!isLevel2Completed)
                            Icon(
                              Icons.lock,
                              color: Colors.white.withOpacity(0.7),
                              size: 24,
                            ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}