import { getLegalDoc, type LegalSlug } from "@/lib/legal/getLegalDoc";
import Link from "next/link";
import { notFound } from "next/navigation";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const LEGAL_LINKS: { slug: LegalSlug; label: string }[] = [
  { slug: "terms-of-service", label: "Terms of Service" },
  { slug: "privacy-policy", label: "Privacy Policy" },
  { slug: "data-protection", label: "Data Protection" },
  { slug: "general-terms-and-conditions", label: "General Terms and Conditions" },
  { slug: "return-and-refund-policy", label: "Return and Refund Policy" },
];

const defaultTitles: Record<LegalSlug, string> = {
  "terms-of-service": "Terms of Service",
  "privacy-policy": "Privacy Policy",
  "data-protection": "Data Protection",
  "general-terms-and-conditions": "General Terms and Conditions",
  "return-and-refund-policy": "Return and Refund Policy",
};

type LegalDocPageProps = {
  slug: LegalSlug;
};

export function LegalDocPage({ slug }: LegalDocPageProps) {
  const doc = getLegalDoc(slug);
  if (!doc) notFound();

  const title = doc.data.title ?? defaultTitles[slug];
  const others = LEGAL_LINKS.filter((l) => l.slug !== slug);

  return (
    <main className="mx-auto max-w-3xl px-4 py-8 md:px-6 md:py-12">
      <Link
        href="/shop"
        className="mb-6 inline-flex items-center gap-1 text-sm text-[#3d5554] transition-colors hover:text-[#236f6b]"
      >
        ← Back to Shop
      </Link>
      <article className="prose prose-[#1a2e2d] max-w-none">
        <h1 className="font-[family-name:var(--font-fraunces)] text-2xl font-bold text-[#1a2e2d] md:text-3xl">
          {title}
        </h1>
        {doc.data.lastUpdated && (
          <p className="mt-2 text-[#3d5554]">
            Last updated: {doc.data.lastUpdated}
          </p>
        )}

        <div className="mt-6 [&_h2]:font-[family-name:var(--font-fraunces)] [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:text-[#236f6b] [&_h2]:mt-8 [&_h2]:first:mt-0 [&_p]:text-[#1a2e2d] [&_p]:leading-relaxed [&_p]:mb-3 [&_a]:font-medium [&_a]:text-[#38a99f] [&_a]:underline [&_a]:transition-colors [&_a:hover]:text-[#236f6b] [&_ol]:mb-3 [&_ol]:list-inside [&_ol]:list-decimal [&_ul]:mb-3 [&_ul]:list-inside [&_ul]:list-disc">
          <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
              h1: ({ children }) => (
                <h2 className="font-[family-name:var(--font-fraunces)] text-lg font-semibold text-[#236f6b]">
                  {children}
                </h2>
              ),
            }}
          >
            {doc.content}
          </ReactMarkdown>
        </div>

        <div className="mt-10 space-y-2 border-t border-[#236f6b]/20 pt-6">
          {others.length > 0 && (
            <p className="text-sm text-[#3d5554]">
              Other policies:{" "}
              {others.map((l, i) => (
                <span key={l.slug}>
                  {i > 0 && " · "}
                  <Link
                    href={`/${l.slug}`}
                    className="font-medium text-[#38a99f] underline transition-colors hover:text-[#236f6b]"
                  >
                    {l.label}
                  </Link>
                </span>
              ))}
            </p>
          )}
          <p className="text-sm text-[#3d5554]">
            Need help?{" "}
            <Link
              href="/contact"
              className="font-medium text-[#38a99f] underline transition-colors hover:text-[#236f6b]"
            >
              Contact us
            </Link>
            .
          </p>
        </div>
      </article>
    </main>
  );
}
