/**
 * domain-viewers.ts — the v1 viewer palette's actual rendering (musehub#117 DOM_09/DOM_10).
 *
 * Each viewer takes only a `viewerType` string and the domain's declared
 * `dimensions` list (schema-validated server-side — see
 * musehub/api/routes/musehub/domains.py's DomainCapabilities model) and
 * renders real SVG. No per-domain executable code runs here — a domain
 * manifest can only *select* one of these built-in, reviewed viewers and
 * supply the dimension names/descriptions that parameterize it.
 *
 * Hand-rolled SVG via template strings, matching the existing pattern in
 * src/ts/pages/timeline.ts and the sparkline in src/ts/pages/symbols.ts —
 * no charting library dependency needed or added.
 */

import { domainColor } from './domain-palette.ts';

export interface DimensionSpec {
  name: string;
  description?: string;
}

function escapeXml(s: string): string {
  return s
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

/** Deterministic pseudo-activity seed from a dimension's name — gives each
 * track a stable, distinct-looking pattern without any real commit data. */
function hashStr(s: string): number {
  let h = 0;
  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
  return Math.abs(h);
}

/**
 * symbol_graph — a central "repo" node radiating to one node per dimension,
 * styled like a lightweight commit/symbol graph (see code-demo.html for the
 * full-scale reference this palette entry is modeled after).
 */
export function renderSymbolGraphViewer(container: HTMLElement, dimensions: DimensionSpec[]): void {
  const color = domainColor('symbol_graph');
  const dims = dimensions.length ? dimensions : [{ name: 'state' }];
  const W = Math.max(container.clientWidth || 600, 360);
  const H = Math.max(160, dims.length * 32 + 40);
  const cx = 56;
  const cy = H / 2;
  const nodeX = Math.min(W - 80, 220);

  const nodes = dims.map((d, i) => {
    const y = dims.length === 1 ? cy : 24 + (i / (dims.length - 1)) * (H - 48);
    return { x: nodeX, y, name: d.name };
  });

  const edges = nodes
    .map(n => `<line x1="${cx}" y1="${cy}" x2="${n.x}" y2="${n.y}" stroke="${color}" stroke-opacity="0.35" stroke-width="1.5"/>`)
    .join('');
  const nodeMarks = nodes
    .map(
      n => `
    <circle cx="${n.x}" cy="${n.y}" r="6" fill="${color}"/>
    <text x="${n.x + 10}" y="${n.y + 4}" fill="currentColor" font-size="12" font-family="ui-monospace, monospace">${escapeXml(n.name)}</text>`
    )
    .join('');

  container.innerHTML = `
    <svg width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" class="domain-viewer-svg" role="img" aria-label="Symbol graph preview">
      ${edges}
      <circle cx="${cx}" cy="${cy}" r="10" fill="${color}"/>
      <text x="${cx}" y="${cy + 26}" fill="currentColor" font-size="11" text-anchor="middle" opacity="0.7">repo</text>
      ${nodeMarks}
    </svg>`;
}

/**
 * piano_roll — one horizontal track per dimension with deterministic
 * activity blocks, DAW-style (see midi-demo.html for the full-scale
 * reference this palette entry is modeled after).
 */
export function renderPianoRollViewer(container: HTMLElement, dimensions: DimensionSpec[]): void {
  const color = domainColor('piano_roll');
  const dims = dimensions.length ? dimensions : [{ name: 'track' }];
  const rowH = 28;
  const labelW = 130;
  const W = Math.max(container.clientWidth || 600, 360);
  const H = dims.length * rowH + 16;
  const laneW = W - labelW - 16;
  const blockCount = 6;

  const rows = dims
    .map((d, i) => {
      const y = 8 + i * rowH;
      const seed = hashStr(d.name);
      const blocks = Array.from({ length: blockCount }, (_, j) => {
        const on = ((seed >> j) & 1) === 1;
        if (!on) return '';
        const x = labelW + j * (laneW / blockCount);
        const w = laneW / blockCount - 4;
        return `<rect x="${x}" y="${y + 4}" width="${Math.max(w, 2)}" height="${rowH - 10}" rx="3" fill="${color}" fill-opacity="0.6"/>`;
      }).join('');
      return `
      <text x="4" y="${y + rowH / 2 + 4}" fill="currentColor" font-size="11" font-family="ui-monospace, monospace">${escapeXml(d.name)}</text>
      <line x1="${labelW}" y1="${y}" x2="${W - 8}" y2="${y}" stroke="currentColor" stroke-opacity="0.08"/>
      ${blocks}`;
    })
    .join('');

  container.innerHTML = `
    <svg width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" class="domain-viewer-svg" role="img" aria-label="Track preview">
      ${rows}
    </svg>`;
}

/** generic — no built-in visual palette entry; list the declared dimensions
 * as plain text so the fallback is informative, not a blank gray icon. */
export function renderGenericViewer(container: HTMLElement, dimensions: DimensionSpec[]): void {
  if (!dimensions.length) {
    container.innerHTML = `<p class="domain-viewer-empty">No dimensions declared for this domain yet.</p>`;
    return;
  }
  const items = dimensions
    .map(d => `<li>${escapeXml(d.name)}${d.description ? ' — ' + escapeXml(d.description) : ''}</li>`)
    .join('');
  container.innerHTML = `<ul class="domain-viewer-list">${items}</ul>`;
}

/** Dispatch to the palette entry for `viewerType`, falling back to generic. */
export function renderDomainViewer(
  container: HTMLElement,
  viewerType: string,
  dimensions: DimensionSpec[]
): void {
  if (viewerType === 'symbol_graph') return renderSymbolGraphViewer(container, dimensions);
  if (viewerType === 'piano_roll') return renderPianoRollViewer(container, dimensions);
  return renderGenericViewer(container, dimensions);
}