"use client";

import { useState } from "react";

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer";

const DEFAULT_MARKDOWN = `# Markdown renderer

User-generated **safe** markdown with [a normal link](https://example.com) and a [blocked scheme](javascript:alert(1)).

## List

- One
- Two

## TypeScript

\`\`\`ts
const n: number = 42;
\`\`\`

## Mermaid

\`\`\`mermaid
flowchart LR
  A[Start] --> B[End]
\`\`\`

## Raw angle brackets

<script>alert(1)</script>
`;

export function MarkdownRendererDemo() {
  const [source, setSource] = useState(DEFAULT_MARKDOWN);

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="flex min-h-[320px] flex-col gap-2">
        <p className="text-muted-foreground text-xs font-medium">
          Markdown source
        </p>
        <textarea
          value={source}
          onChange={(e) => setSource(e.target.value)}
          className="border-input bg-background text-foreground focus-visible:ring-ring min-h-[280px] flex-1 resize-y rounded-md border p-3 font-mono text-sm focus-visible:ring-2 focus-visible:outline-none"
          spellCheck={false}
          aria-label="Markdown source"
        />
      </div>
      <div className="flex min-h-[320px] flex-col gap-2">
        <p className="text-muted-foreground text-xs font-medium">Rendered</p>
        <div className="border-input bg-card min-h-[280px] flex-1 overflow-auto rounded-md border p-4">
          <MarkdownRenderer source={source} />
        </div>
      </div>
    </div>
  );
}

"use client";

import { InlineMarkdown } from "@/components/f-ui/markdown-renderer/inline-markdown";
import { Button } from "@/components/ui/button";

/**
 * Host surfaces where an `<article>` / prose shell would break layout:
 * button label, chip, table cell, muted status line, blocked scheme.
 */
export function MarkdownRendererInlineFragmentDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <Button type="button" variant="outline">
          <InlineMarkdown source={"Open **docs**"} />
        </Button>
        <span className="border-border bg-muted/40 inline-flex items-center rounded-md border px-2 py-0.5 text-xs">
          <InlineMarkdown source={"Priority: `P1` — **ship today**"} />
        </span>
        <p className="text-muted-foreground text-sm">
          Status:{" "}
          <InlineMarkdown
            source={"Ready — see [changelog](https://example.com)"}
            trustedLinks
            baseOrigin="https://app.local"
          />
        </p>
      </div>

      <div className="border-border overflow-hidden rounded-md border">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-border bg-muted/30 border-b text-left">
              <th className="px-3 py-2 font-medium">Field</th>
              <th className="px-3 py-2 font-medium">Value</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-border border-b">
              <td className="text-muted-foreground px-3 py-2">Owner</td>
              <td className="px-3 py-2">
                <InlineMarkdown
                  source={"Assigned to [Ada](https://example.com/ada)"}
                  trustedLinks
                  baseOrigin="https://app.local"
                />
              </td>
            </tr>
            <tr>
              <td className="text-muted-foreground px-3 py-2">Note</td>
              <td className="px-3 py-2">
                <InlineMarkdown source={"Use `InlineMarkdown` in cells — not an article"} />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <p className="text-muted-foreground text-sm">
        Blocked scheme (link text only):{" "}
        <InlineMarkdown source={"[unsafe](javascript:alert(1))"} />
      </p>
    </div>
  );
}

"use client";

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer";

/** Many columns + long cell text so the table exceeds a chat-like measure. */
const WIDE_TABLE = [
  "Comparison across regions (scroll horizontally when the pane is narrow):",
  "",
  "| Metric | North America | EMEA | APAC | LATAM | ANZ | Middle East | Africa | Nordics | Benelux | DACH |",
  "| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |",
  "| Active seats | 12,480 | 9,210 | 14,902 | 3,441 | 2,108 | 1,776 | 890 | 1,204 | 980 | 2,450 |",
  "| Median latency (ms) | 48 | 62 | 91 | 110 | 74 | 88 | 130 | 41 | 55 | 58 |",
  "| Error budget remaining | 99.2% | 98.7% | 97.9% | 99.0% | 99.4% | 98.1% | 97.2% | 99.6% | 99.1% | 98.8% |",
  "| Last deploy window | `2026-07-24T18:00Z` | `2026-07-24T16:30Z` | `2026-07-25T02:15Z` | `2026-07-24T22:00Z` | `2026-07-25T01:00Z` | `2026-07-24T20:45Z` | `2026-07-24T19:10Z` | `2026-07-24T15:00Z` | `2026-07-24T14:20Z` | `2026-07-24T13:55Z` |",
].join("\n");

/**
 * Constrains width like a chat / docs measure so the wide GFM table must
 * scroll locally instead of expanding the page.
 */
export function MarkdownRendererWideTableDemo() {
  return (
    <div className="border-input bg-card max-w-md overflow-hidden rounded-md border p-4">
      <MarkdownRenderer source={WIDE_TABLE} />
    </div>
  );
}

"use client";

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer";

/**
 * Mixed prose + wide table + code fence — verifies vertical rhythm (`my-6` on
 * custom blocks) and local table horizontal scroll in one pass.
 */
const MIXED_SOURCE = [
  "Before the table, a short paragraph should sit with even spacing above the grid.",
  "",
  "| Region | Seats | Latency | Budget | Window | Owner | Notes |",
  "| --- | --- | --- | --- | --- | --- | --- |",
  "| North America | 12,480 | 48ms | 99.2% | `18:00Z` | platform | Primary |",
  "| EMEA | 9,210 | 62ms | 98.7% | `16:30Z` | platform | Failover |",
  "| APAC | 14,902 | 91ms | 97.9% | `02:15Z` | growth | Peak |",
  "| LATAM | 3,441 | 110ms | 99.0% | `22:00Z` | growth | Expanding |",
  "",
  "After the table, the following TypeScript sample should keep the same vertical gap:",
  "",
  "```ts",
  "export function summarize(rows: Row[]) {",
  "  return rows.reduce((n, r) => n + r.seats, 0);",
  "}",
  "```",
  "",
  "Closing sentence under the code block — spacing should match the gap above the fence.",
].join("\n");

export function MarkdownRendererBlockRhythmDemo() {
  return (
    <div className="border-input bg-card max-w-lg overflow-hidden rounded-md border p-4">
      <MarkdownRenderer source={MIXED_SOURCE} />
    </div>
  );
}

"use client";

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer";

/**
 * MinerU / paper-style fixture: KaTeX in prose plus an HTML `<table>` whose
 * cells contain `$…$` (opaque to remark-math until the dollar-lift pass).
 */
const MATH_HTML_TABLE_SOURCE = [
  "Euler’s identity inline: $e^{i\\pi}+1=0$.",
  "",
  "Parenthesis delimiters: \\(a^2+b^2=c^2\\).",
  "",
  "Attention scales as:",
  "",
  "$$",
  "\\mathrm{Attention}(Q,K,V)=\\mathrm{softmax}\\left(\\frac{QK^{\\top}}{\\sqrt{d_k}}\\right)V",
  "$$",
  "",
  "Bracket display:",
  "",
  "\\[",
  "\\mathcal{L}_{\\mathrm{CE}} = -\\sum_i y_i \\log \\hat{y}_i",
  "\\]",
  "",
  "Parsed artifact table (HTML, not GFM pipes) — cell text like `$N$` becomes KaTeX via dollar-lift:",
  "",
  "<table>",
  "<thead>",
  "<tr><th>Symbol</th><th>Meaning</th><th>Typical size</th></tr>",
  "</thead>",
  "<tbody>",
  '<tr><td rowspan="2">$N$</td><td>Sequence length</td><td>$512$</td></tr>',
  "<tr><td>Batch size (same row-span symbol)</td><td>$32$</td></tr>",
  "<tr><td>$d_{model}$</td><td>Model width</td><td colspan=\"1\">$768$</td></tr>",
  "</tbody>",
  "</table>",
  "",
  "For the **virtualized** knowledge-base path with the same pipeline, open **Markdown Document → Math and HTML Tables**.",
].join("\n");

export function MarkdownRendererMathHtmlTableDemo() {
  return (
    <div className="border-input bg-card max-w-lg overflow-hidden rounded-md border p-4">
      <MarkdownRenderer source={MATH_HTML_TABLE_SOURCE} />
    </div>
  );
}

"use client"

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

const SOURCE = [
  "# Images",
  "",
  "Remote images are off by default. Use **`allowImages`** for all safe `http(s)` URLs, or restrict with **`allowedImageHosts`** / **`allowedImagePrefixes`**. This demo uses a hostname allowlist — `picsum.photos` renders; `example.com` stays blocked.",
  "",
  "![Placeholder](https://picsum.photos/seed/f-ui/320/180)",
  "",
  "![Blocked](https://example.com/blocked.png)",
].join("\n")

export function MarkdownRendererAllowedImagesDemo() {
  return (
    <MarkdownRenderer
      source={SOURCE}
      allowedImageHosts={["picsum.photos"]}
    />
  )
}

"use client"

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

export function MarkdownRendererImageZoomDemo() {
  return (
    <MarkdownRenderer
      source={"![Demo](https://picsum.photos/seed/zoom/640/360)"}
      allowImages
      imageZoom
    />
  )
}

"use client";

import { useEffect, useState } from "react";

import { MarkdownRenderer } from "@/components/f-ui/markdown-renderer/markdown-renderer";
import { Button } from "@/components/ui/button";

const FULL_SOURCE = [
  "# Streaming source",
  "",
  "Incomplete **emphasis** closes only after more tokens arrive.",
  "",
  "![Placeholder](https://picsum.photos/seed/stream/320/180)",
  "",
  "Done.",
].join("\n");

const CHAR_INTERVAL_MS = 28;

export function MarkdownRendererStreamingDemo() {
  const [visibleLength, setVisibleLength] = useState(0);
  const [runId, setRunId] = useState(0);

  useEffect(() => {
    setVisibleLength(0);
    const id = window.setInterval(() => {
      setVisibleLength((prev) => {
        if (prev >= FULL_SOURCE.length) {
          window.clearInterval(id);
          return prev;
        }
        return prev + 1;
      });
    }, CHAR_INTERVAL_MS);
    return () => window.clearInterval(id);
  }, [runId]);

  const source = FULL_SOURCE.slice(0, visibleLength);
  const isStreaming = visibleLength < FULL_SOURCE.length;

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <Button
          type="button"
          variant="outline"
          onClick={() => setRunId((n) => n + 1)}
        >
          Replay
        </Button>
        <p className="text-muted-foreground text-xs">
          {isStreaming ? "Streaming…" : "Complete"}
        </p>
      </div>
      <div className="border-input bg-card min-h-[200px] overflow-auto rounded-md border p-4">
        <MarkdownRenderer source={source} isStreaming={isStreaming} allowImages />
      </div>
    </div>
  );
}

"use client"

import ReactMarkdown from "react-markdown"

import { useMarkdownRenderer } from "@/components/f-ui/markdown-renderer/use-markdown-renderer"

const SOURCE = [
  "# Headless markdown",
  "",
  "Wire **`useMarkdownRenderer`** to your own shell and **`ReactMarkdown`**.",
  "",
  "```ts",
  "const ok = true",
  "```",
].join("\n")

export function MarkdownRendererHeadlessDemo() {
  const vm = useMarkdownRenderer({ source: SOURCE })

  return (
    <div>
      <p>Source length: {SOURCE.length} characters</p>
      <article>
        <ReactMarkdown
          remarkPlugins={vm.remarkPlugins}
          rehypePlugins={vm.rehypePlugins}
          components={vm.components}
        >
          {SOURCE}
        </ReactMarkdown>
      </article>
    </div>
  )
}