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

export default async function AdminFixesPage() {
  const suggestions = await db.labelFixSuggestion.findMany({
    where: { status: "confirmed" },
    orderBy: { createdAt: "asc" },
    include: {
      label: {
        include: {
          blend: { include: { brand: true } },
          versions: { where: { isCurrent: true }, take: 1 },
        },
      },
      suggester: true,
    },
  });

  const suggestedBlendIds = Array.from(
    new Set(suggestions.map((s) => s.suggestedBlendId).filter((id): id is string => Boolean(id))),
  );
  const suggestedBlends = await db.blend.findMany({
    where: { id: { in: suggestedBlendIds } },
    include: { brand: true },
  });
  const blendMap = new Map(suggestedBlends.map((b) => [b.id, b]));

  return (
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Fix Suggestion Queue
      </h1>
      <p className="mt-2 text-charcoal/60">
        Confirmed fixes (two or more members agreed on the same brand/blend
        for an unverified label). Applying updates the label and rejects any
        other suggestions on it.
      </p>

      {suggestions.length === 0 ? (
        <p className="mt-8 text-charcoal/60">No confirmed suggestions.</p>
      ) : (
        <ul className="mt-8 flex flex-col gap-4">
          {suggestions.map((suggestion) => {
            const currentVersion = suggestion.label.versions[0];
            const suggestedBlend = suggestion.suggestedBlendId
              ? blendMap.get(suggestion.suggestedBlendId)
              : null;
            return (
              <li
                key={suggestion.id}
                className="flex flex-col gap-3 rounded-lg border border-charcoal/10 bg-warm-white p-4 sm:flex-row sm:items-start"
              >
                {currentVersion && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={currentVersion.fileUrl}
                    alt=""
                    className="h-16 w-16 shrink-0 rounded-full border border-charcoal/10 object-cover"
                  />
                )}
                <div className="flex-1">
                  <Link
                    href={`/labels/${suggestion.labelId}`}
                    className="font-medium text-charcoal hover:text-terracotta"
                  >
                    Currently: {suggestion.label.blend.brand.name} -{" "}
                    {suggestion.label.blend.name}
                  </Link>
                  <p className="mt-1 text-sm text-charcoal">
                    Suggested:{" "}
                    <strong>
                      {suggestedBlend
                        ? `${suggestedBlend.brand.name} - ${suggestedBlend.name}`
                        : "Unknown blend"}
                    </strong>
                  </p>
                  <p className="text-sm text-charcoal/60">
                    by {suggestion.suggester.username}
                    {suggestion.note ? ` ("${suggestion.note}")` : ""}
                  </p>
                </div>
                <div className="flex gap-3 sm:w-48 sm:flex-col">
                  <ApplyFixButton suggestionId={suggestion.id} />
                  <RejectFixButton suggestionId={suggestion.id} />
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}