import type { Metadata } from "next";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { MarkdownTableBuilder } from "@/components/tools/markdown-table-builder";
import { MarkdownPreview } from "@/components/editor/markdown-preview";
import { breadcrumbLd, buildMetadata, faqLd } from "@/lib/seo";

const PATH = "/tools/markdown-table-generator";

export const metadata: Metadata = buildMetadata({
  title: "Markdown Table Generator — Build Tables Visually, Get Markdown Instantly",
  description:
    "Free online Markdown table generator. Add rows, columns, and alignment with a spreadsheet-style UI — then copy GitHub Flavored Markdown to paste anywhere.",
  path: PATH,
  keywords: [
    "markdown table generator",
    "markdown table",
    "markdown table builder",
    "markdown table maker",
    "github table generator",
    "gfm table",
    "markdown table syntax",
  ],
});

const FAQ = [
  {
    question: "What is a Markdown table generator?",
    answer:
      "A Markdown table generator turns a visual table (rows, columns, alignment) into the pipe-and-dash Markdown table syntax. It's much faster than typing pipes manually, especially for wide tables.",
  },
  {
    question: "Does this work with GitHub Flavored Markdown (GFM)?",
    answer:
      "Yes. The output follows the GFM table specification used by GitHub, GitLab, Bitbucket, and most documentation tools. Alignment markers (`:---`, `:---:`, `---:`) are emitted automatically.",
  },
  {
    question: "Can I align columns left, center, or right?",
    answer:
      "Yes. Each column header has alignment buttons. Click one and the alignment marker in the second Markdown row updates immediately.",
  },
  {
    question: "How do I add or remove rows and columns?",
    answer:
      "Use the Rows and Cols steppers at the top of the builder. The table grows or shrinks while preserving cells that fit inside the new dimensions.",
  },
  {
    question: "What's the maximum table size?",
    answer:
      "Up to 10 columns and 50 rows in this builder. Larger tables are usually a sign you want a real spreadsheet — but you can still paste any size of Markdown table into our editor.",
  },
  {
    question: "Will the output work in Notion, Obsidian, or VS Code?",
    answer:
      "Yes. GFM tables are supported by Notion, Obsidian, Bear, Logseq, VS Code (with the built-in Markdown preview), Docusaurus, Mintlify, Nextra, and virtually every modern Markdown renderer.",
  },
];

const BODY = `## How to use the Markdown table generator

1. **Set the size** using the Rows and Cols steppers (default 3×3).
2. **Edit headers** by clicking into the top row.
3. **Set alignment** per column with the left / center / right buttons in each header.
4. **Fill in cells** by clicking and typing — Tab moves to the next cell.
5. **Copy the Markdown** with the button — paste it anywhere that supports Markdown tables.

The Markdown output updates as you type so you can see exactly what'll end up in your document.

## Markdown table syntax — what the generator emits

A GFM Markdown table has three parts:

\`\`\`md
| Header 1 | Header 2 | Header 3 |
| :---     | :---:    | ---:     |
| Cell     | Cell     | Cell     |
\`\`\`

1. **Header row** — the labels that appear in the table head.
2. **Alignment row** — three or more dashes per column, with optional colons:
   - \`:---\` left-align
   - \`:---:\` center-align
   - \`---:\` right-align
3. **Body rows** — your data, one row per line.

The pipes don't need to line up perfectly — they only need to be present. Our generator pads them for readability.

## Tips for great Markdown tables

- **Keep them narrow.** Markdown tables wrap awkwardly on phones. If you need more than ~6 columns, consider a different visualization.
- **Avoid pipes in cells.** If you must include a pipe (\`|\`), escape it as \`\\|\` so the renderer doesn't mistake it for a column separator.
- **Multi-line cells** aren't supported natively. Use \`<br>\` for line breaks inside a cell.
- **Sortable / interactive tables?** Most renderers don't ship interactivity. If you need that, render to HTML and add a small JS sorter on top.

## When NOT to use a Markdown table

- **Hierarchical data** — use nested lists or definition lists instead.
- **Long-form data sets** — consider CSV with a link to a downloadable file.
- **Heavy formatting** — code blocks, lists, and blockquotes don't render well inside table cells. Move that content out and link from the cell.

## Deep dive: the complete guide

For 2,500+ words on Markdown table tricks — alignment patterns, escape sequences, accessibility, and how different renderers interpret edge cases — read [Markdown tables: complete syntax guide with examples](/blog/markdown-table-guide).
`;

export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Tools", url: "/tools" },
            { name: "Markdown Table Generator", url: PATH },
          ]),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: faqLd(FAQ) }}
      />

      <section className="border-b">
        <div className="container max-w-5xl py-12 sm:py-16">
          <p className="text-sm font-medium uppercase tracking-wider text-primary">
            Markdown Table Generator
          </p>
          <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
            Build Markdown tables visually — copy GFM syntax instantly
          </h1>
          <p className="mt-4 max-w-2xl text-pretty text-muted-foreground sm:text-lg">
            A spreadsheet-style Markdown table generator. Add rows, set alignment, edit cells —
            and copy GitHub Flavored Markdown ready to paste into your README, blog post, or docs.
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <Button asChild>
              <Link href="/editor">Open the editor</Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/blog/markdown-table-guide">Read the complete table guide</Link>
            </Button>
          </div>
        </div>
      </section>

      <MarkdownTableBuilder />

      <section className="container max-w-3xl py-10">
        <MarkdownPreview source={BODY} enableExtras={false} />
      </section>

      <section className="border-t bg-muted/30">
        <div className="container max-w-3xl py-14">
          <h2 className="text-2xl font-semibold tracking-tight">Frequently asked questions</h2>
          <dl className="mt-6 divide-y divide-border rounded-xl border bg-card">
            {FAQ.map((item) => (
              <details key={item.question} className="group px-6 py-5 [&_summary]:cursor-pointer">
                <summary className="flex items-center justify-between font-medium">
                  {item.question}
                  <span
                    aria-hidden
                    className="ml-4 inline-block transition-transform group-open:rotate-45"
                  >
                    +
                  </span>
                </summary>
                <dd className="mt-3 text-sm text-muted-foreground">{item.answer}</dd>
              </details>
            ))}
          </dl>
        </div>
      </section>
    </>
  );
}