import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../../../core/router/app_routes.dart';
import '../../../../core/widgets/riotz_scaffold.dart';
import '../../../../core/widgets/riotz_button.dart';
import '../../../../core/theme/app_colors.dart';
import '../providers/auth_providers.dart';

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

  @override
  ConsumerState<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends ConsumerState<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    ref.listen(authControllerProvider, (_, next) {
      next.whenOrNull(
        data: (_) {
          if (mounted) context.go(AppRoutes.home);
        },
        error: (error, _) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              backgroundColor: AppColors.bloodRed,
              content: Text(
                error.toString().toUpperCase(),
                style: const TextStyle(color: AppColors.white, fontWeight: FontWeight.bold),
              ),
            ),
          );
        },
      );
    });

    final authState = ref.watch(authControllerProvider);
    final loading = authState.isLoading;

    return RiotzScaffold(
      appBar: AppBar(
        title: const Text('IDENTIFY YOURSELF'),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios_new, size: 20),
          onPressed: () => context.go(AppRoutes.splash),
        ),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(32),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'LOGIN',
                style: theme.textTheme.displayMedium?.copyWith(height: 1),
              ),
              const SizedBox(height: 8),
              Text(
                'ACCESS THE UNDERGROUND.',
                style: theme.textTheme.labelLarge?.copyWith(color: AppColors.neonRed),
              ),
              const SizedBox(height: 48),
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(
                  hintText: 'EMAIL ADDRESS',
                  prefixIcon: Icon(Icons.email_outlined, color: AppColors.grey),
                ),
                keyboardType: TextInputType.emailAddress,
                validator: (v) => (v == null || !v.contains('@'))
                    ? 'INVALID EMAIL'
                    : null,
              ),
              const SizedBox(height: 16),
              TextFormField(
                controller: _passwordController,
                decoration: const InputDecoration(
                  hintText: 'PASSWORD',
                  prefixIcon: Icon(Icons.lock_outline, color: AppColors.grey),
                ),
                obscureText: true,
                validator: (v) =>
                    (v == null || v.length < 6) ? 'PASSWORD TOO SHORT' : null,
              ),
              const SizedBox(height: 32),
              RiotzButton(
                label: 'ACCESS GRANTED',
                isLoading: loading,
                onPressed: () async {
                  if (!_formKey.currentState!.validate()) return;
                  await ref.read(authControllerProvider.notifier).login(
                        email: _emailController.text,
                        password: _passwordController.text,
                      );
                },
              ),
              const SizedBox(height: 16),
              Center(
                child: TextButton(
                  onPressed: loading
                      ? null
                      : () => context.push(AppRoutes.forgotPassword),
                  child: Text(
                    'FORGOT CREDENTIALS?',
                    style: theme.textTheme.labelLarge?.copyWith(color: AppColors.grey),
                  ),
                ),
              ),
              Center(
                child: TextButton(
                  onPressed: loading ? null : () => context.go(AppRoutes.signup),
                  child: Text(
                    'NO IDENTITY? SIGN UP',
                    style: theme.textTheme.labelLarge?.copyWith(color: AppColors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}