"use client";

import Link from "next/link";
import { PriceDisplay } from "@/components/price-display";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

interface ItemCardItem {
  id: string;
  title: string;
  brand?: string | null;
  price: number;
  originalRetail?: number | null;
  condition: string;
  storeName?: string;
  imageUrl?: string | null;
  isSaved?: boolean;
  badge?: string | null;
  storeAverageRating?: number | null;
  storeReviewCount?: number | null;
}

interface ItemCardProps {
  item: ItemCardItem;
  showStore?: boolean;
  showSaveButton?: boolean;
  onSaveToggle?: (id: string) => void;
}

const conditionColors: Record<string, string> = {
  NWT: "bg-forest-100 text-forest-800",
  NWOT: "bg-forest-100 text-forest-800",
  EUC: "bg-forest-100 text-forest-800",
  GUC: "bg-amber-100 text-amber-800",
  Fair: "bg-red-50 text-red-700",
  Poor: "bg-red-50 text-red-700",
};

export function ItemCard({
  item,
  showStore = true,
  showSaveButton = true,
  onSaveToggle,
}: ItemCardProps) {
  return (
    <div className="rounded bg-white border border-slate-200 overflow-hidden group">
      <Link href={`/items/${item.id}`} className="block">
        <div className="aspect-[4/5] bg-slate-100 relative overflow-hidden">
          {item.imageUrl ? (
            <img
              src={item.imageUrl}
              alt={item.title}
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
              No image
            </div>
          )}
          {showSaveButton && (
            <button
              onClick={(e) => {
                e.preventDefault();
                onSaveToggle?.(item.id);
              }}
              className="absolute top-2 right-2 w-8 h-8 rounded bg-white/90 backdrop-blur-sm flex items-center justify-center text-base hover:bg-white transition-colors"
              aria-label={item.isSaved ? "Remove from saved" : "Save item"}
            >
              <span className={item.isSaved ? "text-forest-600" : "text-slate-400"}>
                {item.isSaved ? "♥" : "♡"}
              </span>
            </button>
          )}
          {item.badge && (
            <span className="absolute bottom-2 left-2 px-2 py-0.5 rounded text-[10px] font-semibold bg-forest-600 text-white">
              {item.badge}
            </span>
          )}
        </div>
      </Link>
      <div className="p-3">
        {item.brand && (
          <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
            {item.brand}
          </div>
        )}
        <Link href={`/items/${item.id}`} className="block">
          <div className="text-sm font-medium text-slate-900 mt-0.5 line-clamp-1">
            {item.title}
          </div>
        </Link>
        <div className="mt-1">
          <PriceDisplay price={item.price} originalRetail={item.originalRetail} size="sm" />
        </div>
        <span
          className={cn(
            "inline-block mt-1.5 text-[10px] font-medium px-1.5 py-0.5 rounded",
            conditionColors[item.condition] || "bg-slate-100 text-slate-600"
          )}
        >
          {item.condition}
        </span>
        {showStore && item.storeName && (
          <div className="text-[10px] text-slate-400 mt-1">{item.storeName}</div>
        )}
        {item.storeReviewCount !== undefined && item.storeReviewCount !== null && item.storeReviewCount > 0 && (
          <div className="text-xs text-slate-500 flex items-center gap-1 mt-1">
            <span className="text-amber-500">★</span>
            <span className="font-medium text-slate-700">
              {item.storeAverageRating != null
                ? (Math.round(item.storeAverageRating * 10) / 10).toFixed(1)
                : ''}
            </span>
            <span>({item.storeReviewCount})</span>
          </div>
        )}
        {item.storeReviewCount === 0 && (
          <div className="text-xs text-slate-400 mt-1">No reviews yet</div>
        )}
      </div>
    </div>
  );
}

export function ItemCardSkeleton() {
  return (
    <div className="rounded bg-white border border-slate-200 overflow-hidden">
      <Skeleton className="aspect-[4/5] w-full" />
      <div className="p-3 space-y-2">
        <Skeleton className="h-3 w-16" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-3 w-12" />
      </div>
    </div>
  );
}