import React from "react";

// ---------------------------------------------------------------------------
// A deliberately small Markdown renderer, for the per-song README.md.
//
// Not a general one, and it should not grow into one. It covers exactly what
// the READMEs in this tree use -- headings, pipe tables, bullets, fenced code,
// and inline `code`/**bold**/*em* -- because those files are the only
// documentation of how each song was built, and a table shown as monospace
// text throws away the thing that makes them worth reading.
//
// Output is React nodes, never dangerouslySetInnerHTML. The input is a file on
// a local disk rather than anything hostile, but building a habit of returning
// escaped nodes costs nothing here and means a README copied in from elsewhere
// can never inject markup.
// ---------------------------------------------------------------------------

const INLINE = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;

function inline(text: string, keyBase: string): React.ReactNode[] {
  return text.split(INLINE).filter(Boolean).map((tok, i) => {
    const key = `${keyBase}-${i}`;
    if (tok.startsWith("`") && tok.endsWith("`") && tok.length > 1) {
      return (
        <code key={key} className="rounded bg-[var(--color-panel-2)] px-1 py-0.5 font-mono text-[12px]">
          {tok.slice(1, -1)}
        </code>
      );
    }
    if (tok.startsWith("**") && tok.endsWith("**")) {
      return (
        <strong key={key} className="font-semibold text-[var(--color-text)]">
          {tok.slice(2, -2)}
        </strong>
      );
    }
    if (tok.startsWith("*") && tok.endsWith("*") && tok.length > 2) {
      return <em key={key}>{tok.slice(1, -1)}</em>;
    }
    const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(tok);
    if (link) {
      // Relative links point at sibling files on disk, which this app does not
      // serve -- render them as plain text rather than as a dead link.
      const [, label, href] = link;
      return /^https?:\/\//.test(href) ? (
        <a key={key} href={href} className="text-[var(--color-sel)] underline" target="_blank" rel="noreferrer">
          {label}
        </a>
      ) : (
        <span key={key} className="text-[var(--color-dim)]">
          {label}
        </span>
      );
    }
    return <React.Fragment key={key}>{tok}</React.Fragment>;
  });
}

const isTableRow = (l: string) => l.trimStart().startsWith("|");
/** The `|---|---|` separator, which is layout and never content. */
const isTableRule = (l: string) => /^\s*\|[\s:|-]+\|\s*$/.test(l);
const cells = (l: string) =>
  l.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());

export function Markdown({ text }: { text: string }) {
  const lines = text.replace(/\r\n/g, "\n").split("\n");
  const out: React.ReactNode[] = [];
  let i = 0;

  while (i < lines.length) {
    const line = lines[i];

    if (!line.trim()) {
      i += 1;
      continue;
    }

    // fenced code
    if (line.startsWith("```")) {
      const body: string[] = [];
      i += 1;
      while (i < lines.length && !lines[i].startsWith("```")) body.push(lines[i++]);
      i += 1;
      out.push(
        <pre
          key={`c${i}`}
          className="overflow-x-auto rounded bg-[var(--color-panel-2)] p-3 font-mono text-[12px] text-[var(--color-text)]"
        >
          {body.join("\n")}
        </pre>,
      );
      continue;
    }

    const h = /^(#{1,4})\s+(.*)$/.exec(line);
    if (h) {
      const level = h[1].length;
      const size = level === 1 ? "text-[15px]" : level === 2 ? "text-[13px]" : "text-[12px]";
      out.push(
        <div
          key={`h${i}`}
          className={`${size} mt-3 font-semibold text-[var(--color-text)] first:mt-0`}
        >
          {inline(h[2], `h${i}`)}
        </div>,
      );
      i += 1;
      continue;
    }

    if (isTableRow(line)) {
      const rows: string[][] = [];
      let head: string[] | null = null;
      while (i < lines.length && isTableRow(lines[i])) {
        if (isTableRule(lines[i])) {
          head = rows.pop() ?? null;
        } else {
          rows.push(cells(lines[i]));
        }
        i += 1;
      }
      out.push(
        <div key={`t${i}`} className="overflow-x-auto">
          <table className="w-full border-collapse text-[12px]">
            {head && (
              <thead>
                <tr>
                  {head.map((c, k) => (
                    <th
                      key={k}
                      className="border-b border-[var(--color-line)] px-2 py-1 text-left font-medium text-[var(--color-dim)]"
                    >
                      {inline(c, `th${i}-${k}`)}
                    </th>
                  ))}
                </tr>
              </thead>
            )}
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri}>
                  {r.map((c, k) => (
                    <td key={k} className="border-b border-[var(--color-line)] px-2 py-1 align-top">
                      {inline(c, `td${i}-${ri}-${k}`)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>,
      );
      continue;
    }

    if (/^\s*[-*]\s+/.test(line)) {
      const items: { depth: number; text: string }[] = [];
      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) {
        const indent = lines[i].length - lines[i].trimStart().length;
        items.push({ depth: Math.min(2, Math.floor(indent / 2)), text: lines[i].trim().slice(2) });
        i += 1;
      }
      out.push(
        <ul key={`u${i}`} className="space-y-0.5">
          {items.map((it, k) => (
            <li
              key={k}
              className="text-[12px] text-[var(--color-dim)]"
              style={{ paddingLeft: `${0.9 + it.depth * 0.9}rem`, textIndent: "-0.9rem" }}
            >
              <span className="text-[var(--color-line)]">– </span>
              {inline(it.text, `li${i}-${k}`)}
            </li>
          ))}
        </ul>,
      );
      continue;
    }

    const para: string[] = [];
    while (
      i < lines.length &&
      lines[i].trim() &&
      !isTableRow(lines[i]) &&
      !lines[i].startsWith("#") &&
      !lines[i].startsWith("```") &&
      !/^\s*[-*]\s+/.test(lines[i])
    ) {
      para.push(lines[i++]);
    }
    out.push(
      <p key={`p${i}`} className="text-[12px] leading-relaxed text-[var(--color-dim)]">
        {inline(para.join(" "), `p${i}`)}
      </p>,
    );
  }

  return <div className="space-y-2">{out}</div>;
}