@extends('layouts.app')
@section('title', 'Wort Häufigkeit – Wörter zählen & analysieren | kotsch.tech')
@section('meta_description', 'Wort- und Zeichenhäufigkeit im Text analysieren: Rangfolge, Wortwolken-Daten, Stoppwörter filtern, Exportieren. Kostenlos und lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="Wort Häufigkeit, Wörter zählen, Textanalyse, häufigste Wörter, Wortfrequenz, Stoppwörter">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.wf-bar-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.wf-bar-row:last-child { border-bottom:none; }
.wf-rank { font-size:0.72rem; font-weight:700; color:var(--muted); min-width:24px; text-align:right; }
.wf-word { font-family:'JetBrains Mono',monospace; font-weight:700; min-width:120px; }
.wf-bar-wrap { flex:1; background:var(--line); border-radius:999px; height:10px; overflow:hidden; }
.wf-bar-fill { height:100%; background:var(--accent); border-radius:999px; transition:width 0.3s; }
.wf-count { font-size:0.82rem; font-weight:700; color:var(--accent); min-width:36px; text-align:right; }
.wf-pct { font-size:0.72rem; color:var(--muted); min-width:44px; text-align:right; }
.char-chip { display:inline-flex; flex-direction:column; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); min-width:56px; }
.char-chip .ch { font-family:'JetBrains Mono',monospace; font-size:1.2rem; font-weight:900; }
.char-chip .cn { font-size:0.72rem; color:var(--muted); font-weight:700; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-chart-bar"></i> Text</span>
        <h1 class="tool-h1">Wort<span>häufigkeit.</span></h1>
        <p class="tool-sub">Welche Wörter kommen wie oft vor? Rangfolge, Balken und Zeichen-Analyse.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Text eingeben</label>
            <textarea class="t-textarea" id="wf-inp" placeholder="Text hier einfügen…" style="min-height:160px" oninput="analyze()"></textarea>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:10px">
            <div class="t-field" style="flex:1;min-width:140px">
                <label class="t-label">Top N Wörter</label>
                <div style="display:flex;align-items:center;gap:10px">
                    <input type="range" class="t-range" id="wf-top" min="5" max="50" value="20" oninput="document.getElementById('wf-top-val').textContent=this.value;analyze()">
                    <span id="wf-top-val" style="font-weight:900;color:var(--accent);min-width:24px">20</span>
                </div>
            </div>
            <div class="t-field" style="flex:1;min-width:140px">
                <label class="t-label">Mindestlänge (Zeichen)</label>
                <div style="display:flex;align-items:center;gap:10px">
                    <input type="range" class="t-range" id="wf-minlen" min="1" max="10" value="2" oninput="document.getElementById('wf-minlen-val').textContent=this.value;analyze()">
                    <span id="wf-minlen-val" style="font-weight:900;color:var(--accent);min-width:24px">2</span>
                </div>
            </div>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:8px">
            <div class="t-toggle-row" style="flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                <label for="wf-stop">Stoppwörter filtern (DE)</label>
                <input type="checkbox" id="wf-stop" class="t-check" checked onchange="analyze()">
            </div>
            <div class="t-toggle-row" style="flex:1;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                <label for="wf-case">Groß-/Kleinschreibung ignorieren</label>
                <input type="checkbox" id="wf-case" class="t-check" checked onchange="analyze()">
            </div>
        </div>

        <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
            <button class="t-btn ghost sm" onclick="loadExample()"><i class="fas fa-file-alt"></i> Beispiel</button>
            <button class="t-btn ghost sm" onclick="document.getElementById('wf-inp').value='';analyze()"><i class="fas fa-trash"></i> Leeren</button>
            <button class="t-btn ghost sm" onclick="exportCsv()"><i class="fas fa-download"></i> CSV exportieren</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-info-circle"></i> Übersicht</div>
        <div class="t-grid-4" style="gap:10px;margin-bottom:0">
            <div class="t-stat-card"><div class="t-stat-val" id="st-words">0</div><div class="t-stat-label">Wörter gesamt</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-unique">0</div><div class="t-stat-label">Einzigartige Wörter</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-chars">0</div><div class="t-stat-label">Zeichen</div></div>
            <div class="t-stat-card"><div class="t-stat-val" id="st-sents">0</div><div class="t-stat-label">Sätze (ca.)</div></div>
        </div>
    </div>

    <div class="t-panel" id="wf-result-panel" style="display:none">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:6px">
            <div class="t-panel-title" style="margin:0"><i class="fas fa-list-ol"></i> Häufigste Wörter</div>
            <div style="display:flex;gap:6px">
                <button class="t-btn ghost sm" id="tab-words" onclick="showTab('words',this)">Wörter</button>
                <button class="t-btn ghost sm" id="tab-chars" onclick="showTab('chars',this)">Zeichen</button>
            </div>
        </div>
        <div id="wf-words-pane"></div>
        <div id="wf-chars-pane" style="display:none;display:flex;gap:8px;flex-wrap:wrap"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const STOPWORDS = new Set(['der','die','das','ein','eine','einer','eines','einem','einen','und','oder','aber','denn','weil','dass','mit','von','zu','in','an','auf','für','bei','nach','aus','über','unter','vor','hinter','neben','zwischen','ist','sind','war','waren','wird','werden','hat','haben','hatte','hatten','ich','du','er','sie','es','wir','ihr','nicht','kein','keine','auch','noch','nur','schon','dann','wenn','als','wie','so','sehr','mehr','alle','durch','dieser','diese','dieses','diesen','diesem','jeder','jede','jedes','man','sich','dem','den','des']);

let wordData = [];
let charData = [];
let currentTab = 'words';

function analyze() {
    const raw = document.getElementById('wf-inp').value;
    if (!raw.trim()) { document.getElementById('wf-result-panel').style.display='none'; updateStats(0,0,0,0); return; }

    const icase = document.getElementById('wf-case').checked;
    const useStop = document.getElementById('wf-stop').checked;
    const top = parseInt(document.getElementById('wf-top').value);
    const minLen = parseInt(document.getElementById('wf-minlen').value);

    const normalized = icase ? raw.toLowerCase() : raw;
    const tokens = (normalized.match(/[a-zA-ZäöüÄÖÜß]+/g) || []).filter(w => w.length >= minLen);
    const filtered = useStop ? tokens.filter(w => !STOPWORDS.has(w.toLowerCase())) : tokens;

    const wordMap = new Map();
    filtered.forEach(w => wordMap.set(w, (wordMap.get(w)||0)+1));
    wordData = [...wordMap.entries()].sort((a,b)=>b[1]-a[1]).slice(0, top);

    const charMap = new Map();
    raw.split('').forEach(c => { if(c.trim()) charMap.set(c, (charMap.get(c)||0)+1); });
    charData = [...charMap.entries()].sort((a,b)=>b[1]-a[1]).slice(0, 30);

    const totalWords = (raw.match(/\S+/g)||[]).length;
    const uniqueWords = new Set((raw.match(/[a-zA-ZäöüÄÖÜß]+/g)||[]).map(w=>w.toLowerCase())).size;
    const sents = (raw.match(/[.!?]+/g)||[]).length || (raw.trim() ? 1 : 0);

    updateStats(totalWords, uniqueWords, raw.length, sents);
    renderWords();
    document.getElementById('wf-result-panel').style.display = '';
}

function updateStats(w,u,c,s) {
    document.getElementById('st-words').textContent = w.toLocaleString('de-DE');
    document.getElementById('st-unique').textContent = u.toLocaleString('de-DE');
    document.getElementById('st-chars').textContent = c.toLocaleString('de-DE');
    document.getElementById('st-sents').textContent = s.toLocaleString('de-DE');
}

function renderWords() {
    const max = wordData[0]?.[1] || 1;
    const total = wordData.reduce((s,[,n])=>s+n,0);
    document.getElementById('wf-words-pane').innerHTML = wordData.map(([w,n],i) =>
        `<div class="wf-bar-row">
            <span class="wf-rank">${i+1}</span>
            <span class="wf-word">${escH(w)}</span>
            <div class="wf-bar-wrap"><div class="wf-bar-fill" style="width:${(n/max*100).toFixed(1)}%"></div></div>
            <span class="wf-count">${n}</span>
            <span class="wf-pct">${(n/total*100).toFixed(1)}%</span>
        </div>`
    ).join('');

    const charMax = charData[0]?.[1] || 1;
    document.getElementById('wf-chars-pane').innerHTML = charData.map(([c,n]) =>
        `<div class="char-chip" title="${n}×"><span class="ch">${escH(c)}</span><span class="cn">${n}</span></div>`
    ).join('');
}

function showTab(tab, btn) {
    currentTab = tab;
    document.querySelectorAll('[id^="tab-"]').forEach(b => { b.style.background=''; b.style.borderColor=''; b.style.color=''; });
    btn.style.background = 'var(--accent-soft)'; btn.style.borderColor = 'var(--accent)'; btn.style.color = 'var(--accent)';
    document.getElementById('wf-words-pane').style.display = tab==='words' ? '' : 'none';
    document.getElementById('wf-chars-pane').style.display = tab==='chars' ? 'flex' : 'none';
}

function exportCsv() {
    if (!wordData.length) return;
    const csv = 'Wort,Häufigkeit\n' + wordData.map(([w,n])=>`"${w}",${n}`).join('\n');
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([csv],{type:'text/csv;charset=utf-8'}));
    a.download = 'wortfrequenz.csv'; a.click(); URL.revokeObjectURL(a.href);
}

function loadExample() {
    document.getElementById('wf-inp').value = 'Der Browser ist ein wichtiges Werkzeug für das Web. Webentwickler nutzen den Browser täglich. Tools im Browser helfen Entwicklern bei der Arbeit. Der Browser zeigt Webseiten an. Moderne Browser sind schnell und sicher. Entwickler testen ihre Tools im Browser. Das Web wächst täglich und Browser werden immer besser.';
    analyze();
}

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

document.getElementById('tab-words').style.background = 'var(--accent-soft)';
document.getElementById('tab-words').style.borderColor = 'var(--accent)';
document.getElementById('tab-words').style.color = 'var(--accent)';
loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'wort-haeufigkeit', 'toolName' => 'Wort-Häufigkeit'])

@endsection