"use client"

import { MarkdownDocument } from "@/components/f-ui/markdown-document/markdown-document"

function buildDemoSource(): string {
  const sections: string[] = [
    "# Auto-chunked document",
    "",
    "This demo passes a single **`source`** string with **`chunkChars={2000}`** so the document splits into multiple virtualized segments. Scroll the panel — only a window of segments stays mounted.",
    "",
  ]

  for (let i = 1; i <= 24; i++) {
    sections.push(`## Section ${i}`)
    sections.push("")
    sections.push(
      `Paragraph ${i} expands the source past the chunk budget. Blank lines are preferred break points; fenced code stays intact across chunks.`,
    )
    sections.push("")
    sections.push("```ts")
    // Avoid the literal "export const" — remarkDemoWrapper scans demos with a
    // naive /export (?:function|const) Name/ and would bind the wrong export.
    sections.push(`const section${i} = ${i}`)
    sections.push("```")
    sections.push("")
    sections.push(
      `More prose for section ${i}: lists, emphasis, and links stay in the same security model as **Markdown Renderer**.`,
    )
    sections.push("")
    sections.push(`- Item A-${i}`)
    sections.push(`- Item B-${i}`)
    sections.push(`- Item C-${i}`)
    sections.push("")
  }

  return sections.join("\n")
}

const SOURCE = buildDemoSource()

export function MarkdownDocumentDemo() {
  return (
    <div className="border-input bg-card h-[420px] overflow-hidden rounded-md border">
      <MarkdownDocument
        source={SOURCE}
        chunkChars={2000}
        className="h-full p-4"
      />
    </div>
  )
}

"use client"

import { MarkdownDocument } from "@/components/f-ui/markdown-document/markdown-document"

/**
 * Long KB / MinerU-style fixture: KaTeX + HTML tables ride Markdown Renderer
 * inside each virtualized segment — same defaults as the Renderer page demo,
 * but inside a scroll panel so integrators see Document inherits the pipeline.
 */
function buildMathHtmlDocumentSource(): string {
  const parts: string[] = [
    "# Parsed paper preview",
    "",
    "This **Markdown Document** panel uses the same **Markdown Renderer** pipeline as the short-form demo: default **`math`** and **`allowHtml`**. Scroll — off-screen segments unmount; KaTeX and HTML tables stay in the mounted window.",
    "",
    "## Euler and attention",
    "",
    "Inline identity: $e^{i\\pi}+1=0$.",
    "",
    "Parenthesis form also works: \\(\\mathrm{softmax}(x)_i = \\frac{e^{x_i}}{\\sum_j e^{x_j}}\\).",
    "",
    "Block attention:",
    "",
    "$$",
    "\\mathrm{Attention}(Q,K,V)=\\mathrm{softmax}\\left(\\frac{QK^{\\top}}{\\sqrt{d_k}}\\right)V",
    "$$",
    "",
    "Display with brackets:",
    "",
    "\\[",
    "\\mathcal{L} = -\\sum_i y_i \\log \\hat{y}_i",
    "\\]",
    "",
    "## Transformer variants (HTML table)",
    "",
    "Author HTML (not GFM pipes) with **`rowspan`** and cell math — the kind of dump OCR / MinerU often emits:",
    "",
    "<table>",
    "<thead>",
    "<tr><th>Group</th><th>Symbol</th><th>Meaning</th><th>Typical</th></tr>",
    "</thead>",
    "<tbody>",
    '<tr><td rowspan="2">(A)</td><td>$N$</td><td>Sequence length</td><td>$512$</td></tr>',
    "<tr><td>$d_{\\mathrm{model}}$</td><td>Model width</td><td>$768$</td></tr>",
    "<tr><td>(B)</td><td>$d_{\\mathrm{ff}}$</td><td>Feed-forward width</td><td>$2048$</td></tr>",
    "<tr><td>(C)</td><td>$h$</td><td>Attention heads</td><td>$12$</td></tr>",
    "</tbody>",
    "</table>",
    "",
    "Escape hatches on this shell are the same forwarded props: **`math={false}`** or **`allowHtml={false}`**.",
    "",
  ]

  for (let i = 1; i <= 16; i++) {
    parts.push(`## Filler section ${i}`)
    parts.push("")
    parts.push(
      `Padding so the document virtualizes. Section ${i} keeps KaTeX available when remounted: $i=${i}$, $i^2=${i * i}$.`,
    )
    parts.push("")
    if (i === 8) {
      parts.push("Mid-document HTML table (still rendered after remount):")
      parts.push("")
      parts.push("<table>")
      parts.push("<thead><tr><th>Metric</th><th>Value</th></tr></thead>")
      parts.push("<tbody>")
      parts.push("<tr><td>Perplexity</td><td>$e^{H}$</td></tr>")
      parts.push("<tr><td>Temperature</td><td>$T=0.7$</td></tr>")
      parts.push("</tbody>")
      parts.push("</table>")
      parts.push("")
    }
    parts.push("```ts")
    parts.push(`const filler${i} = ${i}`)
    parts.push("```")
    parts.push("")
  }

  return parts.join("\n")
}

const SOURCE = buildMathHtmlDocumentSource()

export function MarkdownDocumentMathHtmlTableDemo() {
  return (
    <div className="border-input bg-card h-[420px] overflow-hidden rounded-md border">
      <MarkdownDocument
        source={SOURCE}
        chunkChars={1800}
        className="h-full p-4"
      />
    </div>
  )
}

"use client"

import { useRef, useState } from "react"

import {
  MarkdownDocument,
  type MarkdownDocumentHandle,
  type MarkdownSegment,
} from "@/components/f-ui/markdown-document/markdown-document"
import { Button } from "@/components/ui/button"

const SEGMENTS: readonly MarkdownSegment[] = [
  {
    id: "intro",
    source: [
      "# Host-defined segments",
      "",
      "Pass **`segments`** when you already own section boundaries — chapters, API slices, or OCR page exports mapped to `{ id, source }` in the host.",
      "",
      "The component never interprets what a segment means; it only virtualizes and renders.",
    ].join("\n"),
  },
  {
    id: "setup",
    source: [
      "## Setup",
      "",
      "Install **Markdown Document**, then forward the same security props you use on **Markdown Renderer** (images, zoom, Mermaid).",
      "",
      "```bash",
      "pnpm dlx shadcn@latest add @f-ui-plus/markdown-document",
      "```",
    ].join("\n"),
  },
  {
    id: "navigation",
    source: [
      "## Navigation",
      "",
      "Use the imperative handle to jump by segment id. Host chrome (TOC, progress) stays outside the component.",
      "",
      "| API | Role |",
      "| --- | --- |",
      "| `scrollToSegment` | Scroll + force-mount target |",
      "| `getSegmentCount` | Total segments |",
      "| `onVisibleSegmentIdsChange` | Drive host chrome |",
    ].join("\n"),
  },
  {
    id: "closing",
    source: [
      "## Closing",
      "",
      "Prefer host **`segments`** when boundaries matter. Prefer auto-chunked **`source`** for unstructured exports.",
    ].join("\n"),
  },
]

export function MarkdownDocumentSegmentsDemo() {
  const ref = useRef<MarkdownDocumentHandle>(null)
  const [visibleIds, setVisibleIds] = useState<string[]>([])

  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        {SEGMENTS.map((segment) => (
          <Button
            key={segment.id}
            type="button"
            variant="outline"
            onClick={() => ref.current?.scrollToSegment(segment.id)}
          >
            Jump to {segment.id}
          </Button>
        ))}
        <p className="text-muted-foreground text-xs">
          Visible: {visibleIds.length ? visibleIds.join(", ") : "—"}
        </p>
      </div>
      <div className="border-input bg-card h-[360px] overflow-hidden rounded-md border">
        <MarkdownDocument
          ref={ref}
          segments={SEGMENTS}
          className="h-full p-4"
          onVisibleSegmentIdsChange={setVisibleIds}
        />
      </div>
    </div>
  )
}

"use client"

import { useEffect, useRef } from "react"

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer"
import { useMarkdownDocument } from "@/components/f-ui/markdown-document/use-markdown-document"

const SOURCE = [
  "# Headless markdown document",
  "",
  "**`useMarkdownDocument`** is the view-model: resolved segments, visible window, spacers, and scroll helpers.",
  "",
  "## Second section",
  "",
  "Scroll the native viewport below. Readout lines show segment count and visible ids — no stock chrome.",
  "",
  "```ts",
  "const ok = true",
  "```",
  "",
  "## Third section",
  "",
  "Compose your own shell; render each visible segment with **Markdown Renderer** (or any markdown surface).",
  "",
  "More lines keep the window interesting while overscan mounts neighbors.",
  "",
  "## Fourth section",
  "",
  "Jump buttons call **`scrollToSegment`** from the same hook return.",
].join("\n")

function MeasuredSegment({
  id,
  source,
  onHeight,
}: {
  id: string
  source: string
  onHeight: (id: string, heightPx: number) => void
}) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = ref.current
    if (!el) return
    const report = () => onHeight(id, el.offsetHeight)
    report()
    const ro = new ResizeObserver(report)
    ro.observe(el)
    return () => ro.disconnect()
  }, [id, source, onHeight])

  return (
    <div ref={ref} data-segment-id={id}>
      <MarkdownRenderer source={source} />
    </div>
  )
}

export function MarkdownDocumentHeadlessDemo() {
  const doc = useMarkdownDocument({
    source: SOURCE,
    chunkChars: 280,
  })

  const visibleIds: string[] = []
  if (!doc.isEmpty && doc.visibleStart <= doc.visibleEnd) {
    for (let i = doc.visibleStart; i <= doc.visibleEnd; i++) {
      visibleIds.push(doc.segments[i]!.id)
    }
  }

  const visible: typeof doc.segments = []
  if (!doc.isEmpty && doc.visibleStart <= doc.visibleEnd) {
    for (let i = doc.visibleStart; i <= doc.visibleEnd; i++) {
      visible.push(doc.segments[i]!)
    }
  }

  return (
    <div>
      <p>segmentCount: {doc.getSegmentCount()}</p>
      <p>visibleIds: {visibleIds.length ? visibleIds.join(", ") : "(none)"}</p>
      <p>
        <button
          type="button"
          onClick={() => {
            const last = doc.segments[doc.segments.length - 1]
            if (last) doc.scrollToSegment(last.id)
          }}
        >
          scrollToSegment(last)
        </button>{" "}
        <button
          type="button"
          onClick={() => {
            const first = doc.segments[0]
            if (first) doc.scrollToSegment(first.id)
          }}
        >
          scrollToSegment(first)
        </button>
      </p>
      {doc.isEmpty ? (
        <p>No content</p>
      ) : (
        <div
          ref={doc.scrollRootRef}
          style={{ height: 240, overflow: "auto" }}
        >
          {doc.spacerTop > 0 ? (
            <div aria-hidden style={{ height: doc.spacerTop }} />
          ) : null}
          {visible.map((segment) => (
            <MeasuredSegment
              key={segment.id}
              id={segment.id}
              source={segment.source}
              onHeight={doc.reportHeight}
            />
          ))}
          {doc.spacerBottom > 0 ? (
            <div aria-hidden style={{ height: doc.spacerBottom }} />
          ) : null}
        </div>
      )}
    </div>
  )
}

"use client"

import { MarkdownDocument } from "@/components/f-ui/markdown-document/markdown-document"

export function MarkdownDocumentEmptyDemo() {
  return (
    <div className="border-input bg-card h-[220px] overflow-hidden rounded-md border">
      <MarkdownDocument segments={[]} className="h-full" />
    </div>
  )
}