script.js

(() => {
  const STORAGE_KEY = 'gifvault_items_v1';
  const SETTINGS_KEY = 'gifvault_settings_v1';
  const DEFAULT_LIMIT = 60;

  /** @typedef {{id:string, url:string, count:number, addedAt:number, lastUsedAt:number|null}} GifItem */

  /** @type {GifItem[]} */
  let items = loadItems();
  let settings = loadSettings();
  let sortMode = 'asc'; // 'asc' = least used first (candidates to clean up), 'desc' = most used first

  // ---------- storage ----------

  function loadItems() {
    try {
      const raw = localStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : [];
    } catch (e) {
      console.error('failed to load items', e);
      return [];
    }
  }

  function saveItems() {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
    } catch (e) {
      console.error('failed to save items', e);
      showToast('не удалось сохранить — localStorage переполнен?');
    }
  }

  function loadSettings() {
    try {
      const raw = localStorage.getItem(SETTINGS_KEY);
      return raw ? JSON.parse(raw) : { limit: DEFAULT_LIMIT };
    } catch (e) {
      return { limit: DEFAULT_LIMIT };
    }
  }

  function saveSettings() {
    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
  }

  // ---------- dom refs ----------

  const grid = document.getElementById('grid');
  const emptyState = document.getElementById('empty-state');
  const addForm = document.getElementById('add-form');
  const urlInput = document.getElementById('url-input');
  const countLabel = document.getElementById('count-label');
  const limitFill = document.getElementById('limit-fill');
  const limitLabel = document.getElementById('limit-label');
  const sortToggle = document.getElementById('sort-toggle');
  const sortLabel = document.getElementById('sort-label');

  const settingsBtn = document.getElementById('settings-btn');
  const settingsOverlay = document.getElementById('settings-overlay');
  const settingsClose = document.getElementById('settings-close');
  const limitInput = document.getElementById('limit-input');
  const exportBtn = document.getElementById('export-btn');
  const importBtn = document.getElementById('import-btn');
  const importFile = document.getElementById('import-file');
  const clearBtn = document.getElementById('clear-btn');
  const toast = document.getElementById('toast');

  // ---------- helpers ----------

  function uid() {
    return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
  }

  function isLikelyUrl(str) {
    try {
      const u = new URL(str);
      return u.protocol === 'http:' || u.protocol === 'https:';
    } catch (e) {
      return false;
    }
  }

  function showToast(msg) {
    toast.textContent = msg;
    toast.classList.add('visible');
    clearTimeout(showToast._t);
    showToast._t = setTimeout(() => toast.classList.remove('visible'), 1800);
  }

  function maxCount() {
    return items.reduce((m, it) => Math.max(m, it.count), 0) || 1;
  }

  function heatColor(count) {
    const t = Math.min(1, count / maxCount());
    // interpolate between cold (blue) and hot (coral)
    const cold = [77, 123, 255];
    const hot = [255, 95, 126];
    const rgb = cold.map((c, i) => Math.round(c + (hot[i] - c) * t));
    return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  }

  // ---------- core actions ----------

  function addGif(url) {
    url = url.trim();
    if (!url) return;
    if (!isLikelyUrl(url)) {
      showToast('это не похоже на ссылку');
      return;
    }
    if (items.some(it => it.url === url)) {
      showToast('такая гифка уже есть');
      return;
    }
    items.unshift({
      id: uid(),
      url,
      count: 0,
      addedAt: Date.now(),
      lastUsedAt: null,
    });
    enforceLimit();
    saveItems();
    render();
  }

  function useGif(id) {
    const it = items.find(i => i.id === id);
    if (!it) return;
    it.count += 1;
    it.lastUsedAt = Date.now();
    saveItems();
    render();

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(it.url)
        .then(() => showToast('скопировано — вставляй в чат'))
        .catch(() => showToast('использовано (копирование не удалось)'));
    } else {
      showToast('использовано');
    }
  }

  function deleteGif(id) {
    items = items.filter(i => i.id !== id);
    saveItems();
    render();
  }

  function enforceLimit() {
    const limit = settings.limit || DEFAULT_LIMIT;
    if (items.length <= limit) return;

    // remove the least-used items first (ties broken by oldest lastUsedAt / addedAt)
    const sorted = [...items].sort((a, b) => {
      if (a.count !== b.count) return a.count - b.count;
      const at = a.lastUsedAt || a.addedAt;
      const bt = b.lastUsedAt || b.addedAt;
      return at - bt;
    });

    const toRemoveCount = items.length - limit;
    const toRemoveIds = new Set(sorted.slice(0, toRemoveCount).map(i => i.id));
    items = items.filter(i => !toRemoveIds.has(i.id));

    if (toRemoveCount > 0) {
      showToast(`лимит достигнут — удалено ${toRemoveCount} самых неиспользуемых`);
    }
  }

  // ---------- rendering ----------

  function sortedItems() {
    const arr = [...items];
    arr.sort((a, b) => sortMode === 'asc' ? a.count - b.count : b.count - a.count);
    return arr;
  }

  function render() {
    grid.innerHTML = '';
    const list = sortedItems();

    emptyState.classList.toggle('visible', items.length === 0);
    grid.style.display = items.length === 0 ? 'none' : 'grid';

    for (const it of list) {
      grid.appendChild(buildTile(it));
    }

    countLabel.textContent = `${items.length} гиф${pluralSuffix(items.length)}`;
    const limit = settings.limit || DEFAULT_LIMIT;
    const pct = Math.min(100, Math.round((items.length / limit) * 100));
    limitFill.style.width = pct + '%';
    limitLabel.textContent = `${items.length} / ${limit}`;

    sortLabel.textContent = sortMode === 'asc'
      ? '❄️ редкие сверху'
      : '🔥 частые сверху';
  }

  function pluralSuffix(n) {
    const mod10 = n % 10, mod100 = n % 100;
    if (mod10 === 1 && mod100 !== 11) return 'ка';
    if ([2,3,4].includes(mod10) && ![12,13,14].includes(mod100)) return 'ки';
    return 'ок';
  }

  function buildTile(it) {
    const tile = document.createElement('div');
    tile.className = 'tile';
    tile.title = 'клик — использовать и скопировать ссылку';

    const img = document.createElement('img');
    img.src = it.url;
    img.loading = 'lazy';
    img.alt = 'gif';
    img.onerror = () => {
      img.remove();
      const broken = document.createElement('div');
      broken.className = 'tile-broken';
      broken.textContent = 'ссылка недоступна';
      tile.prepend(broken);
    };
    tile.appendChild(img);

    const badge = document.createElement('div');
    badge.className = 'tile-badge';
    const dot = document.createElement('span');
    dot.className = 'heat-dot';
    dot.style.background = heatColor(it.count);
    badge.appendChild(dot);
    const num = document.createElement('span');
    num.textContent = it.count;
    badge.appendChild(num);
    tile.appendChild(badge);

    const del = document.createElement('button');
    del.className = 'tile-delete';
    del.textContent = '✕';
    del.title = 'удалить';
    del.addEventListener('click', (e) => {
      e.stopPropagation();
      deleteGif(it.id);
    });
    tile.appendChild(del);

    tile.addEventListener('click', () => useGif(it.id));

    return tile;
  }

  // ---------- events ----------

  addForm.addEventListener('submit', (e) => {
    e.preventDefault();
    addGif(urlInput.value);
    urlInput.value = '';
    urlInput.focus();
  });

  sortToggle.addEventListener('click', () => {
    sortMode = sortMode === 'asc' ? 'desc' : 'asc';
    render();
  });

  settingsBtn.addEventListener('click', () => {
    limitInput.value = settings.limit || DEFAULT_LIMIT;
    settingsOverlay.classList.remove('hidden');
  });

  settingsClose.addEventListener('click', () => {
    settingsOverlay.classList.add('hidden');
  });

  settingsOverlay.addEventListener('click', (e) => {
    if (e.target === settingsOverlay) settingsOverlay.classList.add('hidden');
  });

  limitInput.addEventListener('change', () => {
    const val = parseInt(limitInput.value, 10);
    if (!Number.isFinite(val) || val < 1) return;
    settings.limit = val;
    saveSettings();
    enforceLimit();
    saveItems();
    render();
  });

  exportBtn.addEventListener('click', () => {
    const data = JSON.stringify({ items, settings }, null, 2);
    const blob = new Blob([data], { type: 'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `gifvault-backup-${new Date().toISOString().slice(0,10)}.json`;
    a.click();
    URL.revokeObjectURL(a.href);
  });

  importBtn.addEventListener('click', () => importFile.click());

  importFile.addEventListener('change', () => {
    const file = importFile.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const data = JSON.parse(reader.result);
        if (!Array.isArray(data.items)) throw new Error('bad format');
        const ok = confirm(`импортировать ${data.items.length} гифок? это заменит текущий список.`);
        if (!ok) return;
        items = data.items;
        settings = data.settings || settings;
        enforceLimit();
        saveItems();
        saveSettings();
        render();
        showToast('импортировано');
      } catch (e) {
        showToast('не удалось прочитать файл');
      }
    };
    reader.readAsText(file);
    importFile.value = '';
  });

  clearBtn.addEventListener('click', () => {
    if (!confirm('удалить все сохранённые гифки без возможности отмены?')) return;
    items = [];
    saveItems();
    render();
    settingsOverlay.classList.add('hidden');
  });

  // ---------- init ----------

  if (!settings.limit) settings.limit = DEFAULT_LIMIT;
  enforceLimit();
  saveItems();
  render();
})();