.. titre : Quelle est mon adresse IP
.. slug : quelle est mon adresse IP
.. date : 2026-01-24 10:00:00 UTC
.. tags : réseau, adresse IP, géolocalisation, confidentialité, sécurité, outil
.. catégorie : Outils Ethernet et IP
.. lien :
.. description : Découvrez vos adresses publiques IPv4 et IPv6, la géolocalisation, les détails de votre FAI, la détection VPN/proxy et les informations sur la réputation IP
.. tapez : texte
<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>Quelle est mon adresse IP ?</h2>
<p>Affichez vos adresses IP publiques, votre emplacement géographique, les informations de votre FAI, votre statut de confidentialité et les détails de votre appareil. Toutes les recherches sont effectuées côté client pour votre confidentialité.</p>
</div>
Affichage de l'adresse IP
<div class="ip-display-section">
<div class="ip-card ipv4">
<div class="ip-label">Adresse IPv4</div>
<div class="ip-value loading" id="ipv4Value">Détection...</div>
<button class="copy-btn" disabled="" id="copyIpv4Btn" onclick="copyToClipboard('ipv4')">Copie</button>
</div>
<div class="ip-card ipv6">
<div class="ip-label">Adresse IPv6</div>
<div class="ip-value loading" id="ipv6Value">Détection...</div>
<button class="copy-btn" disabled="" id="copyIpv6Btn" onclick="copyToClipboard('ipv6')">Copie</button>
</div>
</div>
Section Référent
<div class="referrer-section" id="referrerSection">
<div class="label">Vous êtes arrivé de :</div>
<div class="value" id="referrerValue"></div>
</div>
Carte de localisation
<div class="section-card">
<div class="section-header">
<span class="icon">🌎</span>Situation géographique</div>
<div class="section-content">
<div id="locationMap"></div>
<div class="info-grid" id="locationInfo">
<div class="info-item">
<span class="label">Ville</span>
<span class="value" id="geoCity"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Région</span>
<span class="value" id="geoRegion"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Pays</span>
<span class="value" id="geoCountry"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Coordonnées</span>
<span class="value mono" id="geoCoords"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Fuseau horaire</span>
<span class="value" id="geoTimezone"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Code Postal</span>
<span class="value" id="geoZip"><div class="skeleton"></div></span>
</div>
</div>
<div class="accuracy-note">
<strong>Note:</strong>La géolocalisation est approximative et basée sur les enregistrements de la base de données IP. La précision varie selon le FAI et peut afficher le hub régional de votre FAI plutôt que votre emplacement exact, en particulier pour les connexions mobiles ou CGNAT.</div>
</div>
</div>
FAI et données réseau
<div class="section-card">
<div class="section-header">
<span class="icon">📡</span>Informations sur le FAI et le réseau</div>
<div class="section-content">
<div class="info-grid" id="ispInfo">
<div class="info-item">
<span class="label">FAI / Opérateur</span>
<span class="value" id="ispName"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Organisation</span>
<span class="value" id="ispOrg"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Numéro AS</span>
<span class="value mono" id="ispAsn"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">Type de connexion</span>
<span class="value" id="connectionType"><div class="skeleton"></div></span>
</div>
</div>
</div>
</div>
Informations sur la sécurité et la confidentialité
<div class="section-card">
<div class="section-header">
<span class="icon">🔒</span>Informations sur la sécurité et la confidentialité</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">Hébergement / Data Center</span>
<span id="hostingStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">Connexion mobile</span>
<span id="mobileStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
</div>
<div id="reputationAlert">
Une alerte de réputation sera insérée ici
</div>
</div>
</div>
Contexte du navigateur et de l'appareil
<div class="section-card">
<div class="section-header">
<span class="icon">💻</span>Informations sur le navigateur et l'appareil</div>
<div class="section-content">
<table class="device-table">
<tr>
<th>Système opérateur</th>
<td id="deviceOS">-</td>
</tr>
<tr>
<th>Navigateur</th>
<td id="deviceBrowser">-</td>
</tr>
<tr>
<th>Résolution d'écran</th>
<td id="deviceScreen">-</td>
</tr>
<tr>
<th>Rapport de pixels de l'appareil</th>
<td id="deviceDPR">-</td>
</tr>
<tr>
<th>Fils de processeur</th>
<td id="deviceCPU">-</td>
</tr>
<tr>
<th>RAM estimée</th>
<td id="deviceRAM">-</td>
</tr>
<tr>
<th>Préférences linguistiques</th>
<td id="deviceLang">-</td>
</tr>
<tr>
<th>Type de connexion</th>
<td id="deviceConnection">-</td>
</tr>
<tr>
<th>Assistance tactile</th>
<td id="deviceTouch">-</td>
</tr>
<tr>
<th>Cookies activés</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>