import 'package:flutter/material.dart';
import '../services/network_group_service.dart';

class NetworkStatusCard extends StatelessWidget {
  final NetworkGroupService networkService;
  
  const NetworkStatusCard({
    super.key,
    required this.networkService,
  });

  @override
  Widget build(BuildContext context) {
    final isConnected = networkService.isConnectedToWifi;
    final networkName = networkService.currentNetworkName;
    final localIp = networkService.localIpAddress;
    
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: isConnected 
          ? const Color(0xFF22C55E).withOpacity(0.1)
          : const Color(0xFFEF4444).withOpacity(0.1),
        borderRadius: BorderRadius.circular(15),
        border: Border.all(
          color: isConnected 
            ? const Color(0xFF22C55E)
            : const Color(0xFFEF4444),
          width: 1,
        ),
      ),
      child: Column(
        children: [
          Icon(
            isConnected ? Icons.wifi : Icons.wifi_off,
            size: 40,
            color: isConnected 
              ? const Color(0xFF22C55E)
              : const Color(0xFFEF4444),
          ),
          const SizedBox(height: 10),
          Text(
            isConnected 
              ? '📶 Connected to $networkName'
              : '❌ Not connected to WiFi',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: isConnected 
                ? const Color(0xFF22C55E)
                : const Color(0xFFEF4444),
            ),
          ),
          const SizedBox(height: 5),
          Text(
            isConnected 
              ? 'You can now vote and suggest music with others on this network!'
              : 'Please connect to WiFi to join the group session',
            style: const TextStyle(
              color: Colors.grey,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
          if (isConnected && localIp.isNotEmpty) ...[
            const SizedBox(height: 8),
            Text(
              'Your IP: $localIp',
              style: const TextStyle(
                color: Colors.grey,
                fontSize: 12,
                fontFamily: 'monospace',
              ),
            ),
          ],
        ],
      ),
    );
  }
}

class UserCard extends StatelessWidget {
  final NetworkUser user;
  final bool isCurrentUser;
  
  const UserCard({
    super.key,
    required this.user,
    this.isCurrentUser = false,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        color: isCurrentUser 
          ? const Color(0xFF6366F1).withOpacity(0.1)
          : const Color(0xFF1E1E1E),
        borderRadius: BorderRadius.circular(12),
        border: isCurrentUser 
          ? Border.all(color: const Color(0xFF6366F1), width: 1)
          : null,
      ),
      child: Row(
        children: [
          Stack(
            children: [
              CircleAvatar(
                radius: 20,
                backgroundColor: isCurrentUser 
                  ? const Color(0xFF6366F1)
                  : const Color(0xFF4B5563),
                child: Text(
                  user.name.substring(0, 1),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              if (user.isOnline)
                Positioned(
                  right: 0,
                  bottom: 0,
                  child: Container(
                    width: 12,
                    height: 12,
                    decoration: BoxDecoration(
                      color: const Color(0xFF22C55E),
                      shape: BoxShape.circle,
                      border: Border.all(color: const Color(0xFF121212), width: 2),
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(width: 15),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      user.name,
                      style: const TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                        fontSize: 16,
                      ),
                    ),
                    if (isCurrentUser) ...[
                      const SizedBox(width: 8),
                      Container(
                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                        decoration: BoxDecoration(
                          color: const Color(0xFF6366F1),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: const Text(
                          'You',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 10,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ],
                  ],
                ),
                const SizedBox(height: 4),
                Row(
                  children: [
                    Text(
                      'Joined ${_formatDuration(DateTime.now().difference(user.joinedAt))} ago',
                      style: const TextStyle(
                        color: Colors.grey,
                        fontSize: 12,
                      ),
                    ),
                    if (!user.isOnline) ...[
                      const Text(
                        ' • ',
                        style: TextStyle(color: Colors.grey, fontSize: 12),
                      ),
                      const Text(
                        'Offline',
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 12,
                        ),
                      ),
                    ],
                  ],
                ),
                if (user.ipAddress.isNotEmpty) ...[
                  const SizedBox(height: 2),
                  Text(
                    'IP: ${user.ipAddress}',
                    style: const TextStyle(
                      color: Colors.grey,
                      fontSize: 10,
                      fontFamily: 'monospace',
                    ),
                  ),
                ],
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: const Color(0xFF6366F1).withOpacity(0.2),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text(
              '${user.votes} votes',
              style: const TextStyle(
                color: Color(0xFF6366F1),
                fontSize: 11,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
  
  String _formatDuration(Duration duration) {
    if (duration.inMinutes < 1) {
      return 'less than a minute';
    } else if (duration.inMinutes < 60) {
      return '${duration.inMinutes} minute${duration.inMinutes == 1 ? '' : 's'}';
    } else {
      final hours = duration.inHours;
      final minutes = duration.inMinutes % 60;
      if (minutes == 0) {
        return '$hours hour${hours == 1 ? '' : 's'}';
      } else {
        return '$hours hour${hours == 1 ? '' : 's'} $minutes minute${minutes == 1 ? '' : 's'}';
      }
    }
  }
}