import 'dart:async';

import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

const _securityEmailPageColor = Color(0xFFF5F2FF);
const _securityEmailTitleColor = Color(0xFF0F0F11);
const _securityEmailDescriptionColor = Color(0xFF78787D);
const _securityEmailBrandColor = Color(0xFF845EEE);

class AddSecurityEmailView extends StatefulWidget {
  const AddSecurityEmailView({super.key});

  @override
  State<AddSecurityEmailView> createState() => _AddSecurityEmailViewState();
}

class _AddSecurityEmailViewState extends State<AddSecurityEmailView> {
  static final _emailPattern = RegExp(
    r'^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$',
  );

  final _emailController = TextEditingController();
  bool _hasSubmitted = false;

  bool get _isEmailValid =>
      _emailPattern.hasMatch(_emailController.text.trim());

  @override
  void dispose() {
    _emailController.dispose();
    super.dispose();
  }

  void _sendVerificationEmail() {
    setState(() => _hasSubmitted = true);
    if (!_isEmailValid) return;

    Get.to(
      () => SecurityEmailVerificationView(
        email: _emailController.text.trim(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;
    final showError = _hasSubmitted && !_isEmailValid;

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
        systemNavigationBarColor: _securityEmailPageColor,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: Scaffold(
        backgroundColor: _securityEmailPageColor,
        appBar: const _SecurityEmailAppBar(),
        body: SafeArea(
          top: false,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 28),
            child: Column(
              children: [
                const SizedBox(height: 16),
                Text(
                  l10n.addSecurityEmail,
                  style: const TextStyle(
                    color: _securityEmailTitleColor,
                    fontSize: 24,
                    fontWeight: FontWeight.w600,
                    height: 1.25,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  l10n.securityEmailDescription,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    color: _securityEmailDescriptionColor,
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    height: 1.43,
                  ),
                ),
                const SizedBox(height: 32),
                TextField(
                  controller: _emailController,
                  keyboardType: TextInputType.emailAddress,
                  autofillHints: const [AutofillHints.email],
                  inputFormatters: [
                    FilteringTextInputFormatter.deny(RegExp(r'\s')),
                  ],
                  onChanged: (_) => setState(() {}),
                  onSubmitted: (_) => _sendVerificationEmail(),
                  style: const TextStyle(
                    color: _securityEmailTitleColor,
                    fontSize: 16,
                    fontWeight: FontWeight.w400,
                  ),
                  decoration: InputDecoration(
                    hintText: l10n.securityEmailHint,
                    hintStyle: const TextStyle(
                      color: Color(0xFFD9D9D9),
                      fontSize: 16,
                    ),
                    filled: true,
                    fillColor: Colors.white,
                    contentPadding: const EdgeInsets.symmetric(
                      horizontal: 20,
                    ),
                    errorText: showError ? l10n.invalidEmailFormat : null,
                    errorStyle: const TextStyle(fontSize: 12),
                    border: _inputBorder(),
                    enabledBorder: _inputBorder(),
                    focusedBorder: _inputBorder(
                      color: _securityEmailBrandColor,
                    ),
                  ),
                ),
                const SizedBox(height: 32),
                SizedBox(
                  width: double.infinity,
                  height: 48,
                  child: ElevatedButton(
                    onPressed: _isEmailValid ? _sendVerificationEmail : null,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: _securityEmailBrandColor,
                      disabledBackgroundColor:
                          _securityEmailBrandColor.withValues(alpha: 0.4),
                      foregroundColor: Colors.white,
                      disabledForegroundColor: Colors.white,
                      elevation: 0,
                      shape: const StadiumBorder(),
                      textStyle: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    child: Text(l10n.sendVerificationEmail),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SecurityEmailVerificationView extends StatefulWidget {
  const SecurityEmailVerificationView({
    super.key,
    required this.email,
  });

  final String email;

  @override
  State<SecurityEmailVerificationView> createState() =>
      _SecurityEmailVerificationViewState();
}

class _SecurityEmailVerificationViewState
    extends State<SecurityEmailVerificationView> {
  static const _resendSeconds = 60;

  final _codeController = TextEditingController();
  Timer? _resendTimer;
  int _secondsRemaining = _resendSeconds;

  bool get _canSubmit => _codeController.text.trim().isNotEmpty;

  @override
  void initState() {
    super.initState();
    _startResendCountdown();
  }

  @override
  void dispose() {
    _resendTimer?.cancel();
    _codeController.dispose();
    super.dispose();
  }

  void _startResendCountdown() {
    _resendTimer?.cancel();
    setState(() => _secondsRemaining = _resendSeconds);
    _resendTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_secondsRemaining <= 1) {
        timer.cancel();
        setState(() => _secondsRemaining = 0);
        return;
      }
      setState(() => _secondsRemaining -= 1);
    });
  }

  void _submitCode() {
    if (!_canSubmit) return;
    FocusScope.of(context).unfocus();
  }

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
        systemNavigationBarColor: _securityEmailPageColor,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: Scaffold(
        backgroundColor: _securityEmailPageColor,
        appBar: const _SecurityEmailAppBar(),
        body: SafeArea(
          top: false,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 28),
            child: Column(
              children: [
                const SizedBox(height: 16),
                Text(
                  l10n.confirmYourEmail,
                  style: const TextStyle(
                    color: _securityEmailTitleColor,
                    fontSize: 24,
                    fontWeight: FontWeight.w600,
                    height: 1.25,
                  ),
                ),
                const SizedBox(height: 7),
                Text.rich(
                  _verificationInstruction(
                    l10n.enterCodeSentTo(widget.email),
                    widget.email,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 47),
                Container(
                  height: 52,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(27),
                  ),
                  child: Stack(
                    children: [
                      TextField(
                        controller: _codeController,
                        keyboardType: TextInputType.number,
                        textInputAction: TextInputAction.done,
                        maxLength: 6,
                        inputFormatters: [
                          FilteringTextInputFormatter.digitsOnly
                        ],
                        onChanged: (_) => setState(() {}),
                        onSubmitted: (_) => _submitCode(),
                        style: const TextStyle(
                          color: _securityEmailTitleColor,
                          fontSize: 16,
                          fontWeight: FontWeight.w400,
                        ),
                        decoration: InputDecoration(
                          hintText: l10n.verificationCode,
                          hintStyle: const TextStyle(
                            color: Color(0xFFD9D9D9),
                            fontSize: 16,
                          ),
                          counterText: '',
                          contentPadding: const EdgeInsets.only(
                            left: 20,
                            right: 112,
                          ),
                          border: InputBorder.none,
                        ),
                      ),
                      Positioned(
                        top: 0,
                        right: 0,
                        bottom: 0,
                        child: TextButton(
                          onPressed: _secondsRemaining == 0
                              ? _startResendCountdown
                              : null,
                          style: TextButton.styleFrom(
                            foregroundColor: _securityEmailBrandColor,
                            disabledForegroundColor: const Color(0xFFD9D9D9),
                            padding: const EdgeInsets.symmetric(horizontal: 20),
                            textStyle: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          child: Text(
                            _secondsRemaining == 0
                                ? l10n.resend
                                : l10n.resendWithSeconds(_secondsRemaining),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  l10n.emailVerificationHelp,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    color: _securityEmailDescriptionColor,
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    height: 1.2,
                  ),
                ),
                const SizedBox(height: 64),
                SizedBox(
                  width: double.infinity,
                  height: 48,
                  child: ElevatedButton(
                    onPressed: _canSubmit ? _submitCode : null,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: _securityEmailBrandColor,
                      disabledBackgroundColor:
                          _securityEmailBrandColor.withValues(alpha: 0.4),
                      foregroundColor: Colors.white,
                      disabledForegroundColor: Colors.white,
                      elevation: 0,
                      shape: const StadiumBorder(),
                      textStyle: const TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    child: Text(l10n.submit),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

TextSpan _verificationInstruction(String instruction, String email) {
  const textStyle = TextStyle(
    color: _securityEmailDescriptionColor,
    fontSize: 14,
    fontWeight: FontWeight.w400,
    height: 1.43,
  );
  final emailStart = instruction.indexOf(email);
  if (emailStart < 0) return TextSpan(text: instruction, style: textStyle);
  final emailEnd = emailStart + email.length;

  return TextSpan(
    style: textStyle,
    children: [
      TextSpan(text: instruction.substring(0, emailStart)),
      TextSpan(
        text: instruction.substring(emailStart, emailEnd),
        style: const TextStyle(color: _securityEmailTitleColor),
      ),
      TextSpan(text: instruction.substring(emailEnd)),
    ],
  );
}

class _SecurityEmailAppBar extends StatelessWidget
    implements PreferredSizeWidget {
  const _SecurityEmailAppBar();

  @override
  Size get preferredSize => const Size.fromHeight(44);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: _securityEmailPageColor,
      elevation: 0,
      scrolledUnderElevation: 0,
      toolbarHeight: 44,
      leadingWidth: 60,
      leading: IconButton(
        onPressed: Get.back,
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        icon: Image.asset(
          'assets/images/common/ic_nav_back.webp',
          width: 28,
          height: 28,
        ),
      ),
    );
  }
}

OutlineInputBorder _inputBorder({Color color = Colors.transparent}) {
  return OutlineInputBorder(
    borderRadius: BorderRadius.circular(27),
    borderSide: BorderSide(color: color),
  );
}