import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:gap/gap.dart';
import 'package:pharmacy_mobile/auth/auth_service.dart';
import 'package:pharmacy_mobile/main.dart';
import 'dart:developer';
import 'package:quickalert/quickalert.dart';

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

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

class _LoginPageState extends State<LoginPage> {
  final _authService = AuthService();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  void _signIn() async {
    final email = _emailController.text;
    final password = _passwordController.text;

    try {
      await _authService.signIn(email, password);
      // QuickAlert.show(
      //   context: context,
      //   type: QuickAlertType.success,
      //   text: 'Login Successful',
      //   autoCloseDuration: const Duration(seconds: 1),
      //   showConfirmBtn: false,
      // );
      context.push('/main');
    } catch (e) {
      if (mounted) {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.error,
          text: 'Error: $e',
          autoCloseDuration: const Duration(seconds: 2),
          showConfirmBtn: false,
        );
        // ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error: $e')));
      }
    }

    // if (mounted) {
    //   context.showSnackBar('Check your email for a login link!');

    //   _emailController.clear();
    // }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      alignment: Alignment.center,
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color.fromRGBO(34, 51, 69, 1),
            Color.fromRGBO(22, 32, 44, 1),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Gap(120),
            Text('Ofelia Franco-Alcala',
                style: GoogleFonts.outfit(
                    textStyle: const TextStyle(color: Color.fromRGBO(255, 255, 255, 1), fontSize: 16))),
            Text('Pharmacy',
                style: GoogleFonts.outfit(
                    textStyle: const TextStyle(color: Color.fromRGBO(255, 255, 255, 1), fontSize: 32))),
            const Gap(32),
            Text('Login',
                style: GoogleFonts.outfit(
                    textStyle: const TextStyle(color: Color.fromRGBO(255, 255, 255, 1), fontSize: 32))),
            const Gap(16),
            Padding(
              padding: const EdgeInsets.only(left: 16, right: 16),
              child: Container(
                padding: EdgeInsets.all(16),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.white), borderRadius: BorderRadius.all(Radius.circular(16))),
                child: Form(
                    child: Column(
                  children: [
                    TextFormField(
                      controller: _emailController,
                      decoration: const InputDecoration(
                        labelText: 'Email',
                        border: OutlineInputBorder(),
                      ),
                      style: const TextStyle(color: Colors.white),
                    ),
                    const Gap(8),
                    TextFormField(
                      obscureText: true,
                      controller: _passwordController,
                      decoration: const InputDecoration(
                        labelText: 'Password',
                        border: OutlineInputBorder(),
                      ),
                      style: const TextStyle(color: Colors.white),
                    ),
                    const Gap(16),
                    TextButton(onPressed: () => {_signIn()}, child: const Text('Login'))
                  ],
                )),
              ),
            ),
          ],
        ),
      ),
    ));
  }
}