import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../providers/family_provider.dart';
import '../../providers/auth_provider.dart';
import '../../theme/colors.dart';
import '../../models/family.dart';
import '../../models/user.dart';

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

  @override
  ConsumerState<FamilyManagementScreen> createState() => _FamilyManagementScreenState();
}

class _FamilyManagementScreenState extends ConsumerState<FamilyManagementScreen> {
  @override
  void initState() {
    super.initState();
    // Load families when screen opens
    Future.microtask(() => ref.read(familyProvider.notifier).loadFamilies());
  }

  @override
  Widget build(BuildContext context) {
    final familiesAsync = ref.watch(familyProvider);
    final authState = ref.watch(authProvider);
    final activeFamilyId = authState.user?.activeFamilyId;

    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: [
              // Header
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                child: Row(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.arrow_back, color: Colors.white),
                      onPressed: () => Navigator.pop(context),
                    ),
                    const Expanded(
                      child: Text(
                        '家庭管理',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    const SizedBox(width: 48),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              // Family List
              Expanded(
                child: familiesAsync.when(
                  loading: () => const Center(
                    child: CircularProgressIndicator(color: Colors.white),
                  ),
                  error: (err, _) => Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.error_outline, color: Colors.white, size: 48),
                        const SizedBox(height: 16),
                        Text(
                          '加载失败: $err',
                          style: const TextStyle(color: Colors.white),
                        ),
                        const SizedBox(height: 16),
                        TextButton(
                          onPressed: () => ref.read(familyProvider.notifier).loadFamilies(),
                          child: const Text('重试', style: TextStyle(color: Colors.white)),
                        ),
                      ],
                    ),
                  ),
                  data: (families) => _buildFamilyList(families, activeFamilyId),
                ),
              ),
              // Action Buttons
              _buildActionButtons(),
              const SizedBox(height: 24),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildFamilyList(List<Family> families, String? activeFamilyId) {
    if (families.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.home_outlined,
              size: 64,
              color: Colors.white.withOpacity(0.7),
            ),
            const SizedBox(height: 16),
            Text(
              '暂无家庭',
              style: TextStyle(
                fontSize: 18,
                color: Colors.white.withOpacity(0.8),
              ),
            ),
            const SizedBox(height: 8),
            Text(
              '创建或加入一个家庭开始使用',
              style: TextStyle(
                fontSize: 14,
                color: Colors.white.withOpacity(0.6),
              ),
            ),
          ],
        ),
      );
    }

    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: ListView.separated(
            padding: const EdgeInsets.symmetric(vertical: 8),
            itemCount: families.length,
            separatorBuilder: (_, __) => Container(
              margin: const EdgeInsets.only(left: 60),
              height: 1,
              color: AppColors.textSecondary.withOpacity(0.2),
            ),
            itemBuilder: (context, index) {
              final family = families[index];
              final isActive = family.id == activeFamilyId;
              return _buildFamilyItem(family, isActive);
            },
          ),
        ),
      ),
    );
  }

  Widget _buildFamilyItem(Family family, bool isActive) {
    return InkWell(
      onTap: () => _switchActiveFamily(family.id),
      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: const Icon(
                Icons.home,
                color: AppColors.brand,
                size: 20,
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        family.name,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w500,
                          color: AppColors.textPrimary,
                        ),
                      ),
                      if (isActive) ...[
                        const SizedBox(width: 8),
                        Container(
                          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                          decoration: BoxDecoration(
                            color: AppColors.brand,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: const Text(
                            '当前',
                            style: TextStyle(
                              fontSize: 10,
                              color: Colors.white,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ],
                    ],
                  ),
                  const SizedBox(height: 2),
                  Text(
                    '${family.members.length} 位成员',
                    style: const TextStyle(
                      fontSize: 12,
                      color: AppColors.textSecondary,
                    ),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.chevron_right,
              color: AppColors.textSecondary.withOpacity(0.5),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildActionButtons() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24),
      child: Row(
        children: [
          Expanded(
            child: _buildActionButton(
              icon: Icons.add,
              label: '创建家庭',
              onTap: _showCreateFamilyDialog,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: _buildActionButton(
              icon: Icons.link,
              label: '加入家庭',
              onTap: _showJoinFamilyDialog,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildActionButton({
    required IconData icon,
    required String label,
    required VoidCallback onTap,
  }) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.2),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: Colors.white.withOpacity(0.3),
            width: 1,
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, color: Colors.white, size: 20),
            const SizedBox(width: 8),
            Text(
              label,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showCreateFamilyDialog() {
    final controller = TextEditingController();
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('创建家庭'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            hintText: '请输入家庭名称',
            border: OutlineInputBorder(),
          ),
          autofocus: true,
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () async {
              final name = controller.text.trim();
              if (name.isEmpty) return;
              Navigator.pop(context);
              await _createFamily(name);
            },
            child: const Text('创建'),
          ),
        ],
      ),
    );
  }

  void _showJoinFamilyDialog() {
    final controller = TextEditingController();
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('加入家庭'),
        content: TextField(
          controller: controller,
          decoration: const InputDecoration(
            hintText: '请输入邀请码',
            border: OutlineInputBorder(),
          ),
          autofocus: true,
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          TextButton(
            onPressed: () async {
              final code = controller.text.trim();
              if (code.isEmpty) return;
              Navigator.pop(context);
              await _joinFamily(code);
            },
            child: const Text('加入'),
          ),
        ],
      ),
    );
  }

  Future<void> _createFamily(String name) async {
    final family = await ref.read(familyProvider.notifier).createFamily(name);
    if (family != null && mounted) {
      // Reload families to show the new one
      await ref.read(familyProvider.notifier).loadFamilies();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('家庭 "${family.name}" 创建成功')),
      );
    } else if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('创建失败，请重试')),
      );
    }
  }

  Future<void> _joinFamily(String inviteCode) async {
    final family = await ref.read(familyProvider.notifier).joinFamily(inviteCode);
    if (family != null && mounted) {
      // Reload families to show the new one
      await ref.read(familyProvider.notifier).loadFamilies();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('成功加入家庭 "${family.name}"')),
      );
    } else if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('加入失败，请检查邀请码')),
      );
    }
  }

  Future<void> _switchActiveFamily(String familyId) async {
    // Update the user's activeFamilyId through auth provider
    final currentUser = ref.read(authProvider).user;
    if (currentUser != null) {
      final updatedUser = User(
        id: currentUser.id,
        phone: currentUser.phone,
        nickname: currentUser.nickname,
        email: currentUser.email,
        familyIds: currentUser.familyIds,
        activeFamilyId: familyId,
        joinDate: currentUser.joinDate,
        createdAt: currentUser.createdAt,
      );
      ref.read(authProvider.notifier).state = ref.read(authProvider).copyWith(
        user: updatedUser,
      );
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('已切换家庭')),
      );
    }
  }
}