import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { placeBidAction } from "@/app/actions/community";
import { Countdown } from "@/components/countdown";
import { prisma } from "@/lib/prisma";
import { AUCTION_CATEGORIES, isWholesale } from "@/lib/roles";
import { readSession } from "@/lib/session";

export default async function AuctionDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const session = await readSession();
  const auction = await prisma.auction.findUnique({
    where: { id },
    include: {
      bids: { include: { bidder: true }, orderBy: { createdAt: "desc" } },
    },
  });
  if (!auction) notFound();
  if (auction.wholesaleOnly && !isWholesale(session)) {
    redirect("/trade");
  }

  const now = new Date();
  const live = now >= auction.startsAt && now <= auction.endsAt;
  const floor = Math.max(auction.currentBid + auction.minIncrement, auction.startingBid);
  const category =
    AUCTION_CATEGORIES.find((item) => item.value === auction.category)?.label || auction.category;

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

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

          <aside className="auction-desk">
            <p className="eg-eyebrow">
              {category}
              {auction.wholesaleOnly ? " · Wholesale" : ""}
            </p>
            <h1>{auction.title}</h1>
            <p className="auction-desk__lede">{auction.description}</p>

            <div className="auction-price">
              <p className="eg-label">{live ? "Current bid" : auction.status === "closed" ? "Hammer" : "Opening"}</p>
              <p className="auction-price__value">${auction.currentBid.toLocaleString()}</p>
            </div>

            <dl className="auction-mini">
              <div>
                <dt>Clock</dt>
                <dd>
                  {live ? <Countdown endsAt={auction.endsAt.toISOString()} /> : auction.status}
                </dd>
              </div>
              <div>
                <dt>Increment</dt>
                <dd>${auction.minIncrement.toLocaleString()}</dd>
              </div>
              <div>
                <dt>Bids</dt>
                <dd>{auction.bids.length}</dd>
              </div>
            </dl>

            {live && session ? (
              <form action={placeBidAction.bind(null, auction.id)} className="auction-bid">
                <input
                  name="amount"
                  type="number"
                  min={floor}
                  step={auction.minIncrement}
                  defaultValue={floor}
                  aria-label="Bid amount"
                />
                <button className="eg-btn eg-btn-accent" type="submit">
                  Place bid
                </button>
              </form>
            ) : live && !session ? (
              <p className="auction-desk__note">
                <Link href={`/login?next=/auctions/${auction.id}`} className="text-primary">
                  Sign in
                </Link>{" "}
                to bid. Next bid from ${floor.toLocaleString()}.
              </p>
            ) : auction.status === "closed" ? (
              <p className="auction-desk__note">This lot is closed. Payment is not connected in this mockup.</p>
            ) : (
              <p className="auction-desk__note">
                Bidding opens {auction.startsAt.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })}.
              </p>
            )}
          </aside>
        </div>

        <div className="auction-board">
          <section>
            <h2>Stone notes</h2>
            <dl className="auction-facts">
              <div>
                <dt>Origin</dt>
                <dd>{auction.origin || "—"}</dd>
              </div>
              <div>
                <dt>Certificate</dt>
                <dd>{auction.certification || "Seller memo"}</dd>
              </div>
              <div>
                <dt>Treatment</dt>
                <dd>{auction.treatment || "See description"}</dd>
              </div>
              <div>
                <dt>Starting</dt>
                <dd>${auction.startingBid.toLocaleString()}</dd>
              </div>
            </dl>
          </section>

          <section>
            <h2>Bid history</h2>
            {auction.bids.length === 0 ? (
              <p className="dir-empty">No bids yet. Starting ${auction.startingBid.toLocaleString()}.</p>
            ) : (
              <ol className="auction-history">
                {auction.bids.map((bid, index) => (
                  <li key={bid.id}>
                    <span>
                      {index === 0 ? "Lead" : `#${auction.bids.length - index}`}
                      {" · "}
                      {bid.bidder.name}
                    </span>
                    <strong>${bid.amount.toLocaleString()}</strong>
                  </li>
                ))}
              </ol>
            )}
          </section>
        </div>
      </div>
    </div>
  );
}