import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import 'package:provider/provider.dart';
import '../../../providers/auth_provider.dart';

/// 我的页面 - 使用 shadcn_ui 现代化设计
class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final theme = ShadTheme.of(context);

    return Scaffold(
      backgroundColor: theme.colorScheme.background,
      body: Consumer<AuthProvider>(
        builder: (context, auth, _) {
          final user = auth.user;
          return SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                _buildUserCard(user),
                const SizedBox(height: 16),
                _buildMenuList(context, auth),
                const SizedBox(height: 24),
                _buildLogoutButton(context, auth),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget _buildUserCard(user) {
    final theme = ShadTheme.of(context);

    return ShadCard(
      padding: const EdgeInsets.all(20),
      child: Row(
        children: [
          CircleAvatar(
            radius: 32,
            backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
            child: Text(
              user?.avatarText ?? 'U',
              style: TextStyle(
                fontSize: 24,
                color: theme.colorScheme.primary,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  user?.username ?? '未登录',
                  style: theme.textTheme.h3.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 6),
                ShadBadge(
                  backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
                  child: Text(
                    '普通用户',
                    style: TextStyle(
                      fontSize: 12,
                      color: theme.colorScheme.primary,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Icon(
            LucideIcons.chevronRight,
            color: theme.colorScheme.mutedForeground,
          ),
        ],
      ),
    );
  }

  Widget _buildMenuList(BuildContext context, AuthProvider auth) {
    final theme = ShadTheme.of(context);

    final menuItems = [
      _MenuItem(
        icon: LucideIcons.userCheck,
        title: '实名认证',
        subtitle: '完成实名认证，解锁更多功能',
        onTap: () => _showComingSoon('实名认证'),
      ),
      _MenuItem(
        icon: LucideIcons.shield,
        title: '安全设置',
        subtitle: '密码、二次验证等安全设置',
        onTap: () => _showComingSoon('安全设置'),
      ),
      _MenuItem(
        icon: LucideIcons.bell,
        title: '消息通知',
        subtitle: '管理消息推送设置',
        onTap: () => _showComingSoon('消息通知'),
      ),
      _MenuItem(
        icon: LucideIcons.settings,
        title: '系统设置',
        subtitle: '主题、语言等偏好设置',
        onTap: () => _showComingSoon('系统设置'),
      ),
      _MenuItem(
        icon: LucideIcons.info,
        title: '关于我们',
        subtitle: '版本信息与用户协议',
        onTap: () => _showAboutDialog(),
      ),
    ];

    return ShadCard(
      padding: EdgeInsets.zero,
      child: Column(
        children: menuItems.asMap().entries.map((entry) {
          final index = entry.key;
          final item = entry.value;
          final isLast = index == menuItems.length - 1;

          return Column(
            children: [
              _buildMenuItem(item, index),
              if (!isLast)
                Divider(
                  color: theme.colorScheme.border,
                  height: 1,
                  indent: 56,
                ),
            ],
          );
        }).toList(),
      ),
    );
  }

  Widget _buildMenuItem(_MenuItem item, int index) {
    final theme = ShadTheme.of(context);

    return InkWell(
      onTap: item.onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: theme.colorScheme.primary.withValues(alpha: 0.1),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(
                item.icon,
                size: 20,
                color: theme.colorScheme.primary,
              ),
            ),
            const SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item.title,
                    style: theme.textTheme.small.copyWith(
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  if (item.subtitle != null) ...[
                    const SizedBox(height: 2),
                    Text(
                      item.subtitle!,
                      style: theme.textTheme.muted.copyWith(fontSize: 11),
                    ),
                  ],
                ],
              ),
            ),
            Icon(
              LucideIcons.chevronRight,
              size: 18,
              color: theme.colorScheme.mutedForeground,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLogoutButton(BuildContext context, AuthProvider auth) {
    return SizedBox(
      width: double.infinity,
      height: 48,
      child: ShadButton.destructive(
        onPressed: () => _showLogoutDialog(context, auth),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(LucideIcons.logOut, size: 18),
            SizedBox(width: 8),
            Text(
              '退出登录',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showComingSoon(String feature) {
    showShadDialog(
      context: context,
      builder: (context) => ShadDialog.alert(
        title: const Row(
          children: [
            Icon(
              LucideIcons.construction,
              color: Color(0xFFFF9800),
              size: 20,
            ),
            SizedBox(width: 8),
            Text('功能开发中'),
          ],
        ),
        description: Text('$feature功能正在开发中，敬请期待~'),
        actions: [
          ShadButton(
            child: const Text('知道了'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  }

  void _showLogoutDialog(BuildContext context, AuthProvider auth) {
    showShadDialog(
      context: context,
      builder: (context) => ShadDialog.alert(
        title: const Text('确认退出'),
        description: const Text('确定要退出登录吗？'),
        actions: [
          ShadButton.outline(
            child: const Text('取消'),
            onPressed: () => Navigator.of(context).pop(),
          ),
          ShadButton.destructive(
            child: const Text('退出'),
            onPressed: () async {
              Navigator.of(context).pop();
              await auth.logout();
              if (context.mounted) {
                Navigator.pushReplacementNamed(context, '/login');
              }
            },
          ),
        ],
      ),
    );
  }

  void _showAboutDialog() {
    final theme = ShadTheme.of(context);

    showShadDialog(
      context: context,
      builder: (context) => ShadDialog(
        title: Row(
          children: [
            CircleAvatar(
              radius: 20,
              backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
              child: Text(
                '₿',
                style: TextStyle(
                  fontSize: 20,
                  color: theme.colorScheme.primary,
                ),
              ),
            ),
            const SizedBox(width: 12),
            const Text('模拟所'),
          ],
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '虚拟货币模拟交易平台',
              style: theme.textTheme.muted,
            ),
            const SizedBox(height: 16),
            Row(
              children: [
                Icon(
                  LucideIcons.code,
                  size: 14,
                  color: theme.colorScheme.mutedForeground,
                ),
                const SizedBox(width: 6),
                Text(
                  '版本: 1.0.0',
                  style: theme.textTheme.muted.copyWith(fontSize: 12),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                Icon(
                  LucideIcons.heart,
                  size: 14,
                  color: theme.colorScheme.mutedForeground,
                ),
                const SizedBox(width: 6),
                Text(
                  'Built with Flutter & shadcn_ui',
                  style: theme.textTheme.muted.copyWith(fontSize: 12),
                ),
              ],
            ),
          ],
        ),
        actions: [
          ShadButton(
            child: const Text('确定'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  }
}

class _MenuItem {
  final IconData icon;
  final String title;
  final String? subtitle;
  final VoidCallback onTap;

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