const fs = require('fs');

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

  // Add import if not present
  if (!code.includes("import { createPortal }")) {
    code = code.replace("import { useState }", "import { useState } from 'react';\nimport { createPortal }");
    if (!code.includes("import { createPortal }")) {
        code = "import { createPortal } from 'react-dom';\n" + code;
    }
  }

  // Update component signatures
  const components = [
    'SeccionGlucemias', 'SeccionLaboratorios', 'SeccionEvoluciones',
    'SeccionAcidosBase', 'SeccionCultivos', 'SeccionATB',
    'SeccionEstudiosComplementarios', 'SeccionInterconsultas', 'SeccionPendientes',
    'SeccionIndicaciones'
  ];

  components.forEach(name => {
    // 1. Add portalNode to the destructured props
    const regex1 = new RegExp(`function ${name}\\(\\{ (.*?) \\}: \\{`, 'g');
    code = code.replace(regex1, `function ${name}({ $1, portalNode }: {`);
    
    // Some don't have spaces around the brackets
    const regex1b = new RegExp(`function ${name}\\(\\{(.*?)\\}: \\{`, 'g');
    code = code.replace(regex1b, `function ${name}({$1, portalNode}: {`);

    // 2. Add portalNode?: HTMLDivElement | null; to the type definition
    // Usually ends with canEdit?: boolean; }) or canEdit: boolean })
    const regex2 = new RegExp(`(canEdit\\??: boolean;?\\s*)\\}\\)`, 'g');
    // Actually we can just find the end of the props type definition for that component.
    // It's safer to just replace `canEdit` or something similar, but let's do a more robust approach.
  });

  fs.writeFileSync(filename, code);
}

processFile('src/sections/HistoriaClinica.tsx');
try {
  processFile('src/sections/SeccionIndicaciones.tsx');
} catch (e) {}