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

validateApplications(applications);
const icons = {
  shield: '<path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Z"/><path d="M12 8v5m0 3h.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"/>',
  arrow: '<path d="M5 12h14m-5-5 5 5-5 5"/>',
  external: '<path d="M14 5h5v5M19 5l-8 8"/><path d="M18 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/>'
};
const svg = name => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${icons[name] || icons.scan}</svg>`;
const escapeHtml = value => String(value).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
const grid = document.querySelector('#agent-grid');
const root = document.documentElement;
const themeKey = 'dieya-portal:theme:v1';
const storedTheme = localStorage.getItem(themeKey);
const preferredTheme = storedTheme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

function applyTheme(theme) {
  root.dataset.theme = theme;
  document.querySelectorAll('[data-theme]').forEach(button => {
    const active = button.dataset.theme === theme;
    button.classList.toggle('active', active);
    button.setAttribute('aria-pressed', String(active));
  });
  document.querySelector('meta[name="theme-color"]').setAttribute('content', theme === 'dark' ? '#070b17' : '#f5f8fc');
  try { localStorage.setItem(themeKey, theme); } catch { /* 当前浏览器不支持持久化时仍可切换 */ }
}

function render() {
  grid.innerHTML = applications.map((app, index) => `<article class="agent-card agent-card--${escapeHtml(app.color)}">
    <div class="agent-card__top"><span class="agent-card__icon">${svg(app.icon)}</span><span class="agent-card__category">产品部</span></div>
    <h2 class="agent-card__title">${escapeHtml(app.name)} <span class="agent-card__guide">正式应用</span></h2>
    <p class="agent-card__description">${escapeHtml(app.description)}</p>
    <div class="agent-card__meta"><span class="ready-dot"></span><span>就绪</span><span class="agent-card__index">0${index + 1}</span></div>
    <a class="agent-card__button" href="${escapeHtml(app.url)}">打开工作台 ${svg('arrow')}</a>
    <span class="agent-card__external" aria-hidden="true">${svg('external')}</span>
  </article>`).join('');
  document.querySelector('#empty-state').hidden = applications.length > 0;
}

function showView(view, updateHash = true) {
  const stats = view === 'stats';
  document.querySelector('#home-view').hidden = stats;
  document.querySelector('#stats-view').hidden = !stats;
  document.querySelectorAll('[data-view]').forEach(button => {
    const active = button.dataset.view === view;
    button.classList.toggle('active', active);
    button.setAttribute('aria-pressed', String(active));
  });
  if (updateHash) history.replaceState(null, '', stats ? '#stats' : '#');
  if (stats) loadStats();
}

async function loadStats() {
  const error = document.querySelector('#stats-error');
  error.hidden = true;
  try {
    const response = await fetch('/api/stats', { headers: { Accept: 'application/json' } });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const payload = await response.json();
    const records = payload.items || [];
    document.querySelector('#stats-total').textContent = Number(payload.total_clicks || 0).toLocaleString('zh-CN');
    document.querySelector('#stats-updated').textContent = payload.updated_at
      ? new Date(payload.updated_at).toLocaleString('zh-CN', { hour12: false })
      : '暂无记录';
    document.querySelector('#stats-table-body').innerHTML = records.map(item => `<tr><td><span class="stats-app-name">${escapeHtml(item.name)}</span><small>${escapeHtml(item.url)}</small></td><td class="stats-count">${Number(item.click_count).toLocaleString('zh-CN')}</td><td><span class="stats-ready">正式应用</span></td></tr>`).join('');
  } catch {
    error.hidden = false;
  }
}

async function trackAndOpen(app) {
  const request = fetch(`/api/apps/${encodeURIComponent(app.id)}/click`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({}),
    keepalive: true
  }).catch(() => undefined);
  // Give the same-origin request a chance to reach the API, then open the tool.
  await Promise.race([request, new Promise(resolve => setTimeout(resolve, 180))]);
  window.location.assign(app.url);
}

document.querySelectorAll('[data-theme]').forEach(button => button.addEventListener('click', () => applyTheme(button.dataset.theme)));
document.querySelectorAll('[data-view]').forEach(button => button.addEventListener('click', () => showView(button.dataset.view)));
document.querySelector('#refresh-stats').addEventListener('click', loadStats);
window.addEventListener('hashchange', () => showView(location.hash === '#stats' ? 'stats' : 'home', false));
grid.addEventListener('click', event => {
  const link = event.target.closest('.agent-card__button');
  if (!link) return;
  event.preventDefault();
  const card = link.closest('.agent-card');
  const app = applications.find(item => item.url === link.href);
  if (app && card) trackAndOpen(app);
});
applyTheme(preferredTheme);
render();
showView(location.hash === '#stats' ? 'stats' : 'home', false);