import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:kasy_kit/components/components.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/features/authentication/providers/phone_auth_notifier.dart';
import 'package:kasy_kit/features/authentication/ui/widgets/otp_input.dart';
import 'package:kasy_kit/i18n/translations.g.dart';

class OtpVerificationComponent extends ConsumerStatefulWidget {
  const OtpVerificationComponent({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _OtpVerificationComponentState();
}

class _OtpVerificationComponentState
    extends ConsumerState<OtpVerificationComponent> {
  final _otpController = TextEditingController();

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

  @override
  Widget build(BuildContext context, ) {
    final state = ref.watch(phoneAuthProvider);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const SizedBox(height: KasySpacing.lg),
        Icon(KasyIcons.sms, size: 72, color: context.colors.primary),
        const SizedBox(height: KasySpacing.lg),
        Text(
          t.phone_auth.verification_code,
          style: context.textTheme.titleLarge?.copyWith(
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: KasySpacing.smd),
        Text(
          t.phone_auth.code_sent(phone: state.phoneNumber),
          style: context.textTheme.bodyMedium?.copyWith(
            color: context.colors.muted,
          ),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: KasySpacing.xl),
        OtpInput(
          controller: _otpController,
          onCompleted: (otp) {
            if (!state.isLoading) {
              ref.read(phoneAuthProvider.notifier).verifyOtp(otp);
            }
          },
        ),
        if (state.error != null) ...[
          const SizedBox(height: KasySpacing.md),
          Text(
            state.error!,
            style: context.textTheme.bodyMedium?.copyWith(
              color: context.colors.error,
            ),
            textAlign: TextAlign.center,
          ),
        ],
        const SizedBox(height: KasySpacing.lg),
        KasyButton(
          label: t.phone_auth.verify_code,
          isLoading: state.isLoading,
          expand: true,
          onPressed: () {
            final otp = _otpController.text.trim();
            if (otp.length == 6) {
              ref.read(phoneAuthProvider.notifier).verifyOtp(otp);
            } else {
              ref.read(phoneAuthProvider.notifier).setValidationError(
                t.phone_auth.enter_all_digits,
              );
            }
          },
        ),
        const SizedBox(height: KasySpacing.md),
        KasyButton(
          label: t.phone_auth.resend_code,
          variant: KasyButtonVariant.soft,
          isLoading: state.isLoading,
          expand: true,
          onPressed: () {
            ref.read(phoneAuthProvider.notifier).sendOtp(state.phoneNumber);
          },
        ),
      ],
    );
  }
}
