import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:qyuota/config/colors.dart';
import 'package:qyuota/config/images.dart';
import 'package:qyuota/config/text_style.dart';
import 'package:qyuota/view/home/home_view.dart';
import 'package:qyuota/widget/custom_button.dart';
import 'package:qyuota/services/auth_service.dart';

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

  @override
  State<WelcomeScreen> createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  String? selectedBranch; // Untuk menyimpan nilai branch yang dipilih
  List<String> branches = ["Jakarta", "Kupang", "Jember"];
  bool isPasswordVisible = false; // Untuk mengatur visibilitas password
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _authService = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ConstColors.primaryColor,
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  width: Get.width,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Color(0xFF3d4ff4), Color(0xFF6A82FB)],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 30),
                    child: Image.asset(
                      DefaultImages.welcome,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  width: Get.width,
                  decoration: const BoxDecoration(
                    color: ConstColors.whiteColor,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(25),
                      topRight: Radius.circular(25),
                    ),
                    // Menghilangkan box shadow berwarna biru
                  ),
                  child: ListView(
                    padding: EdgeInsets.zero,
                    physics: const ClampingScrollPhysics(),
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 20, right: 20, top: 30, bottom: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Politeknik Negeri Jember!",
                              style: pSemiBold18.copyWith(
                                fontSize: 34,
                                height: 1.4,
                                color: Colors.black87,
                              ),
                            ),
                            const SizedBox(height: 20),
                            Container(
                              padding: const EdgeInsets.all(20),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(15),
                                boxShadow: const [
                                  BoxShadow(
                                    color: Colors.black12,
                                    blurRadius: 25,
                                    offset: Offset(0, 15),
                                  ),
                                ],
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  // Label Username
                                  const Text(
                                    "Username",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black54,
                                    ),
                                  ),
                                  const SizedBox(height: 10),
                                  // Input Username
                                  Container(
                                    padding: const EdgeInsets.symmetric(horizontal: 15),
                                    decoration: BoxDecoration(
                                      color: Colors.grey.shade100,
                                      borderRadius: BorderRadius.circular(10),
                                    ),
                                    child: Row(
                                      children: [
                                        Icon(Icons.person_outline, color: Colors.grey),
                                        const SizedBox(width: 10),
                                        Expanded(
                                          child: TextField(
                                            controller: _emailController,
                                            decoration: const InputDecoration(
                                              hintText: "Enter Email",
                                              border: InputBorder.none,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  // Label Password
                                  const Text(
                                    "Password",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black54,
                                    ),
                                  ),
                                  const SizedBox(height: 10),
                                  // Input Password
                                  Container(
                                    padding: const EdgeInsets.symmetric(horizontal: 15),
                                    decoration: BoxDecoration(
                                      color: Colors.grey.shade100,
                                      borderRadius: BorderRadius.circular(10),
                                    ),
                                    child: Row(
                                      children: [
                                        Icon(Icons.lock_outline, color: Colors.grey),
                                        const SizedBox(width: 10),
                                        Expanded(
                                          child: TextField(
                                            controller: _passwordController,
                                            obscureText: !isPasswordVisible,
                                            decoration: InputDecoration(
                                              hintText: "Enter Password",
                                              border: InputBorder.none,
                                              suffixIcon: IconButton(
                                                icon: Icon(
                                                  isPasswordVisible
                                                      ? Icons.visibility
                                                      : Icons.visibility_off,
                                                  color: Colors.grey,
                                                ),
                                                onPressed: () {
                                                  setState(() {
                                                    isPasswordVisible = !isPasswordVisible; // Toggle visibility
                                                  });
                                                },
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  const SizedBox(height: 20),
                                  // Dropdown Branch
                                  // const Text(
                                  //   "Branch",
                                  //   style: TextStyle(
                                  //     fontSize: 16,
                                  //     fontWeight: FontWeight.bold,
                                  //     color: Colors.black54,
                                  //   ),
                                  // ),
                                  // const SizedBox(height: 10),
                                  // DropdownButtonFormField<String>(
                                  //   decoration: InputDecoration(
                                  //     border: OutlineInputBorder(
                                  //       borderRadius: BorderRadius.circular(10),
                                  //     ),
                                  //     filled: true,
                                  //     fillColor: Colors.grey.shade100,
                                  //   ),
                                  //   hint: const Text("Select Branch"),
                                  //   value: selectedBranch,
                                  //   items: branches.map((branch) {
                                  //     return DropdownMenuItem<String>(
                                  //       value: branch,
                                  //       child: Text(branch),
                                  //     );
                                  //   }).toList(),
                                  //   onChanged: (value) {
                                  //     setState(() {
                                  //       selectedBranch = value;
                                  //     });
                                  //   },
                                  // ),
                                ],
                              ),
                            ),
                            const SizedBox(height: 30),
                            CustomButton(
                              text: "LOGIN",
                              color: ConstColors.skyColor,
                              onTap: _handleLogin,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: Get.height / 3.4, left: 60),
            child: SizedBox(
              height: 70,
              width: 70,
              child: Image.asset(
                DefaultImages.circle,
                fit: BoxFit.fill,
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _handleLogin() async {
    try {
      final result = await _authService.login(
        _emailController.text,
        _passwordController.text,
      );
      
      if (result != null) {
        Get.offAll(() => const HomeView());
      }
    } catch (e) {
      // Show error message
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(e.toString()),
          backgroundColor: Colors.red,
        ),
      );
    }
  }
}