import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { requestListingAction } from "@/app/actions/community";
import { prisma } from "@/lib/prisma";
import { gemTypeLabel, marketHint, pricePerCarat } from "@/lib/listings";
import { isWholesale } from "@/lib/roles";
import { readSession } from "@/lib/session";

export default async function ListingPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const session = await readSession();
  const listing = await prisma.listing.findUnique({
    where: { id },
    include: { seller: { include: { profile: true } } },
  });
  if (!listing) notFound();
  if (listing.wholesaleOnly && !isWholesale(session)) {
    redirect("/trade");
  }

  const similar = await prisma.listing.findMany({
    where: {
      gemType: listing.gemType,
      id: { not: listing.id },
      ...(isWholesale(session) ? {} : { wholesaleOnly: false }),
    },
    include: { seller: true },
    orderBy: { askingPrice: "asc" },
    take: 4,
  });

  const ppc = pricePerCarat(listing.askingPrice, listing.weightCt);
  const hint = marketHint(listing.askingPrice, listing.marketLow, listing.marketHigh);
  const similarPpc = similar.map((item) => pricePerCarat(item.askingPrice, item.weightCt));
  const similarAvg = similarPpc.length
    ? Math.round(similarPpc.reduce((sum, n) => sum + n, 0) / similarPpc.length)
    : ppc;

  return (
    <div className="page page--wide">
      <div className="auction-wrap">
        <p className="profile-back">
          <Link href="/search">← Inventory</Link>
        </p>

        <div className="auction">
          <div className="auction-photo">
            {listing.imageUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={listing.imageUrl} alt="" />
            ) : (
              <div className="lot-card__placeholder" />
            )}
            <span className="lot-card__status">{listing.availability}</span>
            {listing.wholesaleOnly ? <span className="lot-card__flag">Wholesale</span> : null}
          </div>

          <aside className="auction-desk">
            <p className="eg-eyebrow">
              {gemTypeLabel(listing.gemType)} · {listing.origin}
            </p>
            <h1>{listing.title}</h1>
            <p className="auction-desk__lede">{listing.notes}</p>

            <div className="auction-price">
              <p className="eg-label">Asking</p>
              <p className="auction-price__value">${listing.askingPrice.toLocaleString()}</p>
              <p className="search-ppc">${ppc.toLocaleString()} / ct</p>
            </div>

            <dl className="auction-mini">
              <div>
                <dt>Market</dt>
                <dd>{hint}</dd>
              </div>
              <div>
                <dt>Band</dt>
                <dd>
                  ${listing.marketLow.toLocaleString()}–${listing.marketHigh.toLocaleString()}
                </dd>
              </div>
              <div>
                <dt>Peers / ct</dt>
                <dd>${similarAvg.toLocaleString()}</dd>
              </div>
            </dl>

            {listing.availability === "sold" ? (
              <p className="auction-desk__note">This lot left the tray. Search similar stones below.</p>
            ) : session ? (
              <form action={requestListingAction.bind(null, listing.id)}>
                <button className="eg-btn eg-btn-accent" type="submit">
                  Request this stone
                </button>
              </form>
            ) : (
              <p className="auction-desk__note">
                <Link href={`/login?next=/search/${listing.id}`} className="text-primary">
                  Sign in
                </Link>{" "}
                to open a deal room with {listing.seller.name}.
              </p>
            )}
          </aside>
        </div>

        <div className="auction-board">
          <section>
            <h2>Stone notes</h2>
            <dl className="auction-facts">
              <div>
                <dt>Weight</dt>
                <dd>{listing.weightCt.toFixed(2)} ct</dd>
              </div>
              <div>
                <dt>Color</dt>
                <dd>{listing.color || "—"}</dd>
              </div>
              <div>
                <dt>Clarity</dt>
                <dd>{listing.clarity || "—"}</dd>
              </div>
              <div>
                <dt>Cut</dt>
                <dd>{listing.cut || "—"}</dd>
              </div>
              <div>
                <dt>Dimensions</dt>
                <dd>{listing.dimensions || "—"}</dd>
              </div>
              <div>
                <dt>Treatment</dt>
                <dd>{listing.treatment || "—"}</dd>
              </div>
              <div>
                <dt>Certificate</dt>
                <dd>{listing.certification || "Seller memo"}</dd>
              </div>
              <div>
                <dt>SKU</dt>
                <dd>{listing.sku || "—"}</dd>
              </div>
            </dl>
          </section>

          <section>
            <h2>Seller</h2>
            <div className="search-seller">
              <p>
                <Link href={`/members/${listing.sellerId}`}>{listing.seller.name}</Link>
              </p>
              <p className="text-muted">
                {[listing.seller.profile?.company, listing.seller.profile?.location, listing.seller.profile?.country]
                  .filter(Boolean)
                  .join(" · ")}
              </p>
              <p className="auction-desk__note">Verified members list inventory. Request opens a private room — no payment in this mockup.</p>
            </div>
          </section>
        </div>

        {similar.length ? (
          <section className="search-similar">
            <h2>Similar on the floor</h2>
            <ul>
              {similar.map((item) => (
                <li key={item.id}>
                  <Link href={`/search/${item.id}`}>
                    <span>
                      {item.title}
                      <small>
                        {item.seller.name} · {item.treatment}
                      </small>
                    </span>
                    <strong>${item.askingPrice.toLocaleString()}</strong>
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        ) : null}
      </div>
    </div>
  );
}