/* Ticket / PR comment — Markdown stub.
   Short, structured update template designed to be pasted into Linear comments,
   GitHub PR descriptions or Slack canvases. No HTML, no Markdown renderer —
   the source is the artifact. */

function ticketCommentMarkdown({
  context = 'Reviewing the chain-of-custody migration on staging — backfill completed Friday, ~2.1M movement rows reindexed cleanly.',
  decision = 'Defer the production rollout to next sprint to allow more soak time on staging and a full week of customer reporting against the new schema.',
  why = [
    'No customer-visible regressions yet, but only 3 days of soak — want a full reporting cycle.',
    'Two edge cases on legacy ticket payloads still under investigation (NR-2418, NR-2421).',
    'Sprint boundary gives us a clean comms window for the materials team.',
  ],
  nextSteps = [
    'Land the legacy payload fix — @jonty',
    'Draft the rollout comms note (internal + customer) — @sarah',
    'Re-run the full reporting backfill smoke suite on Monday — @priya',
  ],
  links = [
    { label: 'Linear ticket', url: 'https://linear.app/nexusregen/issue/NR-2418' },
    { label: 'PR',            url: 'https://github.com/nexusregen/platform/pull/812' },
    { label: 'Staging dashboard', url: 'https://app.staging.nexusregen.com/admin/movements' },
  ],
} = {}) {
  const whyBullets = why.map(b => `- ${b}`).join('\n');
  const stepBullets = nextSteps.map(s => `- [ ] ${s}`).join('\n');
  const linkBullets = links.map(l => `- [${l.label}](${l.url})`).join('\n');
  return `## Context
${context}

## Decision
${decision}

## Why
${whyBullets}

## Next steps
${stepBullets}

## Links
${linkBullets}
`;
}

/* Copy + download row, mirrors TemplateActions but for text/markdown. */
function MarkdownActions({ markdown, filename }) {
  const [copied, setCopied] = useState(false);
  const copyMd = () => {
    copy(markdown);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  const downloadHref = useMemo(() => {
    const blob = new Blob([markdown], { type: 'text/markdown;charset=utf-8' });
    return URL.createObjectURL(blob);
  }, [markdown]);
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
      <button
        onClick={copyMd}
        style={{
          background: 'var(--brand-600)', color: '#fff',
          border: '1px solid var(--brand-700)',
          padding: '10px 14px', borderRadius: 8,
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        {copied ? '✓ Copied Markdown' : '⧉ Copy Markdown'}
      </button>
      <a
        href={downloadHref}
        download={filename}
        style={{
          textDecoration: 'none',
          background: 'var(--accent-400)', color: 'var(--brand-700)',
          border: '1px solid var(--accent-500)',
          padding: '10px 14px', borderRadius: 8,
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}
      >↓ {filename}</a>
      <span style={{ fontSize: 12, color: 'var(--text-quaternary)' }}>
        Paste straight into a Linear comment, GitHub PR description or Slack canvas — Markdown renders natively.
      </span>
    </div>
  );
}

function S_TplTicketComment() {
  const md = useMemo(() => ticketCommentMarkdown(), []);
  return (
    <Section
      id="tpl-ticket-comment"
      eyebrow="09 · Templates"
      title="Ticket / PR comment"
      intro="A short, structured Markdown stub for status updates on Linear tickets, GitHub PRs and Slack canvases. Five sections — context, decision, why, next steps, links — keeping comments scannable without forcing a full doc."
    >
      <Block title="Preview" note="Markdown source · paste-ready">
        <pre style={{
          margin: 0,
          padding: 20,
          background: 'var(--brand-50, #F1F2F9)',
          border: '1px solid var(--border-secondary)',
          borderRadius: 12,
          fontFamily: 'var(--font-mono)',
          fontSize: 13,
          lineHeight: 1.6,
          color: 'var(--text-primary)',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word',
          overflow: 'auto',
        }}>{md}</pre>
      </Block>

      <Block title="Use it">
        <MarkdownActions markdown={md} filename="comment.md" />
      </Block>
    </Section>
  );
}

window.S_TplTicketComment = S_TplTicketComment;