import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/routes/app_pages.dart';
import 'package:rogapp/widgets/helper_dialog.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final IndexController indexController = Get.find<IndexController>();

  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  final TextEditingController confirmPasswordController = TextEditingController();

  bool _obscurePassword = true;
  bool _obscureConfirmPassword = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      showHelperDialog(
          '登録メールにアクティベーションメールが送信されます。メールにあるリンクをタップすると正式登録になります。',
          'register_page'
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
          onPressed: () => Navigator.pop(context),
          icon: const Icon(Icons.arrow_back_ios, size: 20, color: Colors.black),
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            height: MediaQuery.of(context).size.height,
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 40),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "sign_up".tr,
                  style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 20),
                Text(
                  "create_account".tr,
                  style: TextStyle(fontSize: 15, color: Colors.grey[700]),
                ),
                const SizedBox(height: 30),
                makeInput(label: "email".tr, controller: emailController),
                //makeInput(label: "password".tr, controller: passwordController, obsureText: true),
                //makeInput(label: "confirm_password".tr, controller: confirmPasswordController, obsureText: true),
                makePasswordInput(
                  label: "password".tr,
                  controller: passwordController,
                  obscureText: _obscurePassword,
                  onToggleVisibility: () {
                    setState(() {
                      _obscurePassword = !_obscurePassword;
                    });
                  },
                ),
                makePasswordInput(
                  label: "confirm_password".tr,
                  controller: confirmPasswordController,
                  obscureText: _obscureConfirmPassword,
                  onToggleVisibility: () {
                    setState(() {
                      _obscureConfirmPassword = !_obscureConfirmPassword;
                    });
                  },
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: _handleRegister,
                  style: ElevatedButton.styleFrom(
                    foregroundColor: Colors.white,
                    backgroundColor: Colors.redAccent,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                    minimumSize: const Size(double.infinity, 60),
                  ),
                  child: Text("sign_up".tr, style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),
                ),
                const SizedBox(height: 20),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Flexible(child: Text("already_have_account".tr)),
                    TextButton(
                      onPressed: () => Get.toNamed(AppPages.LOGIN),
                      child: Text("login".tr, style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 18)),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget makePasswordInput({
    required String label,
    required TextEditingController controller,
    required bool obscureText,
    required VoidCallback onToggleVisibility,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w400, color: Colors.black87)),
        const SizedBox(height: 5),
        TextField(
          controller: controller,
          obscureText: obscureText,
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
            enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey[400]!)),
            border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey[400]!)),
            suffixIcon: IconButton(
              icon: Icon(
                obscureText ? Icons.visibility : Icons.visibility_off,
                color: Colors.grey,
              ),
              onPressed: onToggleVisibility,
            ),
          ),
        ),
        const SizedBox(height: 20),
      ],
    );
  }

  void _handleRegister() {
    if (passwordController.text != confirmPasswordController.text) {
      _showErrorSnackbar("no_match".tr, "password_does_not_match".tr);
      return;
    }
    if (emailController.text.isEmpty || passwordController.text.isEmpty) {
      _showErrorSnackbar("no_values".tr, "email_and_password_required".tr);
      return;
    }

    indexController.isLoading.value = true;
    try {
      indexController.register(
          emailController.text,
          passwordController.text,
          confirmPasswordController.text,
          context
      );
      // 登録が成功したと仮定し、ログインページに遷移
      //Get.offNamed(AppPages.LOGIN);
    } catch (error) {
      _showErrorSnackbar("registration_error".tr, error.toString());
    } finally {
      indexController.isLoading.value = false;
    }
  }

  void _showErrorSnackbar(String title, String message) {
    Get.snackbar(
      title,
      message,
      backgroundColor: Colors.red,
      colorText: Colors.white,
      icon: const Icon(Icons.error_outline, size: 40.0, color: Colors.white),
      snackPosition: SnackPosition.TOP,
      duration: const Duration(seconds: 3),
    );
  }
}

Widget makeInput({required String label, required TextEditingController controller, bool obsureText = false}) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(label, style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w400, color: Colors.black87)),
      const SizedBox(height: 5),
      TextField(
        controller: controller,
        obscureText: obsureText,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
          enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey[400]!)),
          border: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey[400]!)),
        ),
      ),
      const SizedBox(height: 20),
    ],
  );
}