mileograph_flutter/lib/components/login/login.dart

import 'package:flutter/material.dart';
import 'package:mileograph_flutter/services/authservice.dart';
import 'package:provider/provider.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Container(
        color: Theme.of(context).scaffoldBackgroundColor,
        child: Center(
          child: Column(
            spacing: 50,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: "Mile",
                      style: TextStyle(
                        color: Theme.of(context).textTheme.bodyLarge?.color,
                      ),
                    ),
                    TextSpan(
                      text: "O",
                      style: TextStyle(color: Colors.red),
                    ),
                    TextSpan(
                      text: "graph",
                      style: TextStyle(
                        color: Theme.of(context).textTheme.bodyLarge?.color,
                      ),
                    ),
                  ],
                  style: TextStyle(
                    decoration: TextDecoration.none,
                    color: Colors.white,
                    fontFamily: "Tomatoes",
                    fontSize: 50,
                  ),
                ),
              ),
              LoginPanel(),
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<LoginPanel> createState() => _LoginPanelState();
}

class _LoginPanelState extends State<LoginPanel> {
  bool registerMode = false;

  void toggleMode() {
    setState(() {
      registerMode = !registerMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    final authService = context.read<AuthService>();

    return Center(
      child: SizedBox(
        width: 400,
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: registerMode
                ? RegisterPanelContent(
                    onBack: toggleMode,
                    authService: authService,
                  )
                : LoginPanelContent(
                    registerCb: toggleMode,
                    authService: authService,
                  ),
          ),
        ),
      ),
    );
  }
}

class LoginPanelContent extends StatefulWidget {
  const LoginPanelContent({
    required this.registerCb,
    required this.authService,
    super.key,
  });

  final VoidCallback registerCb;
  final AuthService authService;

  @override
  State<LoginPanelContent> createState() => _LoginPanelContentState();
}

class _LoginPanelContentState extends State<LoginPanelContent> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  bool _loggingIn = false;

  void login() async {
    final username = _usernameController.text;
    final password = _passwordController.text;

    final auth = context.read<AuthService>();

    setState(() {
      _loggingIn = true;
    });
    try {
      auth.login(username, password);
      print('Login successful');
      setState(() {
        _loggingIn = false;
      });
    } catch (e) {
      // Handle error
      print('Login failed: $e');
      setState(() {
        _loggingIn = false;
      });
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    Widget loginButtonContent = Text("Login");
    if (_loggingIn) {
      loginButtonContent = Padding(
        padding: const EdgeInsets.all(8.0),
        child: CircularProgressIndicator(),
      );
    } else {
      loginButtonContent = Text("Login");
    }
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      spacing: 8,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 50),
          child: Text(
            "Login",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
          ),
        ),
        TextField(
          controller: _usernameController,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Username",
          ),
        ),
        TextField(
          controller: _passwordController,
          obscureText: true,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Password",
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 10,
          children: [
            FilledButton(onPressed: login, child: loginButtonContent),
            ElevatedButton(
              onPressed: widget.registerCb,
              child: Text("Register"),
            ),
          ],
        ),
      ],
    );
  }
}

class RegisterPanelContent extends StatelessWidget {
  const RegisterPanelContent({
    super.key,
    required this.onBack,
    required this.authService,
  });
  final VoidCallback onBack;
  final AuthService authService;
  void register() {}

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      spacing: 8,
      children: [
        Row(
          children: [
            IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: onBack,
              tooltip: 'Back to login',
            ),
            Expanded(
              child: Center(
                child: Text(
                  "Register",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
              ),
            ),
            // Spacer to balance the row visually
            SizedBox(width: 48), // matches IconButton size
          ],
        ),
        SizedBox(height: 16),
        TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Username",
          ),
        ),
        TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Display Name",
          ),
        ),
        TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Email",
          ),
        ),
        TextField(
          obscureText: true,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Password",
          ),
        ),
        TextField(
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: "Invite Code",
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 10,
          children: [
            FilledButton(onPressed: register, child: Text("Register")),
          ],
        ),
      ],
    );
  }
}