import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/register_controller.dart';

class RegisterView extends GetView<RegisterController> {
  const RegisterView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Title
              RichText(
                text: const TextSpan(
                  children: [
                    TextSpan(
                      text: 'Hello, ',
                      style: TextStyle(
                        fontSize: 26,
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                      ),
                    ),
                    TextSpan(
                      text: 'Selamat Datang',
                      style: TextStyle(
                        fontSize: 26,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF5B9BD5),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),

              // Blue label
              Container(
                width: double.infinity,
                padding: const EdgeInsets.symmetric(vertical: 16),
                decoration: BoxDecoration(
                  gradient: const LinearGradient(
                    colors: [Color(0xFF5B9BD5), Color(0xFF7BB3E0)],
                  ),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Center(
                  child: Text(
                    'Lengkapin Formulir dibawah ini',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 15,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 20),

              // Nama Lengkap
              _buildTextField(
                controller: controller.namaController,
                hint: 'Nama Lengkap',
                icon: Icons.person_outline,
              ),
              const SizedBox(height: 14),

              // Setelah field Nama Lengkap
              _buildTextField(
                controller: controller.emailController,
                hint: 'Email',
                icon: Icons.email_outlined,
                keyboardType: TextInputType.emailAddress,
              ),
              const SizedBox(height: 14),

              _buildTextField(
                controller: controller.passwordController,
                hint: 'Password',
                icon: Icons.lock_outline,
              ),
              const SizedBox(height: 14),

              // Target Celengan — tap buka picker
              _buildTextField(
                controller: controller.targetCelenganController,
                hint: 'Target Celengan',
                icon: Icons.savings_outlined,
                readOnly: true,
                onTap: () => controller.showTargetPicker(context),
                suffixIcon: const Icon(
                  Icons.keyboard_arrow_down_rounded,
                  color: Colors.grey,
                ),
              ),
              const SizedBox(height: 14),

              // Nominal Target
              _buildTextField(
                controller: controller.nominalTargetController,
                hint: 'Nominal Target',
                icon: Icons.attach_money_outlined,
                keyboardType: TextInputType.number,
                onTap: () => controller.showNumpad(context, 'nominal'),
                readOnly: true,
              ),
              const SizedBox(height: 14),

              // Masukkan PIN
              Obx(
                () => _buildTextField(
                  controller: controller.pinController,
                  hint: 'masukkan pin',
                  icon: Icons.lock_outline,
                  obscureText: !controller.isPinVisible.value,
                  suffixIcon: IconButton(
                    icon: Icon(
                      controller.isPinVisible.value
                          ? Icons.visibility_outlined
                          : Icons.visibility_off_outlined,
                      color: Colors.grey,
                    ),
                    onPressed: controller.togglePinVisibility,
                  ),
                  keyboardType: TextInputType.number,
                  onTap: () => controller.showNumpad(context, 'pin'),
                  readOnly: true,
                ),
              ),
              const SizedBox(height: 14),

              // Ulangi PIN
              Obx(
                () => _buildTextField(
                  controller: controller.confirmPinController,
                  hint: 'ulangi pin',
                  icon: Icons.lock_outline,
                  obscureText: !controller.isConfirmPinVisible.value,
                  suffixIcon: IconButton(
                    icon: Icon(
                      controller.isConfirmPinVisible.value
                          ? Icons.visibility_outlined
                          : Icons.visibility_off_outlined,
                      color: Colors.grey,
                    ),
                    onPressed: controller.toggleConfirmPinVisibility,
                  ),
                  keyboardType: TextInputType.number,
                  onTap: () => controller.showNumpad(context, 'confirmPin'),
                  readOnly: true,
                ),
              ),
              const SizedBox(height: 32),

              // Simpan Button
              GestureDetector(
                onTap: controller.simpan,
                child: Container(
                  width: double.infinity,
                  padding: const EdgeInsets.symmetric(vertical: 18),
                  decoration: BoxDecoration(
                    color: const Color(0xFF5B9BD5),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: const Center(
                    child: Text(
                      'Simpan',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildTextField({
    required TextEditingController controller,
    required String hint,
    required IconData icon,
    bool obscureText = false,
    Widget? suffixIcon,
    TextInputType keyboardType = TextInputType.text,
    VoidCallback? onTap,
    bool readOnly = false,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF2F2F2),
        borderRadius: BorderRadius.circular(12),
      ),
      child: TextField(
        controller: controller,
        obscureText: obscureText,
        keyboardType: keyboardType,
        readOnly: readOnly,
        onTap: onTap,
        decoration: InputDecoration(
          hintText: hint,
          hintStyle: const TextStyle(color: Colors.grey, fontSize: 14),
          prefixIcon: Icon(icon, color: Colors.grey, size: 20),
          suffixIcon: suffixIcon,
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(
            horizontal: 16,
            vertical: 16,
          ),
        ),
      ),
    );
  }
}