import Link from "next/link";
import { db } from "@/lib/db";

export default async function MissingBlendsPage() {
  const blends = await db.blend.findMany({
    where: { labels: { none: { status: "active" } } },
    orderBy: [{ pipeToolCellarRank: { sort: "asc", nulls: "last" } }, { name: "asc" }],
    take: 100,
    include: { brand: true },
  });

  const hasCellarRankData = blends.some((b) => b.pipeToolCellarRank !== null);

  return (
    <div className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="font-heading text-4xl font-semibold text-terracotta">
        Missing Blends
      </h1>
      <p className="mt-2 text-charcoal/60">
        Blends in the catalog with no label yet.
        {hasCellarRankData
          ? " Sorted by most-cellared, from Pipe Tool data."
          : " Pipe Tool integration isn't connected yet, so this list isn't ranked by cellar popularity. It's alphabetical for now."}
      </p>

      {blends.length === 0 ? (
        <p className="mt-8 text-charcoal/60">
          Every blend in the catalog has a label. Nice work.
        </p>
      ) : (
        <ul className="mt-10 flex flex-col divide-y divide-charcoal/10 border-t border-charcoal/10">
          {blends.map((blend) => (
            <li key={blend.id} className="flex items-center justify-between gap-4 py-4">
              <Link
                href={`/brands/${blend.brand.slug}/${blend.slug}`}
                className="font-medium text-charcoal hover:text-terracotta hover:underline"
              >
                {blend.brand.name} - {blend.name}
              </Link>
              <Link
                href={`/upload?blend=${blend.id}`}
                className="shrink-0 rounded-full bg-terracotta px-4 py-1.5 text-sm font-medium text-white hover:bg-terracotta/90"
              >
                Create a Label
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}