{% extends "base.html" %}

{% block title %}Tools - Stegasoo{% endblock %}

{% block content %}
<style>
/* Tool drop zone - compact */
.tool-drop-zone {
    position: relative;
    min-height: 120px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tool-drop-zone.drag-over {
    border-color: #63b3ed;
    background: rgba(99, 179, 237, 0.1);
}

.tool-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.tool-drop-zone .drop-label {
    text-align: center;
    padding: 25px 20px;
}

.tool-drop-zone .drop-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tool-drop-zone.drag-over .drop-icon {
    color: #63b3ed;
    transform: scale(1.1);
}

/* Preview state */
.tool-drop-zone.has-file .drop-label {
    display: none;
}

.tool-drop-zone .preview-container {
    display: none;
    padding: 12px;
}

.tool-drop-zone.has-file .preview-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tool-drop-zone .preview-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid rgba(99, 179, 237, 0.5);
}

.tool-drop-zone .preview-info {
    flex: 1;
    min-width: 0;
}

.tool-drop-zone .preview-name {
    font-weight: 600;
    color: #63b3ed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-drop-zone .preview-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.tool-drop-zone .preview-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    opacity: 0.7;
}

.tool-drop-zone .preview-clear:hover {
    opacity: 1;
}

/* Result panels */
.result-panel {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* EXIF table styling */
.exif-table {
    font-size: 0.85rem;
}

.exif-table th {
    background: rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
}

.exif-table td {
    vertical-align: middle;
}

.exif-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(99, 179, 237, 0.3) !important;
    color: #63b3ed !important;
    font-family: monospace;
    font-size: 0.8rem;
    padding: 4px 8px;
}

.exif-input:focus {
    border-color: #63b3ed !important;
    box-shadow: 0 0 10px rgba(99, 179, 237, 0.2) !important;
}

/* Processing state */
.processing .tool-drop-zone {
    pointer-events: none;
    opacity: 0.6;
}

.processing .btn {
    pointer-events: none;
}

/* Tool section visibility */
.tool-section { display: none; }
.tool-section.active { display: block; }

/* Green→amber gradient (12.5% lighter) */
.tool-tabs .btn-outline-primary {
    background-color: rgba(0, 0, 0, 0.25);
}
.tool-tabs .btn-outline-primary:nth-of-type(1) {
    color: #40d770;
    border-color: #40d770;
}
.tool-tabs .btn-outline-primary:nth-of-type(2) {
    color: #96da2c;
    border-color: #96da2c;
}
.tool-tabs .btn-outline-primary:nth-of-type(3) {
    color: #fdda64;
    border-color: #fdda64;
}

.tool-tabs .btn-outline-primary:nth-of-type(1):hover {
    background-color: rgba(64, 215, 112, 0.15);
}
.tool-tabs .btn-outline-primary:nth-of-type(2):hover {
    background-color: rgba(150, 218, 44, 0.15);
}
.tool-tabs .btn-outline-primary:nth-of-type(3):hover {
    background-color: rgba(253, 218, 100, 0.15);
}

.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(1) {
    background-color: #40d770;
    border-color: #40d770;
    color: #1a1a2e;
}
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(2) {
    background-color: #96da2c;
    border-color: #96da2c;
    color: #1a1a2e;
}
.tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(3) {
    background-color: #fdda64;
    border-color: #fdda64;
    color: #1a1a2e;
}
</style>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-tools me-2"></i>Image Security Toolkit</h5>
            </div>
            <div class="card-body">
                <!-- Tool Selector Tabs -->
                <div class="btn-group tool-tabs w-100 mb-4" role="group">
                    <input type="radio" class="btn-check" name="tool_type" id="toolCapacity" value="capacity" checked>
                    <label class="btn btn-outline-primary" for="toolCapacity">
                        <i class="bi bi-rulers me-1"></i> Capacity
                    </label>
                    <input type="radio" class="btn-check" name="tool_type" id="toolExif" value="exif">
                    <label class="btn btn-outline-primary" for="toolExif">
                        <i class="bi bi-card-text me-1"></i> EXIF
                    </label>
                    <input type="radio" class="btn-check" name="tool_type" id="toolStrip" value="strip">
                    <label class="btn btn-outline-primary" for="toolStrip">
                        <i class="bi bi-eraser me-1"></i> Strip
                    </label>
                </div>

                <!-- ============================================================ -->
                <!-- CAPACITY CALCULATOR -->
                <!-- ============================================================ -->
                <div class="tool-section active" id="capacitySection">
                    <p class="text-muted small mb-3">Check how much data can be hidden in an image</p>

                    <div class="tool-drop-zone" id="capacityZone">
                        <input type="file" accept="image/*" id="capacityFile">
                        <div class="drop-label">
                            <i class="bi bi-image drop-icon d-block mb-2"></i>
                            <span class="text-muted">Drop image or click to browse</span>
                        </div>
                        <div class="preview-container">
                            <img class="preview-thumb" id="capacityThumb">
                            <div class="preview-info">
                                <div class="preview-name" id="capacityName">image.jpg</div>
                                <div class="preview-meta" id="capacityMeta">-- × -- · -- MB</div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="capacityClear">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    <!-- Results -->
                    <div class="result-panel p-3 mt-3 d-none" id="capacityResult">
                        <div class="row text-center">
                            <div class="col-6 col-md-3 mb-3 mb-md-0">
                                <div class="text-muted small">Dimensions</div>
                                <div class="fw-bold" id="capDimensions">--</div>
                            </div>
                            <div class="col-6 col-md-3 mb-3 mb-md-0">
                                <div class="text-muted small">Megapixels</div>
                                <div class="fw-bold" id="capMegapixels">--</div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="text-muted small">LSB Capacity</div>
                                <div class="fw-bold text-primary" id="capLsb">--</div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="text-muted small">DCT Capacity</div>
                                <div class="fw-bold text-warning" id="capDct">--</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ============================================================ -->
                <!-- EXIF EDITOR -->
                <!-- ============================================================ -->
                <div class="tool-section" id="exifSection">
                    <p class="text-muted small mb-3">View, edit, or remove image metadata</p>

                    <div class="tool-drop-zone" id="exifZone">
                        <input type="file" accept="image/*" id="exifFile">
                        <div class="drop-label">
                            <i class="bi bi-card-image drop-icon d-block mb-2"></i>
                            <span class="text-muted">Drop image or click to browse</span>
                        </div>
                        <div class="preview-container">
                            <img class="preview-thumb" id="exifThumb">
                            <div class="preview-info">
                                <div class="preview-name" id="exifName">image.jpg</div>
                                <div class="preview-meta"><span id="exifFieldCount">0</span> metadata fields</div>
                                <div id="exifNotEditable" class="text-warning small d-none">
                                    <i class="bi bi-exclamation-triangle me-1"></i>Non-JPEG: clear only
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="exifClear">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    <!-- EXIF Data Editor -->
                    <div id="exifEditor" class="d-none mt-3">
                        <div class="table-responsive result-panel" style="max-height: 250px; overflow-y: auto;">
                            <table class="table table-sm table-dark table-hover exif-table mb-0">
                                <thead>
                                    <tr>
                                        <th style="width: 35%">Field</th>
                                        <th>Value</th>
                                        <th style="width: 40px"></th>
                                    </tr>
                                </thead>
                                <tbody id="exifTable"></tbody>
                            </table>
                        </div>

                        <div id="exifEmpty" class="result-panel text-muted text-center py-4 d-none">
                            <i class="bi bi-inbox fs-4 d-block mb-2"></i>No metadata found
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 mt-3 pt-3 border-top border-secondary">
                            <button type="button" class="btn btn-outline-danger" id="exifClearAll">
                                <i class="bi bi-trash me-1"></i>Clear All
                            </button>
                            <div class="ms-auto d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary" id="exifDiscard">
                                    Discard
                                </button>
                                <button type="button" class="btn btn-primary" id="exifSave" disabled>
                                    <i class="bi bi-download me-1"></i>Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ============================================================ -->
                <!-- STRIP METADATA -->
                <!-- ============================================================ -->
                <div class="tool-section" id="stripSection">
                    <p class="text-muted small mb-3">Remove all EXIF data and get a clean image</p>

                    <div class="tool-drop-zone" id="stripZone">
                        <input type="file" accept="image/*" id="stripFile">
                        <div class="drop-label">
                            <i class="bi bi-file-earmark-x drop-icon d-block mb-2"></i>
                            <span class="text-muted">Drop image or click to browse</span>
                        </div>
                        <div class="preview-container">
                            <img class="preview-thumb" id="stripThumb">
                            <div class="preview-info">
                                <div class="preview-name" id="stripName">image.jpg</div>
                                <div class="preview-meta" id="stripMeta">--</div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-secondary preview-clear d-none" id="stripClearBtn">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    <!-- Format selector and action -->
                    <div id="stripOptions" class="d-none mt-3">
                        <div class="d-flex align-items-center gap-3">
                            <label class="form-label mb-0 small text-muted">Output:</label>
                            <select class="form-select form-select-sm" id="stripFormat" style="width: auto;">
                                <option value="PNG" selected>PNG (lossless)</option>
                                <option value="JPEG">JPEG</option>
                            </select>
                            <button type="button" class="btn btn-danger ms-auto" id="stripAction">
                                <i class="bi bi-eraser me-1"></i>Strip & Download
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ============================================================================
// TAB SWITCHING
// ============================================================================

const toolRadios = document.querySelectorAll('input[name="tool_type"]');
const toolSections = {
    capacity: document.getElementById('capacitySection'),
    exif: document.getElementById('exifSection'),
    strip: document.getElementById('stripSection')
};

function switchTool() {
    const selected = document.querySelector('input[name="tool_type"]:checked').value;
    Object.entries(toolSections).forEach(([key, section]) => {
        section.classList.toggle('active', key === selected);
    });
}

toolRadios.forEach(radio => radio.addEventListener('change', switchTool));

// ============================================================================
// SHARED - Drop zone helpers
// ============================================================================

function setupDropZone(zoneId, fileInputId, onFile) {
    const zone = document.getElementById(zoneId);
    const input = document.getElementById(fileInputId);
    if (!zone || !input) return;

    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
    zone.addEventListener('drop', e => {
        e.preventDefault();
        zone.classList.remove('drag-over');
        if (e.dataTransfer.files[0]) {
            input.files = e.dataTransfer.files;
            input.dispatchEvent(new Event('change'));
        }
    });

    input.addEventListener('change', function() {
        if (this.files[0]) onFile(this.files[0]);
    });
}

function showPreview(zoneId, file, thumbId, nameId, metaText, clearBtnId) {
    const zone = document.getElementById(zoneId);
    const thumb = document.getElementById(thumbId);
    const name = document.getElementById(nameId);
    const clearBtn = document.getElementById(clearBtnId);

    zone.classList.add('has-file');
    name.textContent = file.name;

    if (metaText) {
        const metaEl = name.nextElementSibling;
        if (metaEl) metaEl.textContent = metaText;
    }

    const reader = new FileReader();
    reader.onload = e => thumb.src = e.target.result;
    reader.readAsDataURL(file);

    clearBtn?.classList.remove('d-none');
}

function clearDropZone(zoneId, fileInputId, clearBtnId, extraCleanup) {
    const zone = document.getElementById(zoneId);
    const input = document.getElementById(fileInputId);
    const clearBtn = document.getElementById(clearBtnId);

    zone?.classList.remove('has-file');
    if (input) input.value = '';
    clearBtn?.classList.add('d-none');
    if (extraCleanup) extraCleanup();
}

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

// ============================================================================
// CAPACITY CALCULATOR
// ============================================================================

setupDropZone('capacityZone', 'capacityFile', async (file) => {
    showPreview('capacityZone', file, 'capacityThumb', 'capacityName', formatBytes(file.size), 'capacityClear');

    const formData = new FormData();
    formData.append('image', file);

    try {
        const res = await fetch('/api/tools/capacity', { method: 'POST', body: formData });
        const data = await res.json();

        if (data.success) {
            document.getElementById('capacityMeta').textContent =
                `${data.width} × ${data.height} · ${formatBytes(file.size)}`;
            document.getElementById('capDimensions').textContent = `${data.width} × ${data.height}`;
            document.getElementById('capMegapixels').textContent = data.megapixels + ' MP';
            document.getElementById('capLsb').textContent = data.lsb.capacity_kb.toFixed(1) + ' KB';
            document.getElementById('capDct').textContent = data.dct.available
                ? data.dct.capacity_kb.toFixed(1) + ' KB'
                : 'N/A';
            document.getElementById('capacityResult').classList.remove('d-none');
        }
    } catch (err) {
        console.error(err);
    }
});

document.getElementById('capacityClear')?.addEventListener('click', () => {
    clearDropZone('capacityZone', 'capacityFile', 'capacityClear', () => {
        document.getElementById('capacityResult').classList.add('d-none');
    });
});

// ============================================================================
// EXIF EDITOR
// ============================================================================

let exifOriginalData = {};
let exifCurrentData = {};
let exifEditable = false;
let exifCurrentFile = null;

setupDropZone('exifZone', 'exifFile', async (file) => {
    exifCurrentFile = file;
    showPreview('exifZone', file, 'exifThumb', 'exifName', '', 'exifClear');

    const formData = new FormData();
    formData.append('image', file);

    try {
        const res = await fetch('/api/tools/exif', { method: 'POST', body: formData });
        const data = await res.json();

        if (data.success) {
            exifOriginalData = JSON.parse(JSON.stringify(data.exif));
            exifCurrentData = JSON.parse(JSON.stringify(data.exif));
            exifEditable = data.editable;

            document.getElementById('exifFieldCount').textContent = data.field_count;
            document.getElementById('exifNotEditable').classList.toggle('d-none', data.editable);
            document.getElementById('exifEditor').classList.remove('d-none');

            renderExifTable();
            updateSaveButton();
        }
    } catch (err) {
        console.error(err);
    }
});

document.getElementById('exifClear')?.addEventListener('click', () => {
    clearDropZone('exifZone', 'exifFile', 'exifClear', () => {
        document.getElementById('exifEditor').classList.add('d-none');
        exifCurrentFile = null;
        exifOriginalData = {};
        exifCurrentData = {};
    });
});

function renderExifTable() {
    const tbody = document.getElementById('exifTable');
    const empty = document.getElementById('exifEmpty');
    const entries = Object.entries(exifCurrentData).sort((a, b) => a[0].localeCompare(b[0]));

    if (entries.length === 0) {
        tbody.innerHTML = '';
        empty.classList.remove('d-none');
        return;
    }

    empty.classList.add('d-none');
    tbody.innerHTML = entries.map(([key, value]) => {
        let displayVal = typeof value === 'object' ? JSON.stringify(value) : value;
        if (typeof displayVal === 'string' && displayVal.length > 50) {
            displayVal = displayVal.substring(0, 47) + '...';
        }

        const editableFields = ['Make', 'Model', 'Software', 'Artist', 'Copyright', 'ImageDescription', 'DateTime', 'DateTimeOriginal', 'DateTimeDigitized', 'UserComment', 'LensMake', 'LensModel'];
        const canEdit = exifEditable && editableFields.includes(key) && typeof value === 'string';

        return `
            <tr data-field="${key}">
                <td class="text-muted small">${key}</td>
                <td class="font-monospace small">
                    ${canEdit
                        ? `<input type="text" class="form-control form-control-sm exif-input"
                             value="${String(value).replace(/"/g, '&quot;')}" data-field="${key}">`
                        : `<span title="${String(displayVal)}">${displayVal}</span>`
                    }
                </td>
                <td>
                    ${canEdit
                        ? `<button class="btn btn-sm btn-outline-danger border-0 exif-delete" data-field="${key}" title="Remove">
                             <i class="bi bi-x"></i>
                           </button>`
                        : ''
                    }
                </td>
            </tr>
        `;
    }).join('');

    tbody.querySelectorAll('.exif-input').forEach(input => {
        input.addEventListener('input', function() {
            exifCurrentData[this.dataset.field] = this.value;
            updateSaveButton();
        });
    });

    tbody.querySelectorAll('.exif-delete').forEach(btn => {
        btn.addEventListener('click', function() {
            delete exifCurrentData[this.dataset.field];
            renderExifTable();
            updateSaveButton();
        });
    });
}

function updateSaveButton() {
    const changed = JSON.stringify(exifCurrentData) !== JSON.stringify(exifOriginalData);
    document.getElementById('exifSave').disabled = !changed;
}

document.getElementById('exifClearAll')?.addEventListener('click', async function() {
    if (!exifCurrentFile) return;
    if (!confirm('Remove all metadata from this image?')) return;

    const formData = new FormData();
    formData.append('image', exifCurrentFile);
    formData.append('format', 'PNG');

    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Clearing...';

    try {
        const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
        if (res.ok) {
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'clean.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

            exifCurrentData = {};
            exifOriginalData = {};
            renderExifTable();
        } else {
            alert('Failed to clear metadata');
        }
    } catch (err) {
        console.error(err);
        alert('Failed to clear metadata: ' + err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-trash me-1"></i>Clear All';
    }
});

document.getElementById('exifDiscard')?.addEventListener('click', function() {
    exifCurrentData = JSON.parse(JSON.stringify(exifOriginalData));
    renderExifTable();
    updateSaveButton();
});

document.getElementById('exifSave')?.addEventListener('click', async function() {
    if (!exifCurrentFile || !exifEditable) return;

    const updates = {};
    for (const [key, val] of Object.entries(exifCurrentData)) {
        if (exifOriginalData[key] !== val) updates[key] = val;
    }
    for (const key of Object.keys(exifOriginalData)) {
        if (!(key in exifCurrentData)) updates[key] = null;
    }

    if (Object.keys(updates).length === 0) return;

    const formData = new FormData();
    formData.append('image', exifCurrentFile);
    formData.append('updates', JSON.stringify(updates));

    const btn = this;
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving...';

    try {
        const res = await fetch('/api/tools/exif/update', { method: 'POST', body: formData });
        if (res.ok) {
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'updated.jpg';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

            exifOriginalData = JSON.parse(JSON.stringify(exifCurrentData));
            updateSaveButton();
        } else {
            alert('Failed to save');
        }
    } catch (err) {
        console.error(err);
        alert('Failed to save changes: ' + err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        updateSaveButton();
    }
});

// ============================================================================
// STRIP METADATA
// ============================================================================

let stripCurrentFile = null;

setupDropZone('stripZone', 'stripFile', (file) => {
    stripCurrentFile = file;
    showPreview('stripZone', file, 'stripThumb', 'stripName', formatBytes(file.size), 'stripClearBtn');
    document.getElementById('stripMeta').textContent = formatBytes(file.size);
    document.getElementById('stripOptions').classList.remove('d-none');
});

document.getElementById('stripClearBtn')?.addEventListener('click', () => {
    clearDropZone('stripZone', 'stripFile', 'stripClearBtn', () => {
        document.getElementById('stripOptions').classList.add('d-none');
        stripCurrentFile = null;
    });
});

document.getElementById('stripAction')?.addEventListener('click', async function() {
    if (!stripCurrentFile) return;

    const format = document.getElementById('stripFormat').value;
    const formData = new FormData();
    formData.append('image', stripCurrentFile);
    formData.append('format', format);

    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Processing...';

    try {
        const res = await fetch('/api/tools/exif/clear', { method: 'POST', body: formData });
        if (res.ok) {
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = res.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || `clean.${format.toLowerCase()}`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        } else {
            alert('Failed to strip metadata');
        }
    } catch (err) {
        console.error(err);
        alert('Failed to strip metadata: ' + err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-eraser me-1"></i>Strip & Download';
    }
});
</script>
{% endblock %}