const fs = require('fs');

function fix(filename) {
  let code = fs.readFileSync(filename, 'utf8');

  // Regex to find the <div className="flex">...</div> or similar that wraps the add button.
  // We can just find `{canEdit && <Button ...` and wrap it in a portal.
  // Actually, some have multiple buttons, like SeccionGlucemias has `<Button>Nueva</Button>` and `<Button>Evolución</Button>`

  // A more robust approach:
  // Instead of replacing the JSX, let's just create a string replacement loop for known patterns.
  code = code.replace(
    /<div className="flex">\s*(\{canEdit && <Button variant="outline" onClick=\{.*?>.*?<\/Button>\})\s*<\/div>/g,
    `{portalNode ? createPortal($1, portalNode) : <div className="flex mb-4">$1</div>}`
  );
  
  // Wait, some use `<div className="flex justify-between">` ... Let's just find the first `<div className="flex` block in each Seccion.
  
  fs.writeFileSync(filename, code);
}
// This might be too brittle. I'll edit each manually using sed or perl, or precise strings.