script.js

// Sayfadaki ana elemanlar tek yerde tutuyorum.
const elemanlar = {
    metinKutusu: document.getElementById("metinKutusu"),
    sikistirButonu: document.getElementById("sikistirButonu"),
    adimButonu: document.getElementById("adimButonu"),
    ornekButonu: document.getElementById("ornekButonu"),
    temizleButonu: document.getElementById("temizleButonu"),
    algoritmaListesi: document.getElementById("algoritmaListesi"),
    teoriBaslik: document.getElementById("teoriBaslik"),
    teoriMetni: document.getElementById("teoriMetni"),
    avantajListesi: document.getElementById("avantajListesi"),
    dezavantajListesi: document.getElementById("dezavantajListesi"),
    uyariAlani: document.getElementById("uyariAlani"),
    orijinalUzunluk: document.getElementById("orijinalUzunluk"),
    sikismisUzunluk: document.getElementById("sikismisUzunluk"),
    sikistirmaOrani: document.getElementById("sikistirmaOrani"),
    ortalamaKodUzunlugu: document.getElementById("ortalamaKodUzunlugu"),
    ciktiAlani: document.getElementById("ciktiAlani"),
    ciktiAciklama: document.getElementById("ciktiAciklama"),
    frekansPaneli: document.getElementById("frekansPaneli"),
    kodPaneli: document.getElementById("kodPaneli"),
    gorselAlan: document.getElementById("gorselAlan"),
    gorselAciklama: document.getElementById("gorselAciklama"),
    adimAlani: document.getElementById("adimAlani")
};

let seciliAlgoritma = "huffman";
let sonIslem = null;
let huffmanAnimasyonZamani = null;

const algoritmaBilgileri = {
    huffman: {
        ad: "Huffman Coding",
        teori: "Huffman Coding, karakter frekanslarına göre değişken uzunluklu bit kodları üretir. Sık kullanılan karakterler kısa, az kullanılan karakterler daha uzun kodlarla temsil edilir.",
        avantajlar: ["Kayıpsız sıkıştırma yapar.", "Frekans farkı yüksek metinlerde başarılıdır.", "Teorik olarak anlaşılır ve güçlü bir yöntemdir."],
        dezavantajlar: ["Ağaç bilgisinin de saklanması gerekir.", "Çok kısa metinlerde ek yük yüzünden oran düşük olabilir.", "Kod üretimi basit sözlük yöntemlerine göre daha ayrıntılıdır."]
    },
    lzw: {
        ad: "LZW",
        teori: "LZW, metinde tekrar eden karakter dizilerini sözlüğe ekler ve daha sonra bu dizileri tek kodla temsil eder. Sözlük işlem sırasında dinamik olarak büyür.",
        avantajlar: ["Tekrar eden kelime ve parçaları iyi yakalar.", "Çözme işlemi için başlangıç sözlüğü yeterlidir.", "GIF gibi formatlarda kullanılmış pratik bir yöntemdir."],
        dezavantajlar: ["Sözlük büyüdükçe bellek ihtiyacı artabilir.", "Rastgele metinlerde beklenen kazanç oluşmayabilir.", "Çıktı insan tarafından doğrudan okunabilir değildir."]
    }
};

const ornekMetinler = {
    huffman: "algoritma dersi veri sıkıştırma veri veri algoritma huffman huffman kodlama",
    lzw: "HONDACIVICHONDACIVIC"
};

function teoriAlaniniGuncelle() {
    const bilgi = algoritmaBilgileri[seciliAlgoritma];
    elemanlar.teoriBaslik.textContent = bilgi.ad;
    elemanlar.teoriMetni.textContent = bilgi.teori;
    listeDoldur(elemanlar.avantajListesi, bilgi.avantajlar);
    listeDoldur(elemanlar.dezavantajListesi, bilgi.dezavantajlar);
}

function listeDoldur(liste, maddeler) {
    liste.innerHTML = "";
    maddeler.forEach((madde) => {
        const li = document.createElement("li");
        li.textContent = madde;
        liste.appendChild(li);
    });
}

function metniDogrula(metin) {
    if (metin.length === 0) {
        elemanlar.uyariAlani.textContent = "Lütfen sıkıştırılacak bir metin girin.";
        return false;
    }

    elemanlar.uyariAlani.textContent = metin.length < 12
        ? "Not: Çok kısa metinlerde sıkıştırma oranı düşük veya negatif görünebilir."
        : "";

    return true;
}

function bitUzunluguHesapla(metin) {
    // basitçe her karakteri 8 bit kabul ediyoruz
    return [...metin].length * 8;
}

function sikistir() {
    if (huffmanAnimasyonZamani) {
        clearInterval(huffmanAnimasyonZamani);
        huffmanAnimasyonZamani = null;
    }

    const metin = elemanlar.metinKutusu.value;
    if (!metniDogrula(metin)) return;

    const islemler = {
        huffman: huffmanSikistir,
        lzw: lzwSikistir
    };

    sonIslem = islemler[seciliAlgoritma](metin);
    sonucKartlariniGuncelle(bitUzunluguHesapla(metin), sonIslem.uzunluk, sonIslem.ortalamaKodUzunlugu || 0);
    elemanlar.ciktiAlani.textContent = sonIslem.cikti;
    elemanlar.ciktiAciklama.textContent = `${algoritmaBilgileri[seciliAlgoritma].ad} algoritmasının ürettiği çıktı. Doğrulama ${sonIslem.dogrulandi ? "başarılı" : "başarısız"}.`;
    if (!sonIslem.dogrulandi) {
        elemanlar.uyariAlani.textContent = "Uyarı: Çıktı geri çözüldüğünde orijinal metinle eşleşmedi.";
    }
    sagPaneliGuncelle(sonIslem);
    elemanlar.gorselAciklama.textContent = sonIslem.gorselAciklama;
    elemanlar.gorselAlan.classList.remove("bos-durum");
    elemanlar.gorselAlan.innerHTML = sonIslem.gorselHtml;
    huffmanAgacBaslangicKonumunuAyarla();
    elemanlar.adimAlani.classList.add("bos-durum");
    elemanlar.adimAlani.textContent = "Adımları görmek için “Adım Adım Göster” butonuna basın.";
}

function sonucKartlariniGuncelle(orijinalBit, sikismisBit, ortalamaKod) {
    const oran = orijinalBit === 0 ? 0 : ((1 - sikismisBit / orijinalBit) * 100);
    elemanlar.orijinalUzunluk.textContent = orijinalBit;
    elemanlar.sikismisUzunluk.textContent = sikismisBit;
    elemanlar.sikistirmaOrani.textContent = `%${oran.toFixed(1)}`;
    elemanlar.ortalamaKodUzunlugu.textContent = ortalamaKod ? ortalamaKod.toFixed(2) : "0";
}

function sagPaneliGuncelle(sonuc) {
    elemanlar.frekansPaneli.classList.remove("bos-durum");
    elemanlar.kodPaneli.classList.remove("bos-durum");
    elemanlar.frekansPaneli.innerHTML = sonuc.frekansHtml || `<p class="panel-notu">Bu algoritma için frekans tablosu kullanılmıyor.</p>`;
    elemanlar.kodPaneli.innerHTML = sonuc.kodHtml || `<p class="panel-notu">Bu algoritma için Huffman kod tablosu üretilmez.</p>`;
}

function huffmanSikistir(metin) {
    if (metin.length === 0) {
        return {
            cikti: "",
            uzunluk: 0,
            gorselHtml: `<p class="panel-notu">Boş metinde ağaç oluşmaz.</p>`,
            gorselAciklama: "Huffman için boş metinde sıkıştırılacak karakter yoktur.",
            frekansHtml: `<p class="panel-notu">Frekans yok.</p>`,
            kodHtml: `<p class="panel-notu">Kod yok.</p>`,
            ortalamaKodUzunlugu: 0,
            dogrulandi: true,
            huffmanAdimlari: [],
            adimlar: ["Boş metinde işlenecek karakter yok."]
        };
    }

    const frekanslar = frekansHesapla(metin);
    const huffmanSonucu = huffmanAgaciOlustur(frekanslar);
    const agac = huffmanSonucu.kok;
    const kodlar = huffmanKodlariUret(agac);

    const bitCikti = [...metin].map((karakter) => kodlar[karakter]).join("");
    const karakterSayisi = [...metin].length;
    const frekansHtml = frekansTablosuOlustur(frekanslar, karakterSayisi);
    const kodHtml = huffmanKodTablosuOlustur(frekanslar, kodlar);
    const agacHtml = huffmanAgacGorseli(agac);
    const ortalamaKodUzunlugu = bitCikti.length / karakterSayisi;
    const cozulmusMetin = huffmanCoz(bitCikti, agac);

    return {
        cikti: bitCikti,
        uzunluk: bitCikti.length,
        gorselHtml: agacHtml,
        gorselAciklama: "Huffman görseli frekans tablosunu ve gerçek binary tree yapısını SVG ile gösterir.",
        frekansHtml,
        kodHtml,
        ortalamaKodUzunlugu,
        dogrulandi: cozulmusMetin === metin,
        huffmanAdimlari: huffmanSonucu.birlesmeAdimlari,
        adimlar: Object.entries(frekanslar)
            .sort((a, b) => b[1] - a[1])
            .map(([karakter, adet]) => `“${karakter === " " ? "boşluk" : karakter}” karakterinin frekansı ${adet}; kodu ${kodlar[karakter]}.`)
    };
}

function frekansHesapla(metin) {
    const frekanslar = {};
    // frekansları sayıyoruz
    [...metin].forEach((karakter) => {
        frekanslar[karakter] = (frekanslar[karakter] || 0) + 1;
    });
    return frekanslar;
}

function huffmanAgaciOlustur(frekanslar) {
    let siraNo = 0;
    let dugumler = Object.entries(frekanslar).map(([karakter, frekans]) => ({
        id: `h${siraNo++}`,
        karakter,
        frekans,
        sol: null,
        sag: null,
        derinlik: 0
    }));
    const birlesmeAdimlari = [];

    if (dugumler.length === 1) {
        dugumler[0].derinlik = 0;
        return {
            kok: dugumler[0],
            birlesmeAdimlari
        };
    }

    while (dugumler.length > 1) {
        // en küçük iki düğümü alıyoruz
        dugumler.sort((a, b) => a.frekans - b.frekans || dugumEtiketi(a).localeCompare(dugumEtiketi(b), "tr"));
        const sol = dugumler.shift();
        const sag = dugumler.shift();
        const yeniDugum = {
            id: `h${siraNo++}`,
            karakter: null,
            frekans: sol.frekans + sag.frekans,
            sol,
            sag,
            derinlik: 0
        };

        birlesmeAdimlari.push({
            sol: dugumOzeti(sol),
            sag: dugumOzeti(sag),
            yeni: dugumOzeti(yeniDugum)
        });
        dugumler.push(yeniDugum);
    }

    const kok = dugumler[0];
    huffmanDerinlikleriniYaz(kok, 0);

    return {
        kok,
        birlesmeAdimlari
    };
}

function huffmanKodlariUret(kok) {
    const kodlar = {};
    huffmanKodlariniYaz(kok, "", kodlar);
    return kodlar;
}

function huffmanCoz(bitler, kok) {
    if (!kok) return "";
    if (kok.karakter !== null) {
        return Array(bitler.length).fill(kok.karakter).join("");
    }

    let sonuc = "";
    let dugum = kok;

    for (const bit of bitler) {
        dugum = bit === "0" ? dugum.sol : dugum.sag;
        if (!dugum) return "";

        if (dugum.karakter !== null) {
            sonuc += dugum.karakter;
            dugum = kok;
        }
    }

    return sonuc;
}

function huffmanKodlariniYaz(dugum, kod, kodlar) {
    if (!dugum) return;

    if (dugum.karakter !== null) {
        kodlar[dugum.karakter] = kod || "0";
        return;
    }

    huffmanKodlariniYaz(dugum.sol, `${kod}0`, kodlar);
    huffmanKodlariniYaz(dugum.sag, `${kod}1`, kodlar);
}

function huffmanDerinlikleriniYaz(dugum, derinlik) {
    if (!dugum) return;
    dugum.derinlik = derinlik;
    huffmanDerinlikleriniYaz(dugum.sol, derinlik + 1);
    huffmanDerinlikleriniYaz(dugum.sag, derinlik + 1);
}

function frekansTablosuOlustur(frekanslar, toplamKarakter) {
    const satirlar = Object.entries(frekanslar)
        .sort((a, b) => b[1] - a[1])
        .map(([karakter, adet]) => `
            <tr>
                <td>${htmlKacir(karakter === " " ? "boşluk" : karakter)}</td>
                <td>${adet}</td>
                <td>%${((adet / toplamKarakter) * 100).toFixed(1)}</td>
            </tr>
        `).join("");

    return `
        <table class="mini-tablo">
            <thead><tr><th>Karakter</th><th>Frekans</th><th>Olasılık</th></tr></thead>
            <tbody>${satirlar}</tbody>
        </table>
    `;
}

function huffmanKodTablosuOlustur(frekanslar, kodlar) {
    const satirlar = Object.entries(kodlar)
        .sort((a, b) => a[0].localeCompare(b[0], "tr"))
        .map(([karakter, kod]) => `
            <tr>
                <td>${htmlKacir(karakter === " " ? "boşluk" : karakter)}</td>
                <td>${frekanslar[karakter]}</td>
                <td><code>${kod}</code></td>
            </tr>
        `).join("");

    return `
        <table class="mini-tablo">
            <thead><tr><th>Karakter</th><th>Frekans</th><th>Kod</th></tr></thead>
            <tbody>${satirlar}</tbody>
        </table>
    `;
}

function huffmanAgacGorseli(kok) {
    return `
        <section class="huffman-agac-karti">
            <div class="huffman-kart-ust">
                <div>
                    <h3>Huffman Ağacı</h3>
                    <p>Node'lar gerçek Huffman veri yapısından üretilir; sol dal 0, sağ dal 1 değerini temsil eder.</p>
                </div>
            </div>
            <div id="huffmanAgacKapsayici" class="huffman-agac-kapsayici">
                ${huffmanAgaciCiz(kok)}
            </div>
            ${huffmanLegendOlustur()}
        </section>
    `;
}

function huffmanAgacBaslangicKonumunuAyarla() {
    setTimeout(() => {
        const kapsayici = document.getElementById("huffmanAgacKapsayici");
        if (!kapsayici || typeof kapsayici.querySelector !== "function") return;

        const kokDugum = kapsayici.querySelector(".kok-dugum");
        const konum = kokDugum ? kokDugum.getAttribute("transform") : "";
        const eslesme = konum.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);

        if (eslesme) {
            const kokX = Number(eslesme[1]);
            kapsayici.scrollLeft = Math.max(0, kokX - kapsayici.clientWidth / 2);
        } else {
            kapsayici.scrollLeft = Math.max(0, (kapsayici.scrollWidth - kapsayici.clientWidth) / 2);
        }

        kapsayici.scrollTop = 0;
    }, 0);
}

function huffmanAgaciCiz(kok) {
    const konumlar = dugumKonumlariniHesapla(kok);
    const genislik = Math.max(760, konumlar.genislik);
    const yukseklik = Math.max(560, konumlar.yukseklik);
    const cizgiler = [];
    const dalEtiketleri = [];
    const dugumler = [];

    huffmanAgaciniOrtala(kok, genislik);

    huffmanDugumleriniGez(kok, (dugum) => {
        if (dugum.sol) {
            cizgiler.push(svgCizgiOlustur(dugum, dugum.sol));
            dalEtiketleri.push(svgDalEtiketiOlustur(dugum, dugum.sol, "0"));
        }
        if (dugum.sag) {
            cizgiler.push(svgCizgiOlustur(dugum, dugum.sag));
            dalEtiketleri.push(svgDalEtiketiOlustur(dugum, dugum.sag, "1"));
        }
        dugumler.push(svgDugumOlustur(dugum, dugum === kok));
    });

    return `
        <svg id="huffmanSvg" class="huffman-svg" width="${genislik}" height="${yukseklik}" viewBox="0 0 ${genislik} ${yukseklik}" data-genislik="${genislik}" data-yukseklik="${yukseklik}" role="img" aria-label="Huffman binary tree çizimi">
            <defs>
                <style>
                    .huffman-cizgiler line{stroke:#8ea0b5;stroke-width:1.8;stroke-linecap:round;opacity:.88}
                    .huffman-dal-etiketi circle{fill:#fff;stroke:#c8d6e5;stroke-width:1.4}
                    .huffman-dal-etiketi text{fill:#31516f;font:800 12px Arial,Helvetica,sans-serif}
                    .huffman-dugum circle{stroke-width:2.5}
                    .huffman-dugum.kok-dugum circle{fill:#7c3aed;stroke:#5b21b6}
                    .huffman-dugum.ic-dugum circle{fill:#2563eb;stroke:#1d4ed8}
                    .huffman-dugum.ara-dugum circle{fill:#16a34a;stroke:#15803d}
                    .huffman-dugum.yaprak-dugum circle{fill:#f59e0b;stroke:#d97706}
                    .huffman-dugum.karakter-dugum circle{stroke:#94a3b8}
                    .huffman-dugum text{font-family:Arial,Helvetica,sans-serif;pointer-events:none}
                    .dugum-karakter{fill:#fff;font-size:12px;font-weight:800}
                    .dugum-frekans{fill:rgba(255,255,255,.86);font-size:10px;font-weight:700}
                </style>
            </defs>
            <g class="huffman-cizgiler">${cizgiler.join("")}</g>
            <g class="huffman-dal-etiketleri">${dalEtiketleri.join("")}</g>
            <g class="huffman-dugumler">${dugumler.join("")}</g>
        </svg>
    `;
}

function huffmanAgaciniOrtala(kok, genislik) {
    const xDegerleri = [];
    huffmanDugumleriniGez(kok, (dugum) => xDegerleri.push(dugum.x));

    const enSol = Math.min(...xDegerleri);
    const enSag = Math.max(...xDegerleri);
    const agacGenisligi = enSag - enSol;
    const kaydirma = (genislik - agacGenisligi) / 2 - enSol;

    huffmanDugumleriniGez(kok, (dugum) => {
        dugum.x += kaydirma;
    });
}

function dugumKonumlariniHesapla(kok) {
    const yapraklar = [];
    let enBuyukDerinlik = 0;
    const tahminiYaprakSayisi = huffmanYaprakSayisi(kok);
    const yatayBosluk = tahminiYaprakSayisi > 24 ? 84 : tahminiYaprakSayisi > 14 ? 92 : 104;
    const dikeyBosluk = 100;
    const kenarBosluk = 80;

    function yaprakSirasiVer(dugum, derinlik) {
        enBuyukDerinlik = Math.max(enBuyukDerinlik, derinlik);
        if (!dugum.sol && !dugum.sag) {
            yapraklar.push(dugum);
            dugum.x = kenarBosluk + (yapraklar.length - 1) * yatayBosluk;
            dugum.y = kenarBosluk + derinlik * dikeyBosluk;
            return dugum.x;
        }

        const solX = yaprakSirasiVer(dugum.sol, derinlik + 1);
        const sagX = yaprakSirasiVer(dugum.sag, derinlik + 1);
        dugum.x = (solX + sagX) / 2;
        dugum.y = kenarBosluk + derinlik * dikeyBosluk;
        return dugum.x;
    }

    yaprakSirasiVer(kok, 0);

    return {
        yaprakSayisi: yapraklar.length,
        derinlik: enBuyukDerinlik,
        genislik: Math.max(760, (Math.max(1, yapraklar.length) - 1) * yatayBosluk + kenarBosluk * 2),
        yukseklik: Math.max(560, enBuyukDerinlik * dikeyBosluk + kenarBosluk * 2)
    };
}

function huffmanYaprakSayisi(dugum) {
    if (!dugum) return 0;
    if (!dugum.sol && !dugum.sag) return 1;
    return huffmanYaprakSayisi(dugum.sol) + huffmanYaprakSayisi(dugum.sag);
}

function huffmanDugumleriniGez(dugum, islem) {
    if (!dugum) return;
    islem(dugum);
    huffmanDugumleriniGez(dugum.sol, islem);
    huffmanDugumleriniGez(dugum.sag, islem);
}

function svgCizgiOlustur(ust, alt) {
    const yaricap = 24;
    const dx = alt.x - ust.x;
    const dy = alt.y - ust.y;
    const uzunluk = Math.sqrt(dx * dx + dy * dy) || 1;
    const x1 = ust.x + (dx / uzunluk) * yaricap;
    const y1 = ust.y + (dy / uzunluk) * yaricap;
    const x2 = alt.x - (dx / uzunluk) * yaricap;
    const y2 = alt.y - (dy / uzunluk) * yaricap;
    return `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}"></line>`;
}

function svgDalEtiketiOlustur(ust, alt, etiket) {
    const x = (ust.x + alt.x) / 2;
    const y = (ust.y + alt.y) / 2 - 8;
    return `
        <g class="huffman-dal-etiketi" transform="translate(${x}, ${y})">
            <circle r="12"></circle>
            <text y="4" text-anchor="middle">${etiket}</text>
        </g>
    `;
}

function svgDugumOlustur(dugum, kokMu) {
    const etiket = htmlKacir(dugumKisaEtiketi(dugum));
    const frekans = htmlKacir(dugum.frekans);
    const sinif = huffmanDugumSinifi(dugum, kokMu);
    const anaMetin = dugum.karakter === null ? frekans : `${etiket} (${frekans})`;

    return `
        <g class="huffman-dugum ${sinif}" transform="translate(${dugum.x}, ${dugum.y})">
            <circle r="24"></circle>
            <text class="dugum-karakter" y="4" text-anchor="middle">${anaMetin}</text>
        </g>
    `;
}

function huffmanDugumSinifi(dugum, kokMu) {
    if (kokMu) return "kok-dugum";
    if (dugum.karakter !== null) return "yaprak-dugum karakter-dugum";
    if (dugum.derinlik === 1) return "ic-dugum";
    return "ara-dugum";
}

function huffmanLegendOlustur() {
    const maddeler = [
        ["kok", "Kök Düğüm"],
        ["ic", "İç Düğüm"],
        ["ara", "Ara Düğüm"],
        ["yaprak", "Yaprak Düğüm"],
        ["karakter", "Karakter (Frekans)"]
    ];

    return `
        <div class="huffman-legend">
            ${maddeler.map(([sinif, yazi]) => `
                <span><i class="${sinif}"></i>${yazi}</span>
            `).join("")}
        </div>
    `;
}

function dugumEtiketi(dugum) {
    if (dugum.karakter === null) return "*";
    if (dugum.karakter === " ") return "boşluk";
    if (dugum.karakter === "\n") return "satır";
    return dugum.karakter;
}

function dugumKisaEtiketi(dugum) {
    if (dugum.karakter === null) return "*";
    if (dugum.karakter === " ") return "boşluk";
    if (dugum.karakter === "\n") return "↵";
    return dugum.karakter;
}

function dugumOzeti(dugum) {
    return {
        karakter: dugumEtiketi(dugum),
        frekans: dugum.frekans
    };
}

// yeni LZW kodları, karakter kodlarıyla karışmasın diye büyükten başlıyor
const LZW_YENI_KOD_BASLANGICI = 1114112;

function lzwSikistir(metin) {
    if (metin.length === 0) {
        return {
            cikti: "",
            uzunluk: 0,
            gorselHtml: lzwSozlukTablosu([]),
            gorselAciklama: "LZW için boş metinde sözlüğe eklenecek parça yoktur.",
            ortalamaKodUzunlugu: 0,
            dogrulandi: true,
            adimlar: ["Boş metinde işlenecek karakter yok."]
        };
    }

    const sozluk = lzwBaslangicSozluguOlustur(metin);
    const eklenenler = [];
    let kod = LZW_YENI_KOD_BASLANGICI;
    let parca = "";
    const ciktiKodlari = [];

    for (const karakter of metin) {
        const aday = parca + karakter;
        if (sozluk[aday] !== undefined) {
            parca = aday;
        } else {
            ciktiKodlari.push(sozluk[parca]);
            // yeni parçayı sözlüğe ekliyoruz
            sozluk[aday] = kod;
            eklenenler.push({ ifade: aday, kod });
            kod++;
            parca = karakter;
        }
    }

    if (parca !== "") {
        ciktiKodlari.push(sozluk[parca]);
    }

    const gorselHtml = lzwSozlukTablosu(eklenenler);
    const sikismisBitUzunlugu = lzwBitUzunlugu(ciktiKodlari);
    const karakterSayisi = [...metin].length;
    const cozulmusMetin = lzwCoz(ciktiKodlari);

    return {
        cikti: ciktiKodlari.join(" - "),
        uzunluk: sikismisBitUzunlugu,
        gorselHtml,
        gorselAciklama: "LZW görseli algoritmanın işlem sırasında sözlüğe eklediği yeni ifadeleri listeler.",
        ortalamaKodUzunlugu: karakterSayisi === 0 ? 0 : sikismisBitUzunlugu / karakterSayisi,
        dogrulandi: cozulmusMetin === metin,
        adimlar: eklenenler.map((satir) => `Sözlüğe “${satir.ifade}” ifadesi ${satir.kod} koduyla eklendi.`)
    };
}

function lzwBaslangicSozluguOlustur(metin) {
    const sozluk = {};

    // başlangıçta tek karakterler var
    for (let i = 0; i < 256; i++) {
        sozluk[String.fromCharCode(i)] = i;
    }

    // Türkçe gibi karakterleri de kendi karakter koduyla ekliyoruz
    for (const karakter of metin) {
        if (sozluk[karakter] === undefined) {
            sozluk[karakter] = karakter.codePointAt(0);
        }
    }

    return sozluk;
}

function lzwBitUzunlugu(kodlar) {
    if (!kodlar.length) return 0;

    const enBuyukKod = Math.max(...kodlar);
    const kodBitSayisi = Math.max(1, Math.ceil(Math.log2(enBuyukKod + 1)));
    return kodlar.length * kodBitSayisi;
}

function lzwCoz(kodlar) {
    if (!kodlar.length) return "";

    const sozluk = lzwBaslangicCozmeSozluguOlustur();
    let kod = LZW_YENI_KOD_BASLANGICI;
    let onceki = lzwSozluktenOku(sozluk, kodlar[0]);
    if (onceki === undefined) return "";

    let sonuc = onceki;

    for (let i = 1; i < kodlar.length; i++) {
        const gelenKod = kodlar[i];
        let giris = lzwSozluktenOku(sozluk, gelenKod);

        if (giris === undefined && gelenKod === kod) {
            // decode kısmında özel LZW durumunu kontrol ediyoruz
            giris = onceki + [...onceki][0];
        }

        if (giris === undefined) return "";

        sonuc += giris;
        // yeni parçayı sözlüğe ekliyoruz
        sozluk[kod] = onceki + [...giris][0];
        kod++;
        onceki = giris;
    }

    return sonuc;
}

function lzwBaslangicCozmeSozluguOlustur() {
    const sozluk = {};

    for (let i = 0; i < 256; i++) {
        sozluk[i] = String.fromCharCode(i);
    }

    return sozluk;
}

function lzwSozluktenOku(sozluk, kod) {
    if (sozluk[kod] !== undefined) return sozluk[kod];

    if (Number.isInteger(kod) && kod >= 0 && kod < LZW_YENI_KOD_BASLANGICI) {
        const karakter = String.fromCodePoint(kod);
        sozluk[kod] = karakter;
        return karakter;
    }

    return undefined;
}

function lzwSozlukTablosu(eklenenler) {
    const satirlar = eklenenler.length
        ? eklenenler.map((satir) => `
            <tr>
                <td>${satir.kod}</td>
                <td>${htmlKacir(satir.ifade)}</td>
            </tr>
        `).join("")
        : `<tr><td colspan="2">Yeni sözlük kaydı oluşmadı.</td></tr>`;

    return `
        <table class="mini-tablo">
            <thead><tr><th>Kod</th><th>Sözlüğe Eklenen İfade</th></tr></thead>
            <tbody>${satirlar}</tbody>
        </table>
    `;
}

function adimlariGoster() {
    if (!sonIslem) {
        sikistir();
        if (!sonIslem) return;
    }

    if (huffmanAnimasyonZamani) {
        clearInterval(huffmanAnimasyonZamani);
        huffmanAnimasyonZamani = null;
    }

    if (seciliAlgoritma === "huffman") {
        huffmanBirlesmeAdimlariniGoster(sonIslem.huffmanAdimlari || []);
        return;
    }

    const adimlar = sonIslem.adimlar.length
        ? sonIslem.adimlar
        : ["Bu örnekte gösterilecek ek adım oluşmadı."];

    elemanlar.adimAlani.classList.remove("bos-durum");
    elemanlar.adimAlani.innerHTML = adimlar.map((adim, sira) => `
        <div class="adim-kutusu" style="animation-delay:${sira * 0.04}s">
            <strong>Adım ${sira + 1}</strong>
            <span>${htmlKacir(adim)}</span>
        </div>
    `).join("");
}

function huffmanBirlesmeAdimlariniGoster(adimlar) {
    elemanlar.adimAlani.classList.remove("bos-durum");
    elemanlar.adimAlani.innerHTML = `
        <div class="huffman-adim-baslik">
            <strong>Ağacın Oluşturulma Adımları</strong>
            <span>Frekansı en küçük iki node sırayla birleştirilir; tek kök kalınca 0 ve 1 yollarından kodlar üretilir.</span>
        </div>
        <div id="huffmanAdimListe" class="huffman-adim-liste"></div>
    `;

    const liste = document.getElementById("huffmanAdimListe");

    if (!adimlar.length) {
        liste.innerHTML = `
            <div class="huffman-birlesme-karti">
                <strong>Tek node</strong>
                <span>Metinde yalnızca bir farklı karakter var. Bu karakterin kodu 0 olarak atanır.</span>
            </div>
        `;
        return;
    }

    let sira = 0;
    huffmanAdimKartiEkle(liste, adimlar[sira], sira);
    sira++;

    huffmanAnimasyonZamani = setInterval(() => {
        if (sira >= adimlar.length) {
            clearInterval(huffmanAnimasyonZamani);
            huffmanAnimasyonZamani = null;
            huffmanKokAdimiEkle(liste, adimlar[adimlar.length - 1]);
            return;
        }

        huffmanAdimKartiEkle(liste, adimlar[sira], sira);
        sira++;
    }, 850);
}

function huffmanAdimKartiEkle(liste, adim, sira) {
    const kart = document.createElement("div");
    kart.className = "huffman-birlesme-karti";
    kart.innerHTML = `
        <strong>Birleşme ${sira + 1}</strong>
        <div class="huffman-birlesme-akis">
            ${huffmanMiniDugum(adim.sol, "secili")}
            <span class="arti-isareti">+</span>
            ${huffmanMiniDugum(adim.sag, "secili")}
            <span class="ok-isareti">→</span>
            ${huffmanMiniDugum(adim.yeni, "yeni")}
        </div>
    `;
    liste.appendChild(kart);
}

function huffmanKokAdimiEkle(liste, sonAdim) {
    const kart = document.createElement("div");
    kart.className = "huffman-birlesme-karti kok-adimi";
    kart.innerHTML = `
        <strong>Sonuç</strong>
        <span>Kök frekansı ${htmlKacir(sonAdim.yeni.frekans)} oldu. Sol yollar 0, sağ yollar 1 okunarak Huffman kodları elde edilir.</span>
    `;
    liste.appendChild(kart);
}

function huffmanMiniDugum(dugum, durum) {
    return `
        <span class="mini-huffman-dugum ${durum}">
            <span>${htmlKacir(dugum.karakter)}</span>
            <small>${htmlKacir(dugum.frekans)}</small>
        </span>
    `;
}

function algoritmaSec(olay) {
    const buton = olay.target.closest(".algoritma-secenegi");
    if (!buton) return;

    if (huffmanAnimasyonZamani) {
        clearInterval(huffmanAnimasyonZamani);
        huffmanAnimasyonZamani = null;
    }

    seciliAlgoritma = buton.dataset.algoritma;
    document.querySelectorAll(".algoritma-secenegi").forEach((secenek) => {
        secenek.classList.toggle("aktif", secenek === buton);
    });
    teoriAlaniniGuncelle();
    elemanlar.uyariAlani.textContent = "";
    elemanlar.frekansPaneli.className = "tablo-panel bos-durum";
    elemanlar.frekansPaneli.textContent = "İşlem bekleniyor.";
    elemanlar.kodPaneli.className = "tablo-panel bos-durum";
    elemanlar.kodPaneli.textContent = "İşlem bekleniyor.";
    elemanlar.ciktiAciklama.textContent = "Algoritmayı çalıştırınca çıktı burada görünür.";
    elemanlar.ciktiAlani.textContent = "Henüz işlem yapılmadı.";
    elemanlar.gorselAciklama.textContent = "Seçilen algoritmanın iç işleyişi bu alanda gösterilir.";
    elemanlar.gorselAlan.className = "gorsel-alan bos-durum";
    elemanlar.gorselAlan.textContent = "Sıkıştırma işlemi bekleniyor.";
    elemanlar.adimAlani.className = "adim-alani bos-durum";
    elemanlar.adimAlani.textContent = "Adımları görmek için “Adım Adım Göster” butonuna basın.";
    sonIslem = null;
}

function ornekVeriYukle() {
    elemanlar.metinKutusu.value = ornekMetinler[seciliAlgoritma];
    elemanlar.uyariAlani.textContent = "";
    sikistir();
}

function temizle() {
    if (huffmanAnimasyonZamani) {
        clearInterval(huffmanAnimasyonZamani);
        huffmanAnimasyonZamani = null;
    }

    elemanlar.metinKutusu.value = "";
    elemanlar.uyariAlani.textContent = "";
    elemanlar.orijinalUzunluk.textContent = "0";
    elemanlar.sikismisUzunluk.textContent = "0";
    elemanlar.sikistirmaOrani.textContent = "%0";
    elemanlar.ortalamaKodUzunlugu.textContent = "0";
    elemanlar.ciktiAlani.textContent = "Henüz işlem yapılmadı.";
    elemanlar.frekansPaneli.className = "tablo-panel bos-durum";
    elemanlar.frekansPaneli.textContent = "İşlem bekleniyor.";
    elemanlar.kodPaneli.className = "tablo-panel bos-durum";
    elemanlar.kodPaneli.textContent = "İşlem bekleniyor.";
    elemanlar.gorselAlan.className = "gorsel-alan bos-durum";
    elemanlar.gorselAlan.textContent = "Sıkıştırma işlemi bekleniyor.";
    elemanlar.adimAlani.className = "adim-alani bos-durum";
    elemanlar.adimAlani.textContent = "Adımları görmek için “Adım Adım Göster” butonuna basın.";
    sonIslem = null;
}

// ekrana yazarken özel karakterler sorun çıkarmasın diye
function htmlKacir(deger) {
    return String(deger)
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#039;");
}

elemanlar.sikistirButonu.addEventListener("click", sikistir);
elemanlar.adimButonu.addEventListener("click", adimlariGoster);
elemanlar.ornekButonu.addEventListener("click", ornekVeriYukle);
elemanlar.temizleButonu.addEventListener("click", temizle);
elemanlar.algoritmaListesi.addEventListener("click", algoritmaSec);

teoriAlaniniGuncelle();