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

// Add states for new OtroLaboratorio
const newStates = `
  const [otrosDialog, setOtrosDialog] = useState(false);
  const [nuevaObsFecha, setNuevaObsFecha] = useState(getLocalToday());
  const [nuevaObsTexto, setNuevaObsTexto] = useState('');
`;

code = code.replace("const [otrosDialog, setOtrosDialog] = useState(false);", newStates);

// Inside the portalNode or regular buttons, add "Otros" button.
// But we already have the DropdownMenu. Let's just add the "Otros" button inside the `flex gap-2` where Importar is.
const importBtnRegex = /<Button variant="outline" onClick=\{\(\) => \{ setImportFecha\(getLocalToday\(\)\); setImportHora\(new Date\(\)\.toTimeString\(\)\.slice\(0, 5\)\); setImportTexto\(''\); setImportResultados\(\[\]\); setImportObservaciones\(''\); setImportDialog\(true\); \}\}>\s*<FileText className="h-4 w-4 mr-2" \/>Importar\s*<\/Button>/g;

const newBtns = `<Button variant="outline" onClick={() => setOtrosDialog(true)}><Eye className="h-4 w-4 mr-2" />Otros</Button>\n          <Button variant="outline" onClick={() => { setImportFecha(getLocalToday()); setImportHora(new Date().toTimeString().slice(0, 5)); setImportTexto(''); setImportResultados([]); setImportObservaciones(''); setImportDialog(true); }}><FileText className="h-4 w-4 mr-2" />Importar</Button>`;

code = code.replace(importBtnRegex, newBtns);

// Also remove the "Ver Otros" from Dropdown if it is there
code = code.replace(/<DropdownMenuItem onClick=\{\(\) => setOtrosDialog\(true\)\}>\s*<Eye className="h-4 w-4 mr-2" \/>\s*Ver Otros\s*<\/DropdownMenuItem>/g, '');

// Now we need to merge the logic for the dialog
const renderOtrosDialogRegex = /<Dialog open=\{otrosDialog\} onOpenChange=\{setOtrosDialog\}>[\s\S]*?<\/Dialog>/;

const newDialog = `
      <Dialog open={otrosDialog} onOpenChange={setOtrosDialog}>
        <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Otros / Observaciones de Laboratorio</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 my-2">
            
            {canEdit && (
              <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700 space-y-3 mb-6">
                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">Agregar Nuevo Registro (Otros)</h4>
                <div className="flex flex-col sm:flex-row gap-3">
                  <div className="w-full sm:w-1/3">
                    <Label>Fecha</Label>
                    <Input type="date" value={nuevaObsFecha} onChange={e => setNuevaObsFecha(e.target.value)} />
                  </div>
                  <div className="w-full sm:w-2/3">
                    <Label>Observaciones / Determinaciones</Label>
                    <Textarea 
                      placeholder="Ingrese los detalles, resultados, etc..." 
                      value={nuevaObsTexto} 
                      onChange={e => setNuevaObsTexto(e.target.value)} 
                      className="min-h-[80px]"
                    />
                  </div>
                </div>
                <div className="flex justify-end">
                  <Button onClick={() => {
                    if (addOtroLaboratorio && nuevaObsTexto.trim() !== '') {
                      addOtroLaboratorio({
                        pacienteId: patientId,
                        internacionId,
                        fecha: nuevaObsFecha,
                        hora: new Date().toTimeString().slice(0, 5),
                        observaciones: nuevaObsTexto
                      });
                      setNuevaObsTexto('');
                      setNuevaObsFecha(getLocalToday());
                      toast.success('Registro guardado correctamente');
                    }
                  }} disabled={!nuevaObsTexto.trim()}>
                    <Save className="h-4 w-4 mr-2" /> Guardar
                  </Button>
                </div>
              </div>
            )}

            <div>
              <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 border-b pb-2">Registros</h4>
              <div className="space-y-3 max-h-[40vh] overflow-y-auto pr-2">
                {[
                  ...labsConObservaciones.map(l => ({ id: l.id, fecha: l.fecha, hora: l.hora, observaciones: l.observaciones, source: 'lab' })),
                  ...(otrosLaboratorios || []).filter(o => o.pacienteId === patientId).map(o => ({ id: o.id, fecha: o.fecha, hora: o.hora, observaciones: o.observaciones, source: 'otros' }))
                ].sort((a, b) => {
                  const dateA = new Date(a.fecha + 'T' + (a.hora || '00:00')).getTime();
                  const dateB = new Date(b.fecha + 'T' + (b.hora || '00:00')).getTime();
                  return dateB - dateA;
                }).map((item, idx) => (
                  <div key={item.id + idx} className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 space-y-2">
                    <div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 font-medium">
                      <span>{formatDateDDMMYYYY(item.fecha)} {item.hora || ''}</span>
                      <Badge variant="secondary" className="text-[10px] px-1.5 py-0.5">{item.source === 'lab' ? 'Obs. de Lab' : 'Otros'}</Badge>
                    </div>
                    <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-sans">{item.observaciones}</p>
                  </div>
                ))}

                {(labsConObservaciones.length === 0 && (!otrosLaboratorios || otrosLaboratorios.filter(o => o.pacienteId === patientId).length === 0)) && (
                  <p className="text-sm text-gray-500 text-center py-6">No hay registros adicionales.</p>
                )}
              </div>
            </div>

          </div>
          <div className="flex justify-end gap-2 mt-2">
            <Button onClick={() => setOtrosDialog(false)}>Cerrar</Button>
          </div>
        </DialogContent>
      </Dialog>
`;

code = code.replace(renderOtrosDialogRegex, newDialog.trim());

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