"use client";

type RetailerOffer = {
  id?: string | number;
  retailer: string;
  price: number;
  originalPrice?: number;
  url: string;
  affiliateUrl?: string;
  inStock: boolean;
};

interface RetailersListProps {
  retailers: RetailerOffer[];
}

export function RetailersList({ retailers }: RetailersListProps) {
  if (retailers.length === 0) {
    return (
      <div className="text-sm text-zinc-500 text-center py-4">
        No retailer offers available.
      </div>
    );
  }

  const lowestPrice = Math.min(...retailers.map((r) => r.price));

  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400">
          Available Retailers
        </div>
        <div className="mt-1 text-xs text-zinc-500">
          {retailers.length} retailer{retailers.length !== 1 ? "s" : ""} found
        </div>
      </div>

      <div className="space-y-2">
        {retailers.map((retailer) => {
          const isLowestPrice = retailer.price === lowestPrice;
          const isOnSale = retailer.originalPrice !== undefined;

          return (
            <div
              key={retailer.id}
              className={`border rounded-md p-3 transition-colors ${
                retailer.inStock
                  ? "border-zinc-700 bg-zinc-900/30 hover:border-zinc-600"
                  : "border-zinc-800 bg-zinc-900/20 opacity-60"
              }`}
            >
              <div className="flex items-center justify-between gap-4">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-sm font-semibold text-zinc-50">
                      {retailer.retailer}
                    </span>
                    {isLowestPrice && retailer.inStock && (
                      <span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-400/20 text-amber-300 border border-amber-400/30">
                        Best Price
                      </span>
                    )}
                    {!retailer.inStock && (
                      <span className="text-[0.65rem] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 border border-red-500/30">
                        Out of Stock
                      </span>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <span
                      className={`text-lg font-semibold ${
                        isLowestPrice && retailer.inStock
                          ? "text-amber-300"
                          : "text-zinc-300"
                      }`}
                    >
                      ${retailer.price.toFixed(2)}
                    </span>
                    {isOnSale && retailer.originalPrice && (
                      <span className="text-xs text-zinc-500 line-through">
                        ${retailer.originalPrice.toFixed(2)}
                      </span>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <a
                    href={retailer.affiliateUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap ${
                      retailer.inStock
                        ? "border-amber-400/60 bg-amber-400/10 text-amber-200 hover:bg-amber-400/15"
                        : "border-zinc-700 bg-zinc-800/50 text-zinc-500 cursor-not-allowed pointer-events-none"
                    }`}
                  >
                    {retailer.inStock ? "Buy Now" : "Unavailable"}
                  </a>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}