import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../data/models/user.dart';
import '../../providers/user_provider.dart';
import '../../widgets/common/app_button.dart';
import '../../widgets/common/app_text_field.dart';

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

  @override
  State<ProfileDetailScreen> createState() => _ProfileDetailScreenState();
}

class _ProfileDetailScreenState extends State<ProfileDetailScreen> {
  late User _currentUser;
  late TextEditingController _nameController;
  late TextEditingController _emailController;
  late TextEditingController _phoneController;
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    final userProvider = Provider.of<UserProvider>(context, listen: false);
    _currentUser = userProvider.user ?? User(id: -1, email: '', username: '', createdAt: DateTime.now());
    _nameController = TextEditingController(text: _currentUser.username);
    _emailController = TextEditingController(text: _currentUser.email);
    _phoneController = TextEditingController(text: _currentUser.phone ?? '');
  }

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

  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('个人信息'),
        actions: [
          if (userProvider.isLoading)
            const Padding(
              padding: EdgeInsets.only(right: 16),
              child: Center(
                child: SizedBox(
                  width: 24,
                  height: 24,
                  child: CircularProgressIndicator(strokeWidth: 2),
                ),
              ),
            ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // 头像编辑
              GestureDetector(
                onTap: () {
                  // 选择头像
                },
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    CircleAvatar(
                      radius: 60,
                      backgroundColor: Colors.blue[100],
                      backgroundImage: _currentUser.avatar != null
                          ? NetworkImage(_currentUser.avatar!)
                          : null,
                      child: _currentUser.avatar == null
                          ? const Icon(
                              Icons.person,
                              size: 80,
                              color: Colors.blue,
                            )
                          : null,
                    ),
                    Positioned(
                      bottom: 0,
                      right: 0,
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(20),
                          border: Border.all(
                            color: Colors.white,
                            width: 2,
                          ),
                        ),
                        child: const Icon(
                          Icons.camera_alt,
                          size: 20,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              TextButton(
                onPressed: () {},
                child: const Text(
                  '更换头像',
                  style: TextStyle(color: Colors.blue),
                ),
              ),
              const SizedBox(height: 40),
              
              // 表单字段
              AppTextField(
                controller: _nameController,
                labelText: '姓名',
                hintText: '请输入您的姓名',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入姓名';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              AppTextField(
                controller: _emailController,
                labelText: '邮箱地址',
                hintText: '请输入邮箱',
                keyboardType: TextInputType.emailAddress,
                enabled: false, // 邮箱通常不可修改
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入邮箱地址';
                  }
                  if (!value.contains('@')) {
                    return '请输入有效的邮箱地址';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              AppTextField(
                controller: _phoneController,
                labelText: '手机号码',
                hintText: '请输入手机号码',
                keyboardType: TextInputType.phone,
              ),
              const SizedBox(height: 40),
              
              // 错误提示
              if (userProvider.error != null)
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Text(
                    userProvider.error!,
                    style: const TextStyle(color: Colors.red),
                  ),
                ),
              
              // 保存按钮
              AppButton(
                text: '保存修改',
                isLoading: userProvider.isLoading,  // 传入加载状态
                enabled: !userProvider.isLoading,   // 加载时禁用按钮
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    final updatedUser = _currentUser.copyWith(
                      fullName: _nameController.text.trim(),
                      // phone: _phoneController.text.trim().isNotEmpty
                      //     ? _phoneController.text.trim()
                      //     : null,
                    );
                    
                    await userProvider.updateUserProfile(updatedUser);
                    
                    if (userProvider.error == null) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('个人信息已更新'),
                          duration: Duration(seconds: 2),
                        ),
                      );
                      Navigator.of(context).pop();
                    }
                  }
                },
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}