import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import '../services/api_service.dart';
import 'channel_list_screen.dart';

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _tokenCtrl = TextEditingController();
  final _authService = AuthService();
  late final ApiService _api;
  bool _loading = false;
  String? _error;

  @override
  void initState() {
    super.initState();
    _api = ApiService(_authService);
  }

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

  Future<void> _login() async {
    final token = _tokenCtrl.text.trim();
    if (token.isEmpty) {
      setState(() => _error = 'توکن را وارد کنید');
      return;
    }
    setState(() {
      _loading = true;
      _error = null;
    });

    final ok = await _api.login(token);
    if (!mounted) return;

    if (ok) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => const ChannelListScreen()),
      );
    } else {
      setState(() {
        _loading = false;
        _error = 'توکن نادرست است';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Icon
                Container(
                  width: 44,
                  height: 44,
                  decoration: BoxDecoration(
                    color: const Color(0xFF00C853).withValues(alpha: 0.15),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    Icons.settings_input_antenna,
                    color: Color(0xFF00C853),
                    size: 22,
                  ),
                ),
                const SizedBox(height: 6),
                const Text(
                  'WalkieTalkie',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 13,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 1,
                  ),
                ),
                const SizedBox(height: 18),

                // Token input
                SizedBox(
                  height: 36,
                  child: TextField(
                    controller: _tokenCtrl,
                    style: const TextStyle(color: Colors.white, fontSize: 12),
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      hintText: 'توکن ورود',
                      hintStyle:
                          const TextStyle(color: Colors.white38, fontSize: 11),
                      filled: true,
                      fillColor: const Color(0xFF1C1C1E),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(18),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 12, vertical: 0),
                    ),
                    onSubmitted: (_) => _login(),
                  ),
                ),

                // Error
                SizedBox(
                  height: 18,
                  child: _error != null
                      ? Text(
                          _error!,
                          style: const TextStyle(
                              color: Color(0xFFFF1744), fontSize: 10),
                        )
                      : null,
                ),

                // Login button
                GestureDetector(
                  onTap: _loading ? null : _login,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 200),
                    width: 60,
                    height: 60,
                    decoration: BoxDecoration(
                      color: _loading
                          ? const Color(0xFF424242)
                          : const Color(0xFF00C853),
                      shape: BoxShape.circle,
                      boxShadow: _loading
                          ? null
                          : [
                              BoxShadow(
                                color: const Color(0xFF00C853).withValues(alpha: 0.4),
                                blurRadius: 12,
                                spreadRadius: 2,
                              ),
                            ],
                    ),
                    child: _loading
                        ? const Center(
                            child: SizedBox(
                              width: 22,
                              height: 22,
                              child: CircularProgressIndicator(
                                color: Colors.white,
                                strokeWidth: 2,
                              ),
                            ),
                          )
                        : const Icon(Icons.login, color: Colors.white, size: 26),
                  ),
                ),
                const SizedBox(height: 6),
                const Text(
                  'ورود',
                  style: TextStyle(color: Colors.white38, fontSize: 10),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}