import Link from "next/link";
import { db } from "@/lib/db";
import { LabelCard, type LabelCardData } from "@/components/labels/LabelCard";
import { getHighestBadgesForUsers } from "@/lib/badges";

export default async function Home() {
  const labels = await db.label.findMany({
    where: { status: "active" },
    orderBy: { createdAt: "desc" },
    take: 5,
    include: {
      blend: { include: { brand: true } },
      uploader: true,
      versions: { where: { isCurrent: true }, take: 1 },
      cellarChoice: { take: 1 },
    },
  });

  const highestBadges = await getHighestBadgesForUsers(
    Array.from(new Set(labels.map((label) => label.uploaderId))),
  );

  const cards: LabelCardData[] = labels
    .filter((label) => label.versions[0])
    .map((label) => ({
      id: label.id,
      fileUrl: label.versions[0].fileUrl,
      brandName: label.blend.brand.name,
      brandSlug: label.blend.brand.slug,
      blendName: label.blend.name,
      blendSlug: label.blend.slug,
      uploaderUsername: label.uploader.username,
      uploaderAvatarUrl: label.uploader.avatarUrl,
      uploaderHighestBadgeName: highestBadges.get(label.uploaderId)?.name ?? null,
      thumbsUpCount: label.thumbsUpCount,
      isCellarChoice: label.cellarChoice.length > 0,
      isRequestFulfillment: label.fulfilledRequestId !== null,
    }));

  return (
    <main className="mx-auto max-w-6xl px-6 py-20">
      <section className="text-center">
        <h1>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/wordmark.png"
            alt="Cellar Labels"
            className="mx-auto h-20 w-auto sm:h-24"
          />
        </h1>
        <p className="mx-auto mt-6 max-w-xl text-lg text-charcoal/80">
          The community label library and browser-based print sheet builder
          for pipe tobacco enthusiasts. Upload, share, download, and print
          round jar labels built for Avery formats.
        </p>
        <div className="mt-8">
          <Link
            href="/register"
            className="inline-block rounded-full bg-terracotta px-8 py-3 font-medium text-white hover:bg-terracotta/90"
          >
            Join the Community
          </Link>
        </div>
      </section>

      <section className="mt-24">
        <h2 className="text-center font-heading text-3xl font-semibold text-charcoal">
          Featured Labels
        </h2>

        {cards.length === 0 ? (
          <p className="mx-auto mt-4 max-w-md text-center text-charcoal/60">
            No labels have been shared yet. Be the first.
          </p>
        ) : (
          <ul className="mx-auto mt-10 grid max-w-4xl grid-cols-2 gap-8 sm:grid-cols-5">
            {cards.map((card) => (
              <li key={card.id}>
                <LabelCard label={card} />
              </li>
            ))}
          </ul>
        )}

        <div className="mt-8 text-center">
          <Link
            href="/labels"
            className="text-sm font-medium text-terracotta hover:underline"
          >
            Browse the gallery &rarr;
          </Link>
        </div>
      </section>
    </main>
  );
}