import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../../../../core/theme/design_tokens.dart';
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/warning_banner.dart';
import '../../../../shared/utils/validators.dart';

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

  @override
  State<LoginEmailScreen> createState() => _LoginEmailScreenState();
}

class _LoginEmailScreenState extends State<LoginEmailScreen> {
  final _emailController = TextEditingController();
  bool _showWarning = false;
  String _warningMessage = '';

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

  void _handleContinue() {
    final error = Validators.email(_emailController.text);
    if (error != null) {
      setState(() {
        _showWarning = true;
        _warningMessage = error;
      });
      return;
    }
    setState(() {
      _showWarning = false;
    });
    context.push('/login/password');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.background,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      _buildAppIcon(),
                      const SizedBox(height: 24),
                      _buildAppTitle(),
                      const SizedBox(height: 32),
                      _buildFormContainer(),
                    ],
                  ),
                ),
              ),
              _buildFooter(),
              const SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAppIcon() {
    return Container(
      width: 104,
      height: 104,
      decoration: BoxDecoration(
        color: AppColors.appIconRing,
        borderRadius: BorderRadius.circular(52),
        border: Border.all(color: AppColors.appIconBorder, width: 1),
      ),
      child: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(38),
          child: Image.asset(
            'assets/images/logo.png',
            width: 76,
            height: 76,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  Widget _buildAppTitle() {
    return const Text(
      'linksy',
      style: TextStyle(
        fontFamily: 'Playfair Display',
        fontSize: 34,
        fontWeight: FontWeight.w700,
        fontStyle: FontStyle.italic,
        color: AppColors.appTitle,
        letterSpacing: 0.5,
      ),
    );
  }

  Widget _buildFormContainer() {
    return SizedBox(
      width: 327,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                '邮箱',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  color: AppColors.foreground,
                ),
              ),
              const SizedBox(height: 6),
              TextField(
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(hintText: '请输入邮箱'),
              ),
            ],
          ),
          const SizedBox(height: 12),
          WarningBanner(message: _warningMessage, visible: _showWarning),
          const SizedBox(height: 16),
          AppButton(text: '继续', onPressed: _handleContinue),
        ],
      ),
    );
  }

  Widget _buildFooter() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: () => context.push('/register'),
          child: const Text(
            '还没有账号？去注册',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
              color: AppColors.slate500,
            ),
          ),
        ),
        const SizedBox(height: 12),
        const Text(
          '隐私政策 | 服务条款',
          style: TextStyle(fontSize: 12, color: AppColors.slate400),
        ),
      ],
    );
  }
}