// Shared editorial primitives for content-heavy pages.
//   Byline         — small gray attribution line
//   SectionHeading — centered H2 with optional subhead
//   EditorialBody  — long-form prose container with placeholder-link parser

function Byline(props) {
  const {
    author = 'Bob Lazar',
    editor = 'George Knapp',
    updated = '4/24/2026'
  } = props || {};
  return (
    <div className="ed-byline">
      <span>Author: <strong>{author}</strong></span>
      <span className="ed-byline-sep">|</span>
      <span>Editor: <strong>{editor}</strong></span>
      <span className="ed-byline-sep">/</span>
      <span>Updated: <strong>{updated}</strong></span>
    </div>
  );
}

function SectionHeading(props) {
  const { title, sub, id } = props;
  return (
    <div className="ed-heading" id={id}>
      <h2 className="ed-heading-title">{title}</h2>
      {sub && <p className="ed-heading-sub">{sub}</p>}
    </div>
  );
}

// EditorialBody parses a single string OR array of "blocks" into long-form prose.
//
// String input is split on double newlines into paragraphs.
// Each paragraph supports:
//   • "Lead-in: rest of paragraph"  → <strong>Lead-in:</strong> rest
//   • "## H3 text"                  → block-level <h3>
//   • "[bracketed text]"            → <a href="#" class="ed-link">bracketed text</a>
//
// Or pass `blocks` as an array of { type: 'p'|'h3', text: string }.
function EditorialBody(props) {
  const { children, blocks, text } = props;

  // Render bracketed [tokens] as styled links; preserve everything else as text.
  const renderInline = (str) => {
    if (str == null) return null;
    const parts = String(str).split(/(\[[^\]]+\])/g);
    return parts.map((part, i) => {
      if (/^\[[^\]]+\]$/.test(part)) {
        const label = part.slice(1, -1);
        return <a key={i} href="#" className="ed-link">{label}</a>;
      }
      return <React.Fragment key={i}>{part}</React.Fragment>;
    });
  };

  // Render a paragraph with optional "Lead-in: rest" inline-bold treatment.
  const renderParagraph = (str, key) => {
    const m = String(str).match(/^([A-Z][A-Za-z0-9 ,&\/\-]{1,40}):\s+([\s\S]+)$/);
    if (m) {
      return (
        <p key={key} className="ed-p">
          <strong className="ed-leadin">{m[1]}:</strong> {renderInline(m[2])}
        </p>
      );
    }
    return <p key={key} className="ed-p">{renderInline(str)}</p>;
  };

  // Resolve into block list.
  let resolvedBlocks = [];
  if (Array.isArray(blocks)) {
    resolvedBlocks = blocks;
  } else if (typeof text === 'string') {
    resolvedBlocks = text.split(/\n\s*\n/).map((chunk) => {
      const trimmed = chunk.trim();
      if (trimmed.startsWith('## ')) return { type: 'h3', text: trimmed.slice(3).trim() };
      return { type: 'p', text: trimmed };
    });
  }

  return (
    <div className="ed-body">
      {resolvedBlocks.map((b, i) => {
        if (b.type === 'h3') return <h3 key={i} className="ed-h3">{renderInline(b.text)}</h3>;
        return renderParagraph(b.text, i);
      })}
      {children}
    </div>
  );
}

window.Byline = Byline;
window.SectionHeading = SectionHeading;
window.EditorialBody = EditorialBody;