const fs = require('fs');
let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');

const regex = /return\s*\(\s*<div[\s\S]*?<\/div>\s*\);/;

const newReturn = `return (
    <div 
      className="media-tile loading-skeleton" 
      ref={tileRef}
      style={style}
      onClick={onClick}
      data-index={index}
      title={item.filename}
    >
      {isVisible && (
        <>
          {isAudio ? (
            <div className="audio-tile-placeholder" onLoad={() => {
              if (tileRef.current) tileRef.current.classList.remove('loading-skeleton');
            }}>
              <span className="audio-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 18V5l12-2v13"></path>
                  <circle cx="6" cy="18" r="3"></circle>
                  <circle cx="18" cy="16" r="3"></circle>
                </svg>
              </span>
            </div>
          ) : isVideo ? (
            <video
              src={\`/api/media/\${item.relativePath}?type=preview\`}
              poster={\`/api/media/\${item.relativePath}?type=poster\`}
              autoPlay
              muted
              loop
              playsInline
              onLoadedData={(e) => {
                const target = e.target;
                target.parentElement?.classList.remove('loading-skeleton');
              }}
            />
          ) : (
            /* eslint-disable-next-line @next/next/no-img-element */
            <img 
              src={\`/api/media/\${item.relativePath}?type=thumb\`} 
              alt={item.filename} 
              loading="lazy"
              onLoad={(e) => {
                const target = e.target;
                target.parentElement?.classList.remove('loading-skeleton');
              }}
            />
          )}
          
          {(isVideo || isAudio) && (
            <div className="play-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
            </div>
          )}
          {votingOpen && likesCount > 0 && (
            <div className="badge">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg>
              <span>{likesCount}</span>
            </div>
          )}
        </>
      )}
    </div>
  );`;

tile = tile.replace(regex, newReturn);
fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');