// #/links — Hybrid Apps view: a Void-native card (update-tracker + quick-add) on
// top of the embedded themed Kutt UI. Reuses the .term-bar/.term-frame embed classes.
import { el, mount } from '../dom.js';
import { api } from '../api.js';

const SRC = 'https://link.hynesy.com/';

export async function render(main) {
  const badge = el('span', { class: 'lk-badge muted' }, 'checking…');
  const out = el('span', { class: 'lk-out muted' }, '');
  const input = el('input', { class: 'lk-url', placeholder: 'https://long-url-to-shorten…' });
  const add = el('button', { class: 'primary' }, '◆ Shorten');
  add.onclick = async () => {
    const target = input.value.trim(); if (!target) return;
    out.textContent = 'creating…';
    try { const r = await api.post('/api/kutt', { target }); out.innerHTML = ''; out.appendChild(el('a', { href: r.link, target: '_blank', rel: 'noopener' }, r.link)); input.value = ''; }
    catch { out.textContent = 'failed (is Kutt reachable / API key set?)'; }
  };

  mount(main,
    el('div', { class: 'term-bar' },
      el('span', { class: 'term-title' }, '◆ Links'),
      el('a', { class: 'ghost', style: { marginLeft: 'auto' }, href: SRC, target: '_blank', rel: 'noopener' }, '↗ Open Kutt')
    ),
    el('div', { class: 'card lk-card' },
      el('div', { class: 'lk-row' }, el('span', { class: 'muted' }, 'Kutt version'), badge),
      el('div', { class: 'lk-quickadd' }, input, add),
      el('div', {}, out)
    ),
    el('iframe', { id: 'embed-frame', src: SRC, class: 'term-frame' })
  );

  try {
    const v = await api.get('/api/kutt/version');
    badge.classList.remove('muted');
    if (v.updateAvailable) { badge.classList.add('lk-update'); badge.innerHTML = ''; badge.appendChild(el('a', { href: v.url, target: '_blank', rel: 'noopener' }, `${v.running} → ${v.latest} · update available`)); }
    else badge.textContent = `${v.running} · up to date`;
  } catch { badge.textContent = 'version check unavailable'; }
}