{% extends 'base.html' %}

{% block title %}Compress Image — WebTools{% endblock %}

{% block content %}
<div class="container py-5">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Home</a></li>
      <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}#image">Image Tools</a></li>
      <li class="breadcrumb-item active" aria-current="page">Compress Image</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-compress-arrows-alt me-2 text-primary"></i>Compress Image</h1>
      <p class="text-muted">Reduce image file size while preserving visual quality. Supports JPEG, PNG, WebP and more.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Left column: form -->
    <div class="col-lg-6">
      <div class="card shadow-sm border-0">
        <div class="card-body p-4">

          <!-- Drop zone -->
          <div id="dropZone" class="border border-2 border-dashed rounded-3 text-center p-5 mb-4 position-relative"
               style="border-style:dashed!important;cursor:pointer;transition:background .2s;">
            <i class="fa-solid fa-cloud-arrow-up fa-2x text-muted mb-2"></i>
            <p class="mb-1 fw-semibold">Drag &amp; drop an image here</p>
            <p class="text-muted small mb-3">or click to browse</p>
            <input type="file" id="imageInput" name="image" accept="image/*"
                   class="position-absolute top-0 start-0 w-100 h-100 opacity-0" style="cursor:pointer;">
          </div>

          <!-- Preview -->
          <div id="previewWrap" class="mb-4 d-none text-center">
            <img id="imagePreview" src="" alt="Preview" class="img-fluid rounded shadow-sm" style="max-height:200px;">
            <p id="previewName" class="small text-muted mt-2 mb-0"></p>
          </div>

          <!-- Quality slider -->
          <div class="mb-4">
            <label for="quality" class="form-label fw-semibold">
              Compression Quality:
              <span id="qualityVal" class="badge bg-primary ms-1">75</span>
            </label>
            <input type="range" class="form-range" id="quality" name="quality"
                   min="10" max="95" value="75">
            <div class="d-flex justify-content-between">
              <small class="text-muted">Smaller file (10)</small>
              <small class="text-muted">Best quality (95)</small>
            </div>
          </div>

          <!-- Submit -->
          <div class="d-grid">
            <button id="submitBtn" type="button" class="btn btn-primary btn-lg" disabled>
              <i class="fa-solid fa-compress me-2"></i>Compress Image
            </button>
          </div>

        </div>
      </div>
    </div>

    <!-- Right column: results -->
    <div class="col-lg-6">
      <!-- Error alert -->
      <div id="errorAlert" class="alert alert-danger d-none" role="alert">
        <i class="fa-solid fa-circle-xmark me-2"></i>
        <span id="errorMsg"></span>
      </div>

      <!-- Loading -->
      <div id="loadingCard" class="card shadow-sm border-0 d-none">
        <div class="card-body p-5 text-center">
          <div class="spinner-border text-primary mb-3" style="width:3rem;height:3rem;" role="status">
            <span class="visually-hidden">Processing...</span>
          </div>
          <p class="fw-semibold mb-0">Compressing image…</p>
        </div>
      </div>

      <!-- Results -->
      <div id="resultsCard" class="card shadow-sm border-0 d-none">
        <div class="card-header bg-success text-white fw-semibold">
          <i class="fa-solid fa-circle-check me-2"></i>Compression Complete
        </div>
        <div class="card-body p-4">
          <!-- Size comparison -->
          <div class="row g-3 mb-4">
            <div class="col-6">
              <div class="p-3 rounded bg-light text-center">
                <p class="small text-muted mb-1">Original Size</p>
                <p id="originalSize" class="h5 fw-bold mb-0 text-danger">—</p>
              </div>
            </div>
            <div class="col-6">
              <div class="p-3 rounded bg-light text-center">
                <p class="small text-muted mb-1">Compressed Size</p>
                <p id="compressedSize" class="h5 fw-bold mb-0 text-success">—</p>
              </div>
            </div>
          </div>
          <div class="mb-4">
            <div class="d-flex justify-content-between mb-1">
              <small class="text-muted">Size reduction</small>
              <small id="savingsPct" class="fw-semibold text-success">—</small>
            </div>
            <div class="progress" style="height:8px;">
              <div id="savingsBar" class="progress-bar bg-success" role="progressbar" style="width:0%"></div>
            </div>
          </div>
          <div class="d-grid">
            <a id="downloadLink" href="#" class="btn btn-success btn-lg" download>
              <i class="fa-solid fa-download me-2"></i>Download Compressed Image
            </a>
          </div>
        </div>
      </div>

      <!-- Placeholder -->
      <div id="placeholderCard" class="card border-0 bg-light">
        <div class="card-body p-5 text-center text-muted">
          <i class="fa-solid fa-image fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Your compressed image will appear here after processing.</p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  'use strict';

  const dropZone   = document.getElementById('dropZone');
  const fileInput  = document.getElementById('imageInput');
  const preview    = document.getElementById('imagePreview');
  const previewWrap= document.getElementById('previewWrap');
  const previewName= document.getElementById('previewName');
  const qualSlider = document.getElementById('quality');
  const qualVal    = document.getElementById('qualityVal');
  const submitBtn  = document.getElementById('submitBtn');
  const errorAlert = document.getElementById('errorAlert');
  const errorMsg   = document.getElementById('errorMsg');
  const loadingCard= document.getElementById('loadingCard');
  const resultsCard= document.getElementById('resultsCard');
  const placeholder= document.getElementById('placeholderCard');

  let selectedFile = null;

  // Slider live update
  qualSlider.addEventListener('input', () => { qualVal.textContent = qualSlider.value; });

  // Drop-zone highlight
  dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('bg-primary','bg-opacity-10'); });
  dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('bg-primary','bg-opacity-10'); });
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('bg-primary','bg-opacity-10');
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  });

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

  function handleFile(file) {
    selectedFile = file;
    previewName.textContent = file.name + ' (' + formatBytes(file.size) + ')';
    const reader = new FileReader();
    reader.onload = (e) => {
      preview.src = e.target.result;
      previewWrap.classList.remove('d-none');
    };
    reader.readAsDataURL(file);
    submitBtn.disabled = false;
    hideResults();
  }

  function hideResults() {
    errorAlert.classList.add('d-none');
    loadingCard.classList.add('d-none');
    resultsCard.classList.add('d-none');
    placeholder.classList.remove('d-none');
  }

  submitBtn.addEventListener('click', async () => {
    if (!selectedFile) return;

    errorAlert.classList.add('d-none');
    loadingCard.classList.remove('d-none');
    resultsCard.classList.add('d-none');
    placeholder.classList.add('d-none');
    submitBtn.disabled = true;

    const fd = new FormData();
    fd.append('image', selectedFile);
    fd.append('quality', qualSlider.value);

    try {
      const resp = await fetch('/tools/image/compress/process', { method: 'POST', body: fd });

      if (!resp.ok) {
        let msg = 'Server error ' + resp.status;
        try { const j = await resp.json(); msg = j.error || msg; } catch(_) {}
        throw new Error(msg);
      }

      // Read size from headers if provided
      const origBytes  = parseInt(resp.headers.get('X-Original-Size')  || '0');
      const compBytes  = parseInt(resp.headers.get('X-Compressed-Size') || '0');

      const blob = await resp.blob();
      const url  = URL.createObjectURL(blob);

      const origSize  = origBytes  || selectedFile.size;
      const compSize  = compBytes  || blob.size;
      const pct       = Math.round((1 - compSize / origSize) * 100);

      document.getElementById('originalSize').textContent   = formatBytes(origSize);
      document.getElementById('compressedSize').textContent = formatBytes(compSize);
      document.getElementById('savingsPct').textContent     = pct + '% smaller';
      document.getElementById('savingsBar').style.width     = Math.max(0, pct) + '%';

      const dl = document.getElementById('downloadLink');
      dl.href = url;
      dl.download = 'compressed_' + selectedFile.name;

      loadingCard.classList.add('d-none');
      resultsCard.classList.remove('d-none');
    } catch (err) {
      loadingCard.classList.add('d-none');
      placeholder.classList.remove('d-none');
      errorMsg.textContent = err.message;
      errorAlert.classList.remove('d-none');
    } finally {
      submitBtn.disabled = false;
    }
  });

  function formatBytes(b) {
    if (b === 0) return '0 B';
    const k = 1024, sizes = ['B','KB','MB','GB'];
    const i = Math.floor(Math.log(b) / Math.log(k));
    return parseFloat((b / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }
})();
</script>
{% endblock %}