function NumericConverter() {
    const [decimalValue, setDecimalValue] = useState('');
    const [customBase, setCustomBase] = useState('3');

    const standardBases = [
        { name: 'Binary', base: 2, icon: '0️⃣1️⃣' },
        { name: 'Octal', base: 8, icon: '8️⃣' },
        { name: 'Decimal', base: 10, icon: '🔟' },
        { name: 'Hexadecimal', base: 16, icon: '🔠' },
    ];

    const extraBases = [
        { name: 'Base 3', base: 3 },
        { name: 'Base 5', base: 5 },
        { name: 'Base 12', base: 12 },
        { name: 'Base 20', base: 20 },
        { name: 'Base 32', base: 32 },
        { name: 'Base 36', base: 36 },
    ];

    const handleValueChange = (value, base) => {
        if (value === '') {
            setDecimalValue('');
            return;
        }

        try {
            // Validate input for the base
            const validChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ".substring(0, base);
            const regex = new RegExp(`^[${validChars}]*$`, "i");
            if (!regex.test(value)) return;

            // Convert to decimal
            const dec = BigInt(parseInt(value, base)); // For display we'll use string representation
            setDecimalValue(dec.toString());
        } catch (e) {
            // Handle large numbers or invalid inputs
        }
    };

    const getValueForBase = (base) => {
        if (decimalValue === '') return '';
        try {
            const num = parseInt(decimalValue, 10);
            if (isNaN(num)) return '';
            return num.toString(base).toUpperCase();
        } catch (e) {
            return 'Error';
        }
    };

    const clearAll = () => {
        setDecimalValue('');
    };

    return (
        <div className="card">
            <div className="flex justify-between items-center mb-4">
                <h3 style={{ margin: 0 }}>🔢 Advanced Number System Converter</h3>
                <button className="btn btn-secondary btn-sm" onClick={clearAll}>Clear All</button>
            </div>

            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '20px' }}>
                Convert between different bases in real-time. Supports bases 2 through 36.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '20px' }}>
                {/* Standard Bases */}
                {standardBases.map(b => (
                    <div key={b.base} className="form-group">
                        <label className="form-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <span>{b.icon}</span>
                            <span>{b.name} (Base {b.base})</span>
                        </label>
                        <input
                            type="text"
                            className="form-input"
                            style={{ fontFamily: 'monospace', fontSize: '16px', fontWeight: '600' }}
                            value={getValueForBase(b.base)}
                            onChange={(e) => handleValueChange(e.target.value.toUpperCase(), b.base)}
                            placeholder={`Enter ${b.name} value...`}
                        />
                    </div>
                ))}

                {/* Custom Base */}
                <div className="form-group" style={{ padding: '16px', border: '1px dashed var(--border-color)', borderRadius: '8px', background: 'var(--bg-secondary)' }}>
                    <div className="flex gap-4 mb-2">
                        <label className="form-label" style={{ marginBottom: 0 }}>Custom Base:</label>
                        <input
                            type="number"
                            min="2"
                            max="36"
                            className="form-input"
                            style={{ width: '70px', padding: '4px 8px' }}
                            value={customBase}
                            onChange={(e) => setCustomBase(e.target.value)}
                        />
                    </div>
                    <input
                        type="text"
                        className="form-input"
                        style={{ fontFamily: 'monospace', fontSize: '16px', fontWeight: '600' }}
                        value={getValueForBase(parseInt(customBase) || 10)}
                        onChange={(e) => handleValueChange(e.target.value.toUpperCase(), parseInt(customBase) || 10)}
                        placeholder={`Base ${customBase} value...`}
                    />
                </div>
            </div>

            {/* Extra Bases Collapsible or Grid */}
            <div style={{ marginTop: '24px', padding: '16px', background: 'var(--bg-tertiary)', borderRadius: '12px' }}>
                <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-secondary)', marginBottom: '12px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                    More Number Systems
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: '16px' }}>
                    {extraBases.map(b => (
                        <div key={b.base}>
                            <label style={{ fontSize: '12px', color: 'var(--text-tertiary)', display: 'block', marginBottom: '4px' }}>{b.name}</label>
                            <input
                                type="text"
                                className="form-input"
                                style={{ fontFamily: 'monospace', fontSize: '13px', padding: '6px 10px', background: 'var(--bg-primary)' }}
                                value={getValueForBase(b.base)}
                                onChange={(e) => handleValueChange(e.target.value.toUpperCase(), b.base)}
                            />
                        </div>
                    ))}
                </div>
            </div>

            <div style={{ marginTop: '20px', padding: '12px', borderRadius: '8px', background: 'var(--primary-light)', color: 'var(--primary)', fontSize: '13px', border: '1px solid var(--primary)' }}>
                <strong>Tip:</strong> You can type in <em>any</em> field to convert to all other bases instantly.
            </div>
        </div>
    );
}

// Export to global registry
window.NumericConverter = NumericConverter;