const fs = require('fs');

// 1. Update globals.css
let css = fs.readFileSync('src/app/globals.css', 'utf8');

// Replace media-wall and queries
const oldCssMatch = css.match(/\.media-wall\s*\{[^}]+\}(?:\s*@media[^}]+\{\s*\.media-wall\s*\{[^}]+\}\s*\}){4}/s);
if (oldCssMatch) {
  const newCss = `.media-wall {
  column-count: 2;
  column-gap: 10px;
  padding: 80px 10px 20px;
  max-width: 1920px;
  margin: 0 auto;
}

@media (min-width: 480px) {
  .media-wall {
    column-count: 3;
  }
}

@media (min-width: 768px) {
  .media-wall {
    column-count: 4;
    column-gap: 15px;
    padding: 80px 15px 20px;
  }
}

@media (min-width: 1024px) {
  .media-wall {
    column-count: 5;
    column-gap: 20px;
    padding: 90px 20px 30px;
  }
}

@media (min-width: 1440px) {
  .media-wall {
    column-count: 6;
  }
}`;
  css = css.replace(oldCssMatch[0], newCss);
}

// Replace media-tile and images
const tileMatch = css.match(/\.media-tile\s*\{[^}]+\}\s*\.media-tile:hover\s*\{[^}]+\}\s*\.media-tile img,\s*\.media-tile video\s*\{[^}]+\}/s);
if (tileMatch) {
  const newTile = `.media-tile {
  break-inside: avoid;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-border);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

@media (min-width: 768px) {
  .media-tile { margin-bottom: 15px; }
}

@media (min-width: 1024px) {
  .media-tile { margin-bottom: 20px; }
}

.media-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  z-index: 1;
}

.media-tile img,
.media-tile video {
  display: block;
  width: 100%;
  height: 100%; /* Filled by parent aspect-ratio */
  object-fit: cover;
}`;
  css = css.replace(tileMatch[0], newTile);
}

fs.writeFileSync('src/app/globals.css', css, 'utf8');

// 2. Update MediaTile.tsx
let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');
tile = tile.replace(
  `  const style: React.CSSProperties = {
    gridColumn: \`span \${item.gridWidth || 1}\`,
    gridRow: \`span \${item.gridHeight || 1}\`,
    aspectRatio,
  };`,
  `  const style: React.CSSProperties = {
    aspectRatio,
  };`
);
// Make sure featured items span all columns if needed (optional)
// Actually we'll just let them be normal items in the masonry flow
fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');