const fs = require('fs');

let hc = fs.readFileSync('src/sections/HistoriaClinica.tsx', 'utf8');

// Laboratorios
hc = hc.replace(
  /<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">\s*\{canEdit && <Button variant="outline" onClick=\{\(\) => \{ reset\(\); setDialog\(true\); \}\}><Plus className="h-4 w-4 mr-2" \/>Nuevo Laboratorio<\/Button>\}\s*<Input placeholder="Buscar por código..." value=\{searchTerm\} onChange=\{e => setSearchTerm\(e\.target\.value\)\} className="max-w-xs" \/>\s*<\/div>/g,
  `{portalNode ? createPortal(
    <>
      {canEdit && <Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Laboratorio</Button>}
      <Input placeholder="Buscar por código..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="max-w-xs" />
    </>,
    portalNode
  ) : (
    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
      {canEdit && <Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Laboratorio</Button>}
      <Input placeholder="Buscar por código..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="max-w-xs" />
    </div>
  )}`
);

// General pattern for those inside `<div className="flex">`
const blocks = [
  'Nueva Evolución',
  'Nueva Gasometría',
  'Nuevo Cultivo',
  'Nuevo Estudio',
  'Nueva Interconsulta',
  'Nuevo ATB'
];

blocks.forEach(text => {
  const regex = new RegExp(`<div className="flex">\\s*\\{canEdit && <Button variant="outline" onClick=\\{\\(\\) => \\{ reset\\(\\); setDialog\\(true\\); \\}\\}\\><Plus className="h-4 w-4 mr-2" \\/>${text}<\\/Button>\\}\\s*<\\/div>`, 'g');
  
  hc = hc.replace(regex, `{portalNode ? createPortal(
        canEdit && <Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />${text}</Button>,
        portalNode
      ) : (
        <div className="flex mb-4">
          {canEdit && <Button variant="outline" onClick={() => { reset(); setDialog(true); }}><Plus className="h-4 w-4 mr-2" />${text}</Button>}
        </div>
      )}`);
});

// Pendientes
hc = hc.replace(
  /<div className="flex items-center gap-2">\s*\{canEdit && <Button variant="outline" onClick=\{\(\) => \{ setPendienteEditar\(null\); resetForm\(\); setModalAbierto\(true\); \}\}><Plus className="h-4 w-4 mr-2" \/>Nuevo Pendiente<\/Button>\}\s*<\/div>/g,
  `{portalNode ? createPortal(
    canEdit && <Button variant="outline" onClick={() => { setPendienteEditar(null); resetForm(); setModalAbierto(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Pendiente</Button>,
    portalNode
  ) : (
    <div className="flex items-center gap-2 mb-4">
      {canEdit && <Button variant="outline" onClick={() => { setPendienteEditar(null); resetForm(); setModalAbierto(true); }}><Plus className="h-4 w-4 mr-2" />Nuevo Pendiente</Button>}
    </div>
  )}`
);

fs.writeFileSync('src/sections/HistoriaClinica.tsx', hc);


let si = fs.readFileSync('src/sections/SeccionIndicaciones.tsx', 'utf8');

// Also import createPortal
if (!si.includes("createPortal")) {
  si = si.replace("import { useState }", "import { useState } from 'react';\nimport { createPortal }");
}

si = si.replace(
  /<div className="flex justify-between items-center">\s*\{canEdit && <Button size="sm" variant="outline" onClick=\{\(\) => \{ reset\(\); setDialog\(true\); \}\}>\s*<Plus className="h-4 w-4 mr-1\.5" \/>Nueva Indicación\s*<\/Button>\}\s*<Button size="sm" variant="ghost" onClick=\{\(\) => setShowHistorial\(!showHistorial\)\}>\s*\{showHistorial \? 'Ocultar Historial' : \`Ver Historial \(\$\{movs\.length\}\)\`\}\s*<\/Button>\s*<\/div>/g,
  `{portalNode ? createPortal(
    <>
      {canEdit && <Button size="sm" variant="outline" onClick={() => { reset(); setDialog(true); }}>
        <Plus className="h-4 w-4 mr-1.5" />Nueva Indicación
      </Button>}
      <Button size="sm" variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
        {showHistorial ? 'Ocultar Historial' : \`Ver Historial (\${movs.length})\`}
      </Button>
    </>,
    portalNode
  ) : (
    <div className="flex justify-between items-center mb-4">
      {canEdit && <Button size="sm" variant="outline" onClick={() => { reset(); setDialog(true); }}>
        <Plus className="h-4 w-4 mr-1.5" />Nueva Indicación
      </Button>}
      <Button size="sm" variant="ghost" onClick={() => setShowHistorial(!showHistorial)}>
        {showHistorial ? 'Ocultar Historial' : \`Ver Historial (\${movs.length})\`}
      </Button>
    </div>
  )}`
);

fs.writeFileSync('src/sections/SeccionIndicaciones.tsx', si);