/**
 * Deterministic, tasteful SVG "photographs" for demo apartments.
 * Used by the seed so galleries, the showroom login and cards have imagery
 * before real photos are uploaded. Pure function — safe in scripts.
 */
import type { ImageCategory } from "./domain";

const PALETTES = [
  { a: "#1f3d38", b: "#3b6b62", c: "#c9a24a", d: "#f4efe6" },
  { a: "#2b2f4a", b: "#5b6aa3", c: "#e0b46c", d: "#f6f3ee" },
  { a: "#3a2f2a", b: "#8c6a52", c: "#d9b98a", d: "#f7f1ea" },
  { a: "#1b3a4b", b: "#3e7c94", c: "#e6c37a", d: "#f1f5f6" },
  { a: "#2f3b2a", b: "#6b8a5a", c: "#d8c27a", d: "#f4f6ef" },
  { a: "#402a3a", b: "#8a5a7a", c: "#e2b76e", d: "#f7f0f4" },
];

function hash(s: string) {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619);
  return Math.abs(h);
}

export function placeholderSvg({ code, name, city, category, index = 0 }: { code: string; name: string; city?: string; category: ImageCategory; index?: number }): string {
  const W = 1600;
  const H = 1000;
  const p = PALETTES[hash(code) % PALETTES.length];
  const seed = hash(`${code}-${category}-${index}`);
  const r = (n: number) => (seed % n) / n;
  const label = { LIVING_ROOM: "Living room", BEDROOM: "Bedroom", KITCHEN: "Kitchen", BATHROOM: "Bathroom", EXTERIOR: "Exterior", VIEW: "View", AMENITIES: "Amenities", BUILDING: "Building", OTHER: "" }[category];
  const shapes: string[] = [];
  const stroke = "rgba(255,255,255,0.28)";
  switch (category) {
    case "LIVING_ROOM":
      shapes.push(
        `<rect x="180" y="560" width="760" height="220" rx="40" fill="${p.d}" opacity="0.92"/>`,
        `<rect x="140" y="520" width="120" height="260" rx="30" fill="${p.d}" opacity="0.85"/>`,
        `<rect x="900" y="520" width="120" height="260" rx="30" fill="${p.d}" opacity="0.85"/>`,
        `<rect x="1080" y="640" width="360" height="140" rx="18" fill="${p.c}" opacity="0.8"/>`,
        `<rect x="1120" y="300" width="300" height="220" rx="14" fill="${p.d}" opacity="0.35" stroke="${stroke}"/>`,
        `<circle cx="1270" cy="410" r="60" fill="${p.c}" opacity="0.7"/>`
      );
      break;
    case "BEDROOM":
      shapes.push(
        `<rect x="260" y="480" width="980" height="300" rx="36" fill="${p.d}" opacity="0.92"/>`,
        `<rect x="300" y="520" width="360" height="90" rx="30" fill="${p.c}" opacity="0.75"/>`,
        `<rect x="700" y="520" width="360" height="90" rx="30" fill="${p.c}" opacity="0.75"/>`,
        `<rect x="240" y="300" width="1020" height="200" rx="18" fill="${p.d}" opacity="0.3"/>`,
        `<circle cx="150" cy="560" r="56" fill="${p.c}" opacity="0.8"/><rect x="120" y="610" width="60" height="180" rx="10" fill="${p.d}" opacity="0.6"/>`
      );
      break;
    case "KITCHEN":
      shapes.push(
        `<rect x="120" y="560" width="1360" height="240" rx="12" fill="${p.d}" opacity="0.9"/>`,
        `<rect x="120" y="540" width="1360" height="36" rx="8" fill="${p.c}" opacity="0.85"/>`,
        ...Array.from({ length: 6 }, (_, i) => `<rect x="${140 + i * 225}" y="600" width="200" height="180" rx="10" fill="none" stroke="${p.b}" stroke-opacity="0.35" stroke-width="3"/>`),
        `<rect x="120" y="200" width="1360" height="220" rx="12" fill="${p.d}" opacity="0.28"/>`,
        `<circle cx="800" cy="480" r="26" fill="${p.c}"/>`
      );
      break;
    case "BATHROOM":
      shapes.push(
        `<rect x="200" y="540" width="620" height="220" rx="110" fill="${p.d}" opacity="0.95"/>`,
        `<rect x="900" y="420" width="520" height="340" rx="16" fill="${p.d}" opacity="0.5" stroke="${stroke}"/>`,
        `<circle cx="1160" cy="330" r="46" fill="${p.c}" opacity="0.8"/>`,
        ...Array.from({ length: 12 }, (_, i) => `<line x1="${120 + i * 120}" y1="120" x2="${120 + i * 120}" y2="780" stroke="${stroke}" stroke-width="1"/>`)
      );
      break;
    case "VIEW":
      shapes.push(
        `<circle cx="${1100 + r(200)}" cy="${300 + r(80)}" r="110" fill="${p.c}" opacity="0.9"/>`,
        `<path d="M0 700 Q 300 560 600 660 T 1200 640 T 1600 700 V1000 H0Z" fill="${p.a}" opacity="0.85"/>`,
        `<path d="M0 780 Q 400 700 800 760 T 1600 780 V1000 H0Z" fill="${p.d}" opacity="0.25"/>`,
        `<rect x="0" y="0" width="1600" height="1000" fill="none" stroke="${p.d}" stroke-opacity="0.5" stroke-width="60"/>`
      );
      break;
    case "EXTERIOR":
    case "BUILDING":
      shapes.push(
        ...Array.from({ length: 5 }, (_, i) => `<rect x="${160 + i * 270}" y="${260 + (i % 2) * 90}" width="220" height="${640 - (i % 2) * 90}" rx="10" fill="${p.d}" opacity="${0.55 + (i % 3) * 0.12}"/>`),
        ...Array.from({ length: 30 }, (_, i) => `<rect x="${190 + (i % 5) * 270 + Math.floor(i / 5) * 0}" y="${320 + Math.floor(i / 5) * 90}" width="60" height="50" rx="6" fill="${p.c}" opacity="${0.45 + r(3) * 0.2}"/>`),
        `<circle cx="1380" cy="220" r="70" fill="${p.c}" opacity="0.85"/>`
      );
      break;
    default:
      shapes.push(`<rect x="200" y="200" width="1200" height="600" rx="40" fill="${p.d}" opacity="0.35" stroke="${stroke}"/>`, `<circle cx="800" cy="500" r="120" fill="${p.c}" opacity="0.7"/>`);
  }
  const rot = 15 + (seed % 40);
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
<defs>
  <linearGradient id="g" gradientTransform="rotate(${rot})"><stop offset="0" stop-color="${p.a}"/><stop offset="1" stop-color="${p.b}"/></linearGradient>
  <radialGradient id="v" cx="0.5" cy="0.4" r="0.8"><stop offset="0" stop-color="#ffffff" stop-opacity="0.16"/><stop offset="1" stop-color="#000000" stop-opacity="0.22"/></radialGradient>
</defs>
<title>${escape(name)}${city ? ` · ${escape(city)}` : ""} — ${label}</title>
<rect width="${W}" height="${H}" fill="url(#g)"/>
${shapes.join("\n")}
<rect width="${W}" height="${H}" fill="url(#v)"/>
<g font-family="Inter, Helvetica, Arial, sans-serif" fill="${p.d}" opacity="0.7">
  <text x="60" y="80" font-size="26" letter-spacing="5">${label.toUpperCase()}</text>
  <text x="${W - 60}" y="80" font-size="26" text-anchor="end" font-family="ui-monospace, monospace">${escape(code)}</text>
</g>
</svg>`;
}

function escape(s: string) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}
