"use client";

import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeSlug from "rehype-slug";
import { FileText } from "lucide-react";
import { api } from "@/lib/api-client";

// Rendert SPEZIFIKATION.md (via /api/spec) als lesbares Dokument. Das Styling läuft über
// die Klasse .md-doc in globals.css und folgt damit dem gewählten Farbschema.
export function SpecView({ anchor }: { anchor?: string | null }) {
  const [markdown, setMarkdown] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    api
      .get<{ markdown: string }>("/api/spec")
      .then((data) => setMarkdown(data.markdown))
      .catch((e) => setError(e instanceof Error ? e.message : "Laden fehlgeschlagen."));
  }, []);

  // Sprungmarke aus einem Rechenweg: erst nach dem Rendern des Markdowns existiert die
  // Überschrift mit der von rehype-slug erzeugten id.
  useEffect(() => {
    if (!anchor || markdown === null) return;
    const el = document.getElementById(anchor);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }, [anchor, markdown]);

  if (error) return <p className="text-sm text-danger">{error}</p>;
  if (markdown === null) return <p className="text-sm text-muted">Lädt…</p>;

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <FileText className="h-5 w-5 text-accent" />
        <h2 className="text-lg font-semibold text-fg">Spezifikation</h2>
      </div>
      <article className="md-doc rounded-xl border border-border bg-surface p-6 shadow-sm lg:p-8">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          rehypePlugins={[rehypeSlug]}
          components={{
            // Breite Tabellen scrollen in ihrem eigenen Container statt die Seite zu dehnen.
            table: ({ children, ...props }) => (
              <div className="md-table-wrap">
                <table {...props}>{children}</table>
              </div>
            ),
          }}
        >
          {markdown}
        </ReactMarkdown>
      </article>
    </div>
  );
}