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;
}

document.querySelectorAll('[data-theme]').forEach(button => button.addEventListener('click', () => applyTheme(button.dataset.theme)));
applyTheme(preferredTheme);
render();