import Image from "next/image";

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

interface ProductReviewCardProps {
  reviewerName?: string;
  reviewerAvatarText?: string;
  reviewedAt?: string;
  productName?: string;
  productImageSrc?: string;
  productImageAlt?: string;
  size?: string;
  color?: string;
  quantity?: number;
  price?: string;
  rating?: number;
  review?: string;
  showDelete?: boolean;
  showEdit?: boolean;
  onDelete?: () => void;
  onEdit?: () => void;
  className?: string;
}

function Stars({ rating = 4 }: { rating?: number }) {
  return (
    <div className="flex items-center gap-1">
      {Array.from({ length: 5 }).map((_, index) => (
        <svg
          key={index}
          className={cn("h-6 w-6", index < rating ? "text-[#FFB800]" : "text-gray-300")}
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
        </svg>
      ))}
    </div>
  );
}

export default function ProductReviewCard({
  reviewerName = "Cozy Casual",
  reviewerAvatarText = "coz",
  reviewedAt = "On - Apr 5, 2022, 10:07 AM",
  productName = "Calla Tote Bag - Espresso Brown",
  productImageSrc = "/images/tote-gallery-1.png",
  productImageAlt,
  size = "Small",
  color = "Espresso Brown",
  quantity = 1,
  price = "LKR 5,000.00",
  rating = 4,
  review = "I've been using this handbag for a few weeks now, and I'm genuinely impressed by both the quality and the attention to detail. The material feels durable yet soft to the touch, and the stitching is neat and strong, which gives me confidence that it will last a long time.",
  showDelete = true,
  showEdit = true,
  onDelete,
  onEdit,
  className,
}: ProductReviewCardProps) {
  return (
    <article className={cn("w-full rounded-lg border border-gray-200 bg-white p-5 text-[#1f2440]", className)}>
      <div className="flex flex-wrap items-center gap-4">
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#ad5a17] text-[10px] font-semibold text-white">
          {reviewerAvatarText}
        </div>
        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-5 gap-y-1">
          <h3 className="text-sm font-semibold text-gray-900">{reviewerName}</h3>
          <span className="text-xs text-gray-500">Reviewed {reviewedAt}</span>
        </div>
        <div className="ml-auto flex items-center gap-3">
          {showDelete && (
            <Button
              variant="outline"
              onClick={onDelete}
              className="h-8 rounded-full border-red-400 px-5 text-xs text-red-500"
            >
              Delete Review
            </Button>
          )}
          {showEdit && (
            <Button variant="teal" onClick={onEdit} className="h-8 rounded-full px-6 text-xs">
              Edit
            </Button>
          )}
        </div>
      </div>

      <div className="mt-5 flex items-center gap-5 rounded-md bg-gray-50 p-4">
        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded bg-gray-100">
          <Image
            src={productImageSrc}
            alt={productImageAlt ?? productName}
            fill
            sizes="64px"
            className="object-cover"
          />
        </div>
        <div className="min-w-0 flex-1">
          <h4 className="text-sm font-semibold text-gray-900">{productName}</h4>
          <p className="mt-1 text-[11px] text-gray-500">
            {size && <>Size: {size}</>}
            {size && color && <span> · </span>}
            {color && <>Color: {color}</>}
            {(size || color) && quantity && <span> · </span>}
            {quantity && <>Qty: {quantity}</>}
          </p>
        </div>
        {price && <span className="shrink-0 text-sm font-medium text-gray-900">{price}</span>}
      </div>

      <div className="mt-5">
        <Stars rating={rating} />
        {review && <p className="mt-4 text-sm leading-6 text-gray-700">{review}</p>}
      </div>
    </article>
  );
}
