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

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

{% block head %}
<style>
    .drop-zone { border: 2px dashed #6c757d; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.2s; }
    .drop-zone:hover, .drop-zone.drag-over { border-color: #0dcaf0; background: rgba(13,202,240,0.05); }
    .drop-zone input { display: none; }
    .preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
    .sprite-preview { max-width: 100%; border-radius: 8px; margin-top: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
</style>
{% endblock %}

{% block content %}
<div class="container py-3">
    <div class="card mb-3">
        <div class="card-header"><i class="bi bi-cloud-upload"></i> 파일 업로드</div>
        <div class="card-body">
            <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
                <i class="bi bi-file-earmark-arrow-up" style="font-size:32px"></i>
                <p class="mt-2 mb-1">파일을 드래그하거나 클릭</p>
                <small class="text-muted">이미지/비디오 (최대 50MB)</small>
                <input type="file" id="fileInput" accept="image/*,video/*" multiple>
            </div>
            <div class="d-flex gap-2 mt-2 flex-wrap" id="preview"></div>
            <div class="btn-group mt-2">
                <button class="btn btn-info btn-sm" onclick="uploadSingle()"><i class="bi bi-upload"></i> 단일 업로드</button>
                <button class="btn btn-outline-info btn-sm" onclick="uploadMultiple()"><i class="bi bi-stack"></i> 다중 업로드</button>
                <button class="btn btn-outline-secondary btn-sm" onclick="clearFiles()"><i class="bi bi-x-circle"></i> 초기화</button>
            </div>
            <pre class="bg-black text-success rounded p-2 mt-2" id="uploadResult">결과 대기</pre>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-aspect-ratio"></i> 이미지 리사이즈</div>
                <div class="card-body">
                    <div class="row g-2 mb-2">
                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeW" value="200" placeholder="Width"></div>
                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeH" value="200" placeholder="Height"></div>
                        <div class="col"><select class="form-select form-select-sm" id="resizeFmt"><option>webp</option><option>jpeg</option><option>png</option></select></div>
                        <div class="col"><input type="number" class="form-control form-control-sm" id="resizeQ" value="80" placeholder="Quality"></div>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-info btn-sm" onclick="doResize()"><i class="bi bi-arrows-angle-contract"></i> 리사이즈</button>
                        <button class="btn btn-outline-info btn-sm" onclick="doResizeMultiple()">다중 (L/M/S)</button>
                    </div>
                    <pre class="bg-black text-success rounded p-2 mt-2" id="resizeResult">—</pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-arrow-repeat"></i> 변환 & 정보</div>
                <div class="card-body">
                    <div class="btn-group mb-2">
                        <button class="btn btn-info btn-sm" onclick="doToWebp()"><i class="bi bi-filetype-png"></i> WebP 변환</button>
                        <button class="btn btn-outline-info btn-sm" onclick="doImageInfo()"><i class="bi bi-info-circle"></i> 이미지 정보</button>
                        <button class="btn btn-outline-info btn-sm" onclick="doVideoThumb()"><i class="bi bi-film"></i> 비디오 썸네일</button>
                    </div>
                    <pre class="bg-black text-success rounded p-2 mt-2" id="convertResult">—</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3 mt-0">
        <div class="col-12">
            <div class="card">
                <div class="card-header"><i class="bi bi-camera-reels"></i> 비디오 미리보기 (다중 썸네일 + 스프라이트 시트)</div>
                <div class="card-body">
                    <div class="row g-2 mb-2">
                        <div class="col-auto"><label class="form-label small mb-0">간격(초)</label><input type="number" class="form-control form-control-sm" id="pvInterval" value="5" style="width:80px"></div>
                        <div class="col-auto"><label class="form-label small mb-0">폭(px)</label><input type="number" class="form-control form-control-sm" id="pvWidth" value="320" style="width:80px"></div>
                        <div class="col-auto"><label class="form-label small mb-0">그리드 열</label><input type="number" class="form-control form-control-sm" id="pvCols" value="10" style="width:80px"></div>
                        <div class="col-auto d-flex align-items-end">
                            <button class="btn btn-info btn-sm" onclick="doVideoPreview()"><i class="bi bi-grid-3x3"></i> 미리보기 생성</button>
                        </div>
                    </div>
                    <pre class="bg-black text-success rounded p-2" id="previewResult">비디오 파일을 선택 후 "미리보기 생성" 클릭</pre>
                    <div id="spriteSheetContainer"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3 mt-0">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-shield-lock"></i> 암호화 / 복호화</div>
                <div class="card-body">
                    <input type="text" class="form-control form-control-sm mb-2" id="cryptoText" placeholder="암호화할 텍스트">
                    <input type="text" class="form-control form-control-sm mb-2" id="cryptoKey" placeholder="키 (기본: test-secret-key-32bytes!)">
                    <div class="btn-group"><button class="btn btn-info btn-sm" onclick="doEncrypt()"><i class="bi bi-lock"></i> 암호화</button><button class="btn btn-outline-info btn-sm" onclick="doDecrypt()"><i class="bi bi-unlock"></i> 복호화</button></div>
                    <pre class="bg-black text-success rounded p-2 mt-2" id="cryptoResult">—</pre>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header"><i class="bi bi-key"></i> 패스워드 해싱</div>
                <div class="card-body">
                    <input type="text" class="form-control form-control-sm mb-2" id="hashPassword" placeholder="패스워드 입력">
                    <div class="btn-group"><button class="btn btn-info btn-sm" onclick="doHash('bcrypt')"><i class="bi bi-hash"></i> bcrypt</button><button class="btn btn-outline-info btn-sm" onclick="doHash('argon2')">argon2</button></div>
                    <pre class="bg-black text-success rounded p-2 mt-2" id="hashResult">—</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="card mt-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-folder2-open"></i> Storage 파일 목록</span>
            <div class="d-flex gap-2">
                <select class="form-select form-select-sm" style="width:auto" id="listDir"><option>uploads</option><option>resized</option><option>converted</option><option>thumbnails</option><option>previews</option></select>
                <button class="btn btn-outline-info btn-sm" onclick="loadFileList()"><i class="bi bi-arrow-clockwise"></i></button>
            </div>
        </div>
        <ul class="list-group list-group-flush" id="fileList"><li class="list-group-item small">조회 버튼 클릭</li></ul>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let selectedFiles=[];
const dz=document.getElementById('dropZone');
dz.addEventListener('dragover',e=>{e.preventDefault();dz.classList.add('drag-over')});
dz.addEventListener('dragleave',()=>dz.classList.remove('drag-over'));
dz.addEventListener('drop',e=>{e.preventDefault();dz.classList.remove('drag-over');handleFiles(e.dataTransfer.files)});
document.getElementById('fileInput').addEventListener('change',e=>handleFiles(e.target.files));
function handleFiles(files){selectedFiles=Array.from(files);const p=document.getElementById('preview');p.innerHTML='';selectedFiles.forEach(f=>{const d=document.createElement('div');d.className='text-center';if(f.type.startsWith('image/')){const img=document.createElement('img');img.src=URL.createObjectURL(f);d.appendChild(img)}d.innerHTML+=`<div class="small text-muted">${f.name}<br>${(f.size/1024).toFixed(1)}KB</div>`;p.appendChild(d)})}
function clearFiles(){selectedFiles=[];document.getElementById('preview').innerHTML='';document.getElementById('fileInput').value=''}
function getFormData(){const fd=new FormData();selectedFiles.forEach(f=>fd.append('file',f));return fd}
async function apiPost(url,fd,rid){const el=document.getElementById(rid);el.textContent='처리중...';try{const r=await aspFetch(url,{method:'POST',body:fd});if(r instanceof Response){const d=await r.json();el.textContent=`HTTP ${r.status}\n${JSON.stringify(d,null,2)}`}else{el.textContent=`HTTP 200\n${JSON.stringify(r,null,2)}`}}catch(e){el.textContent=e.message}}
async function apiPostJson(url,body,rid){const el=document.getElementById(rid);el.textContent='처리중...';try{const r=await aspFetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(r instanceof Response){const d=await r.json();el.textContent=`HTTP ${r.status}\n${JSON.stringify(d,null,2)}`}else{el.textContent=`HTTP 200\n${JSON.stringify(r,null,2)}`}}catch(e){el.textContent=e.message}}
function uploadSingle(){if(!selectedFiles.length)return alert('파일 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/files/upload',fd,'uploadResult')}
function uploadMultiple(){if(!selectedFiles.length)return alert('파일 선택');apiPost('/api/files/upload-multiple',getFormData(),'uploadResult')}
function doResize(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost(`/api/media/resize?width=${document.getElementById('resizeW').value}&height=${document.getElementById('resizeH').value}&format=${document.getElementById('resizeFmt').value}&quality=${document.getElementById('resizeQ').value}`,fd,'resizeResult')}
function doResizeMultiple(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/resize-multiple',fd,'resizeResult')}
function doToWebp(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/to-webp',fd,'convertResult')}
function doImageInfo(){if(!selectedFiles.length)return alert('이미지 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/image-info',fd,'convertResult')}
function doVideoThumb(){if(!selectedFiles.length)return alert('비디오 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);apiPost('/api/media/video-thumbnail',fd,'convertResult')}
async function doVideoPreview(){if(!selectedFiles.length)return alert('비디오 선택');const fd=new FormData();fd.append('file',selectedFiles[0]);const intv=document.getElementById('pvInterval').value;const w=document.getElementById('pvWidth').value;const cols=document.getElementById('pvCols').value;const el=document.getElementById('previewResult');const sc=document.getElementById('spriteSheetContainer');el.textContent='처리중... (대용량 비디오는 시간이 소요됩니다)';sc.innerHTML='';try{const r=await aspFetch(`/api/media/video-preview?interval=${intv}&width=${w}&cols=${cols}`,{method:'POST',body:fd});const d=r instanceof Response?await r.json():r;el.textContent=`HTTP 200\n${JSON.stringify(d,null,2)}`;if(d.spriteSheet&&d.spriteSheet.path){sc.innerHTML=`<img class="sprite-preview" src="/storage/previews/${d.spriteSheet.path.split('/previews/').pop()}" alt="Sprite Sheet" onerror="this.style.display='none'">`}}catch(e){el.textContent=e.message}}
function doEncrypt(){const t=document.getElementById('cryptoText').value,k=document.getElementById('cryptoKey').value;if(!t)return alert('텍스트 입력');apiPostJson('/api/utils/encrypt',{text:t,key:k||undefined},'cryptoResult')}
function doDecrypt(){try{const prev=JSON.parse(document.getElementById('cryptoResult').textContent.split('\n').slice(1).join('\n'));apiPostJson('/api/utils/decrypt',{encrypted:prev.encrypted,key:prev.key},'cryptoResult')}catch{alert('먼저 암호화 실행')}}
function doHash(algo){const pw=document.getElementById('hashPassword').value;if(!pw)return alert('패스워드 입력');apiPostJson('/api/utils/hash',{password:pw,algorithm:algo},'hashResult')}
async function loadFileList(){const dir=document.getElementById('listDir').value,el=document.getElementById('fileList');el.innerHTML='<li class="list-group-item small">로딩중...</li>';try{const r=await aspFetch(`/api/files/list?dir=${dir}`);const d=r instanceof Response?await r.json():r;el.innerHTML=d.files.length?d.files.map(f=>`<li class="list-group-item d-flex justify-content-between small"><span>${f.name}</span><span class="text-muted">${(f.size/1024).toFixed(1)}KB</span></li>`).join(''):'<li class="list-group-item small text-muted">파일 없음</li>'}catch(e){el.innerHTML=`<li class="list-group-item small text-danger">${e.message}</li>`}}
</script>
{% endblock %}