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

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import {
  formatLegacyDate,
  getLegacyPayload,
} from "@/lib/legacy/content";

export const metadata: Metadata = {
  title: "Legacy content preview",
  description:
    "Internal inspection of content extracted from the previous WordPress site.",
  robots: { index: false, follow: false },
};

export default function LegacyIndexPage() {
  const { posts, stats, source } = getLegacyPayload();

  return (
    <>
      <PageHeader
        eyebrow="Internal preview"
        title="Legacy content"
        lede={`Staged from ${source.home || source.siteurl || "the previous site"} for editorial review. Not indexed, not linked from the main site.`}
      />
      <Container className="pb-24">
        <div className="mb-8 rounded-md border border-[var(--color-line)] bg-[var(--color-mist)] px-5 py-4 text-[13px] text-[var(--color-slate)]">
          <div className="flex flex-wrap gap-x-6 gap-y-1">
            <span>
              <strong className="text-[var(--color-ink)]">
                {stats.exportedPosts}
              </strong>{" "}
              posts shown
            </span>
            <span>
              <strong className="text-[var(--color-ink)]">
                {stats.candidatePosts}
              </strong>{" "}
              candidates total
            </span>
            <span>
              <strong className="text-[var(--color-ink)]">
                {stats.imagesDownloaded}
              </strong>{" "}
              images downloaded
            </span>
            <span>
              <strong className="text-[var(--color-ink)]">
                {stats.imagesSkipped}
              </strong>{" "}
              skipped
            </span>
          </div>
        </div>

        <ul className="divide-y divide-[var(--color-line)]">
          {posts.map((post) => (
            <li key={post.id} className="py-6">
              <Link
                href={`/legacy/${post.slug}`}
                className="group flex flex-col gap-5 md:flex-row"
              >
                <div className="relative h-32 w-full shrink-0 overflow-hidden rounded-md bg-[var(--color-mist)] md:h-24 md:w-40">
                  {post.featuredImage ? (
                    // Plain <img> on purpose: legacy assets, no remote loader config.
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={post.featuredImage}
                      alt=""
                      className="h-full w-full object-cover"
                      loading="lazy"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center text-[11px] font-semibold uppercase tracking-wider text-[var(--color-slate)]">
                      No image
                    </div>
                  )}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] font-semibold uppercase tracking-wider text-[var(--color-blue)]">
                    <span>{post.type}</span>
                    {post.date && (
                      <span className="text-[var(--color-slate)]">
                        {formatLegacyDate(post.date)}
                      </span>
                    )}
                  </div>
                  <h2 className="mt-2 font-display text-[22px] font-bold leading-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                    {post.title || post.slug}
                  </h2>
                  {post.excerpt && (
                    <p className="mt-2 line-clamp-2 text-[15px] text-[var(--color-slate)]">
                      {post.excerpt}
                    </p>
                  )}
                </div>
              </Link>
            </li>
          ))}
        </ul>
      </Container>
    </>
  );
}
