import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:get/get.dart';
import 'package:marco/controller/auth/forgot_password_controller.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_text_style.dart';
import 'package:marco/images.dart';
import 'package:marco/helpers/services/api_endpoints.dart';
import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';

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

  @override
  State<ForgotPasswordScreen> createState() => _ForgotPasswordScreenState();
}

class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
    with UIMixin {
  final ForgotPasswordController controller =
      Get.put(ForgotPasswordController());

  bool get _isBetaEnvironment => ApiEndpoints.baseUrl.contains("stage");
  bool _isLoading = false;

  void _handleForgotPassword() async {
    setState(() {
      _isLoading = true;
    });

    await controller.onForgotPassword();

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: contentTheme.brandRed,
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constraints) {
          return Column(
            children: [
              const SizedBox(height: 24),
              _buildHeader(),
              const SizedBox(height: 16),
              _buildWelcomeTextsAndChips(),
              const SizedBox(height: 16),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(32)),
                  ),
                  child: SingleChildScrollView(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 24, vertical: 32),
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        minHeight: constraints.maxHeight - 120,
                      ),
                      child: Form(
                        key: controller.basicValidator.formKey,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            MyText.titleLarge(
                              'Forgot Password',
                              fontWeight: 700,
                              color: Colors.black87,
                            ),
                            const SizedBox(height: 8),
                            MyText.bodyMedium(
                              "Enter your email and we'll send you instructions to reset your password.",
                              color: Colors.black54,
                              textAlign: TextAlign.center,
                            ),
                            const SizedBox(height: 32),
                            TextFormField(
                              validator: controller.basicValidator
                                  .getValidation('email'),
                              controller: controller.basicValidator
                                  .getController('email'),
                              keyboardType: TextInputType.emailAddress,
                              style: MyTextStyle.labelMedium(),
                              decoration: InputDecoration(
                                labelText: "Email Address",
                                labelStyle: MyTextStyle.bodySmall(xMuted: true),
                                filled: true,
                                fillColor: Colors.grey.shade100,
                                prefixIcon:
                                    const Icon(LucideIcons.mail, size: 20),
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(12),
                                  borderSide: BorderSide.none,
                                ),
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: 16, vertical: 16),
                                floatingLabelBehavior:
                                    FloatingLabelBehavior.auto,
                              ),
                            ),
                            const SizedBox(height: 40),
                            MyButton.rounded(
                              onPressed:
                                  _isLoading ? null : _handleForgotPassword,
                              elevation: 2,
                              padding: MySpacing.xy(80, 16),
                              borderRadiusAll: 10,
                             backgroundColor: _isLoading ? Colors.red.withOpacity(0.6) : contentTheme.brandRed,
                              child: _isLoading
                                  ? const SizedBox(
                                      height: 20,
                                      width: 20,
                                      child: CircularProgressIndicator(
                                        color: Colors.white,
                                        strokeWidth: 2,
                                      ),
                                    )
                                  : MyText.labelLarge(
                                      'Send Reset Link',
                                      fontWeight: 700,
                                      color: Colors.white,
                                    ),
                            ),
                            const SizedBox(height: 24),
                            TextButton(
                              onPressed: () async {
                                await LocalStorage.logout();
                              },
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  const Icon(Icons.arrow_back,
                                      size: 16, color: Colors.red),
                                  const SizedBox(width: 4),
                                  MyText.bodySmall(
                                    'Back to log in',
                                    fontWeight: 600,
                                    fontSize: 14,
                                    color: contentTheme.brandRed,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }

  Widget _buildWelcomeTextsAndChips() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          MyText.titleMedium(
            "Welcome to Marco",
            fontWeight: 600,
            color: Colors.white,
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 4),
          MyText.bodySmall(
            "Streamline Project Management and Boost Productivity with Automation.",
            color: Colors.white70,
            textAlign: TextAlign.center,
          ),
          if (_isBetaEnvironment) ...[
            const SizedBox(height: 8),
            _buildBetaLabel(),
          ],
        ],
      ),
    );
  }

  Widget _buildBetaLabel() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
      decoration: BoxDecoration(
        color: Colors.orangeAccent,
        borderRadius: BorderRadius.circular(4),
      ),
      child: MyText.bodySmall(
        'BETA',
        fontWeight: 600,
        color: Colors.white,
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: const EdgeInsets.all(12),
      margin: const EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 6,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Image.asset(Images.logoDark, height: 70),
    );
  }
}