import type { RoomObjectKind } from "./roomObjects";

export function RoomObjectIsoArtwork({ kind }: { kind: RoomObjectKind }) {
  return (
    <div className="rm-object-art rm-object-art-iso" data-kind={kind} aria-hidden="true">
      <div className="rm-ref-iso-stage" dangerouslySetInnerHTML={{ __html: ARTWORK[kind] }} />
    </div>
  );
}

// Verbatim face geometry, dimensions, colours, and animation timings from
// `Server Room Objects.dc.html`. Only the app-owned outer stage scales and
// bottom-anchors these standalone reference scenes onto the live room surface.
const ARTWORK: Record<RoomObjectKind, string> = {
  aircon: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-42px;top:-42px;width:84px;height:84px;background:color-mix(in srgb,#30b0c7 9%,var(--surface-muted));border:1px solid color-mix(in srgb,#30b0c7 30%,var(--border));border-radius:5px"></div>
      <div style="position:absolute;left:-28px;top:-19px;width:56px;height:38px;transform-style:preserve-3d">
        <div style="position:absolute;inset:0;transform:translateZ(104px);border-radius:3px;background:linear-gradient(135deg,#e9edf0,#c7d0d6);border:1px solid #b3bdc4"><div style="position:absolute;inset:8px;border-radius:50%;background:repeating-radial-gradient(circle,#aeb8bf 0 1px,transparent 1px 4px);opacity:.8"></div></div>
        <div style="position:absolute;left:0;top:-66px;width:56px;height:104px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:3px 3px 0 0;overflow:hidden;background:linear-gradient(180deg,#dfe6ea,#c2ccd2);border:1px solid #b3bdc4"><div style="position:absolute;inset:7px 8px 40px;border-radius:3px;background:repeating-linear-gradient(180deg,#9fb0b8 0 2px,#eef3f5 2px 6px);box-shadow:inset 0 0 0 1px #b3bdc4"></div><div style="position:absolute;left:12px;bottom:12px;width:32px;height:24px;border-radius:4px;background:#0c1219;border:1px solid #243344;display:flex;align-items:center;justify-content:center;gap:4px"><span style="width:5px;height:5px;border-radius:50%;background:#30b0c7;box-shadow:0 0 6px #30b0c7;animation:kkBreathe 2.4s ease-in-out infinite"></span><span style="font-family:var(--font-mono);font-size:7px;color:#7ecfda">18°</span></div></div>
        <div style="position:absolute;top:0;left:-48px;width:104px;height:38px;transform-origin:100% 50%;transform:rotateY(90deg);border-radius:3px 0 0 3px;background:linear-gradient(90deg,#b9c3ca,#d3dbe0);border:1px solid #b3bdc4;filter:brightness(.9)"><div style="position:absolute;inset:8px;border-radius:2px;background:repeating-linear-gradient(90deg,#a6b1b8 0 1px,transparent 1px 5px);opacity:.6"></div></div>
      </div>
      <div style="position:absolute;left:0;top:-14px;transform:translateZ(104px) rotateZ(-45deg) rotateX(-55deg)"><div style="position:relative;width:0;height:0"><span style="position:absolute;left:-10px;width:3px;height:16px;border-radius:2px;background:linear-gradient(#30b0c7,transparent);animation:kkAir 2s ease-out infinite"></span><span style="position:absolute;left:0;width:3px;height:16px;border-radius:2px;background:linear-gradient(#30b0c7,transparent);animation:kkAir 2s ease-out infinite .5s"></span><span style="position:absolute;left:10px;width:3px;height:16px;border-radius:2px;background:linear-gradient(#30b0c7,transparent);animation:kkAir 2s ease-out infinite 1s"></span></div></div>
    </div>`,
  ups: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-38px;top:-38px;width:76px;height:76px;background:color-mix(in srgb,#bf5af2 9%,var(--surface-muted));border:1px solid color-mix(in srgb,#bf5af2 30%,var(--border));border-radius:5px"></div>
      <div style="position:absolute;left:-20px;top:-20px;width:40px;height:40px;transform-style:preserve-3d"><div style="position:absolute;inset:0;transform:translateZ(62px);border-radius:3px;background:linear-gradient(135deg,#3a3145,#2a2333);border:1px solid #4b3f5c"></div><div style="position:absolute;left:0;top:-22px;width:40px;height:62px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:3px 3px 0 0;overflow:hidden;background:linear-gradient(180deg,#332b3e,#241d2c);border:1px solid #4b3f5c"><span style="position:absolute;left:8px;top:7px;font-family:var(--font-mono);font-size:6.5px;letter-spacing:.1em;color:#d3aef0">UPS</span><span style="position:absolute;right:7px;top:6px;color:#bf5af2;font-size:9px;animation:kkCharge 1.5s ease-in-out infinite">⚡</span><div style="position:absolute;left:8px;right:8px;top:22px;display:flex;gap:2px;align-items:flex-end;height:20px"><span style="flex:1;height:100%;border-radius:1px;background:#34c759;animation:kkCharge 1.8s ease-in-out infinite"></span><span style="flex:1;height:100%;border-radius:1px;background:#34c759;animation:kkCharge 1.8s ease-in-out infinite .2s"></span><span style="flex:1;height:100%;border-radius:1px;background:#34c759;animation:kkCharge 1.8s ease-in-out infinite .4s"></span><span style="flex:1;height:100%;border-radius:1px;background:#2c7a3f"></span><span style="flex:1;height:100%;border-radius:1px;background:#241d2c;box-shadow:inset 0 0 0 1px #3a2f47"></span></div><span style="position:absolute;left:8px;bottom:5px;font-family:var(--font-mono);font-size:6.5px;color:#34c759">88% · online</span></div><div style="position:absolute;top:0;left:-22px;width:62px;height:40px;transform-origin:100% 50%;transform:rotateY(90deg);border-radius:3px 0 0 3px;background:linear-gradient(90deg,#241d2c,#332b3e);border:1px solid #4b3f5c;filter:brightness(.88)"></div></div>
    </div>`,
  crashCart: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-40px;top:-40px;width:80px;height:80px;background:color-mix(in srgb,#ff375f 8%,var(--surface-muted));border:1px solid color-mix(in srgb,#ff375f 28%,var(--border));border-radius:5px"></div>
      <div style="position:absolute;left:-26px;top:-18px;width:52px;height:36px;transform-style:preserve-3d"><div style="position:absolute;inset:0;transform:translateZ(34px);border-radius:3px;background:linear-gradient(135deg,#3b3f46,#2a2d33);border:1px solid #4c5058"></div><div style="position:absolute;left:0;top:2px;width:52px;height:34px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:2px;background:linear-gradient(180deg,#353941,#24272d);border:1px solid #4c5058"><div style="position:absolute;left:6px;top:7px;right:6px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,#20232a 0 3px,#12141a 3px 6px)"></div><div style="position:absolute;left:6px;bottom:6px;right:6px;height:9px;border-radius:2px;background:#191c22;box-shadow:inset 0 0 0 1px #34383f"></div></div><div style="position:absolute;top:0;left:18px;width:34px;height:36px;transform-origin:100% 50%;transform:rotateY(90deg);border-radius:2px;background:linear-gradient(90deg,#24272d,#353941);border:1px solid #4c5058;filter:brightness(.88)"></div></div>
      <div style="position:absolute;left:0;top:-13px;transform:translateZ(34px) rotateZ(-45deg) rotateX(-55deg)"><div style="width:46px;height:30px;margin:-30px 0 0 -23px;border-radius:3px;background:#0c1219;border:1.5px solid #243344;box-shadow:0 4px 10px -4px rgba(0,0,0,.6);overflow:hidden;position:relative"><div style="position:absolute;inset:3px;overflow:hidden"><div style="font-family:var(--font-mono);font-size:4.6px;line-height:1.5;color:#7ee787;animation:kkScroll 4s linear infinite"><div>&gt; ssh core-01</div><div>&gt; systemctl status</div><div style="color:#7ecfda">● active (running)</div><div>&gt; tail -f syslog</div><div>eth0 up · 1.2G</div><div>mem 62% ok</div><div>&gt; ssh core-01</div><div>&gt; systemctl status</div><div style="color:#7ecfda">● active (running)</div><div>&gt; tail -f syslog</div><div>eth0 up · 1.2G</div><div>mem 62% ok</div></div></div><span style="position:absolute;right:3px;bottom:2px;width:4px;height:4px;border-radius:50%;background:#34c759;box-shadow:0 0 5px #34c759;animation:kkBreathe 2s ease-in-out infinite"></span></div></div>
    </div>`,
  camera: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:0;top:0;width:0;height:0"><div style="width:120px;height:120px;margin:-60px 0 0 -60px;transform-origin:60px 60px;animation:kkSweep 5s ease-in-out infinite"><div style="position:absolute;left:60px;top:60px;width:60px;height:46px;transform-origin:0 0;background:conic-gradient(from -22deg at 0 0,transparent 0deg,color-mix(in srgb,#5e5ce6 26%,transparent) 12deg,transparent 44deg);border-radius:0 0 60px 0"></div></div></div>
      <div style="position:absolute;left:0;top:0;transform:translateZ(86px) rotateZ(-45deg) rotateX(-55deg)"><div style="width:0;height:0;position:relative"><span style="position:absolute;left:-1.5px;top:-2px;width:3px;height:30px;background:linear-gradient(#7d7d92,#4b4b63)"></span><span style="position:absolute;left:-14px;top:24px;width:28px;height:8px;border-radius:4px 4px 0 0;background:#48485c"></span><span style="position:absolute;left:-11px;top:30px;width:22px;height:12px;border-radius:0 0 11px 11px;background:linear-gradient(#20202c,#0c0c14);border:1px solid #3a3a50;overflow:hidden"><span style="position:absolute;left:6px;top:3px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5a8a,#0a0a12);box-shadow:0 0 5px #5e5ce6"></span></span><span style="position:absolute;left:8px;top:26px;width:4px;height:4px;border-radius:50%;background:#ff3b30;box-shadow:0 0 5px #ff3b30;animation:kkRec 1.2s steps(1) infinite"></span></div></div>
    </div>`,
  sensor: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:2px solid #0a84ff;transform:translateZ(30px);animation:kkRing 2.6s ease-out infinite"></div><div style="position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:2px solid #0a84ff;transform:translateZ(30px);animation:kkRing 2.6s ease-out infinite 1.3s"></div>
      <div style="position:absolute;left:0;top:0;transform:translateZ(30px) rotateZ(-45deg) rotateX(-55deg)"><div style="width:0;height:0;position:relative"><span style="position:absolute;left:-1.5px;top:0;width:3px;height:26px;background:linear-gradient(#9aa4b2,#5a6472)"></span><span style="position:absolute;left:-11px;top:-14px;width:22px;height:16px;border-radius:6px;background:linear-gradient(160deg,#f4f6f8,#d3dae1);border:1px solid #b8c1cb;box-shadow:0 3px 8px -3px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;gap:3px"><span style="width:4px;height:4px;border-radius:50%;background:#0a84ff;box-shadow:0 0 5px #0a84ff;animation:kkBreathe 2s ease-in-out infinite"></span><span style="font-family:var(--font-mono);font-size:5px;color:#4b5563">22°</span></span></div></div>
    </div>`,
  smokeDetector: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-34px;top:-34px;width:68px;height:68px;background:color-mix(in srgb,#5b6066 7%,var(--surface-muted));border:1px solid color-mix(in srgb,#5b6066 26%,var(--border));border-radius:5px"></div>
      <div style="position:absolute;left:-20px;top:-20px;width:40px;height:40px;transform-style:preserve-3d"><div style="position:absolute;inset:0;transform:translateZ(9px);border-radius:50%;background:radial-gradient(circle at 42% 34%,#fbfbfc,#d6d9dd);border:1px solid #c2c6cc"><div style="position:absolute;inset:8px;border-radius:50%;border:1px solid #c2c6cc;opacity:.7"></div><span style="position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#34c759;box-shadow:0 0 6px #34c759;animation:kkBlink 2.6s steps(1) infinite"></span></div><div style="position:absolute;left:0;top:31px;width:40px;height:9px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 4px 4px;background:linear-gradient(180deg,#d6d9dd,#b6bac0);border:1px solid #c2c6cc"></div><div style="position:absolute;top:0;left:31px;width:9px;height:40px;transform-origin:100% 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#b6bac0,#d6d9dd);border:1px solid #c2c6cc;filter:brightness(.92)"></div></div>
    </div>`,
  fireExtinguisher: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-30px;top:-30px;width:60px;height:60px;background:color-mix(in srgb,#ff3b30 8%,var(--surface-muted));border:1px solid color-mix(in srgb,#ff3b30 26%,var(--border));border-radius:5px"></div>
      <div style="position:absolute;left:-11px;top:-11px;width:22px;height:22px;transform-style:preserve-3d"><div style="position:absolute;inset:0;transform:translateZ(48px);border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2d33,#14161a);border:1px solid #3a3d44"></div><div style="position:absolute;left:0;top:-26px;width:22px;height:48px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:9px 9px 3px 3px;background:linear-gradient(90deg,#c0201a,#ff3b30 45%,#c0201a);border:1px solid #9a1712;overflow:hidden"><span style="position:absolute;left:6px;top:-6px;width:10px;height:10px;border-radius:50%;background:#1b1d22;border:1px solid #3a3d44"></span><span style="position:absolute;left:4px;top:16px;right:4px;height:12px;border-radius:2px;background:#fff;opacity:.92"></span><span style="position:absolute;left:50%;top:8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#eef1f4;border:1px solid #9a1712"></span></div><div style="position:absolute;top:0;left:-26px;width:48px;height:22px;transform-origin:100% 50%;transform:rotateY(90deg);border-radius:9px 9px 3px 3px;background:linear-gradient(90deg,#9a1712,#d4241d);border:1px solid #9a1712;filter:brightness(.9)"></div></div>
    </div>`,
  cableTray: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-42px;top:-42px;width:84px;height:84px;background:color-mix(in srgb,#ff9500 7%,var(--surface-muted));border:1px solid color-mix(in srgb,#ff9500 24%,var(--border));border-radius:5px"></div><span style="position:absolute;left:-32px;top:-11px;width:3px;height:3px;background:#8a8f96;transform:translateZ(0px)"></span>
      <div style="position:absolute;left:-42px;top:-11px;width:84px;height:22px;transform-style:preserve-3d"><div style="position:absolute;left:6px;top:3px;width:3px;height:54px;transform-origin:50% 100%;transform:rotateX(-90deg);background:#7a7f86"></div><div style="position:absolute;right:6px;top:3px;width:3px;height:54px;transform-origin:50% 100%;transform:rotateX(-90deg);background:#7a7f86"></div><div style="position:absolute;inset:0;transform:translateZ(54px);transform-style:preserve-3d"><div style="position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,#c9ced4,#a9afb6);border:1px solid #969ba2;overflow:hidden"><div style="position:absolute;left:4px;right:4px;top:5px;height:3px;border-radius:2px;background:#0a84ff"></div><div style="position:absolute;left:4px;right:4px;top:10px;height:3px;border-radius:2px;background:#34c759"></div><div style="position:absolute;left:4px;right:4px;top:15px;height:3px;border-radius:2px;background:#ff9500"></div><span style="position:absolute;top:5px;width:5px;height:3px;border-radius:2px;background:#fff;box-shadow:0 0 5px #0a84ff;animation:kkPulse 2.2s linear infinite"></span></div><div style="position:absolute;left:0;top:-4px;width:84px;height:4px;transform-origin:50% 100%;transform:rotateX(-90deg);background:repeating-linear-gradient(90deg,#b6bbc2 0 3px,transparent 3px 11px);border-radius:1px"></div></div></div>
    </div>`,
  kuaikuai: `
    <div style="transform:rotateX(55deg) rotateZ(45deg);transform-style:preserve-3d;position:relative;width:0;height:0">
      <div style="position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#62bd2f 55%,transparent),transparent 70%);transform:translateZ(2px);animation:kkAura 3s ease-in-out infinite"></div>
      <div style="position:absolute;left:0;top:0;transform:translateZ(2px) rotateZ(-45deg) rotateX(-55deg)"><div style="margin:-52px 0 0 -18px;animation:kkBob 3s ease-in-out infinite"><svg width="36" height="52" viewBox="0 0 280 340" style="display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))"><defs><linearGradient id="kkbg2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#b6f06a"></stop><stop offset="55%" stop-color="#6cc636"></stop><stop offset="100%" stop-color="#4c9a23"></stop></linearGradient></defs><path d="M18 26 L34 18 L52 26 L70 18 L88 26 L106 18 L124 26 L142 18 L160 26 L178 18 L196 26 L214 18 L232 26 L250 18 L262 26 C256 130 256 210 262 314 L250 322 L232 314 L214 322 L196 314 L178 322 L160 314 L142 322 L124 314 L106 322 L88 314 L70 322 L52 314 L34 322 L18 314 C24 210 24 130 18 26 Z" fill="url(#kkbg2)" stroke="#3f8a1c" stroke-width="4" stroke-linejoin="round"></path><rect x="96" y="60" width="88" height="34" rx="10" fill="#d71920"></rect><text x="140" y="86" text-anchor="middle" font-family="var(--app-ui-font-family)" font-weight="800" font-size="24" fill="#fff">KK</text><rect x="66" y="120" width="148" height="86" rx="16" fill="#0c1219" stroke="#243344" stroke-width="3"></rect><circle cx="88" cy="140" r="6" fill="#ff5f57"></circle><circle cx="108" cy="140" r="6" fill="#febc2e"></circle><circle cx="128" cy="140" r="6" fill="#28c840"></circle><text x="140" y="185" text-anchor="middle" font-family="var(--font-mono)" font-weight="700" font-size="40" fill="#7ee787">KK</text><rect x="60" y="222" width="160" height="74" rx="12" fill="#fff" stroke="#cfe3b0" stroke-width="3"></rect><g stroke="#b9c6da" stroke-width="3" stroke-dasharray="4 8" stroke-linecap="round"><path d="M78 244h124M78 262h124M78 280h124"></path></g></svg></div></div>
    </div>`,
};
