// LanDocs device icons + meta (verbatim from the source app).

function SwitchIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" width={size} height={size}>
      <rect x="1" y="4" width="14" height="8" rx="1" stroke="#00838f" strokeWidth="1.2"/>
      <circle cx="4" cy="8" r="1" fill="#00838f"/>
      <circle cx="7" cy="8" r="1" fill="#00838f"/>
      <circle cx="10" cy="8" r="1" fill="#00838f"/>
      <circle cx="13" cy="8" r="1" fill="#00838f"/>
    </svg>
  );
}
function RouterIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" width={size} height={size}>
      <polygon points="8,1 15,5 15,11 8,15 1,11 1,5" stroke="#e65100" strokeWidth="1.2"/>
      <circle cx="8" cy="8" r="2" fill="#e65100"/>
    </svg>
  );
}
function ServerIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" width={size} height={size}>
      <rect x="2" y="1" width="12" height="14" rx="1" stroke="#3949ab" strokeWidth="1.2"/>
      <rect x="4" y="3" width="8" height="2" rx="0.5" fill="#9fa8da"/>
      <rect x="4" y="7" width="8" height="2" rx="0.5" fill="#9fa8da"/>
      <rect x="4" y="11" width="8" height="2" rx="0.5" fill="#9fa8da"/>
    </svg>
  );
}
function PcIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" width={size} height={size}>
      <rect x="1" y="1" width="14" height="10" rx="1" stroke="#558b2f" strokeWidth="1.2"/>
      <rect x="3" y="3" width="10" height="6" fill="#b2dfdb"/>
      <rect x="6" y="11" width="4" height="2" fill="#558b2f"/>
      <rect x="4" y="13" width="8" height="1.5" rx="0.5" fill="#558b2f"/>
    </svg>
  );
}
function CustomIcon({ size = 22 }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" width={size} height={size}>
      <rect x="1" y="3" width="14" height="10" rx="2" stroke="#555" strokeWidth="1.2" strokeDasharray="3,1.5"/>
      <text x="8" y="10" textAnchor="middle" fontSize="7" fill="#555" fontFamily="system-ui">?</text>
    </svg>
  );
}

const DEVICE_META = {
  switch: { color: '#00838f', bg: '#e0f7fa', label: 'Switch',           sub: '8 / 16 / 24 / 48 p', Icon: SwitchIcon },
  router: { color: '#e65100', bg: '#fff3e0', label: 'Router',           sub: 'WAN + LAN ports',    Icon: RouterIcon },
  server: { color: '#3949ab', bg: '#e8eaf6', label: 'Server',           sub: 'LAN ports',          Icon: ServerIcon },
  pc:     { color: '#558b2f', bg: '#f1f8e9', label: 'PC / Workstation', sub: 'LAN port',           Icon: PcIcon },
  custom: { color: '#555',    bg: '#f5f5f5', label: 'Custom Device',    sub: 'Any name & ports',   Icon: CustomIcon },
};

// Hand-drawn cursor (macOS-style, dark stroke + white fill)
function Cursor({ x, y, clicking, ripple }) {
  return (
    <React.Fragment>
      {ripple != null && (
        <div className="ld-cursor-ripple" style={{
          left: x - ripple,
          top: y - ripple,
          width: ripple * 2,
          height: ripple * 2,
          opacity: Math.max(0, 1 - ripple / 50),
        }}/>
      )}
      <div className={`ld-cursor ${clicking ? 'click' : ''}`} style={{ left: x, top: y }}>
        <svg viewBox="0 0 24 28" width="32" height="32">
          <path d="M3 2 L3 22 L8.5 17.2 L11.8 25.5 L15 24.2 L11.8 16 L19 16 Z"
                fill="#111"
                stroke="#fff"
                strokeWidth="1.4"
                strokeLinejoin="round"/>
        </svg>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, {
  SwitchIcon, RouterIcon, ServerIcon, PcIcon, CustomIcon, DEVICE_META, Cursor,
});