"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { Heart, Eye, MapPin } from "lucide-react";
import type { Listing } from "@/types/marketplace";
import { getConditionLabel, getConditionColor } from "@/utils/marketplace";
import { useFormatPrice } from "@/hooks/useFormatPrice";

interface ListingCardProps {
  listing: Listing;
  onWishlistToggle?: (id: string) => void;
  isWishlisted?: boolean;
  className?: string;
}

export function ListingCard({
  listing,
  onWishlistToggle,
  isWishlisted = false,
  className = "",
}: ListingCardProps) {
  const router = useRouter();
  const [imgError, setImgError] = useState(false);
  const primaryImage = listing.images.find((i) => i.isPrimary) ?? listing.images[0];
  const formatPrice = useFormatPrice();

  return (
    <div
      onClick={() => router.push(`/marketplace/listing/${listing.slug}`)}
      className={`cursor-pointer rounded-2xl overflow-hidden transition-transform hover:scale-[1.01] active:scale-[0.99] ${className}`}
      style={{ background: "var(--card)", border: "1px solid var(--border)" }}
    >
      {/* Image */}
      <div className="relative aspect-[4/3] overflow-hidden bg-gray-100">
        {!imgError && primaryImage ? (
          <img
            src={primaryImage.url}
            alt={primaryImage.alt}
            className="w-full h-full object-cover"
            onError={() => setImgError(true)}
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-4xl">
            📦
          </div>
        )}
        {/* Wishlist button */}
        <button
          onClick={(e) => {
            e.stopPropagation();
            onWishlistToggle?.(listing.id);
          }}
          className="absolute top-2 right-2 w-8 h-8 rounded-full flex items-center justify-center backdrop-blur-sm"
          style={{
            background: "rgba(0,0,0,0.35)",
            border: isWishlisted ? "1.5px solid #ef4444" : "1.5px solid transparent",
          }}
        >
          <Heart
            size={14}
            fill={isWishlisted ? "#ef4444" : "none"}
            color={isWishlisted ? "#ef4444" : "#fff"}
          />
        </button>
        {/* Condition badge */}
        <span
          className="absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-semibold"
          style={{
            background: getConditionColor(listing.condition),
            color: "#fff",
          }}
        >
          {getConditionLabel(listing.condition)}
        </span>
      </div>

      {/* Content */}
      <div className="p-3">
        <p
          className="text-sm font-medium line-clamp-2 mb-1"
          style={{ color: "var(--text-primary)" }}
        >
          {listing.title}
        </p>

        {listing.originalPrice && listing.originalPrice > listing.price && (
          <p className="text-xs line-through mb-0.5" style={{ color: "var(--text-muted)" }}>
            {formatPrice(listing.originalPrice)}
          </p>
        )}

        <p className="text-base font-bold mb-2" style={{ color: "var(--accent)" }}>
          {formatPrice(listing.price)}
        </p>

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1" style={{ color: "var(--text-muted)" }}>
            <MapPin size={10} />
            <span className="text-[10px]">{listing.location.city}</span>
          </div>
          <div className="flex items-center gap-1" style={{ color: "var(--text-muted)" }}>
            <Eye size={10} />
            <span className="text-[10px]">{listing.views}</span>
          </div>
        </div>

        {/* Seller */}
        <div className="flex items-center gap-1.5 mt-2 pt-2" style={{ borderTop: "1px solid var(--border)" }}>
          <img
            src={listing.sellerAvatar}
            alt={listing.sellerName}
            className="w-5 h-5 rounded-full object-cover"
          />
          <span className="text-[10px] truncate" style={{ color: "var(--text-muted)" }}>
            {listing.sellerName}
          </span>
        </div>
      </div>
    </div>
  );
}