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

/// 个人中心
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    final auth = context.watch<AuthService>();
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Scaffold(
      appBar: AppBar(
        title: const Text('个人中心'),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          // ---------- 用户头像卡片 ----------
          Container(
            padding: const EdgeInsets.all(24),
            child: Column(
              children: [
                CircleAvatar(
                  radius: 40,
                  backgroundColor: colorScheme.primaryContainer,
                  backgroundImage: auth.avatarUrl.isNotEmpty ? NetworkImage(auth.avatarUrl) : null,
                  child: auth.avatarUrl.isEmpty
                      ? Text(
                          auth.displayName.isNotEmpty ? auth.displayName[0] : '?',
                          style: TextStyle(fontSize: 32, color: colorScheme.onPrimaryContainer),
                        )
                      : null,
                ),
                const SizedBox(height: 12),
                Text(
                  auth.displayName,
                  style: theme.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 4),
                Text(
                  '@${auth.username}',
                  style: theme.textTheme.bodyMedium?.copyWith(color: colorScheme.onSurfaceVariant),
                ),
              ],
            ),
          ),

          const Divider(height: 1),

          // ---------- 菜单列表 ----------
          const SizedBox(height: 8),
          _ProfileMenuItem(
            icon: Icons.person_outline,
            title: '个人信息',
            subtitle: '修改姓名、手机号、密码等',
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('个人信息功能开发中...')),
              );
            },
          ),
          _ProfileMenuItem(
            icon: Icons.notifications_outlined,
            title: '消息通知',
            subtitle: '推送设置、告警订阅',
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('消息通知功能开发中...')),
              );
            },
          ),
          _ProfileMenuItem(
            icon: Icons.settings_outlined,
            title: '系统设置',
            subtitle: '主题、语言、缓存管理',
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('系统设置功能开发中...')),
              );
            },
          ),
          _ProfileMenuItem(
            icon: Icons.help_outline,
            title: '帮助与反馈',
            subtitle: '常见问题、意见反馈',
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('帮助与反馈功能开发中...')),
              );
            },
          ),
          _ProfileMenuItem(
            icon: Icons.info_outline,
            title: '关于',
            subtitle: '版本 v1.0.0',
            onTap: () {
              showAboutDialog(
                context: context,
                applicationName: '智慧水务管理系统',
                applicationVersion: 'v1.0.0',
                applicationIcon: Icon(Icons.water_drop, size: 48, color: colorScheme.primary),
                children: const [
                  Text('© 2024 智慧水务团队'),
                ],
              );
            },
          ),

          const SizedBox(height: 24),

          // ---------- 退出登录 ----------
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: OutlinedButton.icon(
              onPressed: () async {
                final confirm = await showDialog<bool>(
                  context: context,
                  builder: (ctx) => AlertDialog(
                    title: const Text('退出登录'),
                    content: const Text('确定要退出当前账号吗？'),
                    actions: [
                      TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('取消')),
                      TextButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('确定')),
                    ],
                  ),
                );
                if (confirm == true && context.mounted) {
                  await auth.logout();
                  // AuthService.notifyListeners 会自动切换到 LoginPage
                }
              },
              icon: const Icon(Icons.logout),
              label: const Text('退出登录'),
              style: OutlinedButton.styleFrom(
                foregroundColor: Colors.red,
                side: const BorderSide(color: Colors.red),
                padding: const EdgeInsets.symmetric(vertical: 14),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
              ),
            ),
          ),
          const SizedBox(height: 32),
        ],
      ),
    );
  }
}

class _ProfileMenuItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;

  const _ProfileMenuItem({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon, color: Colors.blue.shade700),
      title: Text(title),
      subtitle: Text(subtitle, style: const TextStyle(fontSize: 12)),
      trailing: const Icon(Icons.chevron_right, color: Colors.grey),
      onTap: onTap,
    );
  }
}