{% extends "layouts/main.html" %}

{% block title %}i18n — {{ config.app.name | default(value='FuzionX') }}{% endblock %}

{% block head %}
<style>
    .demo-card { background: var(--bs-tertiary-bg); }
</style>
{% endblock %}

{% block content %}
<div class="container py-3">
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-translate"></i> 언어 전환</span>
            <div class="btn-group" id="localeSwitch">
                <button class="btn btn-info btn-sm active" data-locale="ko" onclick="switchLocale('ko')">🇰🇷 한국어</button>
                <button class="btn btn-outline-secondary btn-sm" data-locale="en" onclick="switchLocale('en')">🇺🇸 English</button>
            </div>
        </div>
        <div class="card-body py-2">
            <div class="row small">
                <div class="col">현재: <span class="text-info fw-bold" id="currentLocale">ko</span></div>
                <div class="col">사용 가능: <span id="availableLocales">—</span></div>
                <div class="col">기본: <span id="defaultLocale">—</span> / 폴백: <span id="fallbackLocale">—</span></div>
                <div class="col">소스: <span class="badge bg-info" id="i18nSource">—</span></div>
            </div>
        </div>
    </div>
    <div class="card mb-3">
        <div class="card-header"><i class="bi bi-key"></i> 실시간 번역 테스트</div>
        <div class="card-body">
            <div class="row g-2 mb-2">
                <div class="col-md-5"><input type="text" class="form-control form-control-sm" id="translateKey" value="common.greeting" placeholder="키"></div>
                <div class="col-md-3"><input type="text" class="form-control form-control-sm" id="translateName" value="FuzionX" placeholder="변수 {name}"></div>
                <div class="col-md-2"><button class="btn btn-info btn-sm w-100" onclick="doTranslate()"><i class="bi bi-search"></i> 번역</button></div>
            </div>
            <div class="d-flex gap-1 flex-wrap mb-2">
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('app.welcome')">app.welcome</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('common.greeting')">common.greeting</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('user.created')">user.created</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('auth.login_required')">auth.login_required</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('upload.drag_drop')">upload.drag_drop</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="qk('common.items_count')">common.items_count</button>
                <button class="btn btn-outline-danger btn-sm" onclick="qk('nonexistent.key')">nonexistent ❌</button>
            </div>
            <pre class="bg-black text-success rounded p-2" id="translateResult">키를 입력하고 번역을 클릭하세요</pre>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-lg-7">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <span><i class="bi bi-table"></i> 전체 키 비교 (ko vs en)</span>
                    <button class="btn btn-outline-info btn-sm" onclick="loadComparison()"><i class="bi bi-arrow-clockwise"></i> 로드</button>
                </div>
                <div class="card-body p-0" style="max-height:400px;overflow-y:auto">
                    <table class="table table-sm table-striped mb-0 small">
                        <thead class="sticky-top"><tr><th>Key</th><th>🇰🇷</th><th>🇺🇸</th></tr></thead>
                        <tbody id="comparisonBody"><tr><td colspan="3" class="text-muted">로드 버튼 클릭</td></tr></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-brush"></i> UI 적용 데모</div>
                <div class="card-body">
                    <p class="text-muted small">언어를 전환하면 자동 변경됩니다</p>
                    <div class="demo-card rounded p-3 mb-2">
                        <h5 id="demo-welcome">—</h5>
                        <p class="text-muted" id="demo-desc">—</p>
                        <div class="btn-group"><button class="btn btn-info btn-sm" id="demo-save">—</button><button class="btn btn-outline-secondary btn-sm" id="demo-cancel">—</button></div>
                        <p class="mt-2 mb-1" id="demo-greeting">—</p>
                        <p class="mb-0 text-muted small" id="demo-items">—</p>
                    </div>
                    <h6 class="mt-3"><i class="bi bi-code-slash"></i> SSR 렌더링 (Bridge)</h6>
                    <input type="text" class="form-control form-control-sm mb-2" id="ssrTemplate" value="&#123;&#123;title&#125;&#125; — &#123;&#123;desc&#125;&#125;">
                    <div class="row g-2 mb-2">
                        <div class="col"><input type="text" class="form-control form-control-sm" id="ssrTitle" value="FuzionX" placeholder="title"></div>
                        <div class="col"><input type="text" class="form-control form-control-sm" id="ssrDesc" value="Framework" placeholder="desc"></div>
                    </div>
                    <button class="btn btn-info btn-sm" onclick="doSSR()"><i class="bi bi-play-fill"></i> 렌더링</button>
                    <pre class="bg-black text-success rounded p-2 mt-2" id="ssrResult">—</pre>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentLocale='ko',allMessages={ko:{},en:{}};
async function init(){const r=await aspFetch('/api/lang/locales');const d=r instanceof Response?await r.json():r;document.getElementById('availableLocales').textContent=(d.locales||[]).join(', ')||'ko, en';document.getElementById('defaultLocale').textContent=d.default;document.getElementById('fallbackLocale').textContent=d.fallback;document.getElementById('i18nSource').textContent=d.source;for(const l of['ko','en']){const r2=await aspFetch(`/api/lang/all?locale=${l}`);const d2=r2 instanceof Response?await r2.json():r2;allMessages[l]=d2.messages}updateDemo()}
function switchLocale(l){currentLocale=l;document.getElementById('currentLocale').textContent=l;document.querySelectorAll('#localeSwitch button').forEach(b=>{b.className=b.dataset.locale===l?'btn btn-info btn-sm active':'btn btn-outline-secondary btn-sm'});updateDemo()}
function updateDemo(){const t=(k,v)=>{let val=allMessages[currentLocale]?.[k]||k;if(v)Object.entries(v).forEach(([a,b])=>{val=val.replace(`{${a}}`,b)});return val};document.getElementById('demo-welcome').textContent=t('app.welcome');document.getElementById('demo-desc').textContent=t('app.description');document.getElementById('demo-save').textContent=t('common.save');document.getElementById('demo-cancel').textContent=t('common.cancel');document.getElementById('demo-greeting').textContent=t('common.greeting',{name:'Admin'});document.getElementById('demo-items').textContent=t('common.items_count',{count:'42'})}
async function doTranslate(){const key=document.getElementById('translateKey').value,name=document.getElementById('translateName').value;if(!key)return;const p=new URLSearchParams({locale:currentLocale,key});if(name)p.append('name',name);const r=await aspFetch(`/api/lang/translate?${p}`);const d=r instanceof Response?await r.json():r;const p2=new URLSearchParams({locale:currentLocale==='ko'?'en':'ko',key});if(name)p2.append('name',name);const r2=await aspFetch(`/api/lang/translate?${p2}`);const d2=r2 instanceof Response?await r2.json():r2;document.getElementById('translateResult').textContent=`${d.locale}: ${d.value}\n${d2.locale}: ${d2.value}\n\n${JSON.stringify({current:d,other:d2},null,2)}`}
function qk(k){document.getElementById('translateKey').value=k;doTranslate()}
async function loadComparison(){const body=document.getElementById('comparisonBody');const keys=new Set([...Object.keys(allMessages.ko||{}),...Object.keys(allMessages.en||{})]);body.innerHTML=[...keys].sort().map(k=>{const ko=allMessages.ko?.[k]||'<span class="text-danger">❌</span>';const en=allMessages.en?.[k]||'<span class="text-danger">❌</span>';return`<tr><td><code>${k}</code></td><td>${ko}</td><td>${en}</td></tr>`}).join('')}
async function doSSR(){const template=document.getElementById('ssrTemplate').value,context={title:document.getElementById('ssrTitle').value,desc:document.getElementById('ssrDesc').value};const r=await aspFetch('/api/lang/render',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({template,context,locale:currentLocale})});const d=r instanceof Response?await r.json():r;document.getElementById('ssrResult').textContent=JSON.stringify(d,null,2)}
init();
</script>
{% endblock %}