import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:qadirneyriz/config/config.dart';
import 'package:qadirneyriz/screens/auth/state/state.dart';
import 'package:qadirneyriz/utils/enums/status.dart';
import 'package:qadirneyriz/utils/tools/tools.dart';
import 'package:qadirneyriz/widgets/custom_button.dart';
import 'package:qadirneyriz/widgets/custom_textfield.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

  @override
  State<LoginWithOtpScreen> createState() => _LoginWithOtpScreenState();
}

class _LoginWithOtpScreenState extends State<LoginWithOtpScreen> {
  TextEditingController phoneController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<AuthState>(
        builder: (context, value, child) {
          return CustomScrollView(
            slivers: <Widget>[
              SliverToBoxAdapter(
                child: Container(
                  height: 30,
                  color: config.ui.mainGreen,
                ),
              ),
              // Header Image with cut-out shape at the bottom
              SliverToBoxAdapter(
                child: ClipPath(
                  child: Image.asset(
                    'assets/images/template.png',
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              // Form section with inputs and buttons
              SliverPadding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                sliver: SliverToBoxAdapter(
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(16),
                          boxShadow: [
                            BoxShadow(
                              color:
                                  Colors.black.withOpacity(0.1), // light shadow
                              blurRadius: 10,
                              spreadRadius: 5,
                            ),
                          ],
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            // Username field
                            CustomTextField(
                              label: AppLocalizations.of(context)!.phonenumber,
                              hintText:
                                  AppLocalizations.of(context)!.hintphonenumber,
                              textEditingController: phoneController,
                              textInputType: TextInputType.phone,
                            ),

                            const SizedBox(height: 40),
                            // Buttons section
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                CustomButton(
                                  hieght: 56,
                                  fontSize: 13,
                                  text: AppLocalizations.of(context)!
                                      .submitwithphone,
                                  color: Colors.white,
                                  textColor: Colors.green,
                                  onPressed:
                                      value.statusSendotp == Status.loading
                                          ? null
                                          : () {
                                              context.pop();
                                            },
                                ),
                                const SizedBox(width: 16),
                                Expanded(
                                  child: submitButton(context, value),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 40),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  CustomButton submitButton(BuildContext context, AuthState state) {
    switch (state.statusSendotp) {
      case Status.loading:
        return CustomButton(
            hieght: 56,
            fontSize: 12,
            text: AppLocalizations.of(context)!.loading,
            onPressed: null);

      default:
        return CustomButton(
          hieght: 56,
          fontSize: 16,
          text: AppLocalizations.of(context)!.submit,
          onPressed: () async {
            if (phoneController.text == '') {
              Tools.showCustomSnackBar(
                text: AppLocalizations.of(context)!.phoneerror,
                isError: true,
                context,
              );
            } else {
              final status = await state.sendOtp(mobile: phoneController.text);
              if (status == Status.ready) {
                context.pushNamed('otp',
                    pathParameters: {'phonenumber': phoneController.text});
              } else {
                Tools.showCustomSnackBar(
                  text: state.errorsSendOtp == null
                      ? state.messageSendOtp ??
                          AppLocalizations.of(context)!.haserror
                      : Tools.combineErrorMessages(state.errorsSendOtp ?? {}),
                  isError: true,
                  context,
                );
              }
            }
          },
        );
    }
  }
}