import Link from "next/link";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { money } from "@/lib/fees";
import { getSettings, getSiteContentMap, site } from "@/lib/session";
import { expireEndedAuctions } from "@/lib/platform";
import { Reveal } from "@/components/motion/Reveal";
import { InteractiveCard } from "@/components/motion/InteractiveCard";

export default async function ClasificadosPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; error?: string }>;
}) {
  const settings = await getSettings();
  if (!settings.moduleClassifieds) redirect("/?error=Modulo%20desactivado");
  await expireEndedAuctions();

  const sp = await searchParams;
  const content = await getSiteContentMap();
  const listings = await prisma.listing.findMany({
    where: {
      status: "active",
      ...(sp.q
        ? {
            OR: [
              { title: { contains: sp.q } },
              { description: { contains: sp.q } },
              { city: { contains: sp.q } },
            ],
          }
        : {}),
    },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div>
      <Reveal>
        <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
          <div>
            <p className="text-xs tracking-wider text-[var(--lime)] uppercase">
              {site(content, "classifiedsLabel")}
            </p>
            <h1 className="text-3xl font-semibold">
              {site(content, "classifiedsTitle")}
            </h1>
            <p className="text-white/60">{site(content, "classifiedsSub")}</p>
          </div>
          <Link href="/clasificados/nuevo" className="btn-primary">
            Vender
          </Link>
        </div>
      </Reveal>
      {sp.error && <p className="mb-4 text-sm text-red-300">{sp.error}</p>}
      <Reveal delay={0.05}>
        <form className="mb-6 flex gap-2">
          <input
            className="input max-w-sm"
            name="q"
            placeholder="Buscar…"
            defaultValue={sp.q || ""}
          />
          <button className="btn-ghost" type="submit">
            Buscar
          </button>
        </form>
      </Reveal>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {listings.map((l, i) => (
          <Reveal key={l.id} delay={Math.min(i * 0.04, 0.3)}>
            <InteractiveCard
              href={`/clasificados/${l.id}`}
              className="!overflow-hidden !p-0"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={l.image}
                alt=""
                className="card-media h-44 w-full object-cover"
              />
              <div className="p-4">
                <p className="font-medium line-clamp-2">{l.title}</p>
                <p className="mt-1 text-sm text-white/50">
                  {l.city} · {l.type}
                </p>
                <p className="mt-2 font-semibold text-[var(--lime)]">
                  {money(l.currentBid)}
                  {l.buyNowPrice ? ` · Buy ${money(l.buyNowPrice)}` : ""}
                </p>
              </div>
            </InteractiveCard>
          </Reveal>
        ))}
      </div>
    </div>
  );
}