import { applications, categories, filterApplications, validateApplications } from './apps.mjs';

validateApplications(applications);
const icons = {
  grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
  sparkles: '<path d="m12 3 2.6 6.4L21 12l-6.4 2.6L12 21l-2.6-6.4L3 12l6.4-2.6L12 3Z"/><path d="m20 2 .6 1.4L22 4l-1.4.6L20 6l-.6-1.4L18 4l1.4-.6L20 2Z"/>',
  clipboard: '<rect x="5" y="5" width="14" height="16" rx="2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 12h6M9 16h4"/>',
  wallet: '<path d="M20 8H5a2 2 0 0 1 0-4h12v4M3 6v12a2 2 0 0 0 2 2h15V8"/><path d="M20 12h-5v4h5M16 14h.01"/>',
  scan: '<path d="M8 3H5a2 2 0 0 0-2 2v3m13-5h3a2 2 0 0 1 2 2v3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3M3 12h18M8 8h8M8 16h5"/>',
  text: '<path d="M4 5h13M10.5 5v14M7 19h7M3 9V5m15 4V5m-1 11 2 2 3-4"/>',
  shield: '<path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Z"/><path d="M12 8v5m0 3h.01"/>',
  star: '<path d="m12 3 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3-5.6-3-5.6 3 1.1-6.3L3 9.6l6.2-.9L12 3Z"/>',
  arrow: '<path d="M5 12h14m-5-5 5 5-5 5"/>',
  search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4.5 4.5"/>'
};
const svg = name => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icons[name] || icons.grid}</svg>`;
const escapeHtml = value => String(value).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
const storageKey = 'dieya-portal:favorites:v1';
function readFavorites() {
  try {
    const stored = JSON.parse(localStorage.getItem(storageKey) || '[]');
    return Array.isArray(stored) ? stored.filter(id => applications.some(app => app.id === id)) : [];
  } catch { return []; }
}
const state = { query: '', category: 'all', environment: 'all', favorites: readFavorites() };
const grid = document.querySelector('#app-grid');
const search = document.querySelector('#search');
const nav = document.querySelector('#category-nav');
const filters = document.querySelector('#environment-filters');
document.querySelector('#search-icon').innerHTML = svg('search');
document.querySelector('#empty-icon').innerHTML = svg('search');
document.querySelector('#total-count').textContent = applications.length;
const environmentLabels = [{ id: 'all', label: '全部' }, { id: 'production', label: '正式应用' }, { id: 'test', label: '测试应用' }];
let toastTimer;

function renderNav() {
  nav.innerHTML = categories.map(category => {
    const count = category.id === 'favorites' ? state.favorites.length : category.id === 'all' ? applications.length : applications.filter(app => app.category === category.id).length;
    return `<button type="button" class="nav-item${state.category === category.id ? ' active' : ''}" data-category="${category.id}" aria-pressed="${state.category === category.id}">${svg(category.icon)}<span>${category.name}</span><small>${count}</small></button>`;
  }).join('');
}

function render() {
  renderNav();
  filters.innerHTML = environmentLabels.map(item => `<button type="button" class="filter-button${state.environment === item.id ? ' active' : ''}" data-environment="${item.id}" aria-pressed="${state.environment === item.id}">${item.label}</button>`).join('');
  document.querySelector('#section-title').textContent = categories.find(category => category.id === state.category).name;
  document.querySelector('#section-description').textContent = state.category === 'favorites' ? '收藏你常用的应用，下次更快找到。' : '你的业务工具与 AI 助手，都在这里。';
  const matches = filterApplications(applications, state);
  document.querySelector('#result-count').textContent = `共 ${matches.length} 个应用`;
  grid.innerHTML = matches.map(app => {
    const favorite = state.favorites.includes(app.id);
    const categoryName = categories.find(category => category.id === app.category).name;
    return `<article class="app-card">
      <div class="card-top"><span class="app-icon ${escapeHtml(app.color)}">${svg(app.icon)}</span><button type="button" class="favorite-button${favorite ? ' selected' : ''}" data-favorite="${escapeHtml(app.id)}" aria-label="${favorite ? '取消常用：' : '设为常用：'}${escapeHtml(app.name)}" aria-pressed="${favorite}" title="${favorite ? '取消常用' : '设为常用'}">${svg('star')}</button></div>
      <h3><a class="app-link" href="${escapeHtml(app.url)}" aria-label="打开${escapeHtml(app.name)}">${escapeHtml(app.name)}</a></h3>
      <p class="app-description">${escapeHtml(app.description)}</p>
      <div class="card-tags"><span class="category-tag">${escapeHtml(categoryName)}</span>${app.environment === 'test' ? '<span class="test-tag">测试</span>' : '<span class="production-tag"><i></i>正式</span>'}</div>
      <div class="card-bottom"><span class="app-domain" title="${escapeHtml(app.url)}">${escapeHtml(new URL(app.url).hostname)}</span><span class="launch-icon" aria-hidden="true">${svg('arrow')}</span></div>
    </article>`;
  }).join('');
  document.querySelector('#empty-state').hidden = matches.length > 0;
  const emptyFavorites = state.category === 'favorites' && state.favorites.length === 0;
  document.querySelector('#empty-title').textContent = emptyFavorites ? '把常用应用放在这里' : '没有找到匹配的应用';
  document.querySelector('#empty-description').textContent = emptyFavorites ? '点击应用卡片右上角的星标，即可加入我的常用。' : '试试其他关键词，或调整筛选条件。';
}

nav.addEventListener('click', event => {
  const button = event.target.closest('[data-category]');
  if (!button) return;
  state.category = button.dataset.category;
  render();
});
filters.addEventListener('click', event => {
  const button = event.target.closest('[data-environment]');
  if (!button) return;
  state.environment = button.dataset.environment;
  render();
});
search.addEventListener('input', () => { state.query = search.value; render(); });
grid.addEventListener('click', event => {
  const button = event.target.closest('[data-favorite]');
  if (!button) return;
  const id = button.dataset.favorite;
  const adding = !state.favorites.includes(id);
  state.favorites = adding ? [...state.favorites, id] : state.favorites.filter(value => value !== id);
  let persisted = true;
  try { localStorage.setItem(storageKey, JSON.stringify(state.favorites)); } catch { persisted = false; }
  render();
  grid.querySelector(`[data-favorite="${id}"]`)?.focus({ preventScroll: true });
  const toast = document.querySelector('#toast');
  toast.textContent = `${adding ? '已加入我的常用' : '已取消常用'}${persisted ? '' : '（当前浏览器无法保存，仅本次有效）'}`;
  toast.classList.add('visible');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toast.classList.remove('visible'), 2400);
});
document.querySelector('#reset-filters').addEventListener('click', () => {
  state.category = 'all'; state.environment = 'all'; state.query = ''; search.value = ''; render();
});
document.addEventListener('keydown', event => {
  if (event.key === '/' && !event.ctrlKey && !event.metaKey && !event.altKey && !event.target.closest('input,textarea,[contenteditable="true"]')) {
    event.preventDefault(); search.focus();
  }
  if (event.key === 'Escape' && document.activeElement === search) {
    search.value = ''; state.query = ''; render(); search.blur();
  }
});
window.addEventListener('storage', event => {
  if (event.key === storageKey || event.key === null) { state.favorites = readFavorites(); render(); }
});
render();