script.js

// DOM Elementleri
const serverStatus = document.getElementById('server-status');
const clientStatus = document.getElementById('client-status');
const serverLog = document.getElementById('server-log');
const clientLog = document.getElementById('client-log');
const infoText = document.getElementById('info-text');

const nodeServer = document.getElementById('node-s');
const nodeClient = document.getElementById('node-c');
const connectionTunnel = document.getElementById('connection-tunnel');
const dataPacket = document.getElementById('data-packet');

const sRadar = document.getElementById('s-radar');
const sPortBadge = document.getElementById('s-port-badge');
const badgeS = document.getElementById('badge-s');
const badgeC = document.getElementById('badge-c');
const sLabel = document.getElementById('s-label');
const cLabel = document.getElementById('c-label');

let serverState = 0;
let clientState = 0;

function getTime() { const now = new Date(); return now.toTimeString().split(' ')[0]; }

function updateLog(panel, type, message) {
    const logBox = panel === 'server' ? serverLog : clientLog;
    const prefix = panel === 'server' ? '<span class="log-prefix-server">[SUNUCU]</span>' : '<span class="log-prefix-client">[İSTEMCİ]</span>';
    let colorClass = ''; if (type === 'error') colorClass = 'log-error'; if (type === 'success') colorClass = 'log-info';
    logBox.innerHTML += `<div class="log-entry ${colorClass}"><span style="color:#64748b">[${getTime()}]</span> ${prefix} > ${message}</div>`;
    logBox.scrollTop = logBox.scrollHeight;
}

function disableButton(panel, step) {
    document.getElementById(`${panel[0]}-btn-${step}`).disabled = true;
    document.getElementById(`${panel[0]}-btn-${step}`).classList.add('active');
}
function enableButton(panel, step) {
    document.getElementById(`${panel[0]}-btn-${step}`).disabled = false;
    document.getElementById(`${panel[0]}-btn-${step}`).classList.remove('active');
}

function updateInfoBoard(text, panelHighlight = 'server') {
    infoText.innerHTML = text;
    document.getElementById('main-info').style.borderLeftColor = panelHighlight === 'server' ? 'var(--accent-server)' : 'var(--accent-client)';
}

function updateStatus(panel, statusStr) {
    const elm = panel === 'server' ? serverStatus : clientStatus;
    elm.className = 'status-indicator';
    if (statusStr === 'active') elm.classList.add('status-active');
    else if (statusStr === 'waiting') elm.classList.add('status-waiting');
    else if (statusStr === 'error') elm.classList.add('status-error');
}

// ==========================================
// SUNUCU (SERVER)
// ==========================================
function serverAction(action) {
    if (action === 'socket') {
        serverState = 1;
        updateLog('server', 'normal', 'socket(AF_INET, SOCK_STREAM) çağrısı yapıldı.');
        updateInfoBoard(`<b>socket() - Dosya Tanımlayıcı (File Descriptor):</b><br>Sunucu işletim sisteminden ağ katmanına inebilmek için bir uç nokta (Endpoint) talep eder. Kernel, uygulamanın IPv4 (AF_INET) ve TCP (SOCK_STREAM) üzerinden iletişim kurabileceği bir soket nesnesi oluşturur.`, 'server');
        disableButton('server', 1); enableButton('server', 2); updateStatus('server', 'active');
        nodeServer.classList.remove('dimmed');
        sLabel.innerHTML = 'Sunucu<br><small>Soket (FD) Tahsis Edildi</small>';

    } else if (action === 'bind_listen') {
        serverState = 2;
        updateLog('server', 'normal', 'bind(127.0.0.1:8080) / listen(1) Kernel seviyesinde rezerve edildi.');
        updateInfoBoard(`<b>bind() & listen():</b><br><span class="highlight">bind()</span> ile işletim sisteminin ağ sürücüsüne mevcut soketin Localhost IP'sine (127.0.0.1) ve TCP Port 8080'e kalıcı olarak bağlanması emredilir. <span class="highlight">listen()</span> ile bu port aktif olarak dışarıdan gelecek bağlantı isteklerini bekleyen bir algılayıcı durumuna sokulur.`, 'server');
        disableButton('server', 2); enableButton('server', 3);
        sPortBadge.classList.add('show-badge');
        sLabel.innerHTML = 'Sunucu<br><small>127.0.0.1 Pasif Dinleme</small>';

    } else if (action === 'accept') {
        serverState = 3;
        updateLog('server', 'success', 'accept() - Thread duraksatıldı (Blocking State). TCP 3-Way Handshake bekleniyor...');
        updateInfoBoard(`<b>accept() - Blokajlı Dinleme:</b><br>İşletim sistemindeki Thread (Yürütme Birimi) <span class="highlight">Blocking</span> durumuna geçirilir. Yeni bir istemci başarılı bir <b>TCP 3-Way Handshake (3'lü El Sıkışma)</b> yapana dek bu satırda bekler.`, 'server');
        updateStatus('server', 'waiting'); disableButton('server', 3);
        sRadar.classList.add('active');
        badgeS.innerText = 'Handshake Bekliyor...';
        badgeS.style.background = 'rgba(251, 191, 36, 0.9)';
        badgeS.classList.add('show-badge');

    } else if (action === 'recv') {
        if (clientState < 3) { updateLog('server', 'error', 'HATA: Receive Buffer (Soket Tamponu) şu an boş.'); return; }
        updateLog('server', 'normal', "recv() - Receive Buffer'dan bayt dizisi çekiliyor...");
        disableButton('server', 4);
        setTimeout(() => {
            updateLog('server', 'success', 'OKUNAN PAYLOAD: "GET / HTTP/1.1" (Byte -> UTF-8 çevrimi)');
            updateInfoBoard(`<b>recv() - Tampon Okuması:</b><br>İstemciden gönderilen TCP Segmentleri, işletim sisteminin alt katmanında birleşerek <b>Soket Alım Tamponuna (Receive Buffer)</b> doldurulmuştur. Programımız bu byte verisini uygulamanın içerisine taşır.`, 'server');
            serverState = 4; enableButton('server', 5);
        }, 700);

    } else if (action === 'send') {
        updateLog('server', 'normal', 'send() komutu çalıştırılıyor. HTML dosyası Encoding işleminden geçti.');
        disableButton('server', 5);
        dataPacket.innerHTML = '<i class="fa-solid fa-code packet-icon"></i><span class="packet-label">HTML_PAYLOAD</span>';
        dataPacket.style.opacity = '1';
        dataPacket.className = 'packet animate-down';
        updateInfoBoard(`<b>send() & close():</b><br>HTML dosyası ağ katmanına gönderilir. Hedefe gidip gitmediğinin garantisi TCP protokolü (ACK onayları) ile sağlanır. Gönderim bittiğinde sunucu kanalı <span class="highlight">close()</span> ile mühürlenir.`, 'server');
        setTimeout(() => {
            dataPacket.style.opacity = '0';
            updateLog('server', 'normal', 'close() -> File Descriptor (FD) işletim sistemine iade edildi.');
            updateStatus('server', ''); serverState = 5;
            badgeS.classList.remove('show-badge');
            sLabel.innerHTML = 'Sunucu<br><small>Graceful Close (Kapalı)</small>';
            enableButton('client', 4);
        }, 2000);
    }
}

// ==========================================
// İSTEMCİ (CLIENT)
// ==========================================
function clientAction(action) {
    if (action === 'socket') {
        clientState = 1;
        updateLog('client', 'normal', 'socket(AF_INET, SOCK_STREAM) nesnesi üretildi.');
        updateInfoBoard(`<b>socket() - TCP Nesnesi İmzası:</b><br>İstemci makine, ağa çıkış yapmak ve veri paketlemesini TCP spesifikasyonlarına göre gerçekleştirebilmek için işletim sisteminden mantıksal bir soket çıkış ucu talep eder.`, 'client');
        disableButton('client', 1); enableButton('client', 2); updateStatus('client', 'active');
        nodeClient.classList.remove('dimmed');
        cLabel.innerHTML = 'İstemci<br><small>FD Alındı</small>';

    } else if (action === 'connect') {
        if (serverState < 3) { updateLog('client', 'error', 'ConnectionRefusedError: Hedef adreste hiçbir Socket listen() yapmıyor.'); return; }
        updateLog('client', 'normal', 'connect(127.0.0.1, 8080) isteği gönderildi. SYN Gönderiliyor...');
        disableButton('client', 2);
        connectionTunnel.classList.add('open');
        setTimeout(() => {
            connectionTunnel.classList.add('flow-active');
            updateLog('client', 'success', 'TCP 3-Way Handshake tamamlandı. Bağlantı (Established) durumunda!');
            updateLog('server', 'success', 'accept() Engelden (Block) çıktı. Bağlantı kabul edildi.');
            updateStatus('server', 'active');
            sRadar.classList.remove('active');
            badgeS.innerText = 'ESTABLISHED';
            badgeS.style.background = 'rgba(52, 211, 153, 0.9)';
            badgeC.innerText = 'ESTABLISHED';
            badgeC.style.background = 'rgba(52, 211, 153, 0.9)';
            badgeC.classList.add('show-badge');
            cLabel.innerHTML = 'İstemci<br><small>Ephemeral Port: 51280</small>';
            updateInfoBoard(`<b>connect() - Güvenli Tünel (TCP Session):</b><br>Ağ kartları arka planda <span class="highlight">SYN -> SYN-ACK -> ACK</span> paketlerini takas ederek iletişimi garantiledi. Artık iki taraf da birbirine veri ilettiğinde hiçbir paketin kaybolmayacağı garantili, Full-Duplex bir oturum açıldı.`, 'client');
            clientState = 2; enableButton('client', 3); enableButton('server', 4);
        }, 1000);

    } else if (action === 'send') {
        updateLog('client', 'normal', 'send() -> Buffer verisi TCP Fragmentlerine ayrılıyor.');
        disableButton('client', 3);
        dataPacket.innerHTML = '<i class="fa-solid fa-bolt packet-icon"></i><span class="packet-label">GET / HTTP/1.1</span>';
        dataPacket.style.opacity = '1';
        dataPacket.className = 'packet animate-up';
        updateInfoBoard(`<b>send() - Tampona İtme:</b><br>İstemci "GET / HTTP/1.1" dizisini TCP segmentlerine paketleyip sunucu hedefine işletim ağacı üzerinden enjekte etti.`, 'client');
        setTimeout(() => {
            dataPacket.style.opacity = '0';
            clientState = 3;
            updateLog('server', 'info', "Tünelden bir Stream ulaştı. recv() çağrısı ile alabilirsiniz.");
        }, 1500);

    } else if (action === 'recv') {
        if (serverState < 5) { updateLog('client', 'error', 'Hata: Okunabilecek hiçbir bayt Kernel\'da mevcut değil.'); return; }
        updateLog('client', 'normal', 'recv() - TCP tamponu taranıyor...');
        disableButton('client', 4);
        setTimeout(() => {
            updateLog('client', 'success', 'Gelen Byte Stream hatasız şekilde UTF-8 ile çözümlendi.');
            updateInfoBoard(`<b>recv() - Decode & Parse:</b><br>Paket tam ve kayıpsız ulaştı. Sunucunun gönderdiği ham (raw) bayt dizisi, istemcinin yazılım katmanında <span class="highlight">utf-8</span> ile Decode edildiğinde orijinal HTML verisini oluşturur.`, 'client');
            clientState = 4; enableButton('client', 5);
        }, 800);

    } else if (action === 'close') {
        updateLog('client', 'normal', 'close() -> 4-Way Handshake kapanış süreci başladı.');
        disableButton('client', 5);
        connectionTunnel.classList.remove('flow-active');
        connectionTunnel.classList.remove('open');
        updateStatus('client', '');
        badgeC.classList.remove('show-badge');
        cLabel.innerHTML = 'İstemci<br><small>Graceful Close (Kapalı)</small>';
        updateInfoBoard(`<b>İşletim sistemi soket nesnelerinin hayat döngüsü tamamlandı ve tünel yıkıldı.</b>`, 'client');
        updateLog('client', 'success', 'Modüler HTML ekrana çizdiriliyor...');
        setTimeout(() => { document.getElementById('browser-modal').style.display = 'block'; }, 1000);
    }
}

function closeModal() { document.getElementById('browser-modal').style.display = 'none'; }