{{define "index.html"}}{{template "base.html" .}}{{end}}
{{define "title"}}SHRINK{{end}}
{{define "content"}}

<div id="drop-zone">
    <p>DROP IMAGE HERE OR CLICK TO SELECT</p>
    <input type="file" id="file-input" accept="image/*" hidden>
</div>

<div id="preview-section">
    <img id="preview-img" alt="Preview">
    <p id="original-size"></p>
</div>

<div id="controls">
    <div class="control-row">
        <label for="quality-slider">QUALITY</label>
        <input type="range" id="quality-slider" min="1" max="100" value="80">
        <span id="quality-value">80</span>
    </div>
    <div class="control-row">
        <label>RESIZE</label>
        <input type="number" id="width-input" placeholder="WIDTH" min="1">
        <span class="dimension-sep">x</span>
        <span id="height-display">—</span>
    </div>
    <button id="compress-btn">COMPRESS</button>
</div>

<div id="result-section">
    <div class="size-comparison">
        <div>
            <label>ORIGINAL</label>
            <p id="result-original-size"></p>
        </div>
        <div>
            <label>COMPRESSED</label>
            <p id="result-compressed-size"></p>
        </div>
        <div>
            <label>REDUCTION</label>
            <p id="result-reduction"></p>
        </div>
    </div>
    <a id="download-link">
        <button>DOWNLOAD</button>
    </a>
</div>

<script>
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const previewSection = document.getElementById('preview-section');
const previewImg = document.getElementById('preview-img');
const originalSize = document.getElementById('original-size');
const controls = document.getElementById('controls');
const qualitySlider = document.getElementById('quality-slider');
const qualityValue = document.getElementById('quality-value');
const widthInput = document.getElementById('width-input');
const heightDisplay = document.getElementById('height-display');
const compressBtn = document.getElementById('compress-btn');
const resultSection = document.getElementById('result-section');
const resultOriginalSize = document.getElementById('result-original-size');
const resultCompressedSize = document.getElementById('result-compressed-size');
const resultReduction = document.getElementById('result-reduction');
const downloadLink = document.getElementById('download-link');

let selectedFile = null;
let naturalWidth = 0;
let naturalHeight = 0;

function formatBytes(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

function handleFile(file) {
    if (!file || !file.type.startsWith('image/')) return;
    selectedFile = file;
    const url = URL.createObjectURL(file);
    previewImg.src = url;
    originalSize.textContent = formatBytes(file.size);
    previewSection.classList.add('visible');
    controls.classList.add('visible');
    resultSection.classList.remove('visible');

    const tmp = new Image();
    tmp.onload = () => {
        naturalWidth = tmp.naturalWidth;
        naturalHeight = tmp.naturalHeight;
        widthInput.value = naturalWidth;
        heightDisplay.textContent = naturalHeight;
    };
    tmp.src = url;
}

dropZone.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', () => {
    if (fileInput.files.length) handleFile(fileInput.files[0]);
});

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
    dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
});

qualitySlider.addEventListener('input', () => {
    qualityValue.textContent = qualitySlider.value;
});

widthInput.addEventListener('input', () => {
    if (naturalWidth > 0) {
        const w = parseInt(widthInput.value) || 0;
        heightDisplay.textContent = w > 0 ? Math.round(w * naturalHeight / naturalWidth) : '—';
    }
});

compressBtn.addEventListener('click', async () => {
    if (!selectedFile) return;
    compressBtn.disabled = true;
    compressBtn.textContent = 'COMPRESSING...';

    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('quality', qualitySlider.value);
    const w = parseInt(widthInput.value) || 0;
    if (w > 0) {
        formData.append('width', w.toString());
    }

    try {
        const res = await fetch('/compress', { method: 'POST', body: formData });
        if (!res.ok) {
            const text = await res.text();
            alert('Compression failed: ' + text);
            return;
        }
        const blob = await res.blob();
        const originalBytes = selectedFile.size;
        const compressedBytes = blob.size;
        const reduction = ((1 - compressedBytes / originalBytes) * 100).toFixed(1);

        resultOriginalSize.textContent = formatBytes(originalBytes);
        resultCompressedSize.textContent = formatBytes(compressedBytes);
        resultReduction.textContent = reduction + '%';

        if (downloadLink.href && downloadLink.href.startsWith('blob:')) {
            URL.revokeObjectURL(downloadLink.href);
        }
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = selectedFile.name.replace(/\.[^.]+$/, '') + '_compressed.jpg';
        resultSection.classList.add('visible');
    } catch (err) {
        alert('Error: ' + err.message);
    } finally {
        compressBtn.disabled = false;
        compressBtn.textContent = 'COMPRESS';
    }
});
</script>

{{end}}