import 'package:flutter/material.dart';
import 'package:flutter/widget_previews.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_study/views/LoginPageProvider.dart';
import 'package:go_router/go_router.dart';

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

  @override
  ConsumerState<LoginPage> createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends ConsumerState<LoginPage> {
  late final currentUser = ref.watch(loginUserProvider);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('登录')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text('登录', style: TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            Row(
              children: [
                Expanded(flex: 1, child: const Text('用户名：')),
                const SizedBox(width: 8),
                Expanded(
                  flex: 4,
                  child: TextField(
                    decoration: const InputDecoration(hintText: '请输入用户名'),
                    controller: TextEditingController(
                      text: currentUser.username,
                    ),
                    onChanged: (value) {
                      ref.read(loginUserProvider).username = value;
                    },
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(flex: 1, child: const Text('密码：')),
                const SizedBox(width: 8),
                Expanded(
                  flex: 4,
                  child: TextField(
                    decoration: const InputDecoration(hintText: '请输入密码'),
                    controller: TextEditingController(
                      text: currentUser.password,
                    ),
                    onChanged: (value) {
                      ref.read(loginUserProvider.notifier).update((oldValue) {
                        oldValue.password = value;
                        return oldValue;
                      });
                    },
                    obscureText: true,
                  ),
                ),
              ],
            ),

            const SizedBox(height: 16),

            ElevatedButton(
              onPressed: () {
                context.go('/home');
              },
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(double.infinity, 48),
              ),
              child: const Text('登录'),
            ),
          ],
        ),
      ),
    );
  }
}

// ========== 组件预览（顶层函数） ==========

@Preview(name: 'LoginPage 默认状态')
Widget loginPagePreview() => const LoginPage();