import { html, usePoll, useState, num, compact, ago } from './core.js';
import { Card, Stat, Pill, Skeleton, Empty } from './ui.js';

const PAGE = 50;

function shortUrl(url) {
  try { return new URL(url).hostname.replace(/^www\./, ''); }
  catch (error) { return String(url || '').slice(0, 40); }
}

function statusTone(status) {
  if (status === 'ready') return 'ok';
  if (status === 'failed') return 'bad';
  if (status === 'pending') return 'warn';
  return '';
}

// One list component behind both Articles and Events. They differ only in columns
// and endpoint, and having two near-identical files is how they drift apart.
function ListView({ title, path, columns, searchable }) {
  const [offset, setOffset] = useState(0);
  const [query, setQuery] = useState('');
  const [applied, setApplied] = useState('');

  const url = `${path}?limit=${PAGE}&offset=${offset}${applied ? `&q=${encodeURIComponent(applied)}` : ''}`;
  const { data, error, loading } = usePoll(url, 20000);

  const rows = (data && data.rows) || [];
  const total = data && data.total;

  return html`
    <div class="grid" style="gap:14px">
      <${Card} title=${title}
        right=${html`<span class="muted small">${total === undefined ? '' : `${num(total)} total`}</span>`}>
        ${searchable && html`
          <form class="row" style="gap:8px; margin-bottom:12px"
            onSubmit=${(e) => { e.preventDefault(); setOffset(0); setApplied(query.trim()); }}>
            <input style="flex:1" placeholder="search title…" value=${query}
              onInput=${(e) => setQuery(e.target.value)} />
            <button class="sm" type="submit">search</button>
            ${applied && html`<button class="sm" type="button"
              onClick=${() => { setQuery(''); setApplied(''); setOffset(0); }}>clear</button>`}
          </form>`}

        ${error && html`<div class="muted small" style="color:var(--bad); margin-bottom:10px">${error}</div>`}

        ${loading && !data
          ? html`<${Skeleton} rows=${6} />`
          : !rows.length
            ? html`<${Empty}>Nothing here.<//>`
            : html`
              <div class="table-scroll">
                <table>
                  <thead><tr>${columns.map((c) => html`
                    <th key=${c.key} class=${c.num ? 'num' : ''}>${c.label}</th>`)}</tr></thead>
                  <tbody>
                    ${rows.map((row) => html`
                      <tr key=${row.id}>
                        ${columns.map((c) => html`
                          <td key=${c.key} class=${c.num ? 'num' : ''}>${c.render(row)}</td>`)}
                      </tr>`)}
                  </tbody>
                </table>
              </div>`}

        <div class="row spread" style="margin-top:12px">
          <span class="muted small mono">
            ${rows.length ? `${num(offset + 1)}–${num(offset + rows.length)}` : '—'}
          </span>
          <span class="row" style="gap:8px">
            <button class="sm" disabled=${offset === 0}
              onClick=${() => setOffset(Math.max(0, offset - PAGE))}>prev</button>
            <button class="sm" disabled=${!(data && data.hasMore)}
              onClick=${() => setOffset(offset + PAGE)}>next</button>
          </span>
        </div>
      <//>
    </div>`;
}

export const Articles = () => html`<${ListView}
  title="Articles" path="/admin/api/articles" searchable
  columns=${[
    { key: 'title', label: 'title', render: (r) => html`
      <a href=${r.url} target="_blank" rel="noopener noreferrer"
        style="color:var(--ink); text-decoration:none">${r.title || '(untitled)'}</a>
      <div class="muted small mono" style="margin-top:3px">${shortUrl(r.url)}</div>` },
    { key: 'source', label: 'source', render: (r) => html`<span class="small">${r.source}</span>` },
    { key: 'status', label: 'content', render: (r) => html`
      <${Pill} tone=${statusTone(r.content_status)}>${r.content_status || 'unfetched'}<//>` },
    { key: 'pub', label: 'published', render: (r) => html`
      <span class="mono small nowrap">${String(r.pub_date_effective || r.pub_date || '').slice(0, 16)}</span>` },
  ]} />`;

export const Events = () => html`<${ListView}
  title="Events" path="/admin/api/events"
  columns=${[
    { key: 'title', label: 'title', render: (r) => r.title || '(untitled)' },
    { key: 'articles', label: 'articles', num: true, render: (r) => num(r.article_count) },
    { key: 'created', label: 'created', render: (r) => html`
      <span class="mono small nowrap">${String(r.created_at || '').slice(0, 16)}</span>` },
  ]} />`;

export function Intelligence() {
  const summary = usePoll('/admin/api/stats/summary', 15000);
  const intel = usePoll('/admin/api/intelligence/stats', 15000);

  const s = summary.data || {};
  const i = intel.data || {};

  return html`
    <div class="grid" style="gap:14px">
      <div class="grid cols-3">
        <${Stat} label="Articles" value=${compact(s.total)}
          sub=${`${compact(s.withContent)} with content · ${compact(s.withEmbedding)} embedded`} />
        <${Stat} label="Events" value=${compact(s.eventCount)} sub="clustered" />
        <${Stat} label="Knowledge rows" value=${compact(i.knowledge)}
          sub=${`${compact(i.companies)} companies tracked`} />
      </div>

      <div class="grid cols-2">
        <${Card} title="Worker rates" right=${html`<span class="muted small">rows written</span>`}>
          ${!(i.workerRates || []).length
            ? html`<${Empty}>No worker activity recorded.<//>`
            : html`
              <table>
                <thead><tr><th>worker</th><th class="num">last 1m</th><th class="num">last 5m</th></tr></thead>
                <tbody>
                  ${i.workerRates.map((w) => html`
                    <tr key=${w.worker}>
                      <td class="mono">${w.worker}</td>
                      <td class="num">${num(w.n1m)}</td>
                      <td class="num">${num(w.n5m)}</td>
                    </tr>`)}
                </tbody>
              </table>`}
        <//>

        <${Card} title="Article queue">
          ${!(i.queue || []).length
            ? html`<${Empty}>Queue is empty.<//>`
            : html`
              <table>
                <thead><tr><th>status</th><th class="num">n</th></tr></thead>
                <tbody>
                  ${i.queue.map((q) => html`
                    <tr key=${q.status}>
                      <td><${Pill} tone=${statusTone(q.status)}>${q.status}<//></td>
                      <td class="num">${num(q.n)}</td>
                    </tr>`)}
                </tbody>
              </table>`}
        <//>
      </div>
    </div>`;
}