import Image from "next/image";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface HorizontalProductRowProps {
  imageSrc?: string;
  imageAlt?: string;
  name?: string;
  size?: string;
  color?: string;
  colorValue?: string;
  quantity?: number;
  price?: string;
  oldPrice?: string;
  discountBadge?: string;
  showQuantity?: boolean;
  showAddToCart?: boolean;
  showBuyNow?: boolean;
  showIconAction?: boolean;
  onAddToCart?: () => void;
  onBuyNow?: () => void;
  className?: string;
}

export default function HorizontalProductRow({
  imageSrc = "/images/tote-gallery-3.png",
  imageAlt = "",
  name = "Liberty Formal Step in Men Shoe",
  size = "41",
  color = "Black",
  colorValue = "#111827",
  quantity = 1,
  price = "LKR 12,000.00",
  oldPrice = "LKR 14,000.00",
  discountBadge = "-25%",
  showQuantity = true,
  showAddToCart = true,
  showBuyNow = true,
  showIconAction = true,
  onAddToCart,
  onBuyNow,
  className,
}: HorizontalProductRowProps) {
  return (
    <article
      className={cn(
        "flex w-full flex-col gap-4 rounded-md bg-white p-3 shadow-sm sm:flex-row sm:items-center",
        className
      )}
    >
      {imageSrc && (
        <div className="relative h-20 w-24 shrink-0 overflow-hidden rounded bg-gray-100">
          <Image src={imageSrc} alt={imageAlt || name} fill sizes="96px" className="object-cover" />
        </div>
      )}

      <div className="min-w-0 flex-1">
        {name && <h3 className="text-sm font-semibold text-gray-900">{name}</h3>}
        {(size || color) && (
          <p className="mt-1 text-xs text-gray-500">
            {size && <>Size: {size}</>}
            {size && color && <span> · </span>}
            {color && <>Color: {color}</>}
            {quantity && <span> · Qty: {quantity}</span>}
          </p>
        )}
        {colorValue && (
          <div className="mt-3 flex items-center gap-2 rounded bg-gray-50 px-3 py-2 text-xs text-gray-700 sm:w-28">
            <span className="h-4 w-4 rounded-full" style={{ backgroundColor: colorValue }} />
            <span>{quantity}</span>
          </div>
        )}
      </div>

      <div className="min-w-[130px]">
        {price && <p className="text-sm font-semibold text-gray-900">{price}</p>}
        {oldPrice && <p className="mt-1 text-xs text-red-500 line-through">{oldPrice}</p>}
        {discountBadge && (
          <span className="mt-1 inline-flex rounded bg-red-500 px-2 py-1 text-[10px] font-semibold text-white">
            {discountBadge}
          </span>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-3 sm:ml-auto sm:flex-nowrap">
        {showQuantity && (
          <select
            defaultValue={quantity}
            aria-label={`Quantity for ${name}`}
            className="h-9 rounded-full bg-gray-100 px-4 text-xs text-gray-900 outline-none"
          >
            {[1, 2, 3, 4, 5].map((value) => (
              <option key={value} value={value}>
                {value}
              </option>
            ))}
          </select>
        )}

        {showAddToCart && (
          <Button variant="teal" onClick={onAddToCart} className="h-9 px-6 text-xs">
            Add to cart
          </Button>
        )}

        {showBuyNow && (
          <Button
            variant="outline"
            onClick={onBuyNow}
            className="h-9 rounded-full border-[#00AFC1] px-6 text-xs text-[#00AFC1]"
          >
            Buy it now
          </Button>
        )}

        {showIconAction && (
          <Button variant="icon" aria-label="More product actions" className="h-9 w-9 border-0 bg-gray-100">
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6h.01M12 12h.01M12 18h.01" />
            </svg>
          </Button>
        )}
      </div>
    </article>
  );
}
