"use client";
import { motion } from "framer-motion";
import { Heart, Eye, MapPin, MessageCircle, ExternalLink } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import type { SellerListing } from "./types";
import { getConditionLabel, getConditionColor } from "./mockData";
import { useFormatPrice } from "@/hooks/useFormatPrice";

interface ListingCardProps {
  listing: SellerListing;
  idx: number;
  onWishlist: (id: string) => void;
  onMessage: () => void;
}

function ListingCard({ listing, idx, onWishlist, onMessage }: ListingCardProps) {
  const formatPrice = useFormatPrice();
  const condColor = getConditionColor(listing.condition);

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.94 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ delay: idx * 0.06, type: "spring", stiffness: 300, damping: 26 }}
      className="rounded-2xl overflow-hidden group cursor-pointer min-w-[200px] flex-shrink-0 sm:min-w-0"
      style={{ background: "var(--card)", border: "1px solid var(--border)" }}
    >
      {/* Image */}
      <div className="relative overflow-hidden h-36 sm:h-44">
        <img
          src={listing.image}
          alt={listing.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
        />
        {/* Condition badge */}
        <div
          className="absolute top-2 left-2 px-2 py-0.5 rounded-lg text-[10px] font-bold"
          style={{ background: `${condColor}22`, color: condColor, border: `1px solid ${condColor}40`, backdropFilter: "blur(6px)" }}
        >
          {getConditionLabel(listing.condition)}
        </div>
        {/* Wishlist button */}
        <button
          onClick={(e) => { e.stopPropagation(); onWishlist(listing.id); }}
          className="absolute top-2 right-2 w-8 h-8 rounded-full flex items-center justify-center transition-all active:scale-90"
          style={{
            background: listing.wishlisted ? "rgba(252,0,0,0.9)" : "rgba(22,33,62,0.8)",
            border: `1px solid ${listing.wishlisted ? "rgba(252,0,0,0.5)" : "var(--border)"}`,
            backdropFilter: "blur(6px)",
          }}
          aria-label={listing.wishlisted ? "Remove from wishlist" : "Add to wishlist"}
        >
          <Heart
            size={13}
            fill={listing.wishlisted ? "#fff" : "none"}
            color={listing.wishlisted ? "#fff" : "var(--text-muted)"}
          />
        </button>
        {/* Views */}
        <div
          className="absolute bottom-2 right-2 flex items-center gap-1 px-2 py-0.5 rounded-lg text-[10px] text-[var(--text-muted)]"
          style={{ background: "rgba(22,33,62,0.8)", backdropFilter: "blur(6px)" }}
        >
          <Eye size={10} />
          {listing.views.toLocaleString()}
        </div>
      </div>

      {/* Info */}
      <div className="p-3">
        <p className="text-sm font-bold text-[var(--text-primary)] line-clamp-2 mb-1.5 group-hover:text-[var(--accent)] transition-colors leading-tight">
          {listing.title}
        </p>

        <div className="flex items-center gap-1 text-[10px] text-[var(--text-muted)] mb-2">
          <MapPin size={9} />
          {listing.location}
        </div>

        <div className="flex items-center justify-between">
          <p className="text-sm font-black" style={{ color: "var(--accent)" }}>
            {formatPrice(listing.price)}
          </p>
          <span
            className="text-[9px] font-medium px-1.5 py-0.5 rounded-md"
            style={{ background: "rgba(255,255,255,0.05)", color: "var(--text-muted)" }}
          >
            {listing.category}
          </span>
        </div>

        {/* Actions */}
        <div className="flex gap-2 mt-3 pt-3 border-t border-[var(--border)]">
          <button
            className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[11px] font-semibold text-white transition-all active:scale-95"
            style={{ background: "var(--accent)" }}
          >
            <ExternalLink size={11} />
            View
          </button>
          <button
            onClick={(e) => { e.stopPropagation(); onMessage(); }}
            className="flex-1 flex items-center justify-center gap-1.5 py-1.5 rounded-lg text-[11px] font-semibold transition-all active:scale-95"
            style={{ background: "var(--deep)", color: "var(--text-muted)", border: "1px solid var(--border)" }}
          >
            <MessageCircle size={11} />
            Ask
          </button>
        </div>
      </div>
    </motion.div>
  );
}

interface Props {
  onMessage: () => void;
}

export function SellerListings({ onMessage }: Props) {
  const { profile, toggleWishlist } = useSeller();

  if (profile.listings.length === 0) {
    return (
      <div className="mx-4 mb-4 rounded-2xl p-8 text-center" style={{ background: "var(--card)", border: "1px solid var(--border)" }}>
        <div className="text-4xl mb-3">📦</div>
        <p className="font-semibold text-[var(--text-primary)] mb-1">No Active Listings</p>
        <p className="text-sm text-[var(--text-muted)]">This seller has no active listings at the moment.</p>
      </div>
    );
  }

  return (
    <div className="mb-4" id="listings">
      <div className="flex items-center justify-between px-4 mb-3">
        <h2 className="text-base font-bold text-[var(--text-primary)]">
          Active Listings
          <span className="ml-2 text-xs font-normal text-[var(--text-muted)]">
            ({profile.listings.length})
          </span>
        </h2>
      </div>

      {/* Mobile: horizontal scroll */}
      <div className="px-4 sm:hidden">
        <div className="flex gap-3 overflow-x-auto pb-3 no-scrollbar snap-x snap-mandatory">
          {profile.listings.map((listing, i) => (
            <div key={listing.id} className="snap-start w-52 flex-shrink-0">
              <ListingCard listing={listing} idx={i} onWishlist={toggleWishlist} onMessage={onMessage} />
            </div>
          ))}
        </div>
      </div>

      {/* Tablet+: grid */}
      <div className="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-3 px-4">
        {profile.listings.map((listing, i) => (
          <ListingCard key={listing.id} listing={listing} idx={i} onWishlist={toggleWishlist} onMessage={onMessage} />
        ))}
      </div>
    </div>
  );
}