import React from 'react';
import Badge from '../UI/Badge';
import { Signal, SignalHigh, SignalMedium, SignalLow } from 'lucide-react';

const UserTable = ({ users }) => {
    const getSignalIcon = (strength) => {
        if (strength >= 4) return <SignalHigh size={16} color="var(--status-online)" />;
        if (strength === 3) return <SignalMedium size={16} color="var(--status-roaming)" />;
        return <SignalLow size={16} color="var(--status-offline)" />;
    };

    return (
        <div className="glass-panel" style={{ marginTop: 'var(--space-lg)', overflow: 'hidden' }}>
            <div style={{ padding: 'var(--space-md)', borderBottom: '1px solid var(--border-color)', display: 'flex', justifyContent: 'space-between' }}>
                <h3 style={{ fontSize: '1.125rem' }}>Active Subscribers</h3>
                <button style={{ background: 'transparent', border: '1px solid var(--border-color)', color: 'var(--text-muted)', padding: '4px 12px', borderRadius: '4px', cursor: 'pointer' }}>Filter</button>
            </div>

            <div style={{ overflowX: 'auto' }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
                    <thead>
                        <tr style={{ textAlign: 'left', color: 'var(--text-muted)', borderBottom: '1px solid var(--border-color)' }}>
                            <th style={{ padding: 'var(--space-md)' }}>ID</th>
                            <th style={{ padding: 'var(--space-md)' }}>Subscriber</th>
                            <th style={{ padding: 'var(--space-md)' }}>Connection</th>
                            <th style={{ padding: 'var(--space-md)' }}>Signal</th>
                            <th style={{ padding: 'var(--space-md)' }}>Location</th>
                            <th style={{ padding: 'var(--space-md)' }}>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {users.map((user) => (
                            <tr key={user.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.02)', transition: 'background 0.2s' }}
                                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
                                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                                <td style={{ padding: 'var(--space-md)', fontFamily: 'monospace', color: 'var(--primary)' }}>{user.id}</td>
                                <td style={{ padding: 'var(--space-md)' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <span style={{ fontWeight: 500 }}>{user.name}</span>
                                        <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{user.phoneNumber}</span>
                                    </div>
                                </td>
                                <td style={{ padding: 'var(--space-md)' }}>
                                    <Badge status={user.connectionType} text={user.connectionType} />
                                </td>
                                <td style={{ padding: 'var(--space-md)' }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                                        {getSignalIcon(user.signalStrength)}
                                        <span style={{ color: 'var(--text-muted)' }}>{user.signalStrength}/5</span>
                                    </div>
                                </td>
                                <td style={{ padding: 'var(--space-md)' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                                        <span>{user.location.city}</span>
                                        <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{user.location.country}</span>
                                    </div>
                                </td>
                                <td style={{ padding: 'var(--space-md)' }}>
                                    <Badge status={user.status} />
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default UserTable;