// Simple, targeted refactor: replace common inline styles with CSS utility classes
// Only handles exact pattern matches and only when the tag doesn't already have a class attribute.
// This is a safe, incremental step. Run this script from the project root: `node frontend/scripts/refactor_inline_styles.js`

const fs = require('fs');
const path = require('path');

function walkVueFiles(dir) {
  const res = [];
  const items = fs.readdirSync(dir, { withFileTypes: true });
  for (const it of items) {
    const full = path.join(dir, it.name);
    if (it.isDirectory()) {
      res.push(...walkVueFiles(full));
    } else if (it.isFile() && full.endsWith('.vue')) {
      res.push(full);
    }
  }
  return res;
}

const projectRoot = path.resolve(__dirname, '..');
const targetDir = path.resolve(projectRoot, 'src', 'views');
const files = walkVueFiles(targetDir);

const replacements = [
  { find: 'style="margin-bottom:16px"', replace: 'class="mb-16"' },
  { find: "style='margin-bottom:16px'", replace: "class='mb-16'" },
  { find: 'style="margin-top:20px"', replace: 'class="mt-20"' },
  { find: "style='margin-top:20px'", replace: "class='mt-20'" },
  { find: 'style="display:flex;align-items:center;gap:12px"', replace: 'class="flex-gap"' },
  { find: "style='display:flex;align-items:center;gap:12px'", replace: "class='flex-gap'" },
  { find: 'style="font-size:16px;font-weight:bold"', replace: 'class="page-title"' },
  { find: "style='font-size:16px;font-weight:bold'", replace: "class='page-title'" },
  { find: 'style="color: var(--el-color-primary); cursor: pointer; text-decoration: none;"', replace: 'class="link-text"' },
  { find: "style='color: var(--el-color-primary); cursor: pointer; text-decoration: none;'", replace: "class='link-text'" },
];

let totalReplacements = 0;
let totalFilesLaunched = 0;

for (const file of files) {
  let content = fs.readFileSync(file, 'utf8');
  let modified = false;
  const lines = content.split(/\r?\n/);
  for (let i = 0; i < lines.length; i++) {
    let line = lines[i];
    // Quick skip if line already has a class attribute
    if (line.includes('style=') && !line.includes('class=')) {
      for (const r of replacements) {
        if (line.includes(r.find)) {
          line = line.replace(r.find, r.replace);
          modified = true;
          totalReplacements++;
        }
      }
    }
    lines[i] = line;
  }
  if (modified) {
    totalFilesLaunched++;
    fs.writeFileSync(file, lines.join('\n'), 'utf8');
  }
}

console.log(`refactor_inline_styles.js: applied ${totalReplacements} replacements across ${totalFilesLaunched} files.`);