@extends('layouts.app')
@section('title', 'Passwort Generator – Sicheres Passwort erstellen | kotsch.tech')
@section('meta_description', 'Passwort Generator kostenlos: Sichere Passwörter mit einem Klick generieren. Länge, Sonderzeichen, PIN-Modus, benutzerdefinierte Zeichen – 100% lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="Passwort Generator, sicheres Passwort erstellen, Passwort generieren, zufälliges Passwort, starkes Passwort, PIN Generator">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pw-output { width:100%; min-height:64px; border:2px solid var(--line); border-radius:var(--radius-sm); padding:14px 50px 14px 16px; font-family:'JetBrains Mono','Courier New',monospace; font-size:1.1rem; font-weight:700; color:var(--ink); background:var(--bg); word-break:break-all; line-height:1.5; box-sizing:border-box; resize:none; outline:0; }
.pw-output:focus { border-color:var(--accent); }
.pw-row { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; font-family:'JetBrains Mono',monospace; font-size:0.88rem; font-weight:700; word-break:break-all; transition:all 0.15s; }
.pw-row:hover { border-color:var(--accent); }
.pw-row .t-copy-btn { position:static; flex-shrink:0; }
.entropy-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:#065f46; font-size:0.75rem; font-weight:900; }
.mode-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.mode-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
.history-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); font-family:'JetBrains Mono',monospace; font-size:0.82rem; background:var(--bg); margin-bottom:6px; word-break:break-all; }
.history-item .hist-pw { flex:1; cursor:pointer; color:var(--ink); }
.history-item .hist-pw:hover { color:var(--accent); }
.history-time { font-size:0.72rem; color:var(--muted); flex-shrink:0; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-key"></i> Security</span>
        <h1 class="tool-h1">Passwort<span>generator.</span></h1>
        <p class="tool-sub">Sichere, zufällige Passwörter – konfigurierbar und 100% lokal. Kein Server, kein Speichern.</p>
    </div>

    <div class="t-panel">
        <div class="mode-tabs">
            <button class="mode-tab active" onclick="setMode('password',this)"><i class="fas fa-key"></i> Passwort</button>
            <button class="mode-tab" onclick="setMode('pin',this)"><i class="fas fa-hashtag"></i> PIN</button>
            <button class="mode-tab" onclick="setMode('custom',this)"><i class="fas fa-sliders-h"></i> Benutzerdefiniert</button>
        </div>

        <div class="t-copy-wrap" style="margin-bottom:10px">
            <textarea class="pw-output" id="pw-output" readonly onclick="this.select()"></textarea>
            <button class="t-copy-btn" id="copy-btn" title="Kopieren" onclick="copyPw('pw-output','copy-btn')">
                <i class="fas fa-copy"></i>
            </button>
        </div>

        <div class="t-strength-bar" style="margin-bottom:6px">
            <div class="t-strength-fill" id="s-fill"></div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap">
            <span id="s-label" style="font-size:0.82rem;font-weight:700;color:var(--muted)">Stärke: –</span>
            <span class="entropy-badge" id="entropy-badge">0 Bit Entropie</span>
        </div>

        <!-- Password mode -->
        <div id="mode-password">
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px">
                <div>
                    <span style="font-weight:700">Länge</span>
                    <span id="len-val" style="margin-left:10px;color:var(--accent);font-weight:900;font-size:1.1rem">16</span>
                </div>
                <input type="range" class="t-range" id="length" min="4" max="128" value="16" oninput="document.getElementById('len-val').textContent=this.value;generate()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="opt-upper">Großbuchstaben (A–Z)</label>
                <input type="checkbox" id="opt-upper" class="t-check" checked onchange="generate()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="opt-lower">Kleinbuchstaben (a–z)</label>
                <input type="checkbox" id="opt-lower" class="t-check" checked onchange="generate()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="opt-num">Zahlen (0–9)</label>
                <input type="checkbox" id="opt-num" class="t-check" checked onchange="generate()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="opt-sym">Sonderzeichen (!@#…)</label>
                <input type="checkbox" id="opt-sym" class="t-check" checked onchange="generate()">
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
                <label for="opt-ambig">Mehrdeutige Zeichen ausschließen (Il1O0)</label>
                <input type="checkbox" id="opt-ambig" class="t-check" checked onchange="generate()">
            </div>
            <div class="t-toggle-row">
                <label for="opt-nodups">Keine Wiederholungen</label>
                <input type="checkbox" id="opt-nodups" class="t-check" onchange="generate()">
            </div>
        </div>

        <!-- PIN mode -->
        <div id="mode-pin" style="display:none">
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px">
                <div>
                    <span style="font-weight:700">PIN-Länge</span>
                    <span id="pin-len-val" style="margin-left:10px;color:var(--accent);font-weight:900;font-size:1.1rem">4</span>
                </div>
                <input type="range" class="t-range" id="pin-length" min="4" max="12" value="4" oninput="document.getElementById('pin-len-val').textContent=this.value;generate()">
            </div>
            <div class="t-toggle-row">
                <label for="pin-nodups">Keine Wiederholungen</label>
                <input type="checkbox" id="pin-nodups" class="t-check" onchange="generate()">
            </div>
        </div>

        <!-- Custom mode -->
        <div id="mode-custom" style="display:none">
            <div class="t-field">
                <label class="t-label">Erlaubte Zeichen</label>
                <input type="text" class="t-input" id="custom-chars" value="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%-_" oninput="generate()" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem">
                <div style="font-size:0.75rem;color:var(--muted);margin-top:4px"><span id="custom-pool-size">0</span> einzigartige Zeichen im Pool</div>
            </div>
            <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px">
                <div>
                    <span style="font-weight:700">Länge</span>
                    <span id="custom-len-val" style="margin-left:10px;color:var(--accent);font-weight:900;font-size:1.1rem">20</span>
                </div>
                <input type="range" class="t-range" id="custom-length" min="4" max="128" value="20" oninput="document.getElementById('custom-len-val').textContent=this.value;generate()">
            </div>
        </div>

        <div class="t-toggle-row" style="margin-top:8px;border-top:1px solid var(--line);padding-top:14px">
            <div>
                <span style="font-weight:700">Anzahl</span>
                <span id="count-val" style="margin-left:10px;color:var(--accent);font-weight:900">1</span>
            </div>
            <input type="range" class="t-range" id="pw-count" min="1" max="10" value="1" oninput="document.getElementById('count-val').textContent=this.value;generate()">
        </div>

        <div style="display:flex;gap:10px;margin-top:20px;flex-wrap:wrap">
            <button class="t-btn full" onclick="generate()"><i class="fas fa-rotate-right"></i> Neu generieren</button>
            <button class="t-btn ghost" onclick="copyAll()" id="copy-all-btn"><i class="fas fa-copy"></i> Alle kopieren</button>
        </div>
    </div>

    <div id="pw-multi-wrap" style="display:none">
        <div class="t-panel">
            <div class="t-panel-title"><i class="fas fa-list"></i> Weitere Passwörter</div>
            <div id="pw-multi"></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-history"></i> Verlauf <span style="font-size:0.75rem;color:var(--muted);font-weight:400">(nur diese Sitzung)</span></div>
        <div id="pw-history"></div>
        <button class="t-btn ghost sm" onclick="clearHistory()" style="margin-top:8px"><i class="fas fa-trash"></i> Verlauf leeren</button>
    </div>

    <div class="t-panel">
        <div class="t-grid-3" style="gap:10px">
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-pool">–</div>
                <div class="t-stat-label">Zeichen im Pool</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-entropy">–</div>
                <div class="t-stat-label">Bit Entropie</div>
            </div>
            <div class="t-stat-card">
                <div class="t-stat-val" id="stat-combo">–</div>
                <div class="t-stat-label">Mögliche Kombos</div>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentMode = 'password';
let history = [];

function setMode(mode, btn) {
    currentMode = mode;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('mode-password').style.display = mode==='password' ? '' : 'none';
    document.getElementById('mode-pin').style.display      = mode==='pin'      ? '' : 'none';
    document.getElementById('mode-custom').style.display   = mode==='custom'   ? '' : 'none';
    generate();
}

function buildCharset() {
    if (currentMode === 'pin') return '0123456789';
    if (currentMode === 'custom') {
        const chars = document.getElementById('custom-chars').value;
        const unique = [...new Set(chars)].join('');
        document.getElementById('custom-pool-size').textContent = unique.length;
        return unique;
    }
    let c = '';
    if (document.getElementById('opt-upper').checked) c += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (document.getElementById('opt-lower').checked) c += 'abcdefghijklmnopqrstuvwxyz';
    if (document.getElementById('opt-num').checked)   c += '0123456789';
    if (document.getElementById('opt-sym').checked)   c += '!@#$%^&*()_+-=[]{}|;:,.<>?';
    if (document.getElementById('opt-ambig').checked) c = c.replace(/[Il1O0]/g, '');
    return c;
}

function getLen() {
    if (currentMode === 'pin')    return parseInt(document.getElementById('pin-length').value);
    if (currentMode === 'custom') return parseInt(document.getElementById('custom-length').value);
    return parseInt(document.getElementById('length').value);
}

function noDups() {
    if (currentMode === 'pin')      return document.getElementById('pin-nodups').checked;
    if (currentMode === 'password') return document.getElementById('opt-nodups').checked;
    return false;
}

function genOne(chars, len) {
    if (!chars) return '';
    const noDupsMode = noDups();
    if (noDupsMode && len > chars.length) len = chars.length;
    const arr = new Uint32Array(len * 3);
    crypto.getRandomValues(arr);
    let pool = chars.split('');
    let pw = '';
    let i = 0;
    while (pw.length < len && i < arr.length) {
        const idx = arr[i++] % pool.length;
        pw += pool[idx];
        if (noDupsMode) pool.splice(idx, 1);
    }
    return pw;
}

function generate() {
    const chars = buildCharset();
    if (!chars) { document.getElementById('pw-output').value = 'Mindestens eine Option wählen'; return; }
    const len   = getLen();
    const count = parseInt(document.getElementById('pw-count').value);
    const pw    = genOne(chars, len);
    document.getElementById('pw-output').value = pw;
    updateStrength(pw, chars.length, len);
    updateStats(chars, len);
    addHistory(pw);

    const multi    = document.getElementById('pw-multi');
    const multiWrap= document.getElementById('pw-multi-wrap');
    if (count > 1) {
        multi.innerHTML = '';
        for (let i = 1; i < count; i++) {
            const extra = genOne(chars, len);
            const id    = 'pw-row-' + i;
            const row   = document.createElement('div');
            row.className = 'pw-row';
            row.innerHTML = `<span style="flex:1" id="${id}">${extra}</span>
                <button class="t-copy-btn" onclick="copyPw('${id}',this)"><i class="fas fa-copy"></i></button>`;
            multi.appendChild(row);
        }
        multiWrap.style.display = '';
    } else {
        multi.innerHTML = '';
        multiWrap.style.display = 'none';
    }
}

function updateStrength(pw, poolSize, len) {
    const entropy = Math.round(len * Math.log2(poolSize || 2));
    document.getElementById('entropy-badge').textContent = entropy + ' Bit Entropie';
    let score = 0;
    if (pw.length >= 8)  score++;
    if (pw.length >= 12) score++;
    if (pw.length >= 16) score++;
    if (/[A-Z]/.test(pw)) score++;
    if (/[a-z]/.test(pw)) score++;
    if (/[0-9]/.test(pw)) score++;
    if (/[^A-Za-z0-9]/.test(pw)) score++;
    const pct    = Math.min(100, Math.round(score / 7 * 100));
    const colors = ['#ef4444','#f97316','#eab308','#10b981','#059669'];
    const labels = ['Sehr schwach','Schwach','Mittel','Stark','Sehr stark'];
    const idx    = Math.min(4, Math.floor(pct / 25));
    document.getElementById('s-fill').style.width      = pct + '%';
    document.getElementById('s-fill').style.background = colors[idx];
    document.getElementById('s-label').textContent     = 'Stärke: ' + labels[idx];
}

function updateStats(chars, len) {
    const pool = chars.length;
    const entropy = Math.round(len * Math.log2(pool || 2));
    const combos = Math.pow(pool, len);
    document.getElementById('stat-pool').textContent = pool;
    document.getElementById('stat-entropy').textContent = entropy + ' Bit';
    document.getElementById('stat-combo').textContent = combos > 1e15 ? '> 10¹⁵' : combos.toLocaleString('de-DE');
}

function copyPw(id, btnEl) {
    const el  = typeof id === 'string' ? document.getElementById(id) : id;
    const val = el ? (el.textContent || el.value || '').trim() : '';
    if (!val || val === 'Mindestens eine Option wählen') return;
    navigator.clipboard.writeText(val).catch(() => {});
    const btn = typeof btnEl === 'object' && btnEl?.tagName ? btnEl : document.getElementById(btnEl);
    if (!btn) return;
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i>';
    btn.style.cssText += ';background:var(--accent);color:#fff;border-color:var(--accent)';
    setTimeout(() => { btn.innerHTML = orig; btn.style.background = ''; btn.style.color = ''; btn.style.borderColor = ''; }, 1800);
}

function copyAll() {
    const parts = [document.getElementById('pw-output').value];
    document.querySelectorAll('.pw-row span').forEach(s => parts.push(s.textContent.trim()));
    navigator.clipboard.writeText(parts.filter(Boolean).join('\n')).catch(() => {});
    const btn = document.getElementById('copy-all-btn');
    btn.innerHTML = '<i class="fas fa-check"></i> Kopiert!';
    setTimeout(() => { btn.innerHTML = '<i class="fas fa-copy"></i> Alle kopieren'; }, 1800);
}

function addHistory(pw) {
    if (!pw || pw === 'Mindestens eine Option wählen') return;
    history.unshift({ pw, time: new Date().toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'}) });
    if (history.length > 8) history.pop();
    renderHistory();
}

function renderHistory() {
    const el = document.getElementById('pw-history');
    if (!history.length) { el.innerHTML = '<div style="font-size:0.82rem;color:var(--muted)">Noch keine Passwörter generiert.</div>'; return; }
    el.innerHTML = history.map((h,i) => `
        <div class="history-item">
            <span class="hist-pw" onclick="useHistPw(${i})" title="Klicken zum Verwenden">${escH(h.pw)}</span>
            <span class="history-time">${h.time}</span>
            <button class="t-copy-btn" style="position:static;flex-shrink:0" onclick="navigator.clipboard.writeText('${escAttr(h.pw)}')"><i class="fas fa-copy"></i></button>
        </div>`).join('');
}

function useHistPw(i) {
    document.getElementById('pw-output').value = history[i].pw;
    updateStrength(history[i].pw, 70, history[i].pw.length);
}

function clearHistory() {
    history = [];
    renderHistory();
}

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

generate();
renderHistory();
</script>

@include('tools._seo_content', ['toolSlug' => 'passwort-generator', 'toolName' => 'Passwort-Generator'])

@endsection