{% extends 'base.html' %}

{% block title %}Add Watermark — 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">Add Watermark</li>
    </ol>
  </nav>

  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col">
      <h1 class="h2 fw-bold"><i class="fa-solid fa-stamp me-2 text-primary"></i>Add Watermark</h1>
      <p class="text-muted">Protect your images by adding a text watermark with custom position, size, and opacity.</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 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:160px;">
            <p id="previewName" class="small text-muted mt-2 mb-0"></p>
          </div>

          <!-- Watermark type toggle -->
          <div class="mb-4">
            <label class="form-label fw-semibold">Watermark Type</label>
            <div class="btn-group w-100" role="group">
              <input type="radio" class="btn-check" name="wmType" id="wmText" value="text" checked>
              <label class="btn btn-outline-primary" for="wmText">
                <i class="fa-solid fa-font me-1"></i>Text
              </label>
              <input type="radio" class="btn-check" name="wmType" id="wmImage" value="image">
              <label class="btn btn-outline-primary" for="wmImage">
                <i class="fa-solid fa-image me-1"></i>Image
              </label>
            </div>
          </div>

          <!-- Text watermark options -->
          <div id="textWmPanel">
            <!-- Watermark text -->
            <div class="mb-3">
              <label for="wmTextInput" class="form-label fw-semibold">Watermark Text</label>
              <input type="text" class="form-control" id="wmTextInput" name="wm_text"
                     placeholder="e.g. © Copyright 2026" value="© Copyright">
            </div>

            <!-- Font size & opacity row -->
            <div class="row g-3 mb-3">
              <div class="col-6">
                <label for="fontSize" class="form-label fw-semibold">
                  Font Size: <span id="fontSizeVal" class="badge bg-primary">36</span>px
                </label>
                <input type="range" class="form-range" id="fontSize" name="font_size"
                       min="12" max="120" value="36">
              </div>
              <div class="col-6">
                <label for="opacity" class="form-label fw-semibold">
                  Opacity: <span id="opacityVal" class="badge bg-primary">50</span>%
                </label>
                <input type="range" class="form-range" id="opacity" name="opacity"
                       min="5" max="100" value="50">
              </div>
            </div>

            <!-- Text color -->
            <div class="mb-3">
              <label for="textColor" class="form-label fw-semibold">Text Color</label>
              <div class="input-group">
                <input type="color" class="form-control form-control-color" id="textColor" name="text_color" value="#ffffff">
                <input type="text" class="form-control" id="textColorHex" value="#ffffff" maxlength="7" placeholder="#ffffff">
              </div>
            </div>

            <!-- Position grid -->
            <div class="mb-4">
              <label class="form-label fw-semibold">Position</label>
              <div class="d-grid gap-1" style="grid-template-columns:repeat(3,1fr);display:grid;">
                {% set positions = [
                  ('top-left','top_left'), ('top-center','top_center'), ('top-right','top_right'),
                  ('middle-left','middle_left'), ('center','center'), ('middle-right','middle_right'),
                  ('bottom-left','bottom_left'), ('bottom-center','bottom_center'), ('bottom-right','bottom_right')
                ] %}
                {% for label, val in positions %}
                <div>
                  <input type="radio" class="btn-check" name="position" id="pos_{{ val }}" value="{{ val }}"
                         {% if val == 'bottom_right' %}checked{% endif %}>
                  <label class="btn btn-outline-secondary btn-sm w-100 py-2" for="pos_{{ val }}"
                         title="{{ label }}">
                    <i class="fa-solid fa-circle" style="font-size:0.5rem;"></i>
                  </label>
                </div>
                {% endfor %}
              </div>
              <small class="text-muted">Select where the watermark should appear.</small>
            </div>
          </div>

          <!-- Image watermark options -->
          <div id="imageWmPanel" class="d-none mb-4">
            <label class="form-label fw-semibold">Watermark Image</label>
            <input type="file" class="form-control mb-3" id="wmImageInput" name="wm_image"
                   accept="image/png,image/webp">
            <small class="text-muted">Use a PNG with transparency for best results.</small>
            <div class="mt-3">
              <label for="wmImgOpacity" class="form-label fw-semibold">
                Opacity: <span id="wmImgOpacityVal" class="badge bg-primary">70</span>%
              </label>
              <input type="range" class="form-range" id="wmImgOpacity" name="wm_opacity"
                     min="5" max="100" value="70">
            </div>
          </div>

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

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

    <!-- Right column: results -->
    <div class="col-lg-6">
      <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>

      <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">Adding watermark…</p>
        </div>
      </div>

      <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>Watermark Added
        </div>
        <div class="card-body p-4">
          <div class="text-center mb-4">
            <img id="resultPreview" src="" alt="Watermarked image" class="img-fluid rounded shadow-sm" style="max-height:280px;">
          </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 Watermarked Image
            </a>
          </div>
        </div>
      </div>

      <div id="placeholderCard" class="card border-0 bg-light">
        <div class="card-body p-5 text-center text-muted">
          <i class="fa-solid fa-stamp fa-3x mb-3 opacity-25"></i>
          <p class="mb-0">Your watermarked 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 previewWrap = document.getElementById('previewWrap');
  const previewName = document.getElementById('previewName');
  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');
  const textPanel   = document.getElementById('textWmPanel');
  const imagePanel  = document.getElementById('imageWmPanel');
  const textColor   = document.getElementById('textColor');
  const textColorHex= document.getElementById('textColorHex');

  let selectedFile = null;

  // Slider live updates
  document.getElementById('fontSize').addEventListener('input', function() {
    document.getElementById('fontSizeVal').textContent = this.value;
  });
  document.getElementById('opacity').addEventListener('input', function() {
    document.getElementById('opacityVal').textContent = this.value;
  });
  document.getElementById('wmImgOpacity').addEventListener('input', function() {
    document.getElementById('wmImgOpacityVal').textContent = this.value;
  });

  // Color picker sync
  textColor.addEventListener('input', () => { textColorHex.value = textColor.value; });
  textColorHex.addEventListener('input', () => {
    if (/^#[0-9a-f]{6}$/i.test(textColorHex.value)) textColor.value = textColorHex.value;
  });

  // Type toggle
  document.querySelectorAll('input[name="wmType"]').forEach(r => {
    r.addEventListener('change', () => {
      if (r.value === 'text') {
        textPanel.classList.remove('d-none');
        imagePanel.classList.add('d-none');
      } else {
        textPanel.classList.add('d-none');
        imagePanel.classList.remove('d-none');
      }
    });
  });

  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');
    if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
  });
  fileInput.addEventListener('change', () => { if (fileInput.files[0]) handleFile(fileInput.files[0]); });

  function handleFile(file) {
    selectedFile = file;
    previewName.textContent = file.name;
    const reader = new FileReader();
    reader.onload = (e) => {
      document.getElementById('imagePreview').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 wmType = document.querySelector('input[name="wmType"]:checked').value;
    const fd = new FormData();
    fd.append('image', selectedFile);
    fd.append('wm_type', wmType);

    if (wmType === 'text') {
      fd.append('wm_text',   document.getElementById('wmTextInput').value);
      fd.append('font_size', document.getElementById('fontSize').value);
      fd.append('opacity',   document.getElementById('opacity').value);
      fd.append('text_color',document.getElementById('textColorHex').value);
      fd.append('position',  document.querySelector('input[name="position"]:checked').value);
    } else {
      const wmImg = document.getElementById('wmImageInput').files[0];
      if (wmImg) fd.append('wm_image', wmImg);
      fd.append('wm_opacity', document.getElementById('wmImgOpacity').value);
    }

    try {
      const resp = await fetch('/tools/image/watermark/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);
      }
      const blob = await resp.blob();
      const url  = URL.createObjectURL(blob);
      document.getElementById('resultPreview').src = url;
      const dl = document.getElementById('downloadLink');
      dl.href     = url;
      dl.download = 'watermarked_' + 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;
    }
  });
})();
</script>
{% endblock %}