import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../providers/auth_provider.dart';
import '../../theme/colors.dart';
import 'bind_email_screen.dart';

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

  @override
  ConsumerState<UserProfileScreen> createState() => _UserProfileScreenState();
}

class _UserProfileScreenState extends ConsumerState<UserProfileScreen> {
  @override
  Widget build(BuildContext context) {
    final authState = ref.watch(authProvider);
    final user = authState.user;

    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFFF6B35),
              Color(0xFFFF9F5B),
            ],
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              const SizedBox(height: 40),
              // Header
              const Text(
                '个人资料',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              const SizedBox(height: 40),
              // Avatar and User Info
              _buildUserInfoCard(user),
              const SizedBox(height: 24),
              // Menu Items
              Expanded(
                child: _buildMenuItems(user),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildUserInfoCard(user) {
    final nickname = user?.nickname ?? '用户';
    final phone = user?.phone ?? '';
    final firstLetter = nickname.isNotEmpty ? nickname[0].toUpperCase() : '?';
    final joinDate = user?.joinDate ?? '';
    final email = user?.email;
    final hasEmail = email != null && email.isNotEmpty;

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.9),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              children: [
                // Avatar with orange border
                Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: AppColors.brand,
                      width: 3,
                    ),
                    color: Colors.white,
                  ),
                  child: Center(
                    child: Text(
                      firstLetter,
                      style: const TextStyle(
                        fontSize: 36,
                        fontWeight: FontWeight.bold,
                        color: AppColors.brand,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                // Nickname
                Text(
                  nickname,
                  style: const TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w600,
                    color: AppColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 4),
                // Phone
                Text(
                  phone,
                  style: const TextStyle(
                    fontSize: 14,
                    color: AppColors.textSecondary,
                  ),
                ),
                const SizedBox(height: 20),
                // Info Row
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    _buildInfoItem('加入时间', _formatDate(joinDate)),
                    Container(
                      width: 1,
                      height: 30,
                      color: AppColors.textSecondary.withOpacity(0.3),
                    ),
                    _buildInfoItem(
                      '邮箱',
                      hasEmail ? '已绑定' : '未绑定',
                      valueColor: hasEmail ? AppColors.income : AppColors.expense,
                    ),
                    Container(
                      width: 1,
                      height: 30,
                      color: AppColors.textSecondary.withOpacity(0.3),
                    ),
                    _buildInfoItem('活跃家庭', user?.activeFamilyId ?? '无'),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildInfoItem(String label, String value, {Color? valueColor}) {
    return Column(
      children: [
        Text(
          label,
          style: const TextStyle(
            fontSize: 12,
            color: AppColors.textSecondary,
          ),
        ),
        const SizedBox(height: 4),
        Text(
          value,
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
            color: valueColor ?? AppColors.textPrimary,
          ),
        ),
      ],
    );
  }

  Widget _buildMenuItems(user) {
    final hasEmail = user?.email != null && user!.email.isNotEmpty;
    final familyIds = user?.familyIds ?? [];

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.9),
        borderRadius: BorderRadius.circular(20),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: Column(
            children: [
              // Bind Email (if not bound)
              _buildMenuItem(
                icon: Icons.email_outlined,
                title: '绑定邮箱',
                subtitle: hasEmail ? user.email : '未绑定邮箱',
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const BindEmailScreen(),
                    ),
                  );
                },
              ),
              _buildDivider(),
              // Switch Family (if has families)
              _buildMenuItem(
                icon: Icons.family_restroom_outlined,
                title: '切换家庭',
                subtitle: familyIds.isNotEmpty ? '${familyIds.length} 个家庭' : '暂无家庭',
                onTap: familyIds.isNotEmpty
                    ? () {
                        _showFamilySwitchDialog();
                      }
                    : null,
              ),
              _buildDivider(),
              // Logout
              _buildMenuItem(
                icon: Icons.logout_outlined,
                title: '退出登录',
                subtitle: '安全退出当前账号',
                onTap: () {
                  _showLogoutDialog();
                },
                isLast: true,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildMenuItem({
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback? onTap,
    bool isLast = false,
  }) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
        child: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: AppColors.brand.withOpacity(0.1),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(
                icon,
                color: AppColors.brand,
                size: 20,
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: AppColors.textPrimary,
                    ),
                  ),
                  const SizedBox(height: 2),
                  Text(
                    subtitle,
                    style: const TextStyle(
                      fontSize: 12,
                      color: AppColors.textSecondary,
                    ),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.chevron_right,
              color: AppColors.textSecondary.withOpacity(0.5),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDivider() {
    return Container(
      margin: const EdgeInsets.only(left: 76),
      height: 1,
      color: AppColors.textSecondary.withOpacity(0.2),
    );
  }

  String _formatDate(String dateStr) {
    if (dateStr.isEmpty) return '未知';
    try {
      // Assuming dateStr is in format like "2024-01-15" or ISO format
      final date = DateTime.parse(dateStr);
      return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
    } catch (e) {
      return dateStr;
    }
  }

  void _showFamilySwitchDialog() {
    final user = ref.read(authProvider).user;
    final familyIds = user?.familyIds ?? [];

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('切换家庭'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: familyIds.map((familyId) {
            final isActive = familyId == user?.activeFamilyId;
            return ListTile(
              title: Text(familyId),
              trailing: isActive
                  ? const Icon(Icons.check, color: AppColors.brand)
                  : null,
              onTap: () {
                // TODO: Implement family switch
                Navigator.pop(context);
              },
            );
          }).toList(),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
        ],
      ),
    );
  }

  void _showLogoutDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('退出登录'),
        content: const Text('确定要退出当前账号吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () async {
              Navigator.pop(context);
              await ref.read(authProvider.notifier).logout();
              if (mounted) {
                // Navigate to login or pop to root
                Navigator.of(context).popUntil((route) => route.isFirst);
              }
            },
            child: const Text(
              '确定',
              style: TextStyle(color: AppColors.expense),
            ),
          ),
        ],
      ),
    );
  }
}