/**
 * تصویر برداری اختصاصی محصول.
 * چون هیچ عکسی از سایت‌های دیگر استفاده نمی‌شود، برای داده نمونه هر محصول
 * از روی «شکل ظرف» و «رنگ» خودش یک تصویر SVG سبک و یکتا می‌گیرد.
 * در مرحله ۲ عکس‌های واقعی آپلودشده از پنل جایگزین این تصاویر می‌شوند.
 */
import type { ProductShape } from "@/types/catalog";
import { isDark, shade } from "@/lib/color";

const INK = "#141414";
const METAL = "#c9c7c1";

interface Props {
  shape: ProductShape;
  tone: string;
  /** ۰: محصول، ۱: محصول با جعبه، ۲: بافت/رنگ */
  view?: 0 | 1 | 2;
  label?: string;
  className?: string;
  title?: string;
  /** اندازه ثابت به پیکسل (برای رندر خارج از مرورگر، مثل تصویر Open Graph) */
  size?: number;
}

export function ProductArt({ shape, tone, view = 0, label = "ZAHORA", className, title, size }: Props) {
  const id = `a${shape}${tone.slice(1)}${view}`;
  const body = `url(#${id}b)`;
  const labelFill = isDark(tone) ? "#f5f5f3" : INK;

  return (
    <svg viewBox="0 0 200 200" width={size} height={size} className={className} role="img" aria-label={title ?? label} xmlns="http://www.w3.org/2000/svg">
      <defs>
        {/* سایه‌روشن استوانه‌ای بدنه */}
        <linearGradient id={`${id}b`} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor={shade(tone, -0.16)} />
          <stop offset="0.38" stopColor={shade(tone, 0.28)} />
          <stop offset="0.62" stopColor={tone} />
          <stop offset="1" stopColor={shade(tone, -0.24)} />
        </linearGradient>
        <linearGradient id={`${id}k`} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#000" />
          <stop offset="0.4" stopColor="#3a3a3a" />
          <stop offset="1" stopColor="#050505" />
        </linearGradient>
        <radialGradient id={`${id}s`}>
          <stop offset="0" stopColor="#000" stopOpacity="0.18" />
          <stop offset="1" stopColor="#000" stopOpacity="0" />
        </radialGradient>
      </defs>

      {view === 2 ? (
        <Texture shape={shape} tone={tone} />
      ) : (
        <>
          {view === 1 && <Box label={label} />}
          <ellipse cx={view === 1 ? 112 : 100} cy="177" rx="52" ry="7" fill={`url(#${id}s)`} />
          <g transform={view === 1 ? "translate(24 14) scale(0.88)" : undefined}>
            <Shape shape={shape} tone={tone} body={body} ink={`url(#${id}k)`} label={label} labelFill={labelFill} />
          </g>
        </>
      )}
    </svg>
  );
}

function Label({ x = 100, y, text, fill, size = 6.5 }: { x?: number; y: number; text: string; fill: string; size?: number }) {
  return (
    <text x={x} y={y} textAnchor="middle" fontSize={size} letterSpacing="2.2" fontWeight="500" fill={fill} style={{ fontFamily: "system-ui, sans-serif" }}>
      {text}
    </text>
  );
}

function Shape({ shape, tone, body, ink, label, labelFill }: { shape: ProductShape; tone: string; body: string; ink: string; label: string; labelFill: string }) {
  switch (shape) {
    case "dropper":
      return (
        <g>
          <rect x="70" y="90" width="60" height="86" rx="9" fill={body} />
          <rect x="70" y="90" width="60" height="86" rx="9" fill="none" stroke={shade(tone, -0.3)} strokeOpacity="0.25" />
          <rect x="85" y="74" width="30" height="18" rx="2" fill={ink} />
          <rect x="90" y="34" width="20" height="42" rx="10" fill={ink} />
          <rect x="78" y="118" width="44" height="30" fill="#fff" fillOpacity="0.55" />
          <Label y={136} text={label} fill={INK} size={6} />
        </g>
      );
    case "bottle":
      return (
        <g>
          <rect x="66" y="70" width="68" height="106" rx="12" fill={body} />
          <rect x="80" y="40" width="40" height="32" rx="4" fill={ink} />
          <Label y={128} text={label} fill={labelFill} />
          <rect x="88" y="134" width="24" height="1" fill={labelFill} opacity="0.5" />
        </g>
      );
    case "pump":
      return (
        <g>
          <rect x="64" y="78" width="72" height="98" rx="14" fill={body} />
          <rect x="88" y="62" width="24" height="18" rx="2" fill={ink} />
          <rect x="97" y="46" width="6" height="18" fill={METAL} />
          <path d="M78 38 h40 a5 5 0 0 1 5 5 v4 h-50 v-4 a5 5 0 0 1 5 -5z" fill={ink} />
          <rect x="70" y="40" width="10" height="4" rx="2" fill={ink} />
          <Label y={132} text={label} fill={labelFill} />
        </g>
      );
    case "tube":
      return (
        <g>
          <path d="M66 42 L134 42 L122 150 L78 150 Z" fill={body} />
          <rect x="62" y="34" width="76" height="10" rx="2" fill={shade(tone, -0.12)} />
          {[68, 80, 92, 104, 116, 128].map((x) => (
            <rect key={x} x={x} y="36" width="1.2" height="6" fill={shade(tone, -0.3)} />
          ))}
          <rect x="78" y="148" width="44" height="28" rx="3" fill={ink} />
          <Label y={96} text={label} fill={labelFill} />
        </g>
      );
    case "jar":
      return (
        <g>
          <rect x="52" y="126" width="96" height="50" rx="12" fill={body} />
          <rect x="48" y="100" width="104" height="30" rx="6" fill={ink} />
          <rect x="48" y="100" width="104" height="4" rx="2" fill="#fff" opacity="0.12" />
          <Label y={156} text={label} fill={labelFill} />
        </g>
      );
    case "lipstick":
      return (
        <g>
          <path d="M86 92 L86 58 Q86 50 93 47 L114 38 L114 92 Z" fill={body} />
          <rect x="83" y="90" width="34" height="24" rx="1" fill={METAL} />
          <rect x="78" y="112" width="44" height="64" rx="3" fill={ink} />
          <Label y={150} text={label} fill="#f5f5f3" size={5.5} />
          {/* درپوش کنار محصول */}
          <rect x="132" y="128" width="40" height="48" rx="3" fill={ink} opacity="0.92" />
        </g>
      );
    case "wand":
      return (
        <g>
          <rect x="86" y="82" width="28" height="94" rx="7" fill={body} />
          <rect x="88" y="26" width="24" height="58" rx="4" fill={ink} />
          <rect x="88" y="80" width="24" height="3" fill={METAL} />
          <g transform="rotate(-90 100 132)">
            <Label y={134} text={label} fill={labelFill} size={5.5} />
          </g>
        </g>
      );
    case "compact":
      return (
        <g>
          <circle cx="100" cy="112" r="62" fill={ink} />
          <circle cx="100" cy="112" r="50" fill={body} />
          {[40, 30, 20, 10].map((r) => (
            <circle key={r} cx="100" cy="112" r={r} fill="none" stroke={shade(tone, -0.12)} strokeOpacity="0.35" />
          ))}
          <circle cx="100" cy="112" r="62" fill="none" stroke="#fff" strokeOpacity="0.12" />
        </g>
      );
    case "palette": {
      const pans = [0.5, 0.3, 0.12, 0.38, 0, -0.18, 0.2, -0.3, -0.45];
      return (
        <g>
          <rect x="30" y="54" width="140" height="122" rx="8" fill={ink} />
          <Label y={68} text={label} fill="#f5f5f3" size={5.5} />
          {pans.map((amt, i) => (
            <rect
              key={i}
              x={44 + (i % 3) * 40}
              y={78 + Math.floor(i / 3) * 31}
              width="32"
              height="25"
              rx="3"
              fill={i === 4 ? "#d9b878" : shade(tone, amt)}
            />
          ))}
        </g>
      );
    }
    case "perfume":
      return (
        <g>
          <rect x="56" y="84" width="88" height="92" rx="5" fill={body} opacity="0.92" />
          <rect x="64" y="94" width="72" height="74" rx="3" fill="#fff" opacity="0.18" />
          <rect x="91" y="76" width="18" height="10" fill={METAL} />
          <rect x="76" y="38" width="48" height="40" rx="2" fill={ink} />
          <Label y={134} text={label} fill={labelFill} />
        </g>
      );
  }
}

/** جعبه پشت محصول در نمای دوم گالری */
function Box({ label }: { label: string }) {
  return (
    <g>
      <rect x="30" y="36" width="82" height="140" rx="3" fill="#e6e6e2" />
      <rect x="30" y="36" width="12" height="140" fill="#dcdcd7" />
      <g transform="rotate(-90 72 110)">
        <Label x={72} y={112} text={label} fill={INK} size={8} />
      </g>
    </g>
  );
}

/** نمای بافت یا رنگ محصول (سواچ) */
function Texture({ shape, tone }: { shape: ProductShape; tone: string }) {
  const isColor = ["lipstick", "wand", "compact", "palette"].includes(shape);
  if (isColor) {
    return (
      <g>
        <path d="M30 120 C 60 70, 110 150, 170 88 L176 104 C 120 168, 64 92, 36 140 Z" fill={tone} />
        <path d="M30 120 C 60 70, 110 150, 170 88" stroke={shade(tone, 0.35)} strokeWidth="2" fill="none" opacity="0.6" />
      </g>
    );
  }
  return (
    <g>
      <ellipse cx="100" cy="112" rx="62" ry="40" fill={shade(tone, 0.25)} />
      <path d="M62 110 C 70 82, 132 82, 138 108 C 142 128, 96 136, 90 118 C 86 104, 116 100, 116 112" stroke={shade(tone, -0.12)} strokeWidth="5" fill="none" strokeLinecap="round" />
      <ellipse cx="82" cy="96" rx="14" ry="5" fill="#fff" opacity="0.45" />
    </g>
  );
}