// Renders one `StreamRow` — flat `<div class="row …">` or expandable
// `<details class="row …">`, matching @hive/shared/terminal.css's
// existing row-kind classes exactly (see docs/terminal-rendering.md).
// Reuses that stylesheet as-is (imported once by LiveStream.tsx) — the
// taxonomy's visual language isn't what mara asked to change, the
// component *model* underneath it is.
import { useEffect, useRef } from 'preact/hooks';
import type { StreamRow } from '../lib/streamRow.js';
import { linkifyToNodes } from '../lib/linkify.js';
import { renderMarkdown } from '../lib/markdown.js';

function MarkdownBody({ text }: { text: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const html = renderMarkdown(text);
  useEffect(() => {
    // marked autolinks URLs but leaves them same-tab — open externally
    // so a click never navigates the terminal away.
    ref.current?.querySelectorAll('a[href]').forEach((a) => {
      a.setAttribute('target', '_blank');
      a.setAttribute('rel', 'noopener noreferrer');
    });
  }, [html]);
  // eslint-disable-next-line react/no-danger -- sanitized by DOMPurify in renderMarkdown
  return <div className="md" ref={ref} dangerouslySetInnerHTML={{ __html: html }} />;
}

function DiffBody({ text }: { text: string }) {
  const lines = String(text).split('\n');
  return (
    <pre className="tool-body diff-body">
      {lines.map((line, i) => {
        const cls = line.startsWith('+ ') ? 'diff-add' : line.startsWith('- ') ? 'diff-del' : 'diff-ctx';
        return (
          <span key={i} className={cls}>
            {line}
            {'\n'}
          </span>
        );
      })}
    </pre>
  );
}

export function Row({ row }: { row: StreamRow }) {
  if (row.details) {
    return (
      <details className={`row ${row.cssClass}`} open={row.defaultOpen || undefined}>
        <summary>
          {row.icon != null && row.icon !== '' && <span className="row-glyph">{row.icon}</span>}
          <span className="summary-text">{row.text}</span>
        </summary>
        {row.diffBody != null && <DiffBody text={row.diffBody} />}
        {row.markdownBody != null && <MarkdownBody text={row.markdownBody} />}
        {row.plainBody != null && <pre className="tool-body">{linkifyToNodes(row.plainBody)}</pre>}
      </details>
    );
  }
  return (
    <div className={`row ${row.cssClass}`}>
      {row.icon != null && row.icon !== '' && <span className="row-glyph">{row.icon}</span>}
      {row.text != null && linkifyToNodes(row.text)}
      {row.meta?.map((m) => (
        <span key={m.cls} className={m.cls}>
          {m.text}
        </span>
      ))}
      {row.childText != null && <div className={row.childText.cls}>{row.childText.text}</div>}
      {row.markdownBody != null && <MarkdownBody text={row.markdownBody} />}
    </div>
  );
}