.. title: Địa chỉ IP của tôi là gì
.. sên: what-my-ip
.. ngày: 24-01-2026 10:00:00 UTC
.. tags: mạng, địa chỉ IP, định vị địa lý, quyền riêng tư, bảo mật, công cụ
.. thể loại: Công cụ Ethernet và IP
.. liên kết:
.. mô tả: Khám phá các địa chỉ IPv4 và IPv6 công cộng, vị trí địa lý, chi tiết ISP, phát hiện VPN/proxy và thông tin danh tiếng IP
.. loại: văn bản
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet"/>
<style>
    .ip-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .tool-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .tool-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .tool-header p {
        margin: 10px 0 0 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .ip-display-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .ip-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .ip-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .ip-card.ipv4::before {
        background: linear-gradient(90deg, #4CAF50, #8BC34A);
    }

    .ip-card.ipv6::before {
        background: linear-gradient(90deg, #2196F3, #03A9F4);
    }

    .ip-card .ip-label {
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .ip-card .ip-value {
        font-family: 'Courier New', monospace;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        word-break: break-all;
        margin-bottom: 15px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ip-card .ip-value.loading {
        color: #999;
        font-size: 16px;
    }

    .ip-card .ip-value.error {
        color: #f44336;
        font-size: 14px;
    }

    .ip-card .ip-value.unavailable {
        color: #999;
        font-size: 14px;
        font-style: italic;
    }

    .copy-btn {
        padding: 8px 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .copy-btn:hover {
        background: #5a6fd6;
        transform: translateY(-1px);
    }

    .copy-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .copy-btn.copied {
        background: #4CAF50;
    }

    .section-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .icon {
        font-size: 20px;
    }

    .section-content {
        padding: 20px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        padding: 12px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }

    .info-item .label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    .info-item .value {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        word-break: break-word;
    }

    .info-item .value.mono {
        font-family: 'Courier New', monospace;
    }

    #locationMap {
        width: 100%;
        height: 350px;
        border-radius: 8px;
        margin-bottom: 20px;
        z-index: 1;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .status-badge.safe {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-badge.warning {
        background: #fff3e0;
        color: #ef6c00;
    }

    .status-badge.danger {
        background: #ffebee;
        color: #c62828;
    }

    .status-badge.info {
        background: #e3f2fd;
        color: #1565c0;
    }

    .status-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .privacy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .privacy-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .privacy-item .label {
        font-weight: 500;
        color: #333;
    }

    .reputation-alert {
        padding: 15px 20px;
        border-radius: 8px;
        margin-top: 15px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .reputation-alert.clean {
        background: #e8f5e9;
        border: 1px solid #81c784;
    }

    .reputation-alert.warning {
        background: #fff3e0;
        border: 1px solid #ffb74d;
    }

    .reputation-alert.danger {
        background: #ffebee;
        border: 1px solid #ef9a9a;
    }

    .reputation-alert .alert-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .reputation-alert .alert-content h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .reputation-alert .alert-content p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .device-table {
        width: 100%;
        border-collapse: collapse;
    }

    .device-table th,
    .device-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .device-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
        width: 40%;
    }

    .device-table td {
        font-family: 'Courier New', monospace;
        color: #333;
    }

    .device-table tr:last-child td,
    .device-table tr:last-child th {
        border-bottom: none;
    }

    .referrer-section {
        background: #e3f2fd;
        border: 1px solid #90caf9;
        border-radius: 8px;
        padding: 15px 20px;
        display: none;
    }

    .referrer-section.show {
        display: block;
    }

    .referrer-section .label {
        font-size: 13px;
        color: #1565c0;
        margin-bottom: 5px;
    }

    .referrer-section .value {
        font-family: 'Courier New', monospace;
        color: #0d47a1;
        word-break: break-all;
    }

    .refresh-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .refresh-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
    }

    .refresh-btn.spinning {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        height: 20px;
    }

    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .accuracy-note {
        background: #fff8e1;
        border: 1px solid #ffca28;
        border-radius: 6px;
        padding: 10px 15px;
        font-size: 13px;
        color: #f57f17;
        margin-top: 15px;
    }

    @media (max-width: 768px) {
        .ip-display-section {
            grid-template-columns: 1fr;
        }

        .ip-card .ip-value {
            font-size: 18px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .privacy-grid {
            grid-template-columns: 1fr;
        }

        #locationMap {
            height: 250px;
        }

        .refresh-btn {
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
    }
</style>
<div class="ip-container">
<div class="tool-header">
<h2>Địa chỉ IP của tôi là gì?</h2>
<p>Xem địa chỉ IP công cộng, vị trí địa lý, thông tin ISP, trạng thái quyền riêng tư và chi tiết thiết bị của bạn. Tất cả các tra cứu được thực hiện phía máy khách để đảm bảo quyền riêng tư của bạn.</p>
</div>
Hiển thị địa chỉ IP
<div class="ip-display-section">
<div class="ip-card ipv4">
<div class="ip-label">Địa chỉ IPv4</div>
<div class="ip-value loading" id="ipv4Value">Đang phát hiện...</div>
<button class="copy-btn" disabled="" id="copyIpv4Btn" onclick="copyToClipboard('ipv4')">Sao chép</button>
</div>
<div class="ip-card ipv6">
<div class="ip-label">Địa chỉ IPv6</div>
<div class="ip-value loading" id="ipv6Value">Đang phát hiện...</div>
<button class="copy-btn" disabled="" id="copyIpv6Btn" onclick="copyToClipboard('ipv6')">Sao chép</button>
</div>
</div>
Phần giới thiệu
<div class="referrer-section" id="referrerSection">
<div class="label">Bạn đến từ:</div>
<div class="value" id="referrerValue"></div>
</div>
Bản đồ vị trí
<div class="section-card">
<div class="section-header">
<span class="icon">🌎</span>Vị trí địa lý</div>
<div class="section-content">
<div id="locationMap"></div>
<div class="info-grid" id="locationInfo">
<div class="info-item">
<span class="label">Thành phố</span>
<span class="value" id="geoCity"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Vùng đất</span>
<span class="value" id="geoRegion"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Quốc gia</span>
<span class="value" id="geoCountry"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">tọa độ</span>
<span class="value mono" id="geoCoords"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Múi giờ</span>
<span class="value" id="geoTimezone"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Mã bưu chính</span>
<span class="value" id="geoZip"><div class="skeleton"></div></span>
</div>
</div>
<div class="accuracy-note">
<strong>Ghi chú:</strong>Định vị địa lý là gần đúng và dựa trên hồ sơ cơ sở dữ liệu IP. Độ chính xác thay đổi tùy theo ISP và có thể hiển thị trung tâm khu vực của ISP thay vì vị trí chính xác của bạn, đặc biệt đối với các kết nối di động hoặc CGNAT.</div>
</div>
</div>
ISP &amp; dữ liệu mạng
<div class="section-card">
<div class="section-header">
<span class="icon">📡</span>Thông tin về ISP &amp; Mạng</div>
<div class="section-content">
<div class="info-grid" id="ispInfo">
<div class="info-item">
<span class="label">ISP/Nhà cung cấp dịch vụ</span>
<span class="value" id="ispName"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Tổ chức</span>
<span class="value" id="ispOrg"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">NHƯ số</span>
<span class="value mono" id="ispAsn"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Kiểu kết nối</span>
<span class="value" id="connectionType"><div class="skeleton"></div></span>
</div>
</div>
</div>
</div>
Thông tin chi tiết về an toàn và quyền riêng tư
<div class="section-card">
<div class="section-header">
<span class="icon">🔒</span>Thông tin chi tiết về an toàn và quyền riêng tư</div>
<div class="section-content">
<div class="privacy-grid" id="privacyGrid">
<div class="privacy-item">
<span class="label">VPN / Proxy</span>
<span id="vpnStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">Trung tâm lưu trữ / dữ liệu</span>
<span id="hostingStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">Kết nối di động</span>
<span id="mobileStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
</div>
<div id="reputationAlert">
Cảnh báo danh tiếng sẽ được chèn vào đây
</div>
</div>
</div>
Bối cảnh trình duyệt và thiết bị
<div class="section-card">
<div class="section-header">
<span class="icon">💻</span>Thông tin về trình duyệt và thiết bị</div>
<div class="section-content">
<table class="device-table">
<tr>
<th>Hệ điều hành</th>
<td id="deviceOS">-</td>
</tr>
<tr>
<th>Trình duyệt</th>
<td id="deviceBrowser">-</td>
</tr>
<tr>
<th>Độ phân giải màn hình</th>
<td id="deviceScreen">-</td>
</tr>
<tr>
<th>Tỷ lệ pixel của thiết bị</th>
<td id="deviceDPR">-</td>
</tr>
<tr>
<th>Chủ đề CPU</th>
<td id="deviceCPU">-</td>
</tr>
<tr>
<th>RAM ước tính</th>
<td id="deviceRAM">-</td>
</tr>
<tr>
<th>Tùy chọn ngôn ngữ</th>
<td id="deviceLang">-</td>
</tr>
<tr>
<th>Kiểu kết nối</th>
<td id="deviceConnection">-</td>
</tr>
<tr>
<th>Hỗ trợ cảm ứng</th>
<td id="deviceTouch">-</td>
</tr>
<tr>
<th>Đã bật cookie</th>
<td id="deviceCookies">-</td>
</tr>
</table>
</div>
</div>
</div>
<button class="refresh-btn" id="refreshBtn" onclick="refreshAll()" title="Refresh all data">↻</button>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
'use strict';

/**
 * What's My IP - Complete IP information tool
 * Uses local hierarchical data files for geo/ASN lookups (same as BGP lookup tool)
 */

let map = null;
let marker = null;
let currentIPv4 = null;
let currentIPv6 = null;
let lookupData = null;

// Configuration for data paths (same as BGP lookup tool)
const CONFIG = {
    ipv4Path: '/data/ipv4',
    ipv6Path: '/data/ipv6'
};

// Data cache for hierarchical files
const dataCache = new Map();

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    detectDeviceInfo();
    checkReferrer();
    detectIPAddresses();
});

/**
 * Refresh all data
 */
async function refreshAll() {
    const btn = document.getElementById('refreshBtn');
    btn.classList.add('spinning');

    // Reset displays
    resetDisplays();

    // Re-detect everything
    await detectIPAddresses();

    btn.classList.remove('spinning');
}

/**
 * Reset all display fields to loading state
 */
function resetDisplays() {
    document.getElementById('ipv4Value').className = 'ip-value loading';
    document.getElementById('ipv4Value').textContent = 'Detecting...';
    document.getElementById('ipv6Value').className = 'ip-value loading';
    document.getElementById('ipv6Value').textContent = 'Detecting...';
    document.getElementById('copyIpv4Btn').disabled = true;
    document.getElementById('copyIpv6Btn').disabled = true;

    // Reset geo info
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset ISP info
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset privacy info
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton" style="width: 80px;"></div>';
    });

    document.getElementById('reputationAlert').innerHTML = '';
}

// ============================================================================
// IP Conversion Utilities (from BGP lookup tool)
// ============================================================================

/**
 * Convert IPv4 address to 32-bit unsigned integer
 */
function ipv4ToInt(ip) {
    const parts = ip.split('.');
    return (parseInt(parts[0]) << 24 |
            parseInt(parts[1]) << 16 |
            parseInt(parts[2]) << 8 |
            parseInt(parts[3])) >>> 0;
}

/**
 * Normalize IPv6 address to full canonical form
 */
function normalizeIPv6(ip) {
    ip = ip.trim();

    // Handle IPv4-mapped IPv6 addresses
    const ipv4MappedMatch = ip.match(/^::ffff:(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/i);
    if (ipv4MappedMatch) {
        const ipv4 = ipv4MappedMatch[1];
        const ipv4Parts = ipv4.split('.');
        if (ipv4Parts.every(p => {
            const num = parseInt(p, 10);
            return num >= 0 && num <= 255;
        })) {
            const hex1 = (parseInt(ipv4Parts[0]) * 256 + parseInt(ipv4Parts[1])).toString(16).padStart(4, '0');
            const hex2 = (parseInt(ipv4Parts[2]) * 256 + parseInt(ipv4Parts[3])).toString(16).padStart(4, '0');
            return `0000:0000:0000:0000:0000:ffff:${hex1}:${hex2}`;
        }
        return null;
    }

    // Handle :: compression
    if (ip.indexOf('::') !== -1) {
        if ((ip.match(/::/g) || []).length > 1) {
            return null;
        }

        let beforeDouble = '';
        let afterDouble = '';

        if (ip.startsWith('::')) {
            afterDouble = ip.substring(2);
        } else if (ip.endsWith('::')) {
            beforeDouble = ip.substring(0, ip.length - 2);
        } else {
            const doubleSplit = ip.split('::');
            beforeDouble = doubleSplit[0];
            afterDouble = doubleSplit[1];
        }

        const beforeGroups = beforeDouble ? beforeDouble.split(':').filter(g => g !== '') : [];
        const afterGroups = afterDouble ? afterDouble.split(':').filter(g => g !== '') : [];

        const existingGroups = beforeGroups.length + afterGroups.length;
        if (existingGroups > 7) {
            return null;
        }

        const zeroGroups = 8 - existingGroups;
        const allGroups = [
            ...beforeGroups,
            ...Array(zeroGroups).fill('0'),
            ...afterGroups
        ];

        if (allGroups.length !== 8) {
            return null;
        }

        const normalized = allGroups.map(group => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(group)) {
                return null;
            }
            return group.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    } else {
        const parts = ip.split(':');
        if (parts.length !== 8) {
            return null;
        }

        const normalized = parts.map(part => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(part)) {
                return null;
            }
            return part.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    }
}

/**
 * Convert IPv6 address to 128-bit BigInt
 */
function ipv6ToBigInt(ip) {
    const normalized = normalizeIPv6(ip);
    if (!normalized) {
        throw new Error('Invalid IPv6 address');
    }
    const hexString = normalized.replace(/:/g, '');
    return BigInt('0x' + hexString);
}

/**
 * Extract prefix length from CIDR notation
 */
function getPrefixLength(prefix) {
    if (!prefix || typeof prefix !== 'string') return 0;
    const match = prefix.match(/\/(\d+)$/);
    return match ? parseInt(match[1], 10) : 0;
}

/**
 * Find matching IP ranges and select most specific
 */
function findMatchingRange(ipInt, ranges) {
    if (!ranges || ranges.length === 0) {
        return null;
    }

    const isBigInt = typeof ipInt === 'bigint';
    const matchingRanges = [];

    for (let i = 0; i < ranges.length; i++) {
        const range = ranges[i];
        const rangeStart = isBigInt ? BigInt(range.start) : range.start;
        const rangeEnd = isBigInt ? BigInt(range.end) : range.end;

        if (ipInt >= rangeStart && ipInt <= rangeEnd) {
            matchingRanges.push(range);
        }
    }

    if (matchingRanges.length === 0) {
        return null;
    }

    if (matchingRanges.length === 1) {
        return matchingRanges[0];
    }

    // Multiple matches: select most specific prefix and merge data
    matchingRanges.sort((a, b) => {
        const lenA = getPrefixLength(a.prefix);
        const lenB = getPrefixLength(b.prefix);
        return lenB - lenA;
    });

    const mostSpecific = matchingRanges[0];
    const mergedResult = { ...mostSpecific };

    for (let i = 1; i < matchingRanges.length; i++) {
        const range = matchingRanges[i];

        if (!mergedResult.asn && range.asn) {
            mergedResult.asn = range.asn;
            mergedResult.asn_name = range.asn_name;
            mergedResult.asn_org = range.asn_org;
            mergedResult.asn_country = range.asn_country;
        }

        if (!mergedResult.geoip && range.geoip) {
            mergedResult.geoip = range.geoip;
        }

        if (!mergedResult.whois && range.whois) {
            mergedResult.whois = range.whois;
        }

        if (!mergedResult.reputation && range.reputation) {
            mergedResult.reputation = range.reputation;
        }
    }

    return mergedResult;
}

/**
 * Fetch hierarchical data file with caching
 */
async function fetchHierarchicalData(path) {
    if (dataCache.has(path)) {
        return dataCache.get(path);
    }

    try {
        const response = await fetch(path);
        if (!response.ok) {
            if (response.status === 404) {
                return null;
            }
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        dataCache.set(path, data);
        return data;
    } catch (error) {
        console.error(`Error fetching ${path}:`, error);
        return null;
    }
}

// ============================================================================
// IP Detection and Lookup
// ============================================================================

/**
 * Detect both IPv4 and IPv6 addresses
 */
async function detectIPAddresses() {
    try {
        // Fetch IPv4 and IPv6 in parallel
        const [ipv4Result, ipv6Result] = await Promise.allSettled([
            fetch('https://api.ipify.org?format=json').then(r => r.json()),
            fetch('https://api64.ipify.org?format=json').then(r => r.json())
        ]);

        // Process IPv4
        if (ipv4Result.status === 'fulfilled') {
            currentIPv4 = ipv4Result.value.ip;
            displayIPv4(currentIPv4);
        } else {
            displayIPv4Error();
        }

        // Process IPv6
        if (ipv6Result.status === 'fulfilled') {
            const ipv6 = ipv6Result.value.ip;
            // Check if it's actually different from IPv4 (ipv6 endpoint returns IPv4 if no IPv6)
            if (ipv6 && ipv6 !== currentIPv4 && ipv6.includes(':')) {
                currentIPv6 = ipv6;
                displayIPv6(currentIPv6);
            } else {
                displayIPv6Unavailable();
            }
        } else {
            displayIPv6Unavailable();
        }

        // Fetch detailed info for the primary IP using local data
        const primaryIP = currentIPv4 || currentIPv6;
        if (primaryIP) {
            await fetchIPDetailsFromLocalData(primaryIP);
        }

    } catch (error) {
        console.error('IP detection failed:', error);
        displayIPv4Error();
        displayIPv6Error();
    }
}

/**
 * Display IPv4 address
 */
function displayIPv4(ip) {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv4Btn').disabled = false;
}

/**
 * Display IPv4 error
 */
function displayIPv4Error() {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Display IPv6 address
 */
function displayIPv6(ip) {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv6Btn').disabled = false;
}

/**
 * Display IPv6 unavailable
 */
function displayIPv6Unavailable() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value unavailable';
    el.textContent = 'Not available on your network';
}

/**
 * Display IPv6 error
 */
function displayIPv6Error() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Copy IP to clipboard
 */
function copyToClipboard(type) {
    const ip = type === 'ipv4' ? currentIPv4 : currentIPv6;
    if (!ip) return;

    navigator.clipboard.writeText(ip).then(() => {
        const btn = document.getElementById(type === 'ipv4' ? 'copyIpv4Btn' : 'copyIpv6Btn');
        btn.textContent = 'Copied!';
        btn.classList.add('copied');
        setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('copied');
        }, 2000);
    }).catch(err => {
        console.error('Copy failed:', err);
    });
}

/**
 * Fetch detailed IP information from local hierarchical data files
 * Uses the same data source as the BGP/WHOIS lookup tool
 */
async function fetchIPDetailsFromLocalData(ip) {
    try {
        let matchedData = null;
        const isIPv6 = ip.includes(':');

        if (isIPv6) {
            // IPv6 lookup
            const normalized = normalizeIPv6(ip);
            if (!normalized) {
                throw new Error('Invalid IPv6 address');
            }

            const firstHextet = normalized.substring(0, 4).toLowerCase();
            const path = `${CONFIG.ipv6Path}/${firstHextet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv6ToBigInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        } else {
            // IPv4 lookup
            const firstOctet = ip.split('.')[0];
            const path = `${CONFIG.ipv4Path}/${firstOctet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv4ToInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        }

        if (matchedData) {
            lookupData = matchedData;

            // Display geographic info from local data
            displayGeoInfoFromLocal(matchedData);

            // Display ISP/ASN info from local data
            displayISPInfoFromLocal(matchedData);

            // Display privacy info (basic - from reputation data if available)
            displayPrivacyInfoFromLocal(matchedData);

            // Initialize map if we have coordinates
            if (matchedData.geoip && matchedData.geoip.lat && matchedData.geoip.lon) {
                const lat = parseFloat(matchedData.geoip.lat);
                const lon = parseFloat(matchedData.geoip.lon);
                if (!isNaN(lat) && !isNaN(lon)) {
                    initializeMap(lat, lon, matchedData);
                } else {
                    displayMapUnavailable();
                }
            } else {
                displayMapUnavailable();
            }
        } else {
            // No local data found
            displayGeoError();
            displayISPError();
            displayPrivacyError();
            displayMapUnavailable();
        }

    } catch (error) {
        console.error('IP details fetch failed:', error);
        displayGeoError();
        displayISPError();
        displayPrivacyError();
    }
}

/**
 * Display "map unavailable" message
 */
function displayMapUnavailable() {
    const mapContainer = document.getElementById('locationMap');
    if (map) {
        map.remove();
        map = null;
    }
    mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-style: italic;">Map coordinates not available for this IP range</div>';
}

/**
 * Display geographic information from local hierarchical data
 */
function displayGeoInfoFromLocal(data) {
    const geo = data.geoip || {};

    document.getElementById('geoCity').textContent = geo.city || 'Unknown';
    document.getElementById('geoRegion').textContent = geo.region_name || 'Unknown';

    // Format country display
    const countryName = geo.country_name || geo.country || 'Unknown';
    const countryCode = geo.country || '';
    document.getElementById('geoCountry').textContent = countryCode && countryName !== countryCode
        ? `${countryName} (${countryCode})`
        : countryName;

    // Coordinates
    const lat = parseFloat(geo.lat);
    const lon = parseFloat(geo.lon);
    document.getElementById('geoCoords').textContent = (!isNaN(lat) && !isNaN(lon) && lat !== 0 && lon !== 0)
        ? `${lat.toFixed(4)}, ${lon.toFixed(4)}`
        : 'Not available';

    document.getElementById('geoTimezone').textContent = geo.time_zone || 'Unknown';
    document.getElementById('geoZip').textContent = geo.postal_code || geo.zip || 'Unknown';
}

/**
 * Display geographic error state
 */
function displayGeoError() {
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display ISP/ASN information from local hierarchical data
 */
function displayISPInfoFromLocal(data) {
    // ISP/Carrier name - use ASN name or org
    document.getElementById('ispName').textContent = data.asn_name || data.asn_org || 'Unknown';

    // Organization
    document.getElementById('ispOrg').textContent = data.asn_org || data.asn_name || 'Unknown';

    // AS Number with full format
    const asnDisplay = data.asn ? `AS${data.asn}` : 'Unknown';
    document.getElementById('ispAsn').textContent = asnDisplay;

    // Connection type - infer from ASN name if possible
    let connectionType = 'Unknown';
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    if (combined.includes('mobile') || combined.includes('wireless') || combined.includes('cellular')) {
        connectionType = 'Mobile Carrier';
    } else if (combined.includes('hosting') || combined.includes('cloud') || combined.includes('datacenter') ||
               combined.includes('amazon') || combined.includes('google') || combined.includes('microsoft') ||
               combined.includes('digitalocean') || combined.includes('linode') || combined.includes('vultr')) {
        connectionType = 'Data Center / Hosting';
    } else if (data.asn) {
        connectionType = 'ISP / Residential';
    }

    document.getElementById('connectionType').textContent = connectionType;
}

/**
 * Display ISP error state
 */
function displayISPError() {
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display privacy/security information from local data
 */
function displayPrivacyInfoFromLocal(data) {
    const reputation = data.reputation || {};

    // VPN/Proxy status - check reputation data
    const vpnEl = document.getElementById('vpnStatus');
    if (reputation.listed && reputation.firehol_level) {
        vpnEl.innerHTML = '<span class="status-badge warning"><span class="dot"></span>Flagged</span>';
    } else {
        vpnEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>Not Detected</span>';
    }

    // Hosting/Data Center status - infer from ASN name
    const hostingEl = document.getElementById('hostingStatus');
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    const isHosting = combined.includes('hosting') || combined.includes('cloud') ||
                      combined.includes('datacenter') || combined.includes('amazon') ||
                      combined.includes('google') || combined.includes('microsoft') ||
                      combined.includes('digitalocean') || combined.includes('linode') ||
                      combined.includes('vultr') || combined.includes('ovh') ||
                      combined.includes('hetzner') || combined.includes('akamai');

    if (isHosting) {
        hostingEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        hostingEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Mobile status - infer from ASN name
    const mobileEl = document.getElementById('mobileStatus');
    const isMobile = combined.includes('mobile') || combined.includes('wireless') ||
                     combined.includes('cellular') || combined.includes('lte') ||
                     combined.includes('4g') || combined.includes('5g');

    if (isMobile) {
        mobileEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        mobileEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Show reputation alert if flagged
    displayReputationAlert(data);
}

/**
 * Display reputation alert based on local data
 */
function displayReputationAlert(data) {
    const alertContainer = document.getElementById('reputationAlert');
    const reputation = data.reputation || {};

    if (reputation.listed && reputation.firehol_level) {
        const level = reputation.firehol_level;
        const severityClass = level === 1 ? 'danger' : 'warning';
        const severityText = level === 1 ? 'Critical Risk' : (level === 2 ? 'High Risk' : 'Moderate Risk');
        const icon = level === 1 ? '&#9888;' : '&#9888;';

        alertContainer.innerHTML = `
            <div class="reputation-alert ${severityClass}">
                <span class="alert-icon">${icon}</span>
                <div class="alert-content">
                    <h4>${severityText}: IP Listed on Threat Intelligence</h4>
                    <p>
                        This IP address is listed on FireHOL Level ${level} blocklist.
                        ${level === 1 ? 'This indicates confirmed malicious activity.' :
                          level === 2 ? 'This indicates suspicious or potentially malicious activity.' :
                          'This IP appears on extended threat lists.'}
                    </p>
                </div>
            </div>
        `;
    } else {
        alertContainer.innerHTML = `
            <div class="reputation-alert clean">
                <span class="alert-icon">&#9989;</span>
                <div class="alert-content">
                    <h4>No Known Threats Detected</h4>
                    <p>Based on public threat intelligence data (FireHOL, IPsum), no malicious activity has been reported for this IP address.</p>
                </div>
            </div>
        `;
    }
}

/**
 * Display privacy error state
 */
function displayPrivacyError() {
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<span class="status-badge">Unknown</span>';
    });
    document.getElementById('reputationAlert').innerHTML = '';
}

/**
 * Initialize Leaflet map
 */
function initializeMap(lat, lon, data) {
    const mapContainer = document.getElementById('locationMap');

    // Clear existing map if present
    if (map) {
        map.remove();
        map = null;
    }

    if (!lat || !lon || isNaN(lat) || isNaN(lon)) {
        mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Location data unavailable</div>';
        return;
    }

    // Initialize map
    map = L.map('locationMap', {
        zoomControl: true,
        scrollWheelZoom: true
    }).setView([lat, lon], 10);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18
    }).addTo(map);

    // Add marker - use geoip data from local structure
    const geo = data.geoip || {};
    const location = [geo.city, geo.region_name, geo.country_name || geo.country].filter(Boolean).join(', ');
    marker = L.marker([lat, lon]).addTo(map);
    marker.bindPopup(`
        <strong>Your Approximate Location</strong><br>
        ${location || 'Location data limited'}<br>
        <small>${lat.toFixed(4)}, ${lon.toFixed(4)}</small>
    `).openPopup();

    // Ensure map renders correctly
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            if (map) map.invalidateSize();
        });
    });
}


/**
 * Detect device/browser information
 */
function detectDeviceInfo() {
    // Operating System
    const os = detectOS();
    document.getElementById('deviceOS').textContent = os;

    // Browser
    const browser = detectBrowser();
    document.getElementById('deviceBrowser').textContent = browser;

    // Screen resolution
    const screen = `${window.screen.width} x ${window.screen.height}`;
    document.getElementById('deviceScreen').textContent = screen;

    // Device pixel ratio
    const dpr = window.devicePixelRatio || 1;
    document.getElementById('deviceDPR').textContent = `${dpr}x`;

    // CPU threads
    const cpu = navigator.hardwareConcurrency || 'Unknown';
    document.getElementById('deviceCPU').textContent = cpu;

    // RAM (Chrome only)
    const ram = navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Not available';
    document.getElementById('deviceRAM').textContent = ram;

    // Languages
    const languages = navigator.languages ? navigator.languages.join(', ') : navigator.language || 'Unknown';
    document.getElementById('deviceLang').textContent = languages;

    // Connection type
    let connectionInfo = 'Not available';
    if (navigator.connection) {
        const conn = navigator.connection;
        const parts = [];
        if (conn.effectiveType) parts.push(conn.effectiveType.toUpperCase());
        if (conn.downlink) parts.push(`${conn.downlink} Mbps`);
        if (parts.length > 0) connectionInfo = parts.join(' - ');
    }
    document.getElementById('deviceConnection').textContent = connectionInfo;

    // Touch support
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    document.getElementById('deviceTouch').textContent = hasTouch ? 'Yes' : 'No';

    // Cookies
    document.getElementById('deviceCookies').textContent = navigator.cookieEnabled ? 'Yes' : 'No';
}

/**
 * Detect operating system from user agent
 */
function detectOS() {
    const ua = navigator.userAgent;
    const platform = navigator.platform || '';

    if (ua.includes('Windows NT 10')) return 'Windows 10/11';
    if (ua.includes('Windows NT 6.3')) return 'Windows 8.1';
    if (ua.includes('Windows NT 6.2')) return 'Windows 8';
    if (ua.includes('Windows NT 6.1')) return 'Windows 7';
    if (ua.includes('Windows')) return 'Windows';

    if (ua.includes('Mac OS X')) {
        const match = ua.match(/Mac OS X (\d+[._]\d+)/);
        if (match) {
            const version = match[1].replace('_', '.');
            return `macOS ${version}`;
        }
        return 'macOS';
    }

    if (ua.includes('iPhone')) return 'iOS (iPhone)';
    if (ua.includes('iPad')) return 'iPadOS';
    if (ua.includes('Android')) {
        const match = ua.match(/Android (\d+(\.\d+)?)/);
        return match ? `Android ${match[1]}` : 'Android';
    }

    if (ua.includes('Linux')) return 'Linux';
    if (ua.includes('CrOS')) return 'Chrome OS';

    return platform || 'Unknown';
}

/**
 * Detect browser from user agent
 */
function detectBrowser() {
    const ua = navigator.userAgent;

    // Check for specific browsers (order matters - check specific before generic)
    if (ua.includes('Edg/')) {
        const match = ua.match(/Edg\/(\d+(\.\d+)?)/);
        return match ? `Microsoft Edge ${match[1]}` : 'Microsoft Edge';
    }

    if (ua.includes('OPR/') || ua.includes('Opera')) {
        const match = ua.match(/(?:OPR|Opera)\/(\d+(\.\d+)?)/);
        return match ? `Opera ${match[1]}` : 'Opera';
    }

    if (ua.includes('Firefox/')) {
        const match = ua.match(/Firefox\/(\d+(\.\d+)?)/);
        return match ? `Firefox ${match[1]}` : 'Firefox';
    }

    if (ua.includes('Safari/') && !ua.includes('Chrome')) {
        const match = ua.match(/Version\/(\d+(\.\d+)?)/);
        return match ? `Safari ${match[1]}` : 'Safari';
    }

    if (ua.includes('Chrome/')) {
        const match = ua.match(/Chrome\/(\d+(\.\d+)?)/);
        return match ? `Chrome ${match[1]}` : 'Chrome';
    }

    return 'Unknown Browser';
}

/**
 * Check and display referrer
 */
function checkReferrer() {
    const referrer = document.referrer;
    const section = document.getElementById('referrerSection');
    const valueEl = document.getElementById('referrerValue');

    if (!referrer) {
        section.classList.remove('show');
        return;
    }

    try {
        const url = new URL(referrer);
        const hostname = url.hostname.toLowerCase();

        // Filter out baud9600.com and related domains
        if (hostname.includes('baud9600.com') ||
            hostname.includes('baud9600.local') ||
            hostname === 'localhost') {
            section.classList.remove('show');
            return;
        }

        // Display external referrer
        valueEl.textContent = referrer;
        section.classList.add('show');

    } catch (e) {
        // Invalid URL, hide section
        section.classList.remove('show');
    }
}
</script>