import 'package:flutter/material.dart';
import '../widgets/rounded_input.dart';
import '../widgets/primary_button.dart';
import 'otp_screen.dart';

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});
  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  final cName = TextEditingController();
  final cCompany = TextEditingController();
  final cDesignation = TextEditingController();
  final cEmail = TextEditingController();
  final cMobile = TextEditingController();
  final cAddress = TextEditingController();
  final cPincode = TextEditingController();

  bool sending = false;

  void _sendOtp() async {
    if (cName.text.trim().isEmpty ||
        cCompany.text.trim().isEmpty ||
        cEmail.text.trim().isEmpty ||
        cMobile.text.trim().isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Please fill the required fields')),
      );
      return;
    }

    setState(() => sending = true);
    await Future.delayed(const Duration(milliseconds: 600));
    setState(() => sending = false);

    final data = {
      'customer_name': cName.text.trim(),
      'company_name': cCompany.text.trim(),
      'designation': cDesignation.text.trim(),
      'email': cEmail.text.trim(),
      'mobile_no': cMobile.text.trim(),
      'address': cAddress.text.trim(),
      'pincode': cPincode.text.trim(),
    };

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => OtpScreen(signupPayload: data),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: const Color(0xFFE8F0FF), // Same as Login background

      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),

            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                /// 🔵 Back Button (scrolls with form)
                Material(
                  elevation: 6,
                  shape: const CircleBorder(),
                  color: Colors.indigo.shade700,
                  child: InkWell(
                    borderRadius: BorderRadius.circular(30),
                    onTap: () => Navigator.pop(context),
                    child: const Padding(
                      padding: EdgeInsets.all(10),
                      child: Icon(Icons.arrow_back, color: Colors.white),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                /// 📦 White Elevated Signup Box
                Center(
                  child: Container(
                    width: width * 0.88,
                    padding:
                    const EdgeInsets.symmetric(vertical: 28, horizontal: 22),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 18,
                          spreadRadius: 2,
                          offset: const Offset(0, 6),
                        ),
                      ],
                    ),

                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          "Create Account",
                          style: TextStyle(
                            fontSize: 26,
                            fontWeight: FontWeight.bold,
                            color: Colors.indigo.shade700,
                          ),
                        ),

                        const SizedBox(height: 25),

                        _blueInput(cName, "Customer name"),
                        const SizedBox(height: 14),

                        _blueInput(cCompany, "Company name"),
                        const SizedBox(height: 14),

                        _blueInput(cDesignation, "Designation (optional)"),
                        const SizedBox(height: 14),

                        _blueInput(
                          cEmail,
                          "Email",
                          keyboardType: TextInputType.emailAddress,
                        ),
                        const SizedBox(height: 14),

                        _blueInput(
                          cMobile,
                          "Mobile",
                          keyboardType: TextInputType.phone,
                        ),
                        const SizedBox(height: 14),

                        _blueInput(
                          cAddress,
                          "Address",
                          maxLines: 3,
                        ),
                        const SizedBox(height: 14),

                        _blueInput(
                          cPincode,
                          "Pincode",
                          keyboardType: TextInputType.number,
                        ),

                        const SizedBox(height: 25),

                        PrimaryButton(
                          label: "Send OTP",
                          onTap: _sendOtp,
                          busy: sending,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 🔵 Blue soft background input wrapper (same as Login)
  Widget _blueInput(
      TextEditingController controller,
      String hint, {
        TextInputType? keyboardType,
        int maxLines = 1,
      }) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFD8E7FF),
        borderRadius: BorderRadius.circular(14),
      ),
      child: RoundedInput(
        controller: controller,
        hint: hint,
        // keyboardType: keyboardType,
        maxLines: maxLines,
      ),
    );
  }
}