content: import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:flutter_secure_storage/flutter_secure_storage.dart';
  import '../services/api_service.dart';
  import 'dashboard_screen.dart';
  
  class LoginScreen extends StatefulWidget {
    const LoginScreen({super.key});
  
    @override
    State<LoginScreen> createState() => _LoginScreenState();
  }
  
  class _LoginScreenState extends State<LoginScreen> {
    final _formKey = GlobalKey<FormState>();
    final _serverController = TextEditingController();
    final _emailController = TextEditingController();
    final _passwordController = TextEditingController();
    final _apiService = ApiService();
    final _storage = const FlutterSecureStorage();
    bool _isLoading = false;
  
    // Add focus nodes
    final _serverFocusNode = FocusNode();
    final _emailFocusNode = FocusNode();
    final _passwordFocusNode = FocusNode();
  
    @override
    void initState() {
      super.initState();
      _loadSavedServer();
    }
  
    Future<void> _loadSavedServer() async {
      final savedServer = await _storage.read(key: 'server_url');
      if (savedServer != null && mounted) {
        setState(() {
          _serverController.text = savedServer;
        });
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
        },
        child: Scaffold(
          backgroundColor: Colors.black,
          body: SingleChildScrollView(
            child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Form(
                  key: _formKey,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const SizedBox(height: 40),
                      Image.asset(
                        'assets/icon/icon.png',
                        width: 100,
                        height: 100,
                      ),
                      const SizedBox(height: 16),
                      Text(
                        'Nginx Mobile Dashboard',
                        style:
                            Theme.of(context).textTheme.headlineMedium?.copyWith(
                                  fontWeight: FontWeight.bold,
                                ),
                      ),
                      const SizedBox(height: 40),
                      TextFormField(
                        controller: _serverController,
                        focusNode: _serverFocusNode,
                        decoration: InputDecoration(
                          labelText: 'Server URL',
                          hintText: 'example.com or 192.168.1.1',
                          border: const OutlineInputBorder(),
                          suffixIcon: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              IconButton(
                                icon: const Icon(Icons.paste),
                                onPressed: !_isLoading ? _pasteServerUrl : null,
                              ),
                              IconButton(
                                icon: const Icon(Icons.clear),
                                onPressed: !_isLoading ? _clearServerUrl : null,
                              ),
                            ],
                          ),
                        ),
                        enabled: !_isLoading,
                        textInputAction: TextInputAction.next,
                        onFieldSubmitted: (_) {
                          FocusScope.of(context).requestFocus(_emailFocusNode);
                        },
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'Please enter server URL';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        controller: _emailController,
                        decoration: const InputDecoration(
                          labelText: 'Email',
                          border: OutlineInputBorder(),
                        ),
                        keyboardType: TextInputType.emailAddress,
                        enabled: !_isLoading,
                        showCursor: true, // Add this line
                        readOnly: false, // Add this line
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'Please enter your email';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 16),
                      TextFormField(
                        controller: _passwordController,
                        focusNode: _passwordFocusNode,
                        decoration: InputDecoration(
                          labelText: 'Password',
                          border: const OutlineInputBorder(),
                          suffixIcon: IconButton(
                            icon: const Icon(Icons.paste),
                            onPressed: !_isLoading ? _pastePassword : null,
                          ),
                        ),
                        obscureText: true,
                        enabled: !_isLoading,
                        textInputAction: TextInputAction.done,
                        onFieldSubmitted: (_) {
                          if (!_isLoading) _handleLogin();
                        },
                        validator: (value) {
                          if (value == null || value.isEmpty) {
                            return 'Please enter your password';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 24),
                      SizedBox(
                        width: double.infinity,
                        height: 50,
                        child: ElevatedButton(
                          onPressed: _isLoading ? null : _handleLogin,
                          child: _isLoading
                              ? const SizedBox(
                                  height: 20,
                                  width: 20,
                                  child: CircularProgressIndicator(
                                    strokeWidth: 2,
                                  ),
                                )
                              : const Text('Login'),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      );
    }
  
    Future<void> _pasteServerUrl() async {
      final data = await Clipboard.getData(Clipboard.kTextPlain);
      if (data?.text != null) {
        _serverController.text = data!.text!;
      }
    }
  
    Future<void> _clearServerUrl() async {
      await _storage.delete(key: 'server_url');
      if (mounted) {
        setState(() {
          _serverController.clear();
        });
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('Server URL cleared'),
            duration: Duration(seconds: 2),
          ),
        );
      }
    }
  
    Future<void> _pastePassword() async {
      final data = await Clipboard.getData(Clipboard.kTextPlain);
      if (data?.text != null) {
        _passwordController.text = data!.text!;
      }
    }
  
    Future<void> _handleLogin() async {
      if (!_formKey.currentState!.validate()) return;
  
      setState(() => _isLoading = true);
  
      try {
        final success = await _apiService.login(
          _serverController.text.trim(),
          _emailController.text.trim(),
          _passwordController.text.trim(),
        );
  
        if (!mounted) return;
  
        if (success) {
          await _storage.write(
              key: 'server_url', value: _serverController.text.trim());
  
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => const DashboardScreen(),
            ),
          );
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Login failed. Please check your credentials.'),
              duration: Duration(seconds: 2),
            ),
          );
        }
      } finally {
        if (mounted) {
          setState(() => _isLoading = false);
        }
      }
    }
  
    @override
    void dispose() {
      _serverFocusNode.dispose();
      _emailFocusNode.dispose();
      _passwordFocusNode.dispose();
      _serverController.dispose();
      _emailController.dispose();
      _passwordController.dispose();
      super.dispose();
    }
  }
  