"use client";

/**
 * CarImagePlaceholder — shown on the car detail page when no real
 * images exist yet (imageStatus = "pending_upload" / "partial" with no primary).
 *
 * Renders an animated, brand-aware SVG silhouette + "Image Coming Soon" label.
 * Used as a drop-in replacement for the old BodyTypeSilhouette fallback so the
 * detail page communicates clearly that images are on the way.
 */

import { Camera, Clock } from "lucide-react";
import { cn } from "@/lib/utils";
import BodyTypeSilhouette from "@/components/ui/BodyTypeSilhouette";

interface Props {
  bodyType:  string;
  carName?:  string;
  brand?:    string;
  /** visual variant */
  size?: "sm" | "md" | "lg";
  className?: string;
}

const SIZE_MAP = {
  sm: { wrap: "py-6 px-4",  icon: "w-7 h-7",  title: "text-xs",  sub: "text-[10px]", sil: "w-24 h-16" },
  md: { wrap: "py-10 px-8", icon: "w-9 h-9",  title: "text-sm",  sub: "text-xs",     sil: "w-36 h-24" },
  lg: { wrap: "py-16 px-12",icon: "w-11 h-11", title: "text-base",sub: "text-sm",     sil: "w-56 h-36" },
};

export default function CarImagePlaceholder({
  bodyType,
  carName,
  brand,
  size = "lg",
  className,
}: Props) {
  const s = SIZE_MAP[size];

  return (
    <div
      className={cn(
        "absolute inset-0 flex flex-col items-center justify-center gap-4",
        "bg-gradient-to-br from-slate-50 via-blue-50/40 to-cyan-50",
        className
      )}
    >
      {/* Animated silhouette */}
      <div className={cn("relative", s.sil)}>
        {/* Glow ring */}
        <div className="absolute inset-0 rounded-full bg-blue-100/60 blur-2xl scale-110 animate-pulse" />
        <BodyTypeSilhouette
          type={bodyType}
          className={cn("relative w-full h-full text-blue-200/80")}
        />
      </div>

      {/* Camera icon with pulsing ring */}
      <div className="relative flex items-center justify-center">
        <span className="absolute inline-flex rounded-full bg-blue-400/20 animate-ping w-12 h-12" />
        <div className={cn(
          "relative z-10 flex items-center justify-center rounded-full",
          "bg-white border-2 border-blue-100 shadow-lg shadow-blue-100/50",
          size === "sm" ? "w-10 h-10" : size === "md" ? "w-12 h-12" : "w-14 h-14"
        )}>
          <Camera className={cn(s.icon, "text-blue-400")} />
        </div>
      </div>

      {/* Text */}
      <div className="text-center space-y-1">
        <p className={cn("font-black text-gray-600 tracking-tight", s.title)}>
          Image Coming Soon
        </p>
        {(carName || brand) && (
          <p className={cn("text-gray-400 font-medium", s.sub)}>
            {[brand, carName].filter(Boolean).join(" · ")}
          </p>
        )}
        <div className="flex items-center justify-center gap-1 mt-1.5">
          <Clock className="w-3 h-3 text-blue-300" />
          <span className={cn("text-blue-400 font-semibold", s.sub)}>
            Photos will be added soon
          </span>
        </div>
      </div>
    </div>
  );
}