import Link from "next/link";
import { notFound } from "next/navigation";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { money } from "@/lib/fees";
import {
  acceptWinnerAction,
  buyNowAction,
  placeBidAction,
} from "@/server/actions/classifieds";

export default async function ListingDetailPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { id } = await params;
  const sp = await searchParams;
  const session = await auth();
  const listing = await prisma.listing.findUnique({
    where: { id: Number(id) },
    include: { bids: { orderBy: { amount: "desc" }, take: 10 } },
  });
  if (!listing) notFound();
  const isSeller = session?.user?.email === listing.sellerEmail;
  const minBid = listing.currentBid + listing.minIncrement;

  return (
    <div className="mx-auto max-w-2xl">
      <Link href="/clasificados" className="text-sm text-[var(--lime)]">
        ← Clasificados
      </Link>
      {sp.error && (
        <p className="mt-3 text-sm text-red-300">{decodeURIComponent(sp.error)}</p>
      )}
      <div className="card mt-4 !p-0 overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={listing.image} alt="" className="h-64 w-full object-cover" />
        <div className="p-5">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="text-2xl font-semibold">{listing.title}</h1>
            <span className="badge">{listing.status}</span>
          </div>
          <p className="mt-1 text-white/60">
            {listing.category} · {listing.city} · {listing.condition} ·{" "}
            {listing.sellerName}
          </p>
          <p className="mt-3 text-xl text-[var(--lime)]">
            Puja actual: {money(listing.currentBid)}
          </p>
          {listing.buyNowPrice && (
            <p className="text-white/70">Buy now: {money(listing.buyNowPrice)}</p>
          )}
          <p className="mt-4 text-white/80">{listing.description}</p>
        </div>
      </div>

      {listing.status === "active" && !isSeller && session && (
        <div className="mt-4 grid gap-4 md:grid-cols-2">
          {(listing.type === "auction" || listing.type === "both") && (
            <form action={placeBidAction} className="card space-y-3">
              <h2 className="font-semibold">Pujar</h2>
              <input type="hidden" name="listingId" value={listing.id} />
              <input
                className="input"
                name="amount"
                type="number"
                step="0.01"
                min={minBid}
                defaultValue={minBid}
                required
              />
              <p className="text-xs text-white/50">Minimo {money(minBid)}</p>
              <button className="btn-primary" type="submit">
                Colocar puja
              </button>
            </form>
          )}
          {listing.buyNowPrice &&
            (listing.type === "buy_now" || listing.type === "both") && (
              <form action={buyNowAction} className="card space-y-3">
                <h2 className="font-semibold">Comprar ahora</h2>
                <p className="text-xs text-white/50">
                  Se crea la orden pendiente. Luego declaras el pago y el
                  vendedor confirma.
                </p>
                <input type="hidden" name="listingId" value={listing.id} />
                <select className="input" name="paymentMethod" defaultValue="transfer">
                  <option value="transfer">Transferencia bancaria</option>
                  <option value="ath">ATH Movil</option>
                  <option value="cash">Efectivo / en persona</option>
                </select>
                <select className="input" name="shippingMethod" defaultValue="pickup">
                  <option value="pickup">Recoger</option>
                  <option value="shipping">Envio</option>
                </select>
                <input className="input" name="address" placeholder="Direccion (si envio)" />
                <button className="btn-primary" type="submit">
                  Comprar {money(listing.buyNowPrice)}
                </button>
              </form>
            )}
        </div>
      )}

      {!session && listing.status === "active" && (
        <Link href="/login" className="btn-primary mt-4 inline-flex">
          Inicia sesion para comprar o pujar
        </Link>
      )}

      {isSeller && listing.status === "active" && listing.bids.length > 0 && (
        <form action={acceptWinnerAction} className="card mt-4">
          <input type="hidden" name="listingId" value={listing.id} />
          <p className="text-sm text-white/70">
            Mejor puja: {money(listing.bids[0].amount)} por {listing.bids[0].userName}
          </p>
          <button className="btn-primary mt-3" type="submit">
            Aceptar ganador
          </button>
        </form>
      )}

      <div className="card mt-4">
        <h2 className="font-semibold">Historial de pujas</h2>
        <ul className="mt-3 space-y-2 text-sm">
          {listing.bids.map((b) => (
            <li key={b.id} className="flex justify-between text-white/70">
              <span>
                {b.userName} · {new Date(b.at).toLocaleString()}
              </span>
              <span className="text-[var(--lime)]">{money(b.amount)}</span>
            </li>
          ))}
          {!listing.bids.length && (
            <li className="text-white/50">Sin pujas aun.</li>
          )}
        </ul>
      </div>
    </div>
  );
}