import { categoryOf } from "@/lib/blog/feeds";
import { categoryPath, postPath } from "@/lib/blog/routes";
import type { PostSummary } from "@/lib/blog/schema";
import Link from "next/link";

export const formatDate = (iso: string) =>
  new Date(iso).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC",
  });

export function JsonLd({ data }: { data: object }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(data).replace(/</g, "\\u003c"),
      }}
    />
  );
}

export function Breadcrumb({
  items,
}: {
  items: { name: string; href?: string }[];
}) {
  return (
    <nav aria-label="Breadcrumb" className="text-blog-muted text-sm">
      <ol className="flex flex-wrap items-center gap-x-2 gap-y-1">
        {items.map((item, i) => (
          <li key={item.name} className="flex items-center gap-2">
            {i > 0 && <span aria-hidden>/</span>}
            {item.href ? (
              <Link href={item.href} className="hover:text-blog-ink">
                {item.name}
              </Link>
            ) : (
              <span aria-current="page" className="text-blog-ink">
                {item.name}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

export function PageIntro({
  title,
  children,
}: {
  title: string;
  children?: React.ReactNode;
}) {
  return (
    <header className="max-w-3xl">
      <h1 className="font-display text-blog-ink text-3xl sm:text-4xl">
        {title}
      </h1>
      {children && (
        <div className="text-blog-muted mt-4 text-lg leading-relaxed">
          {children}
        </div>
      )}
    </header>
  );
}

type ListOptions = {
  showCategory?: boolean;
  showTags?: boolean;
  showUpdated?: boolean;
};

export function PostList({
  posts,
  showCategory = true,
  showTags = false,
  showUpdated = false,
}: { posts: PostSummary[] } & ListOptions) {
  return (
    <ol className="divide-blog-line border-blog-line divide-y border-y">
      {posts.map((p) => {
        const category = categoryOf(p.category);
        return (
          <li key={p.slug} className="py-6">
            <h2 className="text-blog-ink text-xl font-bold">
              <Link
                href={postPath(p.slug)}
                className="hover:text-blog-link hover:underline"
              >
                {p.title}
              </Link>
            </h2>
            <p className="text-blog-muted mt-2 leading-relaxed">
              {p.description}
            </p>
            <p className="text-blog-muted mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
              {showUpdated && p.updatedAt && (
                <span>Updated {formatDate(p.updatedAt)}</span>
              )}
              <span>Published {formatDate(p.publishedAt)}</span>
              {showCategory && category && (
                <Link
                  href={categoryPath(category.slug)}
                  className="text-blog-link font-medium hover:underline"
                >
                  {category.name}
                </Link>
              )}
              {showTags &&
                p.tags.map((t) => (
                  <span
                    key={t}
                    className="bg-blog-soft ring-blog-line rounded-full px-2.5 py-0.5 text-xs ring-1"
                  >
                    {t}
                  </span>
                ))}
            </p>
          </li>
        );
      })}
    </ol>
  );
}