import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'common/settings.dart';
import 'confirm_mobilenumber.dart';


class ChangePasswordScreen extends StatefulWidget {
  @override
  _ChangePasswordScreenState createState() => _ChangePasswordScreenState();
}


class _ChangePasswordScreenState extends State<ChangePasswordScreen> {
  final _formKey = GlobalKey<FormState>();
  final _currentPasswordController = TextEditingController();
  final _newPasswordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  bool _obscureCurrent = true;
  bool _obscureNew = true;
  bool _obscureConfirm = true;

  void _savePassword() {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Password changed successfully")),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        surfaceTintColor: Colors.transparent, // <- remove M3 tint
        scrolledUnderElevation: 0,            // <- keep white when scrolled
        title: Text(
          "Change Password",
          style: fontTextStyle(16,  Color(0xFF000000), FontWeight.w800),
        ),
        iconTheme: IconThemeData(color: Color(0XFF2A2A2A)),
        leading: GestureDetector(
          onTap: () {
            Navigator.pop(context);
          },
          child: Padding(
            padding:
            const EdgeInsets.fromLTRB(8, 8, 8, 8), // Add padding if needed
            child: Image.asset(
              'images/backbutton_appbar.png', // Replace with your image path
              fit: BoxFit.contain,
              color: Color(0XFF2A2A2A),
              height: 24,
              width: 24,
            ),
          ),
        ),
      ),

      body: SingleChildScrollView(
        // ✅ Prevents overflow
        padding: const EdgeInsets.fromLTRB(20, 28, 20, 20),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 26),
              Text(
                "You can only change your password once every 14 days.\nYou can change your password again on XY Dec 2024",
                style: fontTextStyle(12, Color(0xFF7E7F80), FontWeight.w400),
              ),
              SizedBox(height: 20),

              Text("Current Password",
                  style:
                  fontTextStyle(12, Color(0xFF101214), FontWeight.w700)),
              SizedBox(height: 8),
              TextFormField(
                controller: _currentPasswordController,
                obscureText: _obscureCurrent,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "Enter current password",
                  hintStyle:
                  fontTextStyle(14, Color(0xFF2A2A2A), FontWeight.w400),
                  suffixIcon: IconButton(
                    icon: Icon(_obscureCurrent
                        ? Icons.visibility_off
                        : Icons.visibility),
                    onPressed: () {
                      setState(() {
                        _obscureCurrent = !_obscureCurrent;
                      });
                    },
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Please enter current password";
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),

              // New Password
              Text("New Password*",
                  style: fontTextStyle(12, Color(0xFF101214), FontWeight.w700)),
              SizedBox(height: 8),
              TextFormField(
                controller: _newPasswordController,
                obscureText: _obscureNew,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "Enter new password",
                  hintStyle:
                  fontTextStyle(14, Color(0xFF2A2A2A), FontWeight.w400),
                  suffixIcon: IconButton(
                    icon: Icon(_obscureNew
                        ? Icons.visibility_off
                        : Icons.visibility),
                    onPressed: () {
                      setState(() {
                        _obscureNew = !_obscureNew;
                      });
                    },
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Please enter new password";
                  } else if (value.length < 6) {
                    return "Password must be at least 6 characters";
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),

              // Confirm Password
              Text("Confirm Password*",
                  style: fontTextStyle(12, Color(0xFF101214), FontWeight.w700)),

              SizedBox(height: 8),

              TextFormField(
                controller: _confirmPasswordController,
                obscureText: _obscureConfirm,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: "Confirm new password",
                  hintStyle:
                  fontTextStyle(14, Color(0xFF2A2A2A), FontWeight.w400),
                  suffixIcon: IconButton(
                    icon: Icon(_obscureConfirm
                        ? Icons.visibility_off
                        : Icons.visibility),
                    onPressed: () {
                      setState(() {
                        _obscureConfirm = !_obscureConfirm;
                      });
                    },
                  ),
                ),
                validator: (value) {
                  if (value != _newPasswordController.text) {
                    return "Passwords do not match";
                  }
                  return null;
                },
              ),
              SizedBox(height: 24),

              // Save and Login button
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: _savePassword,
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(vertical: 16),
                    backgroundColor: Color(0xFF101214),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                  ),
                  child: Text(
                    "Save and Login",
                    style: fontTextStyle(14, Color(0xFFFFFFFF), FontWeight.w600),
                  ),

                ),
              ),
              SizedBox(height: 40),

              // Forgot Password link
              Center(
                child: TextButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (_) => ConfirmMobileScreen()),
                    );
                  },
                  child: Text(
                    "Forgot Password?",
                    style: fontTextStyle(14, Color(0xFF101214), FontWeight.w600),
                  ),
                ),
              ),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}