import 'package:flutter/material.dart';
import 'package:permainan_kata_anak_sd/utils/audio_manager.dart';
import 'package:permainan_kata_anak_sd/auth/auth.dart';


class ForgotPassword extends StatefulWidget {
  @override
  State<ForgotPassword> createState() => _ForgotPassword();
}

class _ForgotPassword extends State<ForgotPassword> {
  final _auth = AuthService();
  final _email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/background_loginregister.png'),
            fit: BoxFit.cover, // Menutupi seluruh layar
          ),
        ),
        padding: const EdgeInsets.all(40),
        child: Stack(
          children: [
            // Konten Utama
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    width: 220, // Atur lebar container
                    height: 150, // Atur tinggi container
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/popup.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 30,
                        vertical:
                            25), // Sesuaikan padding untuk mengatur posisi teks
                    child: Center(
                      // Menambahkan Center widget
                      child: Text(
                        "We have sent an email for verifivcation, if you haven't received an email, please tap the button",
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                            color: Color.fromARGB(255, 65, 44, 23),
                            fontSize: 9,
                            fontFamily:
                                'Bestime' // Mengecilkan ukuran font agar lebih sesuai
                            ),
                      ),
                    ),
                  ),
                  const SizedBox(height: 20),
                  
                  Stack(
                    alignment: Alignment.centerLeft,
                    children: [
                      Container(
                        width: double.infinity,
                        height: 60,
                        decoration: BoxDecoration(
                          image: const DecorationImage(
                            image: AssetImage(
                                'assets/icons/textfield.png'), // ganti path jika beda
                            fit: BoxFit.fill,
                          ),
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 28),
                        child: TextField(
                          controller: _email,
                          decoration: InputDecoration(
                            hintText: _email.text.isEmpty ? 'Username' : null,
                            border: InputBorder.none,
                          ),
                          style: const TextStyle(
                            fontFamily:
                                'Bestime', // Gunakan nama family yang sama dengan pubspec.yaml
                            fontSize: 18,
                            color: Color.fromARGB(255, 38, 80,
                                4), // Pastikan teks terlihat di atas background
                          ),
                          onChanged: (_) {
                            setState(() {}); // Update UI ketika teks berubah
                          },
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),

                  Container(
                    width: 300,
                    height: 70,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/icons/button.png'),
                        fit: BoxFit.contain,
                      ),
                    ),
                    child: ElevatedButton(
                      onPressed: () async {
                        AudioManager.playClickSound();
                        await _auth.sendPasswordResetLink(_email.text);
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            content: Text(
                                "An email for password reset has been sent to your email")));
                        Navigator.pop(context);
                      },
                      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(
                        'Resend Email',
                        style: TextStyle(
                          color: Color.fromARGB(225, 103, 75, 47),
                          fontSize: 12,
                          fontFamily: 'Bestime',
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}