@extends('layouts.app')
@section('title', 'JSON Formatter – Formatieren, Validieren & Minifizieren | kotsch.tech')
@section('meta_description', 'JSON online formatieren, validieren und minifizieren. Schlüssel sortieren, Baumansicht, Fehleranzeige und Copy-Funktion – kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="JSON Formatter, JSON Validator, JSON Beautifier, JSON Minifier, JSON online, JSON formatieren">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.json-editors { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px){ .json-editors { grid-template-columns:1fr; } }
.json-tree { font-family:'JetBrains Mono','Fira Mono',monospace; font-size:0.82rem; line-height:1.7; white-space:pre-wrap; word-break:break-all; overflow-y:auto; max-height:420px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); }
.jk { color:#0f172a; font-weight:700; }
.js { color:#10b981; }
.jn { color:#f59e0b; font-weight:700; }
.jb { color:#6366f1; font-weight:700; }
.jnull { color:#94a3b8; font-style:italic; }
.stat-row { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }
.stat-pill { padding:4px 12px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:0.78rem; font-weight:700; color:var(--muted); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-code"></i> Developer</span>
        <h1 class="tool-h1">JSON<span> Formatter.</span></h1>
        <p class="tool-sub">Formatieren, Validieren, Minifizieren, Baumansicht – alles live im Browser.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px">
            <button class="t-btn accent" onclick="format()"><i class="fas fa-indent"></i> Formatieren</button>
            <button class="t-btn ghost" onclick="minify()"><i class="fas fa-compress-alt"></i> Minifizieren</button>
            <button class="t-btn ghost" onclick="sortKeys()"><i class="fas fa-sort-alpha-down"></i> Keys sortieren</button>
            <button class="t-btn ghost" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
        </div>

        <div class="json-editors">
            <div class="t-field">
                <label class="t-label">Eingabe</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="inp" placeholder='{"name":"Max","age":42}' style="font-family:\'JetBrains Mono\',monospace;font-size:0.82rem;min-height:300px" oninput="autoFormat()"></textarea>
                </div>
            </div>
            <div class="t-field">
                <label class="t-label">Ausgabe / Vorschau</label>
                <div class="t-copy-wrap">
                    <div class="json-tree" id="out">–</div>
                    <button class="t-copy-btn" onclick="copyOut()"><i class="fas fa-copy"></i></button>
                </div>
            </div>
        </div>

        <div class="t-error" id="err" style="margin-top:10px"></div>

        <div class="stat-row" id="stats" style="display:none">
            <span class="stat-pill" id="s-keys">–</span>
            <span class="stat-pill" id="s-depth">–</span>
            <span class="stat-pill" id="s-size">–</span>
            <span class="stat-pill" id="s-type">–</span>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-sitemap"></i> Baumansicht</div>
        <div id="tree-view" style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;line-height:1.8;padding:4px 0">
            <span style="color:var(--muted);font-size:0.85rem">JSON formatieren, um Baum zu sehen…</span>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let parsed=null;
let autoTimeout=null;

function autoFormat(){
    clearTimeout(autoTimeout);
    autoTimeout=setTimeout(()=>{ try{ format(); }catch(e){} },400);
}

function showErr(msg){
    const e=document.getElementById('err');
    e.textContent=msg;e.style.display='block';
}
function hideErr(){document.getElementById('err').style.display='none';}

function parse(){
    const raw=document.getElementById('inp').value.trim();
    if(!raw)throw new Error('Keine Eingabe.');
    return JSON.parse(raw);
}

function format(){
    hideErr();
    try{
        parsed=parse();
        const pretty=JSON.stringify(parsed,null,2);
        document.getElementById('out').innerHTML=syntaxHL(pretty);
        document.getElementById('inp').value=pretty;
        updateStats(parsed,pretty);
        renderTree(parsed,'tree-view');
    }catch(e){ showErr('JSON-Fehler: '+e.message); }
}

function minify(){
    hideErr();
    try{
        parsed=parse();
        const mini=JSON.stringify(parsed);
        document.getElementById('out').innerHTML=escHTML(mini);
        updateStats(parsed,mini);
    }catch(e){ showErr('JSON-Fehler: '+e.message); }
}

function sortKeys(){
    hideErr();
    try{
        parsed=parse();
        const sorted=sortObj(parsed);
        const pretty=JSON.stringify(sorted,null,2);
        document.getElementById('inp').value=pretty;
        document.getElementById('out').innerHTML=syntaxHL(pretty);
        parsed=sorted;
        updateStats(parsed,pretty);
        renderTree(parsed,'tree-view');
    }catch(e){ showErr('JSON-Fehler: '+e.message); }
}

function sortObj(v){
    if(Array.isArray(v))return v.map(sortObj);
    if(v&&typeof v==='object'){
        const o={};
        Object.keys(v).sort().forEach(k=>o[k]=sortObj(v[k]));
        return o;
    }
    return v;
}

function countKeys(v){
    if(Array.isArray(v))return v.reduce((a,i)=>a+countKeys(i),0);
    if(v&&typeof v==='object'){let c=Object.keys(v).length;Object.values(v).forEach(i=>c+=countKeys(i));return c;}
    return 0;
}
function maxDepth(v,d=0){
    if(Array.isArray(v))return v.reduce((a,i)=>Math.max(a,maxDepth(i,d+1)),d);
    if(v&&typeof v==='object')return Object.values(v).reduce((a,i)=>Math.max(a,maxDepth(i,d+1)),d);
    return d;
}

function updateStats(obj,str){
    document.getElementById('s-keys').textContent=countKeys(obj)+' Keys';
    document.getElementById('s-depth').textContent='Tiefe: '+maxDepth(obj);
    document.getElementById('s-size').textContent=(str.length/1024).toFixed(1)+' KB';
    document.getElementById('s-type').textContent=Array.isArray(obj)?'Array':'Object';
    document.getElementById('stats').style.display='flex';
}

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

function syntaxHL(json){
    return escHTML(json).replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+\.?\d*(?:[eE][+-]?\d+)?)/g,m=>{
        if(/^"/.test(m)){
            if(/:$/.test(m))return`<span class="jk">${m}</span>`;
            return`<span class="js">${m}</span>`;
        }
        if(/true|false/.test(m))return`<span class="jb">${m}</span>`;
        if(/null/.test(m))return`<span class="jnull">${m}</span>`;
        return`<span class="jn">${m}</span>`;
    });
}

function renderTree(obj,containerId,depth=0){
    const el=document.getElementById(containerId);
    if(depth===0)el.innerHTML='';
    el.innerHTML=buildTreeHTML(obj,0);
}

function buildTreeHTML(v,depth){
    const pad='  '.repeat(depth);
    if(Array.isArray(v)){
        if(!v.length)return`<span style="color:var(--muted)">[]</span>`;
        return`<details open><summary style="color:#f59e0b;font-weight:700;cursor:pointer">Array [${v.length}]</summary>${v.map((i,ix)=>`<div style="padding-left:16px"><span style="color:var(--muted)">${ix}:</span> ${buildTreeHTML(i,depth+1)}</div>`).join('')}</details>`;
    }
    if(v&&typeof v==='object'){
        const keys=Object.keys(v);
        if(!keys.length)return`<span style="color:var(--muted)">{}</span>`;
        return`<details open><summary style="color:#6366f1;font-weight:700;cursor:pointer">Object {${keys.length}}</summary>${keys.map(k=>`<div style="padding-left:16px"><span class="jk">"${escHTML(k)}"</span>: ${buildTreeHTML(v[k],depth+1)}</div>`).join('')}</details>`;
    }
    if(typeof v==='string')return`<span class="js">"${escHTML(String(v))}"</span>`;
    if(typeof v==='boolean')return`<span class="jb">${v}</span>`;
    if(v===null)return`<span class="jnull">null</span>`;
    return`<span class="jn">${v}</span>`;
}

function clearAll(){
    document.getElementById('inp').value='';
    document.getElementById('out').innerHTML='–';
    document.getElementById('tree-view').innerHTML='<span style="color:var(--muted);font-size:0.85rem">JSON formatieren, um Baum zu sehen…</span>';
    document.getElementById('stats').style.display='none';
    hideErr();
    parsed=null;
}

function copyOut(){
    const text=document.getElementById('out').innerText;
    if(!text||text==='–')return;
    navigator.clipboard.writeText(text).then(()=>{
        const btn=document.querySelector('.t-copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}
</script>

@include('tools._seo_content', ['toolSlug' => 'json-formatter', 'toolName' => 'JSON Formatter'])

@endsection